标签：javascript   javascript最佳实践   javascript脚本压缩   javascript性能优化   

JavaScript 最佳实践

一：简介

        JavaScript已经成为web中不可或缺的一部分、相信绝大多数web如果禁用JavaScript、结果可想而知、甚至严重的直接导致整个网站瘫痪。

        但是个人觉得JavaScript已经是某些情况下必不可少的一部分了、JavaScript最佳实践也成为了在应用JavaScript的理想与现实之中寻找一种平衡。

        最佳实践的一些原则可以帮助我们理解JavaScript的精髓、帮助我们完善自己的程序设计和提高其健壮性。

二：关键之处

        JavaScript与DOM结合是一种非常强大的组合、可以轻而易举的改变网页的行为与显示、怎么样才是最佳实践？下面是最佳实践的一些准则。

        1.是否需要使用JavaScript：

        当想使用JavaScript来改变一个网页的行为时、首先要想到的是是否有必要这样做。而不是人云亦云的跟风。

        2.渐进增强（progressive enhancement）：

        从核心部分开始、即从内容开始、根据内容使用标记实现良好的结构；再逐步加强这些内容。增强的工作既可以使用CSS改变呈现效果、也可以使用DOM添加各种行为、避免使用DOM添加核心内容！应该在开始就让内容成为文档编写时期的核心组成部分。

        3.平稳退化（graceful degradation）：

        在正确使用JavaScript脚本的情况下、即使浏览器不支持JavaScript（这种现象几乎绝迹）或者在用户禁用浏览器执行JavaScript的功能也能正常浏览网站。也就意味着JavaScript是为了增强页面访问效果或者显示效果而存在、不参与核心功能（防止JavaScript被禁而废）。

        4.分离JavaScript：

        把网页的结构和内容与JavaScript脚本的动作行为分开、Java中常常强调的解耦思想类似。将相互间的影响降到最低。比如链接上添加单击事件、这其实已经是把网页的结构内容与JavaScript脚本糅合在一起了。我们可以将其分离开来、但是现实中很少有这样做、一是代码可读性下降、另一个是使得编码变得复杂、需要一些额外编码来实现、这就是一种理想与现实的差距、也可能是自己水平不够的原因。

        5.向后兼容

        确保网页中使用的JavaScript在老的浏览器中也能正常执行、不同浏览器之间或者浏览器版本之间的兼容性一直是一个让人很头疼的问题、但是随着技术的进步、这种现象也在逐渐好转。实现这一原则需要我们在使用JavaScript时需要考虑到其在各个浏览器、各个版本之间的兼容问题。

        6.性能考虑

    确定脚本执行的性能最优。比如尽可能的减少DOM访问的次数、合并可以归类的JavaScript脚本、压缩脚本（加快客户端下载数度、可以使用Uglify或者在线的JS压缩）等。

三：改进前章实例

        可以参照最佳实践来完善前面图片库的实例、不再一一叙述、给出完善后showPicture.js压缩前后的代码做个参考、完整代码在github上。

        压缩前：

/**
 * Attach onclick even on a link tag.
 */
function prepareGallery () {
	if (!document.getElementById) {return false}
	if (!document.getElementsByTagName) {return false}

	var imageGalleryNode = document.getElementById('imageGallery');
	if (!imageGalleryNode) {return false}

	var links = imageGalleryNode.getElementsByTagName("a");
	if (links.length > 0) {
		for (var i = links.length - 1; i >= 0; i--) {
			links[i].onclick = function (){
				/*
					if show picture work then stop a link active.
					a link will not work if return false.
				 */
				return !showPicture(this);
			}
		}
	}
}

/**
 * Show the clicked picture.
 * which picture is clicked.[description]
 * @return boolean if something is unexpected .
 */
function showPicture(whichPicture){
	var placeholder = document.getElementById('placeholder');
	if (!placeholder) {return false}
	if (placeholder.nodeName != "IMG") {return false}

	var source = whichPicture.getAttribute('href');
	placeholder.setAttribute('src', source);

	var description = document.getElementById('description');
	if (description) {
		var text = whichPicture.getAttribute('title') ? whichPicture.getAttribute('title') : "";
		var firstChildNode = description.firstChild;
		if (firstChildNode.nodeType == 3) {
			firstChildNode.nodeValue = text;
		}
	}
	return true;
}

/**
 * Multiple execute window.onload;
 */
function addEvent(fun){
	var oldFunction = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = fun;
	} else {
		window.onload = function () {
			oldFunction();
			fun();
		}
	}
}

addEvent(prepareGallery);

        压缩后：

function prepareGallery(){if(!document.getElementById||!document.getElementsByTagName)return!1;var a=document.getElementById("imageGallery");if(!a)return!1;a=a.getElementsByTagName("a");if(0<a.length)for(var b=a.length-1;0<=b;b--)a[b].onclick=function(){return showPicture(this)?!1:!0}}
function showPicture(a){var b=document.getElementById("placeholder");if(!b||"IMG"!=b.nodeName)return!1;var c=a.getAttribute("href");b.setAttribute("src",c);if(b=document.getElementById("description"))a=a.getAttribute("title")?a.getAttribute("title"):"",b=b.firstChild,3==b.nodeType&&(b.nodeValue=a);return!0}function addEvent(a){var b=window.onload;window.onload="function"!=typeof window.onload?a:function(){b();a()}}addEvent(prepareGallery);

JavaScript 最佳实践

标签：javascript   javascript最佳实践   javascript脚本压缩   javascript性能优化   

原文地址：http://blog.csdn.net/crave_shy/article/details/42675013