文档章节

怎样写一个js插件

开源中国首席劝架师
 开源中国首席劝架师
发布于 2016/07/05 16:45
字数 689
阅读 584
收藏 1

行业解决方案、产品招募中!想赚钱就来传!>>>

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

开源中国首席劝架师

开源中国首席劝架师

粉丝 58
博文 21
码字总数 20303
作品 4
广州
高级程序员
私信 提问
加载中
此博客有 4 条评论,请先登录后再查看。
Nutch学习笔记4-Nutch 1.7 的 索引篇 ElasticSearch

上一篇讲解了爬取和分析的流程,很重要的收获就是: 解析过程中,会根据页面的ContentType获得一系列的注册解析器, 依次调用每个解析器,当其中一个解析成功后就返回,否则继续执行下一个解...

强子哥哥
2014/06/26
712
0
5分钟 maven3 快速入门指南

前提条件 你首先需要了解如何在电脑上安装软件。如果你不知道如何做到这一点,请询问你办公室,学校里的人,或花钱找人来解释这个给你。 不建议给Maven的服务邮箱来发邮件寻求支持。 安装Mav...

fanl1982
2014/01/23
1.2W
6
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1
TDD的测试框架--Machine.Specification

Machine.Specification 是一个 TDD 测试驱动开发的测试框架,简化了测试,无需关心语言本身特性。 Machine.Specifications 带来的好处是不需要在代码里有注释,但同时阅读代码的人可以一目了...

匿名
2013/01/22
1K
0
表单验证插件--Jquery表单验证插件

目前支持对以下格式的值进行验证: cnum-(纯数字), char-(纯字母), zwen-(中文), bysc-(字母开头), mail(邮箱), yzbm(邮政编码) 其中的‘’表示长度,比如“zwen1-5”表示中文1-5位的长度。同...

huanganiu
2013/01/23
4.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

文件在线预览,有这个项目就够了

大家好呀!我是你们努力的喵哥! 我们在做各种项目时,都会需要预览各类文档的场景。比如,Wrod、PDF、Excel 等的预览。即使,我们个人使用的软件,也会有各类需要预览文件的场景。 在通常情...

Github喵111
昨天
16
0
运营商大数据

运营商大数据 调查结果显示,在全球120家运营商中,约有48%正在实施运营商大数据服务。运营商大数据服务成本平均占运营商总预算的10%,未来五年将上升到23%左右,成为运营商大数据的战略优势...

osc_7nzqlmki
30分钟前
12
0
Mysql如何处理重复数据?让你的效率更高效

有时候,数据表中会存在相同的记录。在获取表中记录时,相较于取得重复记录来说,取得唯一的记录显然更有意义。那么关于mysql数据库如何处理重复数据呢,下面就为大家来讲解这个问题。 http...

osc_tb68dlqx
31分钟前
4
0
有关信越润滑油脂方面常识

有关信越润滑油脂方面常识 一般常见的基础油有矿物油(mineral oil)合成油(synthetic oil),而添加剂则有抗氧化剂、抗腐蚀剂、抗磨剂、清净剂、防锈剂、极压剂、消泡剂、乳化剂等。   润滑油...

feiyoufei
33分钟前
6
0
13-sts的安装和运行SpringBoot项目

展开 本文分享自微信公众号 - 源码客栈(liqz6609)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

真的是666
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部