第1章 JavaScript简史

原创于 2011-06-22 18:09:36 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #浏览器 #Microsoft #HTML #Web #ViewUI

本文回顾了JavaScript的发展历程，探讨了早期浏览器兼容性和性能问题。通过示例代码展示了如何优化字符串拼接操作以减少内存占用并提高性能。同时，文章还介绍了面向对象编程在JavaScript中的应用。

第一章，主要说了一下JavaScript的发展史，像是看故事。从一开始发展到现在也着实不易呀。

早期的JS主要面临几个突出的问题，主要有：浏览器兼容问题，内存占用和性能问题。

对于浏览器兼容这个东西，做WEB的应该都会面临这样一个问题，而且是经常性的。看了本书，才知道是微软自己弄出的JScript惹的事儿。也不能怪人家，谁让人家是老大呢。如果NetScape骑在微软的头上，那应该就不会发生这样的事儿。唉，如果你是唐僧，早就让悟空给打死了。在早期人们为了处理这种问题经常写一段“浏览器嗅探”代码。也就是写一个分支代码来处理不同情况。如下：

function Redirect(){
var WhatBrowser;
var WhatVersion;
WhatBrowser = navigator.appName.toUpperCase();
WhatVersion = navigator.appVersion.toUpperCase();
if(WhatBrowser.indexOf("MICROSOFT")>0){
	if(WhatVersion.indexOf("3")>=0){
	top.location = "MainPage.html";
	}else{
	top.location = "BadVersion.html";
	}
}
if(WhatBrowser.indexOf("NETSCAPE")>=0){
	if(WhatVersion.indexOf("2")>=0){
	top.location = "MainPage.html";
	}else{
	top.location = "BadVersion.html";
	}
}
}

对于不兼容的实例我们就不做介绍了，因为发展到今天这些东西很少出现了。

下面我们说一下性能和内存问题。我们来看一个例子：

<html>
	<head>
		<title>Listing 1-2</title>
		<script>
		function badTest(){
		var startTime=new Date().valueOf();
		var s=" ";
		for(var i=0;i<10000;i++){
		s+="this is a test string";
		}
		alert(s);
		return new Date().valueOf()-startTime;
		}

		function goodTest(){
		var startTime =new Date().valueOf();
		var stringBuffer=new Array();
		for(var i=0;i<10000;i++){
		stringBuffer.push("this is a test string");
		}
		var s= stringBuffer.join("");
		return new Date().valueOf()-startTime;
		}

		function betterTest(){
		var startTime =new Date().valueOf();
		var stringBuffer = new Array();
		for(var i=0;i<10000;i++){
		stringBuffer[stringBuffer.length]="this is a test string";
		}
		var s =stringBuffer.join("");
		return new Date().valueOf()-startTime;
		}


		function doTest(){
		var htm ="";
		htm+= "Time badTest took: "+badTest() + "<br>";
		htm+= "Time goodTest took: "+goodTest() + "<br>";
		htm+= "Time betterTest took: "+betterTest();
		document.getElementById("result").innerHTML =htm;
		}
		</script>
	</head>
	<body>
		<a href = "javascript:void(0);" onClick="doTest();">Click here to test</a>
		<br><br>
		<div id= "result"> </div>
	</body>
</html>

第一个方法是构造一个string,使用+来完成字符串的拼接。
第二个方法是构造一个数组，用push()方法来为数组添加内容，再用join()来加空白字符串。
第三种方法也是构造一个数组，但他是用具体的数组下标来为其添加内容。
对于测试结果如附件的图片所示。

JS的面向对象特点

var answer=0;
function addNumbers(num1,num2){
	answer = num1+num2;
}
function subtractNumbers(num1,num2){
	answer = num1-num2;
}
function multiplyNumbers(num1,num2){
	answer = num1*num2;
}
function divideNumbers(num1,num2){
	if(num2!=0){
		answer = num1/num2;
	}else{
	answer=0;
	}
}

这段代码没什么技术上的错误。只是代码组织的不够好。在全局作用域里，answer变量代码味太浓，而且每个函数都是孤立的。
都是在全局作用域里。与之对比，我们看看用更加面向对象的方式重写代码会怎么样：

function NumberFunctions(){
	var answer=0;
}
NuberFunctions.prototype.addNumbers=function(num1,num2){
	this.answer=num1+num2;
}
NuberFunctions.prototype.subtractNumbers=function(num1,num2){
	this.answer=num1-num2;
}
NuberFunctions.prototype.multiplyNumbers=function(num1,num2){
	this.answer=num1*num2;
}
NuberFunctions.prototype.divideNumbers=function(num1,num2){
if(num2!=0){
	this.answer=num1/num2;
}else{
	answer=0;
}
}
NumberFunctions.prototype.toString=function(){
	return this.answer;
}

var nf=new NumberFunctions();
nf.addNumbers(2,3);
alert(nf);

这个版本的代码有如下几个优点。
1>没有全局作用域的污染，因为有NumberFunction函数。对于answer变量来说，这最重要。
因为它是使用var关键字声明的，因此就不能从类的外部访问，只有NumberFunction的函数可以修改它。
2>所有函数实际上都是Numberfunction类的成员，因此构造了一个清晰的关系。
3>基本的面向对象：数据和操作数据的函数都封装得比较好。