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编码查看