闭包和类的浅析与应用.doc

第 12 页 共 12 页闭包和类的浅析与应用序我从事java软件开发已经两年有余了.因为工作的原因,所以对前台的技术比较了解.当然,也很喜欢.无论是工作压力还是兴趣所在.都给了我一定的动力.第一次接触闭包是在第一家公司的时候.那时候我的项目组长是个很了不起的人物.也给了我很多东西.所以至今很感激.也是他把我带入了javascript这个神奇的世界.或许.对你来说它并不神奇.这篇文档,不会涉及到太深奥的东西,因为我自己也并不是很精通.这是实话.但是该文章也不会去讲述那些基本内容知识.因为我这篇文章的标题已经说明了.是对闭包和类的一个简单的分析与应用.我们为什么要用闭包?我们用闭包可以带来什么?难道我用纯粹的function不能满足我自己的需求么?我想说的是,面对一些好的解决方案,就像现在很少有人执着的去徒步旅行到很远很远的地方.也或许就像很多人不再爬山而是做缆车一样.在效率和利益面前,一切可以快速达到终点的方法,都是好方法.但是你要记住,偶尔,也要自己去亲身体会一下那曾经一闪而过的风景.好了,不多说了.我们开始吧.让我这个菜鸟九段级人物,带你们这些人走进JS的神奇世界.声明本文章在叙述的时候会尽量使用白话文和喻意来讲述一个问题.如果需要官方解释请百度或谷歌来获取精准的讲义.且本文章主要是用于培训讲座.所以很多东西可能在文章中未写出.如有疑惑.可以联系或者是查阅相关资料.本文章的示例演示网址为:http:/demo.lcc.me/demo/js-simple-closure-class本文的作者-即鄙人水平有限.所以有疏漏之处还望不吝赐教.LCC 2012-05-21第一章 什么是闭包和类1、 闭包的简述闭包这个东西其实你一直都在用,当然了,你要是不写JS的就另当比论了.说到这个一直都在用,是不是突然有了周易所说的:大道至简的感觉.PS:大道至简你可以粗略的理解为专家所喋喋不休的那些我们不懂的东西,我们一直都在使用.只不过我们自己不知道而已.你可以想象一下,你无论是把JS代码写在HTML中,还是写在一个文件中.那么只要这个页面引用到了这些JS.那么它们就已经身处在一个巨大的function方法中了.比如下面的代码:. .var testA = null;function testFnA(). . .其实你可以看作或这比作这样的代码:(function ()a. js 所有的代码HTML中直接嵌入的代码)();PS:再次声明,本文章不讲述基本知识和内容.所以如果对上述或下述的基本知识代码有疑问的话.请上网查阅相关资料.上面的(function ()();其实就是一个简单的闭包.那你就可能会说.这就是闭包?哦,按照我们想要表达和实现的内容来说它不是.因为我们写闭包的目的是保留住我们想要的变量值.以及保护我们的变量不被破坏及泄漏.你看看,说着说着就开始老生常谈了.这不合C#的封装,哦,我是搞Java的.这不是和Java的封装的概念很相似呀.是与不是,你们可以自己琢磨.或许会给你带来不小的收获或者是启发.通俗来讲,这个就像你去吃自助餐一样.无论转盘上有多少东西.它针对顾客来说是共享的.一个顾客实际需要的.他会夹到自己的盘子中.这时候,这个东西就是专门针对这个顾客来分配的.而这个顾客盘子中的东西,针对他的朋友来说,也是极有可能共享的东西.例如情侣之间吃东西一般是不分你我的.如果你看中了一个食物,你没有把它夹在自己的盘子里.OK,那么你得到结果也许就是:刚刚我为什么不多夹点.从而导致你没能享受到你本可以享受的东西.当你用餐完毕.那么服务员就会对你残留的东西进行清理.这个过程和程序是样的.因为她只有服务员空闲的时候才会清理.当然了.如果说新顾客需要占用这个位置.她一般会主动让服务员清理.可惜不完美的是.这个清理时间也不是立刻的.而是会给你一个优先级而已.朋友,用心体会生活.对你去理解高级语言也是很有帮助的.我想到了自助餐.那你呢?或许你会用其他的比喻.当然了.只要能帮你快速去理解.就是一个好的比喻.最后,我问你一个问题:利用循环创建十个button按钮.并添加单击事件.当这个单击事件被触发的时候弹出循环他们时候的索引值.你是怎么让这个按钮正确弹出这个索引值的.PS:例如你用循环创建按钮的时候.假设索引是从0开始的.那么第三个按钮弹出的值就应该是2.参考:http:/demo.lcc.me/demo/js-simple-closure-class/closure1.html2、 JS 类的简述这个简述只有一句话:它是一个Json对象.当然.我在写一个控件的时候不会用Json对象.而是利用function来写.下面我在讲写一个控件的时候,将会直接使用混合的构造函数/原型方式.其他的方式.大家可以上网查阅一下.PS:人们创建一个类的时候,会用new Class或是new Object.但是一个通用控件.用的是一个function因为new出来的东西只能是对象.我想很多人有时候都会把对象和类搞的混淆吧.3、 闭包和类的主要作用闭包上面提到过,是用来保存当前数据给局部方法以后调用.这是最常用的地方.其他的例如保护好变量等等都是一些特殊情况使用到的.不过整体来说.如果不能理解闭包,也一定要会上两手.对以后的应用很有帮助.类的使用.这个很大家更具名字就知道了它的好处.关于JS是否应该向类发展.互联网上争论了好久了.其实也没什么好争论的.正如中庸之道一样-度的问题.面对所有双刃剑的问题.只要利大于弊就可以用.闭包和类一起拿出来讲.主要是因为在处理一些问题上.闭包确实难以避免.闭包用的最好的.我想很多人都知道是Jquery.而类写的最好的.当然是EXT.其实也不应该用最好这个词.只不过是最常见而已.大家有空的话搜搜Jquery和YUI或EXT的各自优势和不足.对理解闭包和类会有很大的帮助.当你的JS臃肿庞大,需要多个实例化.需要增加统一的功能的时候.不妨改写成类吧.一处书写,到处使用.警告:在没有必要的前提下,把1+1=2这类问题写的很复杂的人是可耻的.第二章 再探JavaScript的类一、 正统的类曾经很多人反对JS写法的类化.理由嘛,很简单.说是影响性能.也破坏了JS原有的奔放写法.Java:public class DemoString name;int age;public void say(String say)public String sex()return Man;C#:public class Demostring name;int age;public void say(string say)public string sex()return Man;PS:Java和C#是有区别的.上述中的区别在于String这个变量.上述的代码,你很熟悉.当然了.搞C+的不许发言.有时候看着这个代码.自己会禁不住自恋.多完美的编程语言呀.结构相当明了.而且易读易写.再看看下面这个JavaScript代码.var name;var age;function demo()alert(name);. .你知道我上面的代码在做什么吗?不管怎么样.做前台的兄弟都是一直在和他打交道.不过.我想很多人的水平只停留在一下阶段:document.getElementById(id).除了这个经典的东西.其他的都是附属品而已.例如.document.getElementById(id).value = Hello JS;其实JS主要有三部分: ECMAScript-JavaScript的核心，描述了语言的基本语法和对象。 DOM-The Document Object Model，描述了作用于网页内容的方法和接口。 BOM-The Browser Object Model，描述了和浏览器交互的方法和接口。而你常用的,就是第二个.DOM.关于DOM.可以看下这个网址.不在多说.因为这些不在本章节讨论的范围内./js/js_obj_htmldom.asp二、 JS的类想想我第一章说的吧.人家JS其实也是有类的.var peple = new Object(); = LCC;peple.sex=男人;你看看,人家这是有类的. 不过嘛.这个类.怎么看都是一个JSON。再加一句peple.say = function ()alert(Hello Class!);有没有感觉到是个类了.但是我劝你还是别太兴奋了.这个东西除了适合传输数据.没什么新奇的.毕竟就像拿着黑客写的工具.去盗QQ一样.你可以借此去成长一名黑客.但是.至少你现在在用别人的东西的时候.还不是黑客.PS:DWR可以传一个Object(JSON)去和后天的一个类对应我们现在需要的就是写一个自己的类.function Peple()var peple = new Object(); = LCC;peple.sex=男人;peple.say = function ()alert(Hello Class!);return peple;这不是一个方法么?它和我们在上面看到那个有什么区别?答案是:一个是对象,一个是类.一个类.在我看来.起码要有两部分组成.一个是属性(字段).一个是方法(函数).我们上面写的那个类.还有另一个身份.那就是闭包.童鞋们.网上的大虾们说不要这样写.因为两个字:效率.确实.当你每调用一次这个方法(当然了,这时候不要用调用函数的方法来调用.而是应该用new).它都会去创建一个Object,然后给你返回回去.因此.他们都说没有效率.其实也对.我们只是要一个类一样的东西.我不想要去制造额外的负担.var Peple = fucntion ();this.alge;this.say = function ()alert(Hello Class!);我们大功告成了吗?No.因为这只是一个开始.3、 写类前的准备工作请大家记住这个词prototype.或许有人已经用过了.或许有人看见过.但是,要书写一个真正的类(控件).就必须要去使用它.不用管他干嘛用的.但是一定要记住它.如果想要了解更多.请致电李彦宏.让他帮你百度一下.不过,我在此会简单的介绍下.其实这个东西大家叫它原型.这个其不难理解.一个人,他自己可以直接操控的东西.不需要借助外力.那么就是原生的.如果需要外力支持.那就是追加的.按照正常来说.我们有四肢,我们可以说话.但是.如果你要是想飞的话.那你就只能靠工具了.因为老祖先没有给我们这个功能.那prototype这个原型的作用是什么呢.它的作用就是给某个类追加原生的东西.例如一个人唱歌唱的不好.可以通过手术来实现.那么以后甜美的歌声他只需要直接调用就可以了.类似与整容等等都属于prototype.举个实际点的例子.JavaScript的字符串没有trim()这个方法.这就意味着你每次必须自己去检测两端的空格.然后自己替换掉.其实我们可以通过prototype这个方法.让JS的字符串拥有这个功能.Stotype.trim = function ()return this.replace(/(/s*)|(/s*$)/g, );以后你就可以这样做了.var a = sadf ads adss ;a.trim();这就是prototype的用处.更多详细资料请谷歌或百度.四、 JS真正的类var Peple = fucntion (name,age)=name;this.age=age;Ptotype.say = fucntion (say)alert(say);因为篇幅有限.当然.也是因为我们不谈论JS类的构成.所以.直奔现在使用最广泛的.也是效率最完美的构成方式.混合的构造函数/原型方式 或者叫做 杂交栽培法-构造函数原型模式不管它叫什么.你只需要记住.上面的结构才是最重要的.通过观察你可以发现它分成两大部分:函数内以及函数外两部分.函数内.你需要去写属性.也就是说每次都需要初始化的东西.不然你每次初始化.以前的值都变成最后一次初始化的值.可就糟糕了.那也是你不愿意看到的.而函数外的.也就是用原型追加的.你会发现全是方法.因为这些方法只需要初始化一次就够了.因为这些东西本来就是属于对象本身的.但是大家要注意的是.并不是说属性一定要用this而方法一定要用prototype.这要看你的需求.记住,不仅仅是JS.其他语言也一样.当你会写闭包和类的时候.你就会发现.代码,也是讲究艺术的.这个结构是最完美的吗?下章将会说出另一种完美.却也少用的书写格式.五、 JS真正的类仿高级语言毕竟大家都是写高级语言的人.用上面的结构.总是感觉怪怪的.因为它看起来不太顺眼.因为我们要写的是类.虽然它的功能和类一样了.但是.我们还要追求更完美.当然了.下面这个.我不喜欢用.因为.习惯的原因吧.滴灌法-动态原型模式var Peple = fucntion (name,age)=name;this.age=age;If(Peple.isInit = undefined)Ptotype.say = fucntion (say)alert(say);Peple.isInit = true;上面这个方法,在效率上和上节讲的是一样的.不过.它看起来是不是更像一个真正的类了.但是.这样把东西都写在一起.代码避免不了凌乱.也不好整理.所以.上节的书写方式.毕竟符合了大众的习惯.所以.使用是最广泛的.但是,本节的结构.有一个地方是上节没有的功能.就是你可以在这个类里藏着私有变量.然后供他下面的方法免费使用.而上节的则不行.所以.本节的结构.本身就是一个闭包了.可以有效保护数据.结构是死的,人是活的.该用啥用啥就行了.本章到此结束.第三章 演示一、简单的创建一个类我们现在假如有这么一个需求.一个类.有两个属性.一个是div对象.一个是这个div的title属性.而这个类有两个方法.一个是在初始化的时候调用的.及,创建一个div.第二个是给这个div添加内容.这个需求很简单.也没有什么太严谨的地方.大家可以尝试着想一下和写一下.只要满足上述的需求.其他地方大家可以随意发挥和填写相应的测试代码.PS:本节示例网址http:/demo.lcc.me/demo/js-simple-closure-class/class/1.html那么你写的代码起码应该是这么一个结构function Demo()this.div = null;this.title = null;this.create(); / 初始化的时候调用return this;Dtotypy.create = fucntion (); / 创建DIVDtotypy.content= fucntion (txt); / 给DIV添加内容2、 强化这个类我们现在,可以更明确一下需求.例如说.我们现在提供也一个页面.这个页面可以创建一个我们指定div大小.以及div位置.还有鼠标悬停提示以及内容的一个页面.而且是,点击一次创建.就按照我们填写的参数创建