s 插件的形式有很多种, 这里我分享一个自己比较熟识的, 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 背景颜色.
来源: https://juejin.im/entry/5adeff0c6fb9a07ab773d8db