javascript高级程序设计 -- 读书笔记（二）

javascript高级编程 -- 读书笔记（1）  :

http://blog.csdn.net/thc1987/archive/2011/05/13/6417361.aspx

 

  继承

继承机制的实现:
JavaScript实现继承机制从基类入手.
本地类和宿主类不能作为基类.

JavaScript实现继承不止一种方式。因为JavaScript中的继承机制并不是明确规定的，而是模仿实现的。

对象冒充：
function ClassA(sColor){
    this.color = sColor;
 this.sayColor = function(){
  alert(this.color);
 }
}

function ClassB(sColor,sName){
 this.newMethod = ClassA;
 this.newMethod(sColor);
 delete this.newMethod;

 this.name = sName;
 this.sayName = function(){
  alert(this.name);
 }
}
var objA = new ClassA("red");
var objB = new ClassB("blue","Jim");
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName();  // Jim
在ClassB中，
“this.newMethod = ClassA” 将newMethod指向ClassA
“this.newMethod(sColor);” 运行newMethod()方法，相当于在ClassB中填充了ClassA中的内容
“delete this.newMethod;”  最后把引用删除，这样ClassB中的内容就独立了。

对象冒充支持多重继承，即一个类可以继承多个类。
function ClassZ(){
 this.newMethod = ClassX; 
 this.newMethod();
 delete this.newMethod;

 this.newMethod = ClassY; 
 this.newMethod();
 delete this.newMethod;
}
如果ClassX和ClassY具有相同的属性和方法，则ClassY具有高优先级。

-----------------
call()方法：
例如：
 function sayColor(sPrefix,sSuffix){
 alert(sPrefix + this.color + sSuffix);
 }

var o = new Object;
o.color = "red";
sayColor.call(o,"The color is ", " not blue");
这里call()方法中的第一个参数o赋值给sayColor中的this，第二个，第三个参数是字符串，最后打印信息。

利用call()方法修改之前的继承方法，修改后如下：
function ClassA(sColor){
    this.color = sColor;
 this.sayColor = function(){
  alert(this.color);
 }
}

function ClassB(sColor,sName){
 //this.newMethod = ClassA;
 //this.newMethod(sColor);
 //delete this.newMethod;
 // 这里的this等于ClassB对象
 // 所以下面这句话就等于ClassB赋值了ClassA里面的内容
 ClassA.call(this,sColor);

 this.name = sName;
 this.sayName = function(){
  alert(this.name);
 }
}
var objA = new ClassA("red");
var objB = new ClassB("blue","Jim");
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName();  // Jim

----------------
apply()方法：
该方法有两个参数，用作this的对象和要传递给函数的参数的数组。
例如：
 function sayColor(sPrefix,sSuffix){
 alert(sPrefix + this.color + sSuffix);
 }

var o = new Object;
o.color = "red";
sayColor.apply(o,new Array("The color is "," not blue"));

实现继承
function ClassA(sColor){
    this.color = sColor;
 this.sayColor = function(){
  alert(this.color);
 }
}

function ClassB(sColor,sName){
 // 这里的this等于ClassB对象
 // 所以下面这句话就等于ClassB赋值了ClassA里面的内容
 ClassA.apply(this,new Array(sColor));

 this.name = sName;
 this.sayName = function(){
  alert(this.name);
 }
}
var objA = new ClassA("red");
var objB = new ClassB("blue","Jim");
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName();  // Jim

---------------------
原型链：
function ClassA(){}

ClassA.prototype.color = "red";
ClassA.prototype.sayColor = function(){
 alert(this.color);
}

function ClassB(){}

ClassB.prototype = new ClassA();

ClassB.prototype.name = "";
ClassB.prototype.sayName = function(){
 alert(this.name); 
}

var objA = new ClassA;
var objB = new ClassB;
objA.color = "red";
objB.color = "blue";
objB.name = "Jim";
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName();  // Jim

alert(objB instanceof ClassA); // true
alert(objB instanceof ClassB); // true
注意：子类的所有属性和方法都必须出现自prototype属性被赋值后，因为在它之前赋值的所有方法都会被删除。
因为prototype属性被替换成了新对象，添加了新方法的原始对象将被销毁。所以，为ClassB类添加name属性和sayName()方法。

--------------------
混合方式：
即混合使用对象冒充和原型链。因为原型链无法使用构造参数。

