提速javascript开发(一)

zxmlgh

浏览: 38622 次
性别:
来自: 广州

最近访客更多访客>>

天外天之人上人

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (5)

社区版块

存档分类

JavaScript prototype OO 编程 D语言

我的邮箱是zxmloveforever@163.com，欢迎大家来信指点指点。

Web开发时，我们可能经常抱怨，javascript。它太耗时间精力，甚至让我们觉得它恶心。服务器端，我们有优秀的java语言和webwork、spring等框架来帮助我们提高效率。而客户端只有灵活、难以掌握的javascript，那么我们的希望在哪呢？但愿下面的内容能够对你有些帮助。

1、它是怎样的？

Javascript目前由二块构成：Core(核心部分)＋DOM实现部分。（DOM是w3c定义的针对HTML、XML文档编程的一系列接口。通过这些接口，我们可以改变文档结点的结构、样式、内容。实现这些接口的语言可以是java、Python，javascript等。）

Core	定义了语法规则，及内置的全局对象(Date、Function等)，全局方法(parseFloat)，全局属性（NaN，undefined等）
Dom	针对HTML文档与ＸＭＬ文档操作的API

2、慢在哪？

2.1、java VS javascript

Java是面向对象的代表性语言之一，面向对象语言是时下比较流行、开发效率高的主流开发语言。面向对象语言包括几个主要特性：抽象，继承，封装和多态。Javascript本质上不是面向对象的，而是基于对象的。基于对象的语言对上面四个特性支持很差，或者只支持部分特性。

	抽象	继承	多态	封装
java	具备：类，接口，抽象类四个概念	支持：通过关键字 Extends，implements实现	支持： 1)表现在对象的方法可以重载 2)子类可以被当作父类处理	支持： private, friendly, protected, public 四个级别的封装
javascript	仅具备：类，这一个概念	支持很差：通过prototype实现; Function的apply或call方法间接实现。	不支持	支持很差：仅支持private, public二个级别
比较结果	1恶劣的继承导致：无法实现子类与父类之间关系的判断，并且子类无法转化成父类。所以无法根据类的类型处理业务：处理父类的代码，无法处理子类。——扩展性差 2 陈旧的代码书写方式导致：本不好的封装性变的更加差劲。这样对象间的隔离成本增加，内聚性弱。
大大降低了开发效率

2.2、浏览器的兼容性

Core与Dom部分都存在着浏览器平台的差异性，进一步降低了开发的效率。

3、开始加速

3.1、加强封装性

提倡的写法

function A(){
var locate1 = "1oh";
this.locate2 = "2oh";
var method1 = function(){
alert(locate1);
}
this.method2 = function(){
alert(this.locate2);
method1();
}
}

A对象的locate1与method1是private级别的; locate2与method2是public级别的。

优点：封装性好，实现代码变化的隔离。

缺点：代码可读性差。

弥补方式：利用javascript的优秀插件，如：jseclipse。

禁止的写法

优点：代码可读性好。

缺点：

没有全局的私有变量	如果执行a.method3();根本无法访问变量locate1。
prototype中的方法是公共的。	a.method2()成功访问，在prototype中定义的方法是public级别;无法在prototype中定义全局的private变量。
总体效果	1）封装性极其差 2）代码调用不方便。

3.2 类继承

禁止写法

prototype继承	万恶之首：目前有很多继承写法，都是直接或者间接使用它。严重破坏封装性。
没法实现多态：只是简单的复用，这种继承意义不大。
apply,或者call	只是复用：简单的在当前对象中，执行对象之外的另一个方法。

这几种javascript的继承写法虽然目前被大量的使用，但是他们的缺点是明显的，因此我们不建议采用这些常见的javascript继承写法。

推荐写法

例子很长，先给大家一些看完的动力吧，下面是它的优点。

代码复用	如果A继承B，那么A可复用B中public级别的资源
单一，多层的继承	B可以继承C，A可以继承B，不存在A继承B又继承C。
多态	A是父类，B与C是A的子类，如果存在一个方法X，是处理A类的，那么它也能处理B与C类。扩展性好，容纳了变化：可以处理，将来因业务需求新建的D类。

待续……[提速javascript开发(二)]

分享到：

提速javascript开发(二)

2007-03-09 23:06
浏览 17199
评论(26)
论坛回复 / 浏览 (20 / 30311)
分类:Web前端
查看更多

26 楼 pcno1 2007-04-17

路过学习收藏

25 楼 sp42 2007-04-15

bouzouki 写道

sp42 写道

其实，js是一门很好玩的语言，稍花点时间和来点兴趣，就会对这DSL爱不释手，相信能给你带来java、.net无法比拟的乐趣。
p.s如果你玩过dhtml,更能明白我说什么。

yeah! js is an enjoyable language, although the various libs are more pragmatic and productive for real web-development, it's an enlightenment to understand its prototype-based oo mechanism.

Indeed! There's a lot of myth of JavaScript, waiting for us to explore!

24 楼 bouzouki 2007-04-15

sp42 写道

yeah! js is an enjoyable language, although the various libs are more pragmatic and productive for real web-development, it's an enlightenment to understand its prototype-based oo mechanism.

23 楼 gates_lee 2007-04-15

<div class='quote_div'>
<div></div>
<div align='left'>
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-c'>
 <li class='alt'>function A(){ </li>
 <li class=''> var locate1 = "1oh"; </li>
 <li class='alt'> this.locate2 = "2oh"; </li>
 <li class=''> var method1 = function(){ </li>
 <li class='alt'> alert(locate1); </li>
 <li class=''> } </li>
 <li class='alt'> this.method2 = function(){ </li>
 <li class=''> alert(this.locate2); </li>
 <li class='alt'> method1(); </li>
 <li class=''> } </li>
 <li class='alt'>} </li>
</ol>
</div>
</div>
<div/>
<div/>
</div>
这样的话，在每new一个A的时候，每个对象都是拥有自己的method2，而不是作为prototype存在。
关于public、private可以在开发中作出协议，例如，方法名前用_，表示方法是私有的。

22 楼 gates_lee 2007-04-14

为什么说js不支持多态那，js可是弱类型的。

21 楼 windproof 2007-04-14

学习中

20 楼 logonin 2007-04-07

很受启发

19 楼 yuwen3434 2007-04-05

好贴好贴

18 楼 liufeng 2007-04-04

GOOGLE MAPS AP去哪找啊。请问下哦

17 楼 liufeng 2007-04-04

原来还有这么大的好处啊。

16 楼 fjb1822001 2007-03-19

周晓明同志是个好同志,勤奋刻苦,有激情,希望以后多多发表文章和心得,严重的支持你一下!!!看在你半夜三点发帖的态度上,哈哈

15 楼 chenhuiwu 2007-03-14

楼主,强人.

14 楼 zjjxll 2007-03-12

建议搂主去看下GOOGLE MAPS API,如果不会破解，可以去看下51DITU API ，看了后你就晓得你说得封装和继承得问题可以得到比较好得解决，而且还有许多JAVA .NET中玩不出得精彩技巧

13 楼 zxmlgh 2007-03-12

没有完美的方式。我自己的写法也是有代价的，prototype的代价个人感觉更大。首先在javascript中做出很好的封装性很难！prototype写的继承有个最大的缺点（暂且不说它的封装性），如下。这是目前许多比较优雅的写法。如果我用prototype弄继承，那么代码最好是
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-c'>
 <li class='alt'>function A(){ </li>
 <li class=''> </li>
 <li class='alt'>} </li>
 <li class=''>A.prototype={ </li>
 <li class='alt'>} </li>
</ol>
</div>
 
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-c'>
 <li class='alt'>function A(){ </li>
 <li class=''> </li>
 <li class='alt'>} </li>
 <li class=''>A.prototype={ </li>
 <li class='alt'>} </li>
 <li class=''> </li>
 <li class='alt'>function A(){ </li>
 <li class=''> </li>
 <li class='alt'>} </li>
 <li class=''>function B(){ </li>
 <li class='alt'>} </li>
 <li class=''>A.prototype=new B()//或者其它写法都可以，都会面临下面的问题 </li>
 <li class='alt'>A.prototype.x= function(){}//等等其它新增的方法都这样定义。 </li>
 <li class=''>/** </li>
 <li class='alt'>*这样的后果就是封装性不仅，差，写个同样功能的类，也比较长。 </li>
 <li class=''>*/ </li>
</ol>
</div>
当然有的时候封装性也不太重要。这事上没有绝对的事情，文章中的观点针对的是：发挥js对象的特点而言。甚至有的时候没有必要发挥其对象性的一面，这都是根据需要来用的。
强烈建议大家在表达自己想法时：给些例子。最好再将例子与反对的例子对比下，这样说明的话，理解的直观些

12 楼 whisper 2007-03-12

我的原则是没有任何理由去面向对象
写出程序流程，然后注入函数就足够了

11 楼 rautinee 2007-03-11

支持一下！看的出楼主写的是自己项目的真实感受，感同身受，对于一个团队来讲，养成良好的默契的开发习惯至关重要，条条大路通罗马，选择适合自己团队的一条路就可以！

10 楼 jianfeng008cn 2007-03-11

jindw 写道

这里所谓的js的private变量，其实就是局部变量。

private和public这样的访问权限的封装在js 脚本语言里，意义应该不是很大吧？

引用

3.2 类继承
禁止写法
prototype继承万恶之首：目前有很多继承写法，都是直接或者间接使用它。严重破坏封装性。
没法实现多态：只是简单的复用，这种继承意义不大。
apply,或者call 只是复用：简单的在当前对象中，执行对象之外的另一个方法。

这几种javascript的继承写法虽然目前被大量的使用，但是他们的缺点是明显的，因此我们不建议采用这些常见的javascript继承写法。

prototype继承万恶之首？是不是太武断了？
prototype这个语言本身支持的东西用起来安全性等还是有优势的吧，
比如利用prototype封装实例方法相对楼主的方法能有效的避免ie内存泄露。

楼主实现的继承等功能在利用prototype的基础上应该也能实现吧？

9 楼 zxmlgh 2007-03-10

提速javascript开发(二)，已发表，如有指点，请各位回帖说明，本人认真向各位学习。

8 楼 zxmlgh 2007-03-10

javascript是个灵活的语言。本身的语法规则也是弱类型，弱类型有它的强处也有它的弱处，同时类型与对象的概念也确实存在。自己在开发中不是处处强调类型的，经常感受类型自动转化的好处。但在某些场合，我们在代码中强调类型也是有好处的。
<div class='dp-highlighter'>
<div class='bar'/>
<ol class='dp-c'>
 <li class='alt'>/** </li>
 <li class=''> * 计算String的长度：String中的中文字符将计算为二个字符长度。 </li>
 <li class='alt'> * @param param 参数类型是字符串，它是被计算的字符串对象。 </li>
 <li class=''> */ </li>
 <li class='alt'>String.getLength = function(param){ </li>
 <li class=''> var temp = Type.conversion(param,"string"); </li>
 <li class='alt'> if(Type.isString(temp)){ </li>
 <li class=''> var b = temp.replace(/[^\x00-\xff]/g,"**").length; </li>
 <li class='alt'> return b; </li>
 <li class=''> } </li>
 <li class='alt'> return 0; </li>
 <li class=''>} </li>
</ol>
</div>
 这个方法的目的是很明确的，在此强调类型，对我至少没有坏处。有些场合强调类型原因就是，要获得强调类型的好处。又比如多态就是：要对同一类型内的情况进行处理，对不是这个类型的或者它的子类，代码就不应该工作。那么当我们需要这种情况，为何不用多态呢？
 这个世界是多样的，代码中也如此。没必要有了黑的，就一定不能要白的啊。当我们需要什么时，如果就有什么——至少不是一件坏事啊。上面代码有个Type类的，Type中包含了错误处理机制。弱类型是有好处，但它也是有弱处的。在错误处理机制中，类型明确也是可以获得好处的。一个强壮的错误处理机制，对调试很有用。(有些调试器下载安装后，但仍然对某些代码无效。各位本人缺好的javascript调试器，哪位有好的，发到我邮箱中吧，先谢谢了)
 帖子里的编码模式，我用了有一段时间。加快了我的速度，同时代码质量，个人感觉更好了。如果js程序出现业务功能上的bug，在几千行javascript代码中可较快的定位准，并以较低的代价解决。楼上所说的：“却忘记了你这构造函数里创建的成员都有被搞成final的风险！断了继承的后路。有些时候，构造函数是不能轻易调用的。比如说，在构造函数里有重量级的初始化代码。”一下子理解不了。在实际的编码过程中，大的javascript类，八九百行代码也写过（ui方面编程）但没有遇上那些问题。望给些代码实例，这样可以有个直观的理解。<img src='/javascripts/fckeditor/editor/images/smiley/msn/teeth_smile.gif' alt=''/>

7 楼 sp42 2007-03-10

有点迷惑了

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论