js插件怎么写？

最新推荐文章于 2024-05-15 15:15:50 发布

银贝斯

最新推荐文章于 2024-05-15 15:15:50 发布

阅读量1.8k

点赞数

文章标签： js javascript 插件教学教程

本文链接：https://blog.csdn.net/yhn1121/article/details/52909767

版权

jquery插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

很多情况下，在网上寻找现成的插件并不能满足一些特殊的要求

很多的牛人都会自己去写插件来一劳永逸的解决问题。

今天写了个小例子来对插件有一个初步的认识

下面是代码

<html>
	<head>
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="aa">
			ddddd
		</div>
		<script type="text/javascript">
		    
			;(function(w){
				var default_option = {
					bgGround:"red",
					fontColor:"green"
				}
				w.mytool = {
					change:function(e){
						e.style.backgroundColor = default_option.bgGround;
						e.style.color = default_option.fontColor;
					}
				}
			})(window)
			
			mytool.change(document.querySelector("#aa"));
		</script>
	</body>
</html>

这个插件的作用很简单，讲字体的颜色变成绿色，背景变成红色。

关键点有几个：

1、function(w){}(window) 立即执行 w是形参 window是实参 window作为参数会通过w来传入

2、前面有个分号，这个分号其实是为了防止前一句的代码忘记加分号而导致错误。不信的话，插件前面写个alert不加分号试试。

3、还有个问题没解决，万一我原先有个变量叫做mytool呢。。。

果然，如果我们在插件后面定义一个mytool变量，插件就不能用了

细细想也是哈，都是全局变量，肯定后来者居上喽

想想java里面怎么做的，命名空间塞

如下

                         var yhn = {};
			(function(w){
				var default_option = {
					bgGround:"red",
					fontColor:"green"
				}
				w.mytool = {
					change:function(e){
						e.style.backgroundColor = default_option.bgGround;
						e.style.color = default_option.fontColor;
					}
				}
			})(window)
			yhn.mytool =1;
			alert(yhn.mytool);
			mytool.change(document.querySelector("#aa"));

这不就ok

才疏学浅欢迎吐槽