怎样写一个js插件
2016-07-13 16:01
435 查看
摘要: 本文分享新手应该从哪里开始入手写一个js插件
js插件的形式有很多种,这里我分享一个自己比较熟识的,ES5语法,先预览,再讲解
这种写法用于创建一个类,虽然ES5没有真正意思上的类,只能用function模拟,我们也暂且称之为类,ES6有class关键字,这里不作详述。如上代码兼容CommonJs/AMD/CMD规范,较为通用。注解如下:
接下来动手开发一个可以修改div背景颜色的插件
modify_div_bg.js
index.html
将modify_div_bg.js和index.html的代码放到同一个目录,用Chrome浏览器打开index.html就可以看到效果了。打开调试控制台(windows按F12,Mac按option+command+i),在Console里输入mObj.setBg("#ff0");回车,将会修改div背景颜色。
简单案例就分享到这里,复杂的例子可以看JRoll源码 http://www.chjtx.com/JRoll/build/jroll.2.1.0.js 记得使用UTF-8编码查看
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背景颜色。
简单案例就分享到这里,复杂的例子可以看JRoll源码 http://www.chjtx.com/JRoll/build/jroll.2.1.0.js 记得使用UTF-8编码查看
相关文章推荐
- Extjs4.0 最新最全视频教程
- OpenERP 的XML-RPC的实例+many2many,one2many,many2one...
- CSS3属性教程与案例分享
- jquery教程靠边站,一分钱不花让你免费学会jquery
- autoit入门教程小结第1/5页
- 用Photoshop 制作草地效果简明教程
- 比较完整简洁的Flash处理XML文档数据教程 上篇第1/3页
- VBS基础编程教程 (第1篇)
- SQLite教程(十一):临时文件
- VBS基础编程教程 (第3篇)
- VBS教程:运算符-运算符(+)
- PostgreSQL教程(十):性能提升技巧
- PostgreSQL教程(二):模式Schema详解
- PostgreSQL教程(十三):数据库管理详解
- PostgreSQL教程(八):索引详解
- PostgreSQL教程(三):表的继承和分区表详解
- XML简易教程之三
- 如何使用jquery easyui创建标签组件
- ruby 数组使用教程
- PostgreSQL教程(十九):SQL语言函数