作为前端开发，我们都习惯使用一些开源的插件例如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