封装一个自己的js库

JavaScript027

封装一个自己的js库,第1张

接下来,我讲封装一个仿jQuery的库,主要包含jQuery中绑定,css,等方法,我讲它定义为 "HQuery"

jQuery中的 $ 符号意味着什么?

先思考一下jQuery库中alert(typeof $)的结果,它是一个对象,也是一个函数

所以美元符$字面上是jQuery,其实就是一个jq对象,里面可以接受函数,字符串,还要一种是对象(比如this)

给自己的Hquery填加$符号:

Hquery是基于面向对象实现的,所以我们需要先写构造函数,为了方便遍历和其他方法的操作,所有内容返回到一个数组中,这个数组衣服于Hquery对象存在,之后将为这个Hquery对象属性添加方法

我们使用Hquery操作DOM等实现一系列的功能,选择器是必不可少的,所有我们首先封装好选择器,这样就可以能省去document.getElementsByClass等等麻烦的操作

其他的方法,我就不一一介绍了,下面直接给大家上一个多种方法封装好的,大家k'y

把自己想要封装的js方法,写在自己建的一个js文件里,。

使用的时候,把这个js文件导入到jsp文件中去就可以使用你封装的js方法了。

jquery也是这样的。

<script>

    var $=function(obj){

        console.log("开始执行") 

        

        var btn=document.getElementById(obj)

        

        var show=function()

        {

            console.log("show-"+obj)

        }

        

        var aa=function(){

            console.log("aaa")

        }

        

        var bbb=function()

        {

            console.log("bbb")

        }

        

        return{

            aa:aa,

            bb:bbb,

            show:show

        }

    }

    

   $("btn1").show()    

   $().aa()

   $().bb()

</script>