第1章 JavaScript简史
第一章，主要说了一下JavaScript的发展史，像是看故事。从一开始发展到现在也着实不易呀。
早期的JS主要面临几个突出的问题，主要有：浏览器兼容问题，内存占用和性能问题。
对于浏览器兼容这个东西，做WEB的应该都会面临这样一个问题，而且是经常性的。看了本书，才知道是微软自己弄出的JScript惹的事儿。也不能怪人家，谁让人家是老大呢。如果NetScape骑在微软的头上，那应该就不会发生这样的事儿。唉，如果你是唐僧，早就让悟空给打死了。在早期人们为了处理这种问题经常写一段“浏览器嗅探”代码。也就是写一个分支代码来处理不同情况。如下：
对于不兼容的实例我们就不做介绍了，因为发展到今天这些东西很少出现了。
下面我们说一下性能和内存问题。我们来看一个例子：
第一个方法是构造一个string,使用+来完成字符串的拼接。
第二个方法是构造一个数组，用push()方法来为数组添加内容，再用join()来加空白字符串。
第三种方法也是构造一个数组，但他是用具体的数组下标来为其添加内容。
对于测试结果如附件的图片所示。
JS的面向对象特点
这段代码没什么技术上的错误。只是代码组织的不够好。在全局作用域里，answer变量代码味太浓，而且每个函数都是孤立的。
都是在全局作用域里。与之对比，我们看看用更加面向对象的方式重写代码会怎么样：
这个版本的代码有如下几个优点。
1>没有全局作用域的污染，因为有NumberFunction函数。对于answer变量来说，这最重要。
因为它是使用var关键字声明的，因此就不能从类的外部访问，只有NumberFunction的函数可以修改它。
2>所有函数实际上都是Numberfunction类的成员，因此构造了一个清晰的关系。
3>基本的面向对象：数据和操作数据的函数都封装得比较好。
早期的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>基本的面向对象：数据和操作数据的函数都封装得比较好。