作为前端开发，我们都习惯使用一些开源的插件例如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就是最典型的使用闭包的工具库。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/360