javascript插件开发设计中的疑问与总结

直播预告-鸿蒙创想开发实例详解：从需求到上线的全流程解决方案

大三了，再不做点什么就这样荒废了！

平时做前端开发时经常用到一些相同功能，比如ajax文件上传，信息提示，拖拽文件...等等，于是我就想是否可以吧这些代码收集起来保存成一个js插件？答案是肯定的！jquery就是这么做的，于是就有了下文。

###编写一个插件： var funName1=function(parameter){ //code } var funName2=function(parameter){ //code } 把代码保存到一个js文件里然后在html页面就可以调用了

如：

 <script type="text/javascript" src="./js/demo.js"></script>
 <script type="text/javascript">
     onload=function(){
    //code
        var obj=new funName1();
        //这里就可以使用插件里的东西了
    }
 </script>

等等，上面这个是插件吗?其实是不是我是不知道了，反正能用就对了（更合理的说应该是函数集）。 那么问题来了，怎么开发类似于jquery的插件？看jquery源码，对没错!（不得不说jquery是个很牛逼的插件，但是我看不太懂，没事百度解决） 经过几个小时的研究终于有了头绪。 首先要说明的是上面的插件的存在问题 1.上面写的插件可能会存在变量污染，2.对象使用时需要new操作，极大的不方便 3.第三方扩展难（对于不太喜欢看插件源码的开发者） 针对三个问题，捣鼓了以晚上终于搞定了。 ###1.防止变量污染 把插件代码放到这里

(function(){
    //把插件代码放这里面
    
})()

这是一个闭包，里面的变量只能在里面用！这样就可以防止里面变量与外部造成冲突了 这样做还有一个问题，比如代码里加了些代码就会报错：

var test=function(){}(function(){
    //把插件代码放这里面
    
})()

解决方法很简单，网上大牛都是这样做的：

;(function(){//在开头加上分号就可以解决问题了
    //把插件代码放这里面
    
})()

###2.简化去掉new操作 这里我仿照jquery写个自己的插件 名字叫MDtool，插件里所有方法都作为MDtool对象的方法

(function(){
	//插件对象
	var MDtool=function(){
		//插件信息
		this.info={
		"name":"MDtool",
		"author":"bluemoon",
		"birthday":"2015-09-07 19:27",
		"info":"一个javascript工具箱",
		"versions":"1.0",
		}
	};
	//code
	var md=MDtool;
	//原型等价
	md.fn=MDtool.prototype;
	md.fn.test=function(){
		//function code
		console.log("this is a test fun");
	};
	//返回对象方便使用(mdtool.fun就可以使用)
	window.mdtool=window.MDtool=new MDtool;
})();

window.mdtool=window.MDtool=new MDtool;//在后面加上这一句就可以不用再new操作了

调用插件里的方法：

MDtool.test();//输出this is a test fun

那么对于MDtool里的对象也不需要new操作怎么实现？ 再来看个例子：

(function(){
	//插件对象
	var MDtool=function(){
		//插件信息
		this.info={
		"name":"MDtool",
		"author":"bluemoon",
		"birthday":"2015-09-07 19:27",
		"info":"一个javascript工具箱",
		"versions":"1.0",
		}
	};
	//code
	var md=MDtool;
	//原型等价
	md.fn=MDtool.prototype;
	md.fn.test=function(data){
		//function code
		//这是一个内部对象
		var test=function(data){
			this.name="test";
			this.show=function(){
				console.log("this is a show function");
			};
		}
		return new test(data);//这里实现new操作
	};
	//返回对象方便使用(mdtool.fun就可以使用)
	window.mdtool=window.MDtool=new MDtool;
})();

然后调用MDtool插件里的对象可以直接这样调用

var t=MDtool.test(data);
t.show();//输出this is a show function

是不是有点像jquery的$.ajax()方法呢？ 如果不够像的话可以把这一句：

window.mdtool=window.MDtool=new MDtool;

改成：

window.$=window.mdtool=window.MDtool=new MDtool;

然后这样调用

var t=$.test(data);//这个
t.show();//输出this is a show function

但是为了不替换了jquery造成jquery失效还是用自己的对象名好些

window.mdtool=window.MDtool=new MDtool;

###插件方法扩展 我们知道，jquery有一个扩展方法的方$.extend 如： $.extend({ "age":12, "display":function(){ alert("hello"); }, });

$.display();//弹出hello conlose.log($.age);//控制台输出12

那么我们也可以为自己的插件编写一个自己的插件方法扩展方法 关键部分：

//插件方法扩展方法
	md.extend=md.fn.extend=function(obj){
		var target=this;
		for(var key in obj){
			//防止循环调用
			if(target===obj[key]) continue;
			//防止附加未定义值
			if(typeof obj[key]==='undefined') continue;
			target[key]=obj[key];
		}
		//返回到当前对象
		return target;
	}

完整代码：

(function(){
	//插件对象
	var MDtool=function(){
		//插件信息
		this.info={
		"name":"MDtool",
		"author":"bluemoon",
		"birthday":"2015-09-07 19:27",
		"info":"一个javascript工具箱",
		"versions":"1.0",
		}
	};
	//code
	var md=MDtool;
	//原型等价
	md.fn=MDtool.prototype;
	//插件方法扩展方法
	md.extend=md.fn.extend=function(obj){
		var target=this;
		for(var key in obj){
			//防止循环调用
			if(target===obj[key]) continue;
			//防止附加未定义值
			if(typeof obj[key]==='undefined') continue;
			target[key]=obj[key];
		}
		//返回到当前对象
		return target;
	}
	md.fn.test=function(data){
		//function code
		//这是一个内部对象
		var test=function(data){
			this.name="test";
			this.show=function(){
				console.log("this is a show function");
			};
		}
		return new test(data);//这里实现new操作
	};
	//返回对象方便使用(mdtool.fun就可以使用)
	window.mdtool=window.MDtool=new MDtool;
})();

扩展插件方法：

<script>
	onload=function(){
		MDtool.$.extend({
			"age":12,
			"display":function(){
				alert("hello");
			},
	});
	}
</script>

MDtool.display();//弹出hello conlose.log(MDtool.age);//控制台输出12

#####后记 感谢你的浏览，如果有哪里有错望指点指点。 写此文并不是想装逼，只是想吧自己的思想贴出来，用来跟大家分享，而来保存记忆。 现在大三了，自学网页开发三年，天天撸代码，但现在还是一事无成，再不做点什么就真的荒废了