Js杂谈-插件包读后感

最近有幸得到了一份项目上的前端封装的插件库代码，花了一个下午时间，仔细地研读了一下。对于我很想做自己的类库，搞自己的组件包很有启蒙意义。

相比较我之前阅过的框架或是类库，这份比较简单。

项目是jQuery加上bootstrap搞定前端，部分样式还借鉴与jQuery UI。

源码什么的，就不贴了。

先来看主要代码框架

var Ch = {
    .....
}

(function($){
    ....
})(jQuery)

(function($){
    ....
})(jQuery)

(function($){
    ....
})(jQuery)

Ch.App = {
    .....
    init:function(){
       this.A();
       this.B();
       ......
    }
}

每一个匿名函数中存放着一个bootstrap插件相关的js方法。在一一定义完之后，通过Ch.App将所有定义完的js方法，写上各自的初始化方法，最后页面上调用Ch.App.init()完成所有插件的初始化工作。
举其中一个匿名函数

(function ($) {
    // "use strict";
    /*
    * 使用ul li结构的目录移动。使用时使用jQuery获取父节点的jQuery对象，然后使用tile方法就可以实现向上运动。
    * tile可以接受参数
    * 如果是对象:比如{speed:1000}形式的，将会修改默认属性
    * 如果想停止运动，依旧调用tile方法，加入参数'stop'，即可停止运动
    * */
    var Tile = function () {
        this.settings = {
            speed: 5000
        };
    }, tile = new Tile();

    Tile.prototype.method = {
        init: function () {
            return this.each(function (index) {
                var $this = $(this),
                    timmerId = (new Date()).getTime() + index,
                    _height = $this.find("li").outerHeight(true);
                $this.data("timmerId", timmerId);
                setTimeout(function () {
                    Chemon.timmer[timmerId] = setInterval(function () {
                        $this.animate({"margin-top": "-" + _height + "px"}, 750, function () {
                            $this.css("margin-top", 0)
                                .find("li:first").detach().insertAfter($this.find("li:last"));
                        });
                    }, tile.settings.speed);
                    timmerId = null;
                }, index * 2000);
                //timmerId = null;
            });
        },

        stop: function () {
            return this.each(function (index) {
                var timmerId = $(this).data("timmerId");
                console.log(Chemon.timmer[timmerId]);
                clearInterval(Chemon.timmer[timmerId]);
                timmerId = null;
            });
        }
    };

    $.fn.tile = function () {
        var arg0 = arguments[0],
            method = tile.method.init,
            args = [];
        if (typeof(arg0) == "object") {
            tile.settings = $.extend(tile.settings, arg0);
        } else if (typeof(arg0) == "string" && tile.method[arg0]) {
            method = tile.method[arg0];
            args = Array.prototype.slice.call(arguments, 1);
        } else if (arg0) {
            $.error("METHOD '" + arg0 + "' DOES NOT EXIST ON jQuery.Tile");
            return this;
        }
        arg0 = null;
        return method.apply(this, args);
    };

})(jQuery);

细分为3块看：
第一块：构造函数

var Tile = function () {
        this.settings = {
            speed: 5000
        };
    }, tile = new Tile();

创建一个Tile函数，它其中有默认的属性settings，并且初始化构造函数。
第二块：构造器的原型

Tile.prototype.method = {
        init: function () {
            return this.each(function (index) {});
        },

        stop: function () {
            return this.each(function (index) {});
        }
    };

在Tile的原型上加入了init和stop两个方法。这时实例tile可以通过原型访问这两个方法。
第三块：绑定到jQuery对象上

$.fn.tile = function () {
        var arg0 = arguments[0],
            method = tile.method.init,
            args = [];
        。。。
        return method.apply(this, args);
    };

$.fn指的就是$.prototype，在$的原型上定义了一个tile的方法，此时名为tile的函数作用域中定义了一个method成员，它指向的是实例tile的原型方法init，如何将这个我们自定义的方法绑定到jQuery对象中去，关键在最后一步，通过apply，其中this为调用tile的对象，method为原型方法init，则实现了方法拥有者的转移。
具体每一个方法内部的实现就不解释了。纵观整个框架，比较容易理解。拓展性不是很强，与css的耦合太多。初始化js，需要很多html，css的配合。

内容不多，时间刚好。以上是本人读源码的一点体会，如有问题请指出，大家共同学习。

Js杂谈-插件包读后感

相关推荐