function ClassA(sColor){
 this.color = sColor;
}

ClassA.prototype.sayColor = function(){
 alert(this.color);
}

function ClassB(sColor, sName){
 ClassA.call(this, sColor); // 1
 this.name = sName;
}

ClassB.prototype = new ClassA(); // 2

ClassB.prototype.sayName = function(){
 alert(this.name);
}

var objA = new ClassA("red");
var objB = new ClassB("blue","Jim");
objA.sayColor(); // red
objB.sayColor(); // blue
objB.sayName(); // Jim
此例子中，代码1处，在ClassB的构造函数中，用对象冒充继承ClassA的sColor属性。
在代码2中用原型链继承ClassA类的方法。这种混合方式使用了原型链，所以instanceof运算符仍能运行。

===================
更实际的例子：
有个多边形类，它是父类，然后有个三角形类，是它的子类。设计如下：
// 多边形父类，iSides是边数
function Polygon(iSides){
 this.sides = iSides;
}

// 多边形的面积
Polygon.prototype.getArea = function(){
 // 返回0以便被子类覆盖
 return 0;
}

// 三角形类
function Triangle(iBase,iHeight){
 Polygon.call(this,3);
 this.base = iBase;
 this.height = iHeight;
}

Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function(){
 return 0.5*this.base * this.height;
}

var triangle = new Triangle(10,20);
alert(triangle.getArea());// 100

==================

浏览器中的JavaScript：

<script/>标签：
内部文件格式：略

外部文件格式：略

标签位置：
放在<head>中：
加载完页面主体后再被调用。

放在<body>中：
只要脚本所属的那部分页面被载入浏览器，脚本就会被执行。

XHTML中的演变：
type属性代替了language属性

CDATA：用于声明不应该被解析为标签的文本。如：> 会变成&gt;，<会变成&lt;，CDATA就避免了这种情况。
用法：
<script type="text/javascript">
<![CDATA[
 // javascript code.
]]></script>

============
SVG中的JavaScript：
略，可以参考相关SVG资料。

============

BOM

windows对象:

窗口操作:
moveBy(dx,dy) 
把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素.
dx为负值向左移动,dy为负值向上移动
moveTo(x,y)
移动浏览器窗口,使它的左上角位于用户屏幕的(x,y)处.
resizeBy(dx,dy)
相对于原来浏览器窗口,将宽度调整dx像素,高度调整dy像素
resizeTo(x,y)
把窗口的宽度调整到x,高度调整到y,不能用负数

 window.open("http://www.baidu.com","_blank","height=150,width=300,top=10,left=10,resizable=yes,scrollable=yes,toolbar=no,status=yes,location=no")

系统对话框:
alert();
confirm()
prompt()

时间间隔和暂停:
 setTimeout(fn,1000); 一秒后运行fn函数
 setInterval(fn,1000); 每隔一秒执行一次fn函数
 clearInterval(intervalId); 阻止某个intervalId

 例子:
  var i = 0;
  var max = 100;
  var intervalId = null;

  function incNum(){
 i++;
 if(i==100){
  clearInterval(intervalId);
 }
  }

 intervalId = setInterval(incNum,1000);

-------------
历史:
window.history.go(-1); history.back();
后退
window.history.go(1);  history.forward();
前进
<a href="javascript:history.go(-1)">back</a>

-------------
document对象:

alinkColor  激活链接的颜色
bgColor   页面背景色
fgColor   页面文本颜色
lastModified 最后修改页面的日期,是字符串
linkColor  链接的颜色
referrer  浏览器历史中后退一个位置的URL
title   title标签中的文本
URL    当前页面的URL
vlinkColor  访问过的链接的颜色

document集合:

anchors   页面中所有锚的集合   
applets   页面中所有applet集合
embeds   页面中所有嵌入式对象的集合
forms   页面中所有表单集合
images   页面中所有图像的集合
links   页面中所有链接的集合

-------------
location对象:

hash   返回URL中"#"后面的内容
host   服务器名字,如www.baidu.com
hostname  通常会等于host,有时候会省略www
href   当前载入页面完整的URL
pathname  URL主机名后部分
port   端口
protocol  协议,//前面的部分,http:,ftp:
search   执行get请求的URL中的问号(?)后面的部分

--------------
navigator对象:

