怎样写一个js插件

转载 2016年08月29日 16:12:04

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背景颜色。


原生Javascript插件封装开发实践

前言 之前公司设计的网站比较混乱,很多地方不统一,其中一个就是弹出层,导致这个原因是因为,公司的UI换了好几个人,而他们每个人做出来的都不太一样。最近公司开始整顿这个问题,对于统一的这种东西当然...
  • hj7jay
  • hj7jay
  • 2017年01月10日 09:21
  • 7234

js插件开发的几个简要步骤

JS插件的开发步骤: 一、首先需要闭包,如:     (function(){         //TO DO     })(jQuery);     这种规范的作用是:         1...
  • aphy358
  • aphy358
  • 2015年11月11日 11:41
  • 2221

jQuery插件开发精品教程,让你的jQuery提升一个台阶

要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统。这好比大公司们争相做平台一样,得平台者得天下。苹果,微软,谷歌等巨头,都有各自的平台及生态圈...
  • m0_37412958
  • m0_37412958
  • 2017年12月13日 14:55
  • 184

jQuery插件开发基础入门

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用...
  • x2145637
  • x2145637
  • 2017年12月28日 14:29
  • 80

js插件的经典写法与总结

之前写了一篇关于js插件的方法,可以传入参数,当时不能够拓展方法,而且模式也不是很好,虽然能够满足一定的业务要求。下面是对js插件的完善,可以实现参数传入,方法拓展,链式操作,设计模式更加清晰。 ...
  • u012979009
  • u012979009
  • 2015年11月25日 11:56
  • 14035

JS 规范 插件 写法

  • 2012年01月13日 14:07
  • 737B
  • 下载

jQuery插件的写法以及使用

如今做web开发,jquery 几乎是必不可少的,同时jquery插件也是不断的被大家所熟知,以及运用。最近在搞这个jquery插件,发现它的牛逼之处,所以讲一讲jQuery插件的写法以及使用 (f...
  • qq_18661257
  • qq_18661257
  • 2015年12月30日 15:22
  • 7673

js插件的经典写法与总结

js插件的经典写法与总结 >  html>  head>      title>js插件测试title>      script type="text/javascript" src="./j...
  • u010154380
  • u010154380
  • 2017年06月05日 22:57
  • 318

Eclipse添加js提示插件--Spket

近一段时间一直在逛CSDN,想开始自己的CSDN博文之路,希望借此不断提升自己的基础,同时养成良好的习惯,先复制一篇别人的博文,一个在开发过程中很实用的插件。 博文来源:http://blog....
  • Jio_Zzz
  • Jio_Zzz
  • 2016年10月26日 22:08
  • 5542

新手如何开始写jq插件

如何开始自己的插件之路?
  • wzdlovewen
  • wzdlovewen
  • 2016年08月13日 16:16
  • 961
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:怎样写一个js插件
举报原因:
原因补充:

(最多只允许输入30个字)