论坛首页 → Web前端技术论坛 →

提速javascript开发(一)

浏览 30310 次
锁定老帖子 主题：提速javascript开发(一)
该帖已经被评为良好帖
作者 正文
  • zxmlgh
  • 等级: 三星会员
  • 性别:
  • 文章: 55
  • 积分: 254
  • 来自: 广州
   发表时间：2007-03-09  
 
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、加强封装性
提倡的写法
  1. function A(){          
  2.     var locate1 = "1oh";   
  3.     this.locate2 = "2oh";   
  4.     var method1 = function(){   
  5.         alert(locate1);   
  6.     }   
  7.     this.method2 = function(){   
  8.         alert(this.locate2);   
  9.         method1();   
  10.     }                                  
  11. }  
A对象的locate1与method1是private级别的; locate2与method2是public级别的。
优点：封装性好，实现代码变化的隔离。
缺点：代码可读性差。
弥补方式：利用javascript的优秀插件，如：jseclipse。
禁止的写法
  1. function A(){          
  2.     var locate1 = "1oh";   
  3.     var method1= function(){   
  4.         alert(locate1);   
  5.     };                                 
  6. }   
  7. A.prototype={   
  8.     locate2:"2oh",     
  9.     method2:function(){   
  10.         alert(this.locate2);   
  11.     },   
  12.     method3:function(){   
  13.         alert(locate1);   
  14.         method1();   
  15.     }   
  16. }   
  17. var a = new A();   
  18. a.method2();   
  19. a.method3();  
 
优点：代码可读性好。
缺点：
 
没有全局的私有变量
如果执行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开发(二)]
返回顶楼
         
  • sp42
  • 等级: 三钻会员
  • 文章: 726
  • 积分: 1617
  • 来自: Canton
   发表时间：2007-03-10  
其实，js是一门很好玩的语言，稍花点时间和来点兴趣，就会对这DSL爱不释手，相信能给你带来java、.net无法比拟的乐趣。
p.s如果你玩过dhtml,更能明白我说什么。
返回顶楼
          回帖地址
0 请登录后投票
  • guoshiguan
  • 等级: 四星会员
  • 性别:
  • 文章: 120
  • 积分: 462
  • 来自: 厦门
   发表时间：2007-03-10  
现在很多的控件都已经把javascript封到控件了，一个网页有太多的javascript说明这个页面是需要重购的，
ＰＳ：我也看不懂在说什么，
返回顶楼
          回帖地址
0 请登录后投票
  • zxmlgh
  • 等级: 三星会员
  • 性别:
  • 文章: 55
  • 积分: 254
  • 来自: 广州
   发表时间：2007-03-10  

      我在公司参与js api的开发。针对js core部分的封装，可以控制在1500左右的代码。在注释比较详细的情况下，它的大小是8k左右。针对dom部分的封装不会超过2000行左右，大小约在10k左右。这部分的封装一定要做好，引用它们是库是被引用最多的。也是所有ui库的基础库！
      针对每个页面rich客户端业务的代码，一般不会超过1000行代码。整个rich客户端的代码超过30k的情况很少了。当然有的网站或者公司有自己业务方面的通用代码，这部分封装很少超过10k的。那么整个rich客户端代码超过40k的机会是很少的。
   现在做网站或者搞B/S开发的团队一般都可以轻松的对js代码进行过滤，去掉注释与不必要的空格换行。差的压缩效果可以达到1/3好的可以达到1/2甚至更多，那么js代码的大小超过30k的大小就很少。上面所说的情况，一般能完成非常丰富的ajax组件。对于一个网站，一个页面的js大小在30K左右是不会影响页面的打开与执行性能的。对于B/S结构的ERP更是无所谓了。这些来自我的工作经验，请大家指点。

    一般来说页面只会引用js文件，不赞成在页面上js.这是我开发中的基本规则之一
返回顶楼
          回帖地址
0 请登录后投票
  • jianfeng008cn
  • 等级: 五星会员
  • 性别:
  • 文章: 682
  • 积分: 713
  • 来自: 湖州
   发表时间：2007-03-10  
引用

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级别的。


A作为函数，是一个特殊的对象，“对象构造器”，既有类的作用，
我觉得这里
A对象的locate1与method1是 静态方法 和 静态变量;
locate2与method2是 实例变量 和 实例方法。

