使用原生js开发插件的实现方法

时间: 2018-01-16阅读: 173标签: 插件

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码:


;(function(global) {
    "use strict";
    var fly=function(data){
        
    };
    
    fly.prototype.setColor=function(el,color){
		if(typeof el === 'string'){
			document.getElementById(el).style.color=color;
		}
    };
    

    if (typeof module !== 'undefined' && module.exports) module.exports = fly;//兼容CommonJs规范
    if (typeof define === 'function') define(function() { return fly; });//兼容AMD/CMD规范
    global.fly = fly;//全局变量
})(this);

这个简单的插件实现了一个功能把设置一个div的颜色值, 插件的使用如下:

<div id="box">这是文字</div>
<script src="fly.js"></script>
<script>
var f=new fly();//实例化
f.setColor('box','red');
</script>


简单说明:

1.使用严格模式可以修复了部分语言上的不足,提供更强的错误检查,保证代码较强的安全性。

2.使用闭包模式,保证插件内变量的安全,加强了封装性,避免数据对环境的污染,jquery就是最典型的使用闭包的工具库。