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

#####後記 感謝你的瀏覽，若是有哪裏有錯望指點指點。 寫此文並非想裝逼，只是想吧本身的思想貼出來，用來跟你們分享，而來保存記憶。 如今大三了，自學網頁開發三年，每天擼代碼，但如今仍是一事無成，再不作點什麼就真的荒廢了