如何编写一个js/jQuery库（心得总结）-js教程-PHP中文网

如何编写一个js/jQuery库（心得总结）

PHPz

发布： 2017-04-02 15:51:15

原创

1644人浏览过

编写js/jquery插件有一些约定俗成的套路，根据这些套路依葫芦画瓢，代码的结构上就不会出现太大的问题了，特别推荐这个叫 javascript-patterns 的项目,一些demo让我收获良多。

基本结构

普通的库

用最基本的匿名函数实现即可

(function(){
    var root = this;
    root.YOURLIB = function(){
        FUNC1 : function(){},
        FUNC2 : function(){}
    }
}())

登录后复制

也可以使用call而不是使用闭包，此时两种写法等效，undersocre.js用的是call写法

(function(){
    var root = this;
    root.YOURLIB = function(){
        FUNC1 : function(){},
        FUNC2 : function(){}
    }
}.call(this))

登录后复制

jQuery 插件

通过一下方法可以使的插件可以跨CMD/AMD/Browser

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.fn.render = function() {}
    $.render2 = function() {}
}))

登录后复制

当然,如果不考虑Seajs,RequireJS的话,最方便的还是使用匿名函数，然后把window.jQuery当成参数传进去

内部组织

我们以 bootstrap-select v1.6.3,smooth-scroll这俩项目来进行分析，

初始化

一般的Library都会提供一套defaults配置文件，然后使用的时候和用户自定义的settings进行extend, smooth-scroll中的那种

settings = extend(defaults, options ||{})); 写法就相当赞，可以以一种十分简单的方式防止空指针异常。

登录后复制

剩下的就是根据业务划分业务的funciton了，对于如何划分，只有多加练习了。

另外，在注释里像写上 private 和 public 来区分对外接口和对内接口是个不错的习惯。

i18n与配置管理

i18n是吧那些国际话的字符全都放到defautls，比较优雅的做法是defaults定义一个对象，这样国际化文件

便能和原有的库文件进行分离，具体参考 bootstrap-datapicker

THE END

以上就是如何编写一个js/jQuery库（心得总结）的详细内容，更多请关注php中文网其它相关文章！