appCodeName  浏览器代码名的字符串(如:Mozilla)
appName   官方浏览器名的字符串
appMinorVersion 额外版本信息的字符串
appVersion  浏览器版本信息的字符串
browserLanguage 浏览器或操作系统语言的字符串
cookieEnabled 是否启用cookie
cpuClass  cpu类别
javaEnabled() 是否启用Java
onLine   浏览器是否链接到Internet
platform  运行浏览器的计算机平台的字符串
plugins   安装在浏览器的插件数组
preference() 用于设置浏览器首选项的函数
systemLanguage 操作系统语言的字符串表示
taintEnabled() 说明是否启用了数据感染
userAgent  用户代理
userLanguage 操作系统语言

--------------
screen对象:

availheight  窗口可以使用的高度(像素)
aiailWidth  窗口可以使用的宽度(像素)
colorDepth  用户表示颜色的位数
height   屏幕的高度
width   屏幕的宽度

--------------

访问指定节点:

 getElementsByTagName("img")
 getElementsByName()
 getElementsById()

--------------
创建和操作节点:
createAttribute(name)
用给定的name创建特性节点
createComment(text)
创建包含文本text的注释节点
createDocumentFragment()
创建文档碎片节点
createElement(tagname)
创建标签名为tagname的元素
createTextNode(text)
创建包含文本text的文本节点

例如,要添加<p>hello world</p>

var p = document.createElement("p");
var text = document.createTextNode("hello world");
p.appendChild(text);
document.body.appendChild(p);

removeChild()
删除一个节点,将这个节点作为函数的返回值返回
var p = document.getElementsByTagName("p")[0];
document.body.removeChild(p);

replaceChild(newTag,oldTag);
newTag代替 oldTag

--------------
table方法:
<table>元素添加的内容:
  caption 指向<caption>元素
  tBodies <tbody>元素集合
  tFoot  指向<tFoot>元素
  tHead  指向<tHead>元素
  rows  表格中所有的行
  createTHead()   创建<thead>,并放入表格中
  createTFoot()   创建<tfoot>,并放入表格中
  createCaption()  创建<caption>,并放入表格中
  deleteTHead()   删除<thead>
  deleteTFoot()   删除<tfoot>
  deleteCaption()  删除<caption>
  deleteRow(position) 删除指定的行
  insertRow(position) 指定位置插入新的行

<tbody>元素添加的内容:
  rows     <tbody>中所有的行
  deleteRow(position) 删除指定的行
  insertRow(position) 指定位置插入新的行

<tr>元素添加的内容:
  cells     <tr>元素中所有的单元格
  deleteCell(position) 删除指定的单元格
  insertCell(position) 在指定位置上添加单元格

例子:
var table = document.createElement("table");
var tbody = document.createElement("tbody");

table.appendChild(tbody);
// 第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell,1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell,2,1"));
// 第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell,1,1"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell,2,1"));

document.body.appendChild(table);

================
正则表达式:
var s = "abdhsja";
var regex =  new RegExp("a");
alert(regex.test(s));

var regex = /asd/g
alert(regex.test("asdf")) // true
alert(regex.exec("adsf")) // asd
alert("vvvasdfasdf".search(regex)) // 3

var s = "1234 5678";
var regex = /(/d{4}) (/d{4})/;
var s2 = s.replace(regex,"$2 $1");
alert(s2) // 5678 1234

----------------
RegExp对象:

实例属性:
global  boolean值,表示是否设置全局
ignoreCase Boolean值,表示是否忽略大小写
lastIndex  整数,代表下次匹配将会从哪个字符位置开始(只有当使用exec()或test()函数才会填入,否则为0)
mutiline boolean值,表示多行模式是否匹配

静态属性:
input   $_ 最后用于匹配的字符串
lastMatch  $& 最后匹配的字符
lastParen  $+ 最后匹配分组
leftContext  $` 在上次匹配的前面的字串
multiline  $* 用于指定是否所有的表达式都是用多行模式的布尔值
rightContext $' 在上次匹配之后的字串

例子:
var s = "this has been a short, short summer";
var regex = /(s)hort/g;
regex.test(s);
alert(RegExp.input) // this has been a short, short summer
alert(RegExp.lastMatch) // short
alert(RegExp.lastParen) // s
alert(RegExp.leftContext) // this has been a
alert(RegExp.rightContext) // , short summer