`
xieyaxiong
  • 浏览: 41125 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

javascript最佳实践

 
阅读更多

javascript最佳实践


 随着简单的网站成长为更加复杂的web应用,web开发的世界充满了各种关于最新技术和开发方法的信息。 javascript,它从大量的研究和推断中获益。javascript的最佳实践分类成若干类,并在开发过程的不同点上进行处理。

 

 

 

 

1:可维护性

 

/**
 * 可维护性
 * 
 * 1:什么是可维护的代码:
 *  可理解性、直观性、可适应性、可扩展性、可高度性。 
 * 2:代码约定:
 *  变量和函数命名、变量类型透明
 */

 

 

 

2:松散耦合

 

/**
 * 松散耦合
 * 
 * 1:解耦HTML/JavaScript 
 * 
 * //使用了<script>的紧密耦合的HTML/JavaScript -->
 * <script type="text/javascript">
 * 		document.write("Hello world!");
 * </script>
 * 
 * //使用事件处理程序属性值的紧密耦合的  HTML/JavaScript -->
 * <input type="button" value="Click Me" onclick="doSomething()" />
 * 
 * //将HTML紧密耦合到JavaScript
 * function insertMessage(msg){
 * 	 var container=document.getElementById("container");
 * 	 container.innerHTML="<div class=\"msg\">....</dvi>";
 * }
 * 
 * //CSS对JavaScript的紧密耦合
 * element.style.color="red";
 * element.style.backgroundColor="blue";
 * 
 * //CSS对JavaScript的松散耦合
 * element.className="edit";
 */

/**
 * 解耦应用逻辑/事件处理程序 
 * 
 * 每个web应用一般都有相当多的事件处理程序,监听着无数不同的事件。然而,很少有能仔细得将应用逻辑从事件处理程序分享的。
 */
function handleKeyPress(event){
	if(event.keyCode==13){
		var target=EventUtil.getTarget(event);
		var value=5 * parseInt(target.value);
		if(value>10){
			document.getElementById("error-msg").style.display="block";
		}
	}
}

/**
 * 较好的方法是将应用逻辑和事件处理程序相分离,这样两者分别处理各自的东西。一个事件处理程序应该从事件对象中提取相关信息,
 * 并将这些信息传送到处理应用逻辑的某个方法中。 例如,前面的代码可以被重写为:
 */
function validateValue(value){
	value=5* parseInt(value);
	if(value>10){
		document.getElementById("error-msg").style.display="block";
	}
}

function handleKeyPress(event){
	if(event.keyCode==13){
		var target=EventUtil.getTarget(event);
		validateValue(target.value);
	}
}

 

 

 

3:编程实践

 

3.1:尊重对象的所有权

/**
 * 尊重对象的所有权
 * 
 * 在企业环境中最重要的编程实践就是尊重对象所有权,它的意思是你不能修改不属于你的对象。
 * 简单地说:如果你不负责维护某个对象、它的对象或者它的方法,那么你就不能对它们进行修改。更具体地说:
 * 不要为实例或原型添加属性。
 * 不要为实例或原型添加方法;
 * 不要重定义已存在的方法。 
 */

 

 

3.2:避免全局量

/**
 *避免全局量
 * 
 * 与尊重对象所有权密切相关的是尽可能避免全局变量和函数。这也关系到创建一个脚本执行的致和可维护的环境。
 * 最多创建一个全局变量,让其他对象和函数存在其中。 
 */
//两个全局量——避免 !
var name="Nicholas";
function sayName(){
	alert(name);
}

/**
 *这段代码包含了两个全局量:变量name和函数sayName().其实可以创建一个包含两者的对象。 
 */
var MyApplication={
	name:"Nicholas",
	sayName:function(){
		alert(this.name);
	}
}

 

 

3.3:避免与null进行比较

/**
 *避免与null进行比较 
 * 
 * if仅仅检查该values是否为null.不有其他的值可以通过if语句,包括字条串、数字、它们会导致函数抛出错误。
 */

function sortArray(values){
	if(values!=null){        //避免!
		values.sort(comparator);
	}
}

/**
 * values参数应该是一个数组,那么就要检查它是不是一个数组,而不是检查它是否非null.函数按照正面的方式修改会更加合适 
 */
function sortArray(values){
	if(values instanceof Array){        //推荐
		values.sort(somparator);
	}
}

 

 

3.4:使用常量

/**
 *使用常量 
 * 尽管javascript没有常量的正式概念,但它还是很有用的。这种将数据从应用逻辑分离出来的思想,
 * 可以在不冒引入错误的风险的同时,就改变数据。 
 */
function validate(value){
	if(!value){
		alert("Invalid value!");
		location.href="/erros/invalid.php";
	}
}

/**
 *将应用逻辑与数据修改隔离开 
 */
var Constants={
	INVALID_VALUE_MSG:"Invalid value!",
	INVALID_VALUE_URL:"/errors/invalid.php"
};
function validate(value){
	if(!value){
		alert(Constants.INVALID_VALUE_MSG);
		location.href=Constants.INVALID_VALUE_URL;
	}
}

 

 

 

 

 

4:性能

4.1:注意作用域

/**
 * 注意作用域 
 *  随着作用域链中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加。访问全局变量总是要比访问局部变量慢,
 * 因为需要遍历作用域链。只要能减少花费在作用域上的时间,就能增加脚本的整体性能。 
 */

/**
 *避免全局查找
 * 可能优化脚本性能最重要的就是注意全局查找。使用全局变量和函数肯定要比局部的开销更大,因为要涉及作用域链上的查找。 
 */
function updateUI(){
	var imgs=document.getElementsByClassName("img");
	for(var i=0,len=imgs.length;i<len;i++){
		imgs[i].title=document.title+" image"+i;
	}
	var msg=document.getElementById("msg");
	msg.innerHTML="Update complete.";
}

/**
 *上面函数可能看上去完全正常,但是它包含了三个对于全局document对象的引用。如果在页面上有多个图片,
 * 那么for循环中document引用就会被执行多次甚至上百次,每次都会要进行作用域链查找。能过创建一个指向document对象的局部变量,
 * 就可以通过限制一次全局查找来改进这个函数的性能。 
 */
function updateUI(){
	var doc=document;
	var imgs=doc.getElementsByClassName("img");
	for(var i=0,len=imgs.length;i<len;i++){
		imgs[i].title=doc.title+" image "+i;
	}
	
	var msg=doc.getElementById("msg");
	msg.innerHTML="Update complete";
}

/**
 * 避免with语句
 * 在性能要的地方必须避免使用with语句。和函数类似,with语句会创建自己的作用域,因此会增加其中执行的代码的作用域链的长度。
 * 由于额外的作用域链查找,在with语句中执行的代码肯定会比外面执行的代码要慢。 
 */

 

4.2:多个变量声明

/**
 * 多个变量声明
 * 很多开发人员都容易创建很多语句,那就是多个变量的声明。很容易看到代码中由很多个var语句来声明多个变量,如下所示 
 */
var count=5;
var color="blue";
var values=[1,2,3];
var now=new Date();

/**
 * 在强类型语言中,不同的数据类型的变量必须在不同的语句中声明。然而,在js中所有的变量都可以使用单个var语句来声明。 
 */
var count=5,color="blue",values=[1,2,3],now=new Date();

 

 

4.3:插入迭代值

/**
 *插入迭代值 
 */
var name=values[i];
i++;
/**
 *尽可能合并语句 
 */
var name=values[i++];

 

 

4.4:使用数组和对象字面量

/**
 *使用数组和对象字面量 
 */
//用4个语句创建和初始化数组——浪费
var values=new Array();
values[0]=123;
values[1]=456;
values[2]=789;

//用4个语句创建和初始化对象——浪费
var person=new Object();
person.name="Nicholas";
person.age=29;
person.sayName=function(){
	alert(this.name);
}

/**
 *转换成使用字面量的形式。 
 */
var values=[123,456,789];

var person={
	name:"Nicholas",
	age:29,
	sayName:function(){
		alert(this.name);
	}
}

 

 

 

 

 

 

5:优化DOM交互

 

/*
 * 优化DOM交互
 * 
 * 
 */

/**
 *最小化现场更新
 *  每一个更改,不管是插入单个字符,还是移除整个片段,都是一个性能惩罚,浏览器要重新计算无数尺寸以进行更新。
 */
var list=document.getElementById("myList");
for(var i=0;i<10;i++){
	var item=document.createElement("li");
	list.appendChild(item);
	item.appendChild(document.createTextNode("Item"+i));
}


/**
 *使用文档碎片来构建DOM结构,接着将其添加到List元素中。这个方式避免了现场更新和页面闪烁问题。 
 */
var list=document.getElementById("myList");
var fragment=document.createDocumentFragment();

for(var i=0;i<10;i++){
	var item=document.createElement("li");
	fragment.appendChild(item);
	item.appendChild(document.createTextNode("Item "+i));
}
list.appenChild(fragment);


/**
 *使用innerHTML要比使用标准DOM方法创建同样的DOM结构快得多。当把innerHTML设置为某个值时,后台会创建一个HTML解析器,
 * 然后使用内部的DOM调用来创建DOM结构,而非基于JavaScript的DOM调用 。由于内部方法是编译好的而非解释执行的,
 * 所以执行快得多。 
 */
var list=document.getElementById("myList");
var html="";

for(var i=0;i<10;i++){
	html+="<li>Item "+i+"</li>";
}
list.innerHTML=html;

 

 

 

 

 

 

6:部署

/**
 * 部署
 * 
 * 构建过程 :
 * 你写的代码不应该原封不动地放入浏览器中,理由如下所示。
 * 
 *  知识产权问题—— 如果把带有完整注释的代码放到线上,那别人就更容易知道你的意图,对它再利用,并且可能找到安全漏洞。
 *  文件大小——书写代码要保证容易阅读,才能更好地维护,但是这对于性能是不利的。浏览喊叫并不能从额外的空白或者是冗长的函数名和变量名中获得什么好处。
 *  代码组织 ——组织代码要考虑到可维护性并不一定是传送给浏览器的最好方式 。
 * 
 * 构建过程始于在源控制中定义用于存储文件的逻辑结构。最好避免使用一个文件存放所有的javaScript,遵循以下面向对象语言中典型模式
 * 将每个对象或自定义类型分别放入其单独的文件中。这样可以确保每个文件包含最少量的代码,使其在不引入错误的情况下更容易修改。
 * 
 * 记住代码分离成多个文件只是为了提高可维护性,并非为了部署。要进行部署的时候,需要将这些源代码合并为一个或几个归并文件。。
 * 推荐Web应用中尽可能使用最少的javascript文件,是因为http请求是web中的主要性能瓶颈之一。通过<script>标记引用javascript
 * 文件是一个阻塞操作,当代码下载并运行的时候会停止其他所有的下载。因此,尽量从逻辑上将javascript代码分组成部署文件。
 *  
 * 
 * 
 * 验证:
 * 
 * 尽管现在出现了一些可以理解并支持javascript的IDE,大多数开发人员还是要在浏览器中运行代码以检查其语法 。这种方法有一些问题。
 * 首先,验证过程 以自动化或者不同系统间直接移植。第二,除了语法错误外,很多问题只有在执行代码的时候才会遇到,
 * 这给错误留下了空间;有些工具可以帮助确定javascript代码中潜在的问题,其中最著名的就是Douglas Crockford的JSLint
 * 	JSLint可以查找javascript代码中的就去错误以及常见的编码错误。它可以发掘一些潜在的问题,如下所示:
 * 1:eval()的使用
 * 2:未声明变量的使用;
 * 3:遗漏的分号;
 * 4:不恰当的换行 ;
 * 5:错误的逗号使用;
 * 6:语句周围遗漏的括号 ;
 * 7:switch分支语句中遗漏的break;
 * 8: 重复声明的变量;
 * 9:with的使用;
 * 10:错误使用的等号(替代了双等号或三等号);
 * 11:无法到达的代码。
 * 
 * 
 * 
 * 
 * 
 *  压缩
 * 
 * 谈及javascript文件压缩,其实在讨论两个东西:代码长度和配重。
 * 代码长度指的是浏览器的所需解析的字节数,配重指的是实际从服务器传送到浏览器的字节数。
 * 在web开发的早期,这两个数字几乎是一样的,因为从服务器端到客户端原封 不动地传递了源文件。而在今天的web上,这两者很少相等。
 * 
 * 1:文件压缩
 * 注释、额外的空白、以及长长的变量名和函数名虽然提高 了可读性,但却是传送给浏览器时不必要的字节。
 * javascript有不少压缩工具可用,其中最优秀的是YUI.http://developer.yahoo.com/yui/compressor/.
 * 
 * 2:http压缩
 * 配重指的是实际从服务器传送到浏览器的字节数。因为现在的服务器和浏览器都有压缩功能,这个字节数不一定和代码长度一样。
 * 所有的五大web浏览器都支持对所接收到的资源进行客户端压缩。这样服务器端 可以使用服务器端相关功能来压缩javascript文件。
 * 一个指定了文件使用了给定格式进行了压缩的http头包含在了服务器响应中。接着浏览器会查看该http头确定文件是否已被压缩,
 * 然后使用合适的格式进行压缩。结果是和原来的代码相比在风络中传递的字节数量大大减少了。
 */

 

 

分享到:
评论

相关推荐

    javascript 最佳实践

    《JavaScript最佳实践:提升代码质量和效率的指南》 在当今高度数字化的世界中,JavaScript作为Web开发的核心语言之一,其重要性不言而喻。然而,随着项目规模的扩大和技术复杂性的增加,遵循良好的编程习惯变得至...

    JavaScript 最佳实践:帮你提升代码质量

     在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们。准备好去升级你的代码吧!  1. 避免对全局作用域的污染  声明变量是一件很有趣的事情。有时候即使你不想...

    Lecture_8_JavaScript最佳实践1

    JavaScript最佳实践是优化网页中JavaScript使用的一套通用方法,旨在提高代码质量、可维护性和兼容性。遵循这些实践,开发者可以构建出更加健壮、高效且易于理解的代码。 一、分离关注点(行为层与结构/内容和表现...

    15条JavaScript最佳实践小结

    本文档整理大部分公认的、或者少有争议的JavaScript良好书写规范(Best Practice)。一些显而易见的常识就不再论述(比如要用对象支持识别判断,而不是浏览器识别判断;比如不要嵌套太深)。条目顺序按重要级粗略的...

    worldwindjava源码-JSBestPractices:来自瑞士最成功网站的Javascript最佳实践

    最佳实践 - v.ES6 任何组织中最佳实践的黄金法则是Monkey see。 猴子做。 最佳实践规则一 小东西出汗。 要准确。 迂腐。 要求你做的每一件事都绝对完美。 来自你自己,也来自他人。 你不会到达那里,但如果你不决心...

    bestpractice.js:JavaScript 最佳实践

    以上是"bestpractice.js"项目可能涵盖的一些关键JavaScript最佳实践。遵循这些准则,可以显著提高代码质量,降低维护成本,同时提升开发效率。通过不断学习和实践,开发者可以逐步掌握这些技巧,编写出更加健壮和...

    web前端开发最佳实践

    #### 四、JavaScript最佳实践 - **高维护性的JavaScript**:在这一章节中,作者深入分析了如何编写易于维护的JavaScript代码。内容包括函数式编程思想、模块化开发模式等高级话题,以及如何利用ES6+新特性来改进...

    一系列JavaScript项目的最佳实践

    在JavaScript开发领域,最佳实践是确保代码质量、可维护性和团队协作效率的关键。"一系列JavaScript项目的最佳实践"这个主题涵盖了从项目结构、编码规范到测试和部署等多个方面。以下是一些核心的知识点: 1. **...

    加载 Javascript 最佳实践

    本文将详细介绍如何根据Yahoo的最佳实践来优化JavaScript的加载,以及随着浏览器技术的发展,我们有哪些新的方法可以选择。 首先,我们回顾一下Yahoo在2008-2009年间提出的一些最佳实践,这些实践对于提高网站速度...

    javascript大全(包含教程、javascript特效以及技术讲座)

    “技术讲座”部分可能是由专家或业界人士分享的JavaScript最佳实践、设计模式、性能优化策略,甚至可能包含JavaScript框架(如React、Vue、Angular)或库(如jQuery、Lodash)的使用教程。这些内容将帮助你了解当前...

    JavaScript Best Practices & Tricks

    以下是一些关键的JavaScript最佳实践和技巧: 1. **命名空间和代码结构**:组织代码时,采用命名空间(Namespace)和包(Package)设计能有效避免命名冲突。例如,dojo、dojox和dijit是Dojo框架中的子项目。使用...

    High.Performance.JavaScript

    10. **最佳实践和未来趋势**:总结了当前的JavaScript最佳实践,以及未来的性能优化方向,如ES6的新特性如何影响性能。 通过阅读《高性能JavaScript》,开发者不仅可以学习到优化JavaScript代码的具体技术,还能...

    javascript大纲资料.txt

    7. JavaScript最佳实践: 代码组织是提高代码可读性和可维护性的关键,涉及到代码分割、模块化、组件化。性能优化对于提供良好的用户体验至关重要,包括减少HTTP请求、延迟加载、缓存策略等。安全性也是开发过程中不...

    JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)

    通过以上的知识点梳理,我们可以发现,JavaScript最佳实践的遵循不仅能够提升网站性能,还能增强用户的访问体验,同时确保代码的可维护性。《JavaScript DOM 编程艺术(第2版)》一书第五章所提及的内容为开发者提供...

Global site tag (gtag.js) - Google Analytics