javascript最佳实践,包含性能优化、编码实践等。

昨天跳过《javascript高级程序设计》前面几章书的内容,直接跳到最佳实践那一章,然而那一张说的又和我在实习的时候的实践,有很大的关系,因此我就觉得应该整理出来,分享一下,毕竟还是挺好的一部分。

一、编写可维护的代码

可维护的代码就有一些特征:

(1)可理解性

(2)直观性

(3)可适应性

(4)可拓展性

(5)可调试性

  二、代码约定

       1、可读性:代码缩进大小为4个空格

需要进行注释的地方:

(1)函数和方法:如函数的目的和用于完成任务所可能使用的算法。

(2)大段代码:解释这一大段代码是做什么的

(3)复杂的算法:解释算法是怎么做的

(4)Hack:解释特殊的hack片段是怎么做的。

2、变量和函数命名:(命名要规范)

(1)变量名为名词

(2)函数名为动词

(3)合乎逻辑,不应担心长度

(4)变量类型透明,比如通过初始化指定变量类型、通过匈牙利标记、通过指定类型的类型注释。

3、要注意松散耦合

(1)解耦HTML/javascript: 尽量避免在html页面中直接插入<script>标签

(2)解耦css/javascript:尽量避免直接操作style,可以通过动态更改样式类而非特定样式实现。这个还是比较重要的,直接更改类比批量更改样式好太多了

(3)解耦应用逻辑/事件处理程序:将应用逻辑和事件处理程序相分离。

应用和业务逻辑之间松散耦合的几条原则:

(1)勿将event对象传给其他方法,只传来自event对象中所需的数据;

(2)任何可以在应用层面的动作,都应该可以在不执行任何事件处理程序的情况下进行;

(3)任何事件处理程序都应该处理事件,然后将处理转交给应用逻辑。

三、编程实践:

                 1、尊重对象所有权:也就是不能修改不属于你的对象。就是不要为实例或原型添加属性和方法,不要重定义已存在的方法。

2、避免全局量: 就是要尽量避免全局变量和函数。创建一个命名空间,然后将其所需要的命名都写上去。

3、在类型检测时尽量避免与null进行比较,尽量使用values instanceof Array。

可以用以下技术,尽量避免与null比较的代码

(1)如果值为一个引用类型,使用instanceof操作符检查其构造函数

(2)如果值为一个基本类型,使用typeof检查其类型

(3)如果是对象包含某个特定的方法名,则使用typeof操作符确保指定名字的方法存在对象上。

4、尽量使用常量

比如:这样去引用。

5、将数据和使用它的逻辑进行分离所注意的值的类型:

(1)重复值,可以抽取出来为一个常量

(2)用户界面字符串:可以抽取出来方便国际化

(3)URLs:统一一个地方放所有的URL

(4)任何可能改变的值:抽取出来作为一个常量。

    四、性能问题

           

1、尽量避免全局查找,可以将元素声明为一个统一的变量

2、尽量避免with语句

3、考虑算法复杂度,尽量避免不必要的属性查找,尽量使用数字化的数组位置进行访问,也可以使用命名属性。

4、优化循环:可以使用从大到小的减值迭代方法;简化终止条件;简化循环体;使用后测试循环,也就是do-while循环

5、展开循环,使用duff装置。

6、避免双重解释。尽量避免某些代码求值或者创建新函数。尽量使用原生方法、switch方法和位运算符。

五、最小化语句数

          1、尽量多个变量声明。直接一个var值,然后用,隔开就好了。

2、插入迭代值,比如

3、使用数组和对象字面量

六、优化DOM交互

         1、最小化现场更新:就是更新的时候,将全部dom都写完,然后再统一渲染

2、尽量使用innerHTML

3、尽量使用事件代理:在文档级别附加事件处理程序或者将事件程序附加到更高层的地方负责多个目标的事件处理。

4、尽量避免使用htmlCollection,在下面几种情况会产生htmlCollection,进行getElementsByTagName()调用,获取元素的childNodes属性,获取元素的attributes属性,访问特殊属性:document.form,document.images.

     七、部署代码

          1、可以使用构建工具

2、进行验证,尽量发掘一些潜在的问题:

(1)eval()的使用

(2)未声明变量的使用

(3)遗漏的分号

(4)不恰当的换行

(5)错误的逗号使用

(6)语句周围遗漏的括号

(7)switch分支语句中遗漏的break;

(8)重复声明的变量

(9)with的使用

(10)错误使用的等号

(11)无法到达的代码

3、进行代码压缩:包括文件压缩和HTTP压缩。

总的来说,这一章将的主要是怎么将代码写好,写的更加优秀,里面说到的很多内容,我在实习的时候,都遇到过,平时没怎么注意,但是这确是很多人需要注意的地方。 

