怎样写一个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背景颜色。


相关文章推荐

js插件的经典写法与总结

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

原生Javascript插件封装开发实践

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

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

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

jQuery插件的写法以及使用

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

JQuery插件的写法和规范

JQuery插件写法的总结 最近Web应用程序中越来越多地用到了JQuery等Web前端技术。这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户端UI的效率。JQuery本身提...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jq插件的编写方法(自定义jq插件)

jq插件用起来很方便,给客户端的编程带来很大的好处,节省大量的开发时间 我用Jq也有好长时间了,今天在一个项目中用一个插件的时候,忽然感觉这个插件有一个bug 这让我心生了自己写一个jq插...

jQuery自己编写插件()

引言:   在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些...

jquery插件封装

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。 入门 编写一个jQuery插件开始于给jQuer...

[Javascript] 插件封装

学习小结,如有错误,欢迎指正 参考自:http://blog.csdn.net/anihasiyou/article/details/40394053 javascript插件封装主要分成两类: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:怎样写一个js插件
举报原因:
原因补充:

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