var test = function(){ var apple = '苹果'; var pear = '梨子'; /* 定义一个函数将水果暴露出去 */ var getFruit = { apple : apple , pear : pear } return getFruit; //将获得i的函数暴露出去 } function test2(){ var getFruit = test();//接收test暴露出来的函数 console.log(getFruit); } test2();
像这样用 { } 括起来的东西就是一个js对象,也就是所谓json。你可能经常会听到json这个词,觉得还挺高大上的。其实它就是一个用 { } 包起来的数据而已。
里面是键值对的形式,非常类似于Java里面的HashMap。
在这个例子中,我们可以直接把需要暴露的私有数据用一个 { } 包起来,构成一个json对象return出去就可以啦。
因为是 js 对象,alert 不能看到里面的具体内容,所以我们使用 console.log() ,结果如下:
展开后:
这样是不是也可以了?多出来的 proto 是原型链,以后会讲到。
3. 我们来做一个紫金葫芦
大家都还记得西游记里孙悟空用遮天的把戏骗来的紫金葫芦吗,只要你拿着这个葫芦,叫一声别人的名字,如果答应了,别人就会被吸进去。
OK,这个紫金葫芦里面不正如一个闭包吗?
对不对嘛,所以,我们用闭包的知识来做一个好玩的东西吧。
<body> <div>小妖</div> </body>
紫金葫芦里面的源码大概是这样的:
var 紫金葫芦 = function(id){ var domElement = document.getElementById(id); var returnObject = { domElement : domElement , backgroundColor : function(color){ domElement.style.backgroundColor = color; }, click : function(fn){ domElement.onclick = fn; } }; return returnObject; }
注:我纯粹是为了看起来方便而采用中文定义变量,在实际开发中,千万不要使用中文变量。
我们在返回出去的对象上加了三个东西:
1.domElement
你传进来一个id,我就用 document.getElementById 来包一下,得到一个dom元素,最终要操作的也就是这个dom元素。也就是说:
var box1 = 紫金葫芦('box').domElement; var box2 = document.getElementById('box'); alert(box1 === box2); Paste_Image.png
他们是一个东西,一样的。
紫金葫芦('box');
这行代码一旦执行,紫金葫芦就会返回 returnObject 对象,也就是说。我们喊一声 “box”,那个id为box的小妖一答应,就被装进来了,然后我们可以对它为所欲为!
比如,给它换一个背景色:
2.backgroundColor 给元素添加背景色的方法
var box = 紫金葫芦('box'); box.backgroundColor('red');
3.click 给元素添加点击事件,需要传入一个回调函数
var box = 紫金葫芦('box'); box.click(function(){ alert('就没人吐槽这个无聊的作者么,小妖也有尊严的好么,啊喂!!'); });
结果:
也许你已经发现了,这些方法是不是和jQuery有点类似呢?