10 个十分难得的 javascript 开发经验
Javascript 的很多扩展的特性是的它变得更加的犀利, 同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站。
尽管很多的开发人员都乐于颂扬 javascript,但是仍旧有人看到它的阴暗面。
使用很多 javascript 代码的 web 页面会加载很慢,过多的使用 javascript 使得网页丑陋和拖沓。很快如何有效地使用 javascript 成为一个非常火热的话题。
这里让我们列出 10 个最佳 javascript 实践,帮助你有效地使用 javascript。
1. 尽可能的保持代码简洁
可能大家都听到过了N遍这个代码简洁问题了。作为一个开发人员你可能在你的代码开发过程中使用了很多次,但千万不要在 js 开发中忘记这点。
- 尽量在开发模式中添加注释和空格,这样保持代码的可读性
- 在发布到产品环境前请将空格和注释都删除,并且尽量缩写变量和方法名
- 使用第三方工具帮助你实现压缩 javascript。
2. 思考后再修改 prototypes
添加新的属性到对象 prototype 中是导致脚本出错的常见原因。
yourObject.prototype.anotherFunction = ‘Hello’;
yourObject.prototype.anotherMethod = function () { … };
在上面代码中,所有的变量都会被影响,因为他们都继承于 yourObject
。这样的使用会导致意想不到的行为。所以建议在使用完后删除类似的修改。
yourObject.prototype.anotherFunction = ‘Hello’;
yourObject.prototype.anotherMethod = function () { … };
test.anotherMethod();
delete yourObject.prototype.anotherFunction = ‘Hello’;
delete yourObject.prototype.anotherMethod = function () { … };
3. Debug Javascript 代码
即使最好的开发人员都会犯错。为了最大化的减少类似错误,请在你的 debugger 中运行你的代码,确认你没有遇到任何细微的错误
4. 避免 Eval
你的 JS 在没有 eval
方法的时候也可以很好的工作。eval
允许访问 javascript 编译器。如果一个字符串作为参数传递到 eval
,那么它的结果可以被执行。
这会很大的降低代码的性能。尽量避免在产品环境中使用 eval
。
5. 最小化 DOM 访问
DOM 是最复杂的 API,会使得代码执行过程变慢。有时候 web 页面可能没有加载或者加载不完整。最好避免 DOM。
6. 在使用 javascript 类库之前先学习 javascript
互联网充斥着很多的 javascript 类库,很多程序员都往往使用 js 类库而不理解负面影响。强烈建议你在使用第三方类库之前学习基本的 JS 代码,否则,你就准备着倒霉吧。
7. 不要用 "SetTimeOut" 和 "Setinterval" 方法来作为 "Eval" 的备选
setTimeOut( "document.getID('value')", 3000);
在以上代码中 document.getID('value')
在 setTimeOut
方法中被作为字符串来处理。 这类似于 eval
方法,在每个代码执行中来执行一个字符串,因此会降低性能,因此,建议在这些方法中传递一个方法。
setTimeOut(yourFunction, 3000);
8. [] 比 new Array(); 更好
一个常犯的错误在于使用当需要数组的时候使用一个对象或者该使用对象的时候使用一个数组。但是使用原则很简单:
“当属性名称是小的连续整数,你应该使用数组。否则,使用一个对象” - Douglas Crockford, JavaScript: Good Parts 的作者.
建议:
var a = ['1A','2B'];
避免:
var a = new Array();
a[0] = "1A";
a[1] = "2B";
9. 尽量不要多次使用 var
在初始每一个变量的时候,程序员都习惯使用 var
关键字。相反,建议你使用逗号来避免多余的关键字,并且减少代码体积。 如下:
var variableOne = ‘string 1’,
variableTwo = ‘string 2’,
variableThree = ‘string 3’;
10. 不要忽略分号 ";"
这往往是大家花费数个小时进行 debug 的原因之一。
我很确信你肯定也在其它的文章中阅读过以上相关的内容,但是大家可能往往都忽略了很多基本的规则。 你是不是也曾经忽略过分号。是不是也遇到过 eval
关键字问题导致性能问题?
希望大家能够喜欢,谢谢!
11. 尽量把DOM操作和数据操作分开
尽量不要在循环DOM获取数据的同时,在同一个循环里去处理数据,然后又在同一个循环里操作DOM把处理好的数据渲染出来,这样看起来是节省了两遍循环,其实会把数据的获取、数据的处理、数据的渲染 三个过程的逻辑紧密耦合在一起,为后期维护、扩展埋下巨大的麻烦。
正确的做法应该是:
1、一个函数专门用来循环DOM,取一遍列表里面的数据,输出数据;
2、一个函数专门接收需要处理的数据,循环数据处理一遍,输出数据;
3、一个函数专门接收处理后的数据,循环一遍DOM,把处理后的数据渲染到DOM里去;
任何程序,其基本流程不外乎为三个: 输入数据、处理数据、输出数据,这三个流程必须分开
前端降低耦合的天条:读取数据、处理数据、输出数据三大逻辑必须分离,只要性能、可维护性、开发成本 三者能平衡,哪怕代价是牺牲一些性能,也是值得的。
12. 尽可能减少全局变量的使用
1、尽量以传参的方式来输入数据,避免硬编码;
2、如果必须要用全局变量,要记得命名空间;
3、尽量使用模块化的方式来组织代码,一个函数只执行一个功能;
13.新手在理解复用和解耦概念时,容易陷入的误区
软件工程中的复用,是指软件模块上的复用,而不是代码和语句块上的复用,新手最容易陷入的“复用”陷阱,有两个:
1、在一个循环中塞入很多东西,感觉自己“复用”了这个循环,节省了几个循环,所以又“复用”又提升了代码效率。
一个循环里面干了那么多事情,又是读取数据,又是处理数据,又是渲染数据,省了几个循环,多节省啊!但这就是导致强耦合作死的开始。
说到函数的复用,新手又开始陷入另外一种陷阱:
2、在一个函数中,由于几个处理逻辑流程相差不大,于是就在一个函数中塞入尽可能多的流程逻辑,用参数来区别不同的流程。
这种本质上还是代码语句块上的复用,也是强耦合,后期也会很麻烦,不利于扩展和复用,而且对性能的好处极其有限。
复用,一定要记得:是软件模块上的复用,至少是函数功能级别上的复用,代码语句块上的复用,没有任何意义。
另外,函数不是随便写的,既然要引入工程化的工作流来开发软件,那函数、逻辑、模块肯定是要划分层分级的,不同层级的函数,其逻辑粒度不同。
低阶级的函数(底层函数):逻辑必须足够单纯,功能上必须保持极细的粒度,性能上必须保证尽可能高效的运行,以便能构建足够个性化、高效率的高阶函数。
高阶函数:高阶函数是由低阶级的函数构建而成的,是为更高层的模块和业务提供服务的,必须要综合考虑 函数的运行效率、开发效率(复用)、可扩展性、可维护性、开发成本等更高层级方面的需求,来满足更高层级对于下层函数的需求。
业务模块:使用高阶函数或低级别的业务模块,根据本模块的业务逻辑,来构建模块,然后从而一层层构建起整个软件模块,完成整个软件工程。
不是性能决定生死的项目,在逻辑划分上,要以解耦+复用为第一原则,尽可能让逻辑变得 低耦合 + 高复用,逻辑的分层,本质上也是为了低耦合、高复用。
软件工程,主要研究的具体内容,就是软件开发中:函数逻辑如何组织,函数层次怎么划分,模块如何划分,如何互通和兼容,函数与函数、模块与模块、层级与层级之间的关系应该遵循什么样的原则和范式,才能保证整个工程开发低成本、开发效率高、性能满足要求、容易扩展、容易维护、安全性满足要求,功能上满足业务需求。
3、谨记所谓 "好莱坞原则",在分层结构中,上层依赖于下层,依赖必须是单向的。即:低层模块(或者叫公共模块更容易理解)不得”实现高层模块(或者叫具体业务模块)中声明并被高层模块调用的接口“,你不能将父类型放在上层,而让下层(子类)依赖于上层。
4、如果想了解更多关于软件架构方面的知识,可以搜索“面向对象类关系的设计原则” 和 “软件架构设计的原则”
14、面向对象只是复用和解耦逻辑的一种方式,有自己的适用场景和范围,不是每个项目,每个组件都要使用面向对象的思考方式来编程,有些组件可以写成对象,有些不能写成对象。
10 个十分难得的 javascript 开发经验的更多相关文章
- 10个最好的 JavaScript 动画库和开发框架
虽然 CSS3 动画功能能够让我们以简单轻松的方式实现动画效果,但是浏览器兼容性问题让人头疼.不过不用担心,我们还有另外的武器——JavaScript,它同样可以帮助你实现各种各样的动画效果,而且借助 ...
- JavaScript 开发经验整理
前言 今年接触了一个B/S的项目,总结了一些JavaScript开发经验,整理些有用的内容与大家分享. 本文会持续更新... 1.实现代码访问的控制 随着项目JavaScript代码库扩大,本应被控制 ...
- 10个强大的Javascript表单验证插件推荐
创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...
- 10 个优秀的JavaScript开发框架
阅读目录 TouchStone.js Meteor Knockout Enyo.js Reactive-coffee ExtJS Aurajs Cappuccino canjs Feathersjs ...
- 10个优秀的JavaScript Web UI库/框架推荐
在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率. 本文为你带来10款非常优秀的基于JavaScript的Web U ...
- 10 款强大的JavaScript图表图形插件推荐
转自:http://www.iteye.com/news/24535 网上有很多用于绘制图表图形的免费JavaScript插件和图表库,这类插件大量出现的原因,一是人们不再依赖于Flash,二是浏览器 ...
- 10分钟弄懂javascript数组
建议阅读时间 : 10分钟 主要内容:javascript数组的基本概念.属性.方法 新建数组: var arr01 = ["a","b","c&qu ...
- 【译】10个机器学习的JavaScript示例
原文地址:10 Machine Learning Examples in JavaScript 在过去的每一年,用于机器学习(Machine Learning)的库在变得越来越快和易用.一直以来Pyt ...
- 10个常见的JavaScript BUG
译者按: 安全起见,在开发中我基本不用==. 原文: 10 COMMON JAVASCRIPT BUGS AND HOW TO AVOID THEM 译者: Fundebug 为了保证可读性,本文采用 ...
随机推荐
- Number Sequence--hdu1005
Number Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- No enclosing instance of type test8 is accessible. Must qualify the allocation with an enclosing instance of type test8 (e.g. x.new A() where x is an
在编译一个例子时,结果编译时出现: No enclosing instance of type test8 is accessible. Must qualify the allocation wit ...
- QDataStream类参考(串行化数据,可设置低位高位,以及版本号),还有一个例子
QDataStream类提供了二进制数据到QIODevice的串行化. #include 所 有成员函数的列表. 公有成员 QDataStream () QDataStream ( QIODevice ...
- 使用ViewPager实现左右“无限”滑动的万年历
有时候就是这样,研究一个问题,一开始想到了一个觉得可行的方案,然后去尝试:尝试了很久.很多次,已经要放弃了,关掉电脑心里 想这个需求没办法实现:在去上厕所的路上突然想到了一个点子,第二天一试,尼玛,搞 ...
- java设计模式--结构型模式--适配器模式
适配器模式 概述 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适用性 1.你想使用一个已经存在的类,而它的接口不符合你的需 ...
- 【转】 Ubuntu下配置USB转串口及串口工具配置--不错
原文网址:http://blog.csdn.net/dreambegin/article/details/6985028 注意:默认情况下ubuntu已经安装了USB转串口驱动(pl2303).我的是 ...
- C++关于strcpy等函数的安全版本
如下程序: #include <iostream> using namespace std; int main() { ]; strcpy(ch1,"); } 在VS2012上面 ...
- POJ_Fibonacci POJ_3070(矩阵快速幂入门题,附上自己写的矩阵模板)
Fibonacci Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10521 Accepted: 7477 Descri ...
- 链表的基本操作(Basic Operations on a Linked List)
链表可以进行如下操作: 创建新链表 增加新元素 遍历链表 打印链表 下面定义了对应以上操作的基本函数. 创建新链表 新链表创建之后里面并没有任何元素,我们要为数据在内存中分配节点,再将节点插入链表.由 ...
- 【CF689D Friends and Subsequences】二分搜索,区间查询
题意:给定两个整数序列a,b,将a,b对齐,问有多少个区间满足a的区间内最大值等于b的区间内最小值. 数据范围:区间长度n属于[1, 200000],序列中的元素在整型范围内 思路:枚举所有n*(n+ ...