如何开发JavaScript插件

1、自身作用域独立，私有变量不影响外部变量（闭包，延长插件内部变量的生命周期）

2.、默认参数设置

3、基本功能+API，API可修改默认参数，支持自定义

4、监听入口，针对指定元素进行监听

5、避免命名冲突和全局污染，用全局对象包装，定义js对象接收工具函数

6、每个功能之间相互依赖必须明确，严格按照依赖顺序进行合并或加载

7、每个子功能分别是一个闭包，且公共接口暴露到共享域（被主函数暴露的公共对象）

8、所有功能写在一个立即执行的函数中

;(function(global,undefined){
  var plugin={
        add:function(n1,n2){...}
        ...
    }
    //将插件对象暴露给全局对象
    'plugin' in global &&global.plugin=plugin;

})(window);

/*
 *1、定义插件前加分号，解决js合并时可能会产生错误的问题
 *2、undefined在低版本浏览器不支持，直接使用会报错，增加形参undefined，即便外部重新定义undefined
 *   也不会影响
 *3、windows对象作为参数传入，避免函数执行时到外部去查找
 */

当插件用于非浏览器端时，直接取当前全局的this对象作为顶级对象,解决插件对环境的依赖性

;(function(global,undefined){
    'use strict'

    var _global;
    var plugin={
        add:function(n1,n2){...}
        ...
    }

    _global=(function(){
        return this||(0,eval)('this');//等价于执行eval('this')
    }());

    !('plugin' in _global) && (_global.plugin=plugin);
    
}());

判断是否存在加载器，若存在就使用加载器，否则使用顶级作用域

if(typeof module !== "undefined" && module.exports){
    module.exports=plugin;
}else if(typeof define ==="function" && define.amd){
    define(function(){return plugin;});
}else{
    _global.plugin=plugin;
}

完整插件

扫描二维码关注公众号，回复： 4095935 查看本文章

;(function(undefined){
    'use strict'
    var _global;

    var plugin={
            add:function(){
                return result(arguments,function(pre,cur){
                    return pre+cur;
                });
            },
            sub:function(){
                return result(arguments,function(pre,cur){
                    return pre-cur;
                });
            },
            mul:function(){
                return result(arguments,function(pre,cur){
                    return pre*cur;
                });
            },
            div:function(){
                return result(arguments,function(pre,cur){
                    return pre/cur;
                });
            },//判断除数是否为0
            sur:function(){
                return result(arguments,function(pre,cur){
                    return pre%cur;
                });
            }
        }

        function result(args,fn){
            var argsArr=Array.prototype.slice.call(args);
            if(argsArr.length>0){
                return argsArr.reduce(fn);
            }else{
                return 0;
            }
        }

        _global=(function(){return this||(0,eval)('this');}());//兼容低版本ie不允许使用eval的问题          


        if(typeof module !== "undefined" && module.exports){
            module.exports=plugin;
        }else if(typeof define ==="function" && define.amd){
            define(function(){return plugin;});
        }else{
            _global.plugin=plugin;
        }
}())

原生js插件

1.工厂模式

2、自执行函数

3、面向对象，prototype原型模式

jQuery扩充插件

1、JQ自身扩展

2、对HTML标记或页面元素进行扩展

3、对HTML标记或页面元素进行扩展

插件外包装

闭包

如何开发JavaScript插件

猜你喜欢