jQuery封装工具类

jQuery封装工具类

我们都知道jQuery实质上是闭包函数，我们都在用jQuery那么，我们能不能自己封装一个自己专属的jQuery工具类呢？答案是可以的，开始我们说jQuery闭包，因此我们就从闭包开始吧，首先搭建一个基本的闭包

(function (window,undefined) {

})(window);

闭包的好处就在与当有重复命名的函数时，他可以有效避免和其它框架的冲突，传参数window是为了方便压缩代码和提示查找的效率；传参数undefined是为了压缩代码和防止低级浏览器的undefined被修改（低级版本的undefined可以被修改）

初始化闭包

(function (window,undefined) {
    function Myjquery() {
        return new Myjquery.prototype.init();
    }
  window.Myjquery = window.$ = Myjquery;
})(window);

完整的基本框架

(function (window,undefined) {
    function Myjquery() {
        return new Myjquery.prototype.init();
    }
Myjquery.prototype = {
        constructor:Myjquery,
        init:function init() {
}
    };
   Myjquery.prototype.init.prototype = Myjquery.prototype;
   window.Myjquery = window.$ = Myjquery;
})(window);

弄好基本的工具类封装框架之后，我们就可在里面封装自己专属的函数了，现在我们就封装一个简单的函数吧，这里我封装了一个名为myText的函数，参数是以对象的方式传达，单单以形参方式传递可阅读性不够强。

(function (window,undefined) {
    function Myjquery() {
        return new Myjquery.prototype.init();
    }
Myjquery.prototype = {
        constructor:Myjquery,
        init:function init() {}，
        myText:function myText(res) {
            let id = res.id,
                name = res.name,
                age = res.age;

            this.id = id;
            this.name = name;
            this.age = age;
            console.log(this.id, this.name, this.age);
        },
    };
   Myjquery.prototype.init.prototype = Myjquery.prototype;
   window.Myjquery = window.$ = Myjquery;
})(window);

封装好myText函数之后我们回到HTML中调用一下

let myjQuery = new Myjquery();
   myjQuery.myText({
       id:1,
       name:"wl",
       age:32,
   });

返回的结果：