讲的很全面也很好。所以推荐大家尽量达到这些标准,让自己的代码更加优秀。因为当你入门之后,你就会考虑怎么样将自己的代码写的更好了。

       

时间: 2024-08-28 10:57:52

javascript最佳实践,包含性能优化、编码实践等。的相关文章

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特

学习javascript总结下来的性能优化的小知识(二)

上面一篇文章大致介绍了一些javascript当中使用的一些小技巧,当下这篇文章继续介绍一下内存管理.松散耦合.性能方面的一些小知识.为避免错误应该注意的点 内存管理 1.循环引用 如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露.内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放. 简单的循环引用: var el = document.getElementById('MyElement'); var func = function () { //

React 组件性能优化探索实践

转自:http://www.tuicool.com/articles/Ar6Zruq React本身就非常关注性能,其提供的虚拟DOM搭配上Diff算法,实现对DOM操作最小粒度的改变也是非常的高效.然而其组件渲染机制,也决定了在对组件进行更新时还可以进行更细致的优化. react组件渲染 react的组件渲染分为初始化渲染和更新渲染. 在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的): 但是当我们要更新某个子组件的时候,如下图的

jquery 性能优化与实践

一.使用jQuery对象缓存 1.所谓对象缓存,就是在使用jQuery对象时,先尽量使用变量保存对象名,然后,通过变量进行相应的方法操作. 2.无论是局部还是全局性的变量,为了避免与其他变量名称冲突,原则上,请尽量使用"$"符号进行命名: 3.如果在同一个DOM对象中有多个对象的操作,应尽量采用链接式的写法优化调用的代码: 二.选择器中含有特殊符号 1.<div id=“div#2#"></div>        $("#div\\#2\\#

学习javascript总结下来的性能优化的小知识(一)

一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解. 鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个属于自己的居所好好生存,所以平时会有意无意的去积累一些使用jQuerry的常用知识,特别是对于性能要求这一块,总是会想是不是有更好的方式来实现. 下面是我总结的一些小技巧,仅供参考.(我先会说一

JavaScript基础概念之----性能优化

一.加载与执行 body闭合标签之前,将所有的script标签放到页面的底部,能确保在脚本执行前页面已经完成渲染 合并脚本,页面中script标签越少,加载越快,响应也更迅速 使用多种无阻塞下载Javascript方法: 使用script标签的defer属性 使用动态创建script元素来下载并执行代码 使用XHR对象下载 Javascript代码并注入页面中 二.数据存取 访问字面量和局部变量的速度最快,相反,访问数组和对象相对较慢 由于局部变量存在于作用域的起始位置,因此访问局部变量比访问跨

C#程序性能优化

程序中我们每一丝动作都会加大程序运行的负担,当刚开始学习程序的时候常常不会去考虑程序运行的效率,大多数情况是为了实现功能,只要功能达到我想要的那么就算是达成了此项目标.当大部分功能的编码实现对我们来说都不是大的问题的时候,我们要提升就要考虑怎样把程序写的更加规范更加高效.怎样写的高效,我们不说整体架构的设计,仅仅分享一下C#自身程序中的一些会影响性能的点. 1.垃圾回收 .NET Framework垃圾回收的成本高,每次回收垃圾的时候调用最久未被使用的算法,找出最久未被使用的对象然后把这个对象分

前端性能优化 —— 起步篇(一)

简要:用户的体验是非常重要的环节.快速的显示网页,流畅的用户操作,丰富实时的页面功能,顺畅的动画展示,这些都是决定用户舒适体验的关键因素.把用户伺候舒服了,才会产生长久的依赖.我认为前端性能优化的实践应当是自动化的,智能化的,从代码编写到生产打包一整套流程都应该有一系列关于优化的应对方案. 我个人认为nodejs相对于我们前端来说作为代码管理工具的意义要大于作为后台服务器的意义,接下来我会根据我对于nodejs,gulp的实践情况和对<高性能网站建设指南>这本书的理解来总结我个人对前端性能优化

何俊谈阿里巴巴前端性能优化最佳实践-笔记

网站页面前端优化对网站核心页面基于Wise load的原则做定点性能优化,减少HTTP请求,减少DNS请求时间,减少页面DOM的数量,做一些图片.JS压缩等.减少HTTP请求方案:阿里开发了自动合并CSS和JS静态文件的框架,对于减少页面DNS数方面采用前端延迟加载框架,主要负责页面加载时只加载首屏,用户滚动页面时才加载二屏或三屏,这样对网站的性能包括流量都是很大的提升和节约. Web I/O(高并发)方面的优化,使用高性能Web服务器,另外在冬天页面处理上,尽可能地减少冬天页面所占比例,采用一