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杂谈-插件包读后感

最新文章

热门文章