高级面向对象写法.docxVIP

寻找最好的JavaScript面向对象模式和封装结构作者：admin 发布时间：2010-08-20 15:31:13好久不见，这次发的不是笔记啦，是我在公司内部的前端wiki上更新的文档……这个抛弃所有wiki语法要求用户直接手写语义化html用json配置导航的wiki排版相当漂亮，让我这样的懒人也有了码字的欲望，发起人小麦实在系功德无量……这篇文章去年就准备写，想用循序渐进的形式推演出一个/blog/2007/06/12/module-pattern/Module Pattern的 最佳实践，不过想法越多，归纳总结表达出来的成本就越高，所以一直拖延……这次发的文档是一个简化版，去掉了各式各样乱七八糟的写法，只包含几个常用的， 说明文字也不多主要看代码-__-b……初衷是作为给土豆前端team里新来的同事看的提纲（对了由于某人叛逃到产品设计部门，现在又空出一个名额，有兴 趣的同学抓紧时间/256投简历，这次是魔都总部的职位，不是成都的），所以要解释一下，文档中提到的TUI是一个js库（名字是很俗，不过我上次发现某年纪一大把的人也跟我/?p=621一样俗）， 土豆一直采用双库并行（不要看成双工并行…）的形式，在紧跟开源社区发展的同时自己掌控所有环节和基础架构，没有使用jQuery UI和那套基于DOM的插件结构，而jQuery自己几乎不提供OOP工具（这是好事），实际上自己创建这类工具非常简单快捷，相关的代码我提取了一下直 接帖在末尾了，仅供参考。另外，为了符合Nicholas Zakas在最近的/blog/2009/09/17/video-bayjax-sept-09/国际会议上传达的精神，我修改了若干变量名跟他/nzakas/scalable-javascript-application-architectureppt里的例子保持一致——这件事教育我们，平时多上对保持先进性是多么重要。Tudou’s JavaScript Guideline — OOP and Module介绍土豆在面向对象和模块化设计方面的工具和实践“Don’t Repeat Yourself.” (DRY)“Rather than construction, programming is more like gardening.”Quote from: Andy Hunt and Dave Thomas, The Pragmatic Programmer索引/2009/09/20/tudou-javascript-oop-and-module-guideline/创建类，继承，混入，实例化/2009/09/20/tudou-javascript-oop-and-module-guideline/模块化 Module Pattern/2009/09/20/tudou-javascript-oop-and-module-guideline/沙盒，模块间的解耦，与外部通信/2009/09/20/tudou-javascript-oop-and-module-guideline/按需加载模块 On-demand Lazy Load/2009/09/20/tudou-javascript-oop-and-module-guideline/总结创建类，继承，混入，实例化我们依赖的核心工具是TUI.clone简洁的，支持私有属性，不需要prototype的写法：JS是基于原型而不是基于类的面向对象语言，JS是“无类型”的，类是仿造出来的概念，实质只有对象。new只是用来复制对象，构造函数只是用来返回对象, 两者对JS的OOP来说并不是必须的。var?dog?=?function(options){??var?privateAttr?=?1;?//私有属性??var?private_method?=?function(){};?//私有方法??return?{??option:?options,?//实例属性??method1:?function(){}??};};?var?xiaobai?=?dog({});对私有属性/方法的支持比较好最适合单例模式(Singleton)延迟单例的初始化，提高页面初始化的速度缺点：对继承的支持不佳缺点：在需要频繁创建大量对象，而方法非常多的场合，浪费资源（因为每个实例的方法指向的都是不同的函数对象，每次实例化都要重新生成所有函数）在第2个缺点的场合，传统的prototype写法效率更高，支持继承，但是代码分散，不易读，TUI.clone提供了更好的写法——传统的、支持继承的、仿Ruby风格的Class写法：//创建新类var?Dog?=?TUI.newClass({??initialize:?function(options){?