怎样写一个js插件
js插件的形式有很多种，这里我分享一个自己比较熟识的，ES5语法，先预览，再讲解
;(function(global) { "use strict"; var MyPlugin = function(options) { }; MyPlugin.prototype = { init: function() { } }; if (typeof module !== 'undefined' && module.exports) module.exports = MyPlugin; if (typeof define === 'function') define(function() { return MyPlugin; }); global.MyPlugin = MyPlugin; })(this);
这种写法用于创建一个类，虽然ES5没有真正意思上的类，只能用function模拟，我们也暂且称之为类，ES6有class关键字，这里不作详述。如上代码兼容CommonJs/AMD/CMD规范，较为通用。注解如下：
//;分号开头，用于防止代码压缩合并时与其它代码混在一起造成语法错误 //而事实证明，uglify压缩工具会将无意义的前置分号去掉，我只是习惯了这么写 //(function(){})();立即执行函数，闭包，避免污染全局变量 //通常一个插件只暴露一个变量给全局供其它程序调用 //还有其它写法，运算符+函数体+括号 //例：!function(){}(); +function(){}(); -function(){}(); // void function(){}(); 等等只要能对函数返回值进行运算的符号都可以 ;(function(global) { //开启严格模式，规范代码，提高浏览器运行效率 "use strict"; //定义一个类，通常首字母大写 var MyPlugin = function(options) { }; //覆写原型链，给继承者提供方法 MyPlugin.prototype = { init: function() { } }; //兼容CommonJs规范 if (typeof module !== 'undefined' && module.exports) module.exports = MyPlugin; //兼容AMD/CMD规范 if (typeof define === 'function') define(function() { return MyPlugin; }); //注册全局变量，兼容直接使用script标签引入该插件 global.MyPlugin = MyPlugin; //this，在浏览器环境指window，在nodejs环境指global //使用this而不直接用window/global是为了兼容浏览器端和服务端 //将this传进函数体，使全局变量变为局部变量，可缩短函数访问全局变量的时间 })(this);
接下来动手开发一个可以修改div背景颜色的插件
- modify_div_bg.js
;(function(global) { "use strict"; var M = function(el) { this.el = typeof el === "string" ? document.querySelector(el) : el; }; M.prototype = { setBg: function(bg) { this.el.style.background = bg; } }; if (typeof module !== 'undefined' && module.exports) module.exports = M; if (typeof define === 'function') define(function() { return M; }); global.ModifyDivBg = M; })(this);
- index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>怎样写一个js插件</title>
<script src="./modify_div_bg.js"></script>
</head>
<body>
<div id="div">怎样写一个js插件</div>
<script>
var mObj = new ModifyDivBg("#div");
mObj.setBg("#f00");
</script>
</body>
</html>
将modify_div_bg.js和index.html的代码放到同一个目录，用Chrome浏览器打开index.html就可以看到效果了。打开调试控制台（windows按F12，Mac按option+command+i），在Console里输入mObj.setBg("#ff0");回车，将会修改div背景颜色。
