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

原创
2015/09/07 22:29
阅读数 78

大三了,再不做点什么就这样荒废了!

平时做前端开发时经常用到一些相同功能,比如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

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

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部