`
zxmlgh
  • 浏览: 38620 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

提速javascript开发(一)

阅读更多
 
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文档与XML文档操作的API
 
2、  慢在哪?
2.1java 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开发(二)]
分享到:
评论
6 楼 jindw 2007-03-10  
还有,你这里强调了封装。
确忘记了你这构造函数里创建的成员都有被搞成final的风险!
断了继承的后路。

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

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

楼主汇集了这些参考文档,对于初学者,或许大有帮助。但是楼主的思想,难以苟同。
5 楼 jindw 2007-03-10  
这里所谓的js的private变量,其实就是局部变量。
4 楼 jianfeng008cn 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的概念吗?


3 楼 zxmlgh 2007-03-10  
<p><font>      我在公司参与js api的开发。针对js core部分的封装,可以控制在1500左右的代码。在注释比较详细的情况下,它的大小是8k左右。针对dom部分的封装不会超过2000行左右,大小约在10k左右。这部分的封装一定要做好,引用它们是库是被引用最多的。也是所有ui库的基础库!<br/>
      针对每个页面rich客户端业务的代码,一般不会超过1000行代码。整个rich客户端的代码超过30k的情况很少了。当然有的网站或者公司有自己业务方面的通用代码,这部分封装很少超过10k的。那么整个rich客户端代码超过40k的机会是很少的。</font><font><br/>
   现在做网站或者搞B/S开发的团队一般都可以轻松的对js代码进行过滤,去掉注释与不必要的空格换行。差的压缩效果可以达到1/3好的可以达到1/2甚至更多,那么js代码的大小超过30k的大小就很少。上面所说的情况,一般能完成非常丰富的ajax组件。对于一个网站,一个页面的js大小在30K左右是不会影响页面的打开与执行性能的。对于B/S结构的ERP更是无所谓了。这些来自我的工作经验,请大家指点。</font></p>
<p>    一般来说页面只会引用js文件,不赞成在页面上js.这是我开发中的基本规则之一<img src='/javascripts/fckeditor/editor/images/smiley/msn/teeth_smile.gif' alt=''/></p>
2 楼 guoshiguan 2007-03-10  
现在很多的控件都已经把javascript封到控件了,一个网页有太多的javascript说明这个页面是需要重购的,
PS:我也看不懂在说什么,
1 楼 sp42 2007-03-10  
其实,js是一门很好玩的语言,稍花点时间和来点兴趣,就会对这DSL爱不释手,相信能给你带来java、.net无法比拟的乐趣。
p.s如果你玩过dhtml,更能明白我说什么。

相关推荐

    为IE浏览器的javascript提速.docx

    JavaScript是Web开发中不可或缺的一部分,尤其在现代网页设计中,其使用越来越广泛。然而,不同浏览器对JavaScript的处理效率存在差异,尤其是对于IE浏览器来说,虽然IE8在性能上有显著提升,但仍落后于如Chrome这样...

    js全面基础与提速

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级编程语言,主要负责处理网页的动态效果和用户交互。本教程“js全面基础与提速”旨在为学习者提供一个全面了解和掌握JavaScript的基础,并逐步深入到AJAX和...

    《jQuery全面提速》

    自2006年发布以来,jQuery迅速成为最流行的前端开发框架之一。 #### 二、jQuery全面提速的意义与目的 在《jQuery全面提速》这本书中,作者赵增敏旨在帮助读者深入理解如何优化基于jQuery的应用程序,提高其性能...

    ASP提速的六种方法

    在 ASP.NET MVC 开发中,提高应用程序的性能是一件非常重要的事情。以下是六种可以提高 ASP 应用程序速度的方法。 应用程序缓存 应用程序缓存是一种非常有效的提高应用程序速度的方法。通过将经常访问的数据缓存在...

    网站访问速度优化提速方法

    - 学习使用jQuery等JavaScript库来简化DOM操作,提高开发效率。 - 图片元素使用`&lt;img&gt;`标签时,应设置`title`和`alt`属性;`&lt;head&gt;`标签中包含`title`、`keywords`和`description`等元信息。 - 开启GZIP压缩功能...

    0.1秒的价值!浅谈Web前端页面提速问题

    - 合并CSS与JavaScript文件:将多个样式表和脚本合并为一个文件,降低网络请求次数。但要注意,合并后公共文件的缓存问题。 - Base64编码图片:小图片可直接编码入HTML,减少请求,但可能导致文件体积增大,不适合...

    jquery全面提速

    《jQuery全面提速》源代码是针对JavaScript库jQuery的学习资源,旨在帮助开发者深入理解jQuery的内部工作原理,并通过优化技巧提升其在项目中的运行效率。jQuery以其简洁的API和强大的功能深受开发者喜爱,但随着Web...

    前端工程师手册.pdf

    前端工程师手册.pdf 本文档是前端工程师的必备手册,涵盖...本文档涵盖了前端开发的方方面面,涵盖了从基础知识到进阶知识、从 JavaScript 到 CSS、HTML 等多个方面的知识点,为前端工程师提供了一个系统的知识体系。

    前端开发与小程序面试题目.pdf

    前端开发是互联网行业中至关重要的一环,涉及到用户与应用程序的交互体验。以下是一些常见的前端面试题目及其解答,旨在考察面试者的理论知识、实践经验以及解决问题的能力。 1. 响应式布局:响应式布局是确保网站...

    前端程序员必须知道的高性能Javascript知识

    在当今的前端开发领域,JavaScript作为全栈开发的核心语言之一,在浏览器、移动端以及服务器端均有着广泛的运用。掌握高性能的JavaScript编写技巧,对于前端程序员来说至关重要。本文将详细介绍在编写高性能...

    《高性能网站建设指南》-- 想网站打开速度快,必看。

    在《高性能网站建设指南》中,作者给出了14条具体的优化原则,每一条原则都配以范例佐证,并提供了在线支持。《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip...

    基于微信小程序的点餐系统 (1).pdf

    微信小程序点餐系统的设计和开发,是信息技术领域内移动互联网应用发展的一个分支,随着智能手机的普及和移动网络的提速,这一领域正迅速发展。微信小程序,作为一种新兴的轻量级应用程序,因其便捷性、无需下载安装...

    黎科峰-布道师-《终端减负,管道加速:百度云端一体为Web App提速》

    百度作为中国的互联网公司,通过其云端一体开发平台,为开发者提供了云端切分机制。开发者可以根据任务的时延要求和计算量来决定任务的处理位置,将计算密集型的任务放在云端处理,而实时性要求高的任务则保留在本地...

    VsCode新建VueJs项目的详细步骤

    在现代前端开发中,Vue.js 是一个流行的JavaScript框架,用于构建用户界面。VsCode(Visual Studio Code)是微软开发的一款轻量级且功能强大的代码编辑器,广泛用于各种开发环境中。本篇文章将详细介绍如何在VsCode...

    游戏音乐娱乐类网站源码-游戏公司开发响应式网页模板-支持移动端.zip

    面向数字娱乐市场的HTML网站源码,为开发提速。这份源码针对娱乐游戏音乐领域,提供即用型解决方案,减少从头开发的繁琐流程。精心设计的界面与用户交互元素,保证吸引目标用户群体。集成的音乐播放功能,提升用户...

    新产品,新希望.pdf

    3. Windows Mobile 6.5的发布和Gesture API:Windows Mobile 6.5发布了,带来了Gesture API和Widgets,Gesture API可以判断拖拽、缩放等功能,Widgets支持W3C标准,使用HTML和JavaScript开发。 4. 移动应用格局的...

    提高ios上click的响应速度

    FastClick是由FT Labs开发的一个轻量级JavaScript库,它的核心功能是检测并处理触摸结束事件,从而在用户单击后立即触发点击事件,避免了系统默认的300毫秒等待时间。这在移动Web应用中尤其重要,因为快速的交互反馈...

    MFC下好用的高速绘图控件-(Hight-Speed Charting)

    1. **多平台兼容**:除了MFC,TeeChart还支持.NET、Java、JavaScript等多种平台,便于跨平台开发。 2. **三维图表**:除了标准二维图表,还支持3D视图,使数据呈现更加立体直观。 3. **复杂图表组合**:可以将多种...

    traincheck.rar_WEB开发_ASP_

    【描述】中的"后台目录:manage"表明在项目中存在一个名为"manage"的管理界面或目录,用于维护和更新数据库,可能是第6次中国铁路大提速后的列车时刻数据。这提示我们,该系统可能根据实际的铁路运行情况进行了及时的...

Global site tag (gtag.js) - Google Analytics