js中有 private和public的概念吗？


返回顶楼
          回帖地址
0 请登录后投票
  • jindw
  • 等级: 三钻会员
  • 性别:
  • 文章: 731
  • 积分: 1481
  • 来自: 初到北京
   发表时间：2007-03-10  
这里所谓的js的private变量，其实就是局部变量。
返回顶楼
          回帖地址
0 请登录后投票
  • jindw
  • 等级: 三钻会员
  • 性别:
  • 文章: 731
  • 积分: 1481
  • 来自: 初到北京
   发表时间：2007-03-10  
还有，你这里强调了封装。
确忘记了你这构造函数里创建的成员都有被搞成final的风险！
断了继承的后路。

因为有些时候，构造函数是不能轻易调用的。
比如说，在构造函数里有重量级的初始化代码。

javascript是个灵活弱类型的语言，而楼主处处以强类型的标准来衡量之。未免有扬短避长的嫌疑。

楼主汇集了这些参考文档，对于初学者，或许大有帮助。但是楼主的思想，难以苟同。
返回顶楼
          回帖地址
0 请登录后投票
  • sp42
  • 等级: 三钻会员
  • 文章: 726
  • 积分: 1617
  • 来自: Canton
   发表时间：2007-03-10  
有点迷惑了
返回顶楼
          回帖地址
0 请登录后投票
  • zxmlgh
  • 等级: 三星会员
  • 性别:
  • 文章: 55
  • 积分: 254
  • 来自: 广州
   发表时间：2007-03-10  

javascript是个灵活的语言。本身的语法规则也是弱类型，弱类型有它的强处也有它的弱处，同时类型与对象的概念也确实存在。自己在开发中不是处处强调类型的，经常感受类型自动转化的好处。但在某些场合，我们在代码中强调类型也是有好处的。

  1. /**  
  2.  * 计算String的长度：String中的中文字符将计算为二个字符长度。  
  3.  * @param param 参数类型是字符串，它是被计算的字符串对象。  
  4.  */  
  5. String.getLength = function(param){   
  6.     var temp = Type.conversion(param,"string");   
  7.     if(Type.isString(temp)){   
  8.         var b = temp.replace(/[^\x00-\xff]/g,"**").length;   
  9.         return b;   
  10.     }   
  11.     return 0;   
  12. }  

        这个方法的目的是很明确的，在此强调类型，对我至少没有坏处。有些场合强调类型原因就是，要获得强调类型的好处。又比如多态就是：要对同一类型内的情况进行处理，对不是这个类型的或者它的子类，代码就不应该工作。那么当我们需要这种情况，为何不用多态呢？

       这个世界是多样的，代码中也如此。没必要有了黑的，就一定不能要白的啊。当我们需要什么时，如果就有什么——至少不是一件坏事啊。上面代码有个Type类的，Type中包含了错误处理机制。弱类型是有好处，但它也是有弱处的。在错误处理机制中，类型明确也是可以获得好处的。一个强壮的错误处理机制，对调试很有用。(有些调试器下载安装后，但仍然对某些代码无效。各位本人缺好的javascript调试器，哪位有好的，发到我邮箱中吧，先谢谢了)

     帖子里的编码模式，我用了有一段时间。加快了我的速度，同时代码质量，个人感觉更好了。如果js程序出现业务功能上的bug，在几千行javascript代码中可较快的定位准，并以较低的代价解决。楼上所说的：“却忘记了你这构造函数里创建的成员都有被搞成final的风险！ 断了继承的后路。有些时候，构造函数是不能轻易调用的。 比如说，在构造函数里有重量级的初始化代码。”一下子理解不了。在实际的编码过程中，大的javascript类，八九百行代码也写过（ui方面编程）但没有遇上那些问题。望给些代码实例，这样可以有个直观的理解。

 
返回顶楼
          回帖地址
0 请登录后投票
  • zxmlgh
  • 等级: 三星会员
  • 性别:
  • 文章: 55
  • 积分: 254
  • 来自: 广州
   发表时间：2007-03-10  
提速javascript开发(二)，已发表，如有指点，请各位回帖说明，本人认真向各位学习。
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics