文档章节

怎样写一个js插件

BarZu
 BarZu
发布于 2016/07/05 16:45
字数 689
阅读 232
收藏 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编码查看

© 著作权归作者所有

BarZu

BarZu

粉丝 50
博文 21
码字总数 20303
作品 4
广州
高级程序员
私信 提问
加载中

评论(4)

z
zhuzhipeng1000
半解
苏瑞芳
苏瑞芳
我赞41
王仲璘
王仲璘
79
余宝彬
余宝彬
我点
我是如何利用一个周末时间成为前端工程师的

2周前,我将 TravisLight 开源了,这是一个建立监控的工具,也是一个用于 Travis-CI 的构件监控工具。出于兴趣,我用了一个周末的时间做了这个项目,而且我是以一个真正的前端开发者的角色来...

oschina
2012/12/25
31.5K
36
PhoneGap 插件简介

一、PhoneGap平台 前不久PhoneGap发布了1.0版本,这为移动开发大家族提供了又一个跨平台的解决方案。开发者只要有JavaScript、CSS3、Html5的基础就可以快速开发移动应用,并且一次开发支持i...

无鸯
2011/09/06
6.8K
2
sjclub Inc/hexo-search-plugin

hexo-search-plugin 这个插件是针对那些主题没有集成搜索功能的,我们喜欢这些主题但是又想用搜索功能,除了那些百度站内搜索以外,我们还可以本地搜索,使用hexo-generator-search插件生成搜...

sjclub Inc
04/02
0
0
来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang
2018/05/24
0
0
Js-$.extend方法使方法参数更灵活

在做JS开发时,我们将第三方复杂的插件进行封装,然后对外公开一个很简单的方法接口,这是开发时常用的方法,在JS里,我们的方法参数通常使用JQ的$.extend 扩展方法来实现 function ext...

BearCatYN
2015/04/21
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
393
11
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
3
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
2
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
6
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部