第1章 JavaScript简史-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_18656/article/details/82086688

第一章，主要说了一下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>基本的面向对象：数据和操作数据的函数都封装得比较好。