当前位置:首页 > 网络编程 > 编程语言与程序设计 > JavaScript DOM高级程序设计章节试读
出版社:人民邮电出版社
出版日期:2008-7
ISBN:9787115181091
作者:Jeffrey Sambells,Aaron Gustafson
页数:457页
《JavaScript DOM高级程序设计》的笔记-第一章 - 第一章
第一章
把行為從結構中分離出來。
Javascript應該遵循與CSS相同的分離規則。
不做版本檢測，使用能力檢測，通常也叫對象檢測，在執行代碼之前檢測某個腳本對象或方法是否存在，而不是依賴于你對那個瀏覽器具有哪些特性的了解
如果要檢測多個對象，可以使用邏輯操作符。
If(document.body && document.body.getElemengsByTagName){}
不必對每個函數與方法檢測，可以在開始進行一次檢測：
Var w3c = document.createElement && document.getElementsByTagName();
function example(){
If(!w3c) retutn;
}
不要使用javascript生成內容，應為搜索引擎的爬蟲(bot)和蜘蛛(spider)不會執行js代碼，則不會收錄
Javascript于法常見陷阱：
區分大小寫
單引號和雙引號在js中沒有特殊區別，都可用來創建字符串。建議在js中使用單引號，因為xhtml規范(http://www.w3.org/xhtml11)要求所有的xhtml屬性值都必須使用雙引號。對js用單引號，對html屬性用雙引號，會使混合兩者的代碼更清晰。
如：var html = ‘<h2 class = “a”>’;和var html = “<h2 class = \”a\”>”;
字符串中間不能包含強制換行符，因為換行符會被解釋為分號(;).
閉包是指內部函數即使在外部函數執行完成并終止后仍然可以訪問其外部函數的屬性。
閉包是一個屬性
詳見a.html
迭代對象：
var list = [1,2,3,4];
for(i = 0; i < list.lenght; i ++){
alert(list[i]);
}
for(i in list){
alert(list[i]);
}
這兩種的結果相同，但是對于類似數組而又不是數組的對象就有區別了
如：getElementsByTagName()返回的NamedNodeMap對象與數組類似但又不是數組且具有length屬性，可以向常規數組的使用length進行迭代。
但如果用in迭代，則循環還將包含NamedNodeMap對象的附加方法，要使用hasOwnProperty()判斷。
var all = document.body.getElementByTagName(‘*’);
for(i in all){
if(all.hasOwnProperty(i)) continue;
//對all[i]元素操作
}
a.html
<html>
<head>
<script src = "ADS.js"></script>
<script>
function initDiv(){
for(var i = 0 ; i <= 3 ; i ++){
var div = document.getElementById('div'+i);
ADS.addEvent(div,'click',function(){//不能達到目的
alert('my id is div'+i);
});
}
}
ADS.addEvent(window,'load',initDiv);
function initDiv2(){
for(var i = 4 ; i <= 6 ; i ++){
var div = document.getElementById('div'+i);
registerListener(div,i);
}
}
function registerListener(p_div,p_i){
ADS.addEvent(p_div,'click',function(){
alert('my id is div'+p_i);//可達到目的
});
}
ADS.addEvent(window,'load',initDiv2);
</script>
</head>
<body>
<ul class="c1">
<li id="div1">first</li>
<li id="div2">second</li>
<li id="div3">three</li>
</ul>
<ul class="c1">
<li id="div4">four</li>
<li id="div5">five</li>
<li id="div6">six</li>
</ul>
</body>
</html>
ADS.js
//初始化ADS的namespace
if(!window.ADS){
window['ADS'] = {};
}
function $(){
var elements = new Array();
for(var i = 0; i < arguments.length; i++){
var element = arguments[i];
if(typeof element == 'string'){
element = document.getElementById(element);
}
if(arguments.length == 1){
return element;
}
elements.push(element);
}
return elements;
}
function isCompatible(other) {
//使用能力檢測，來檢查必要條件
if(other === false
|| !Array.prototype.push
|| !Object.hasOwnProperty
|| !document.createElement
|| !document.getElementByTagName) {
return false;
}
return true;
}
function addEvent(node,type,listener){
if(!isCompatible){
return false;
}
if(!(node = $(node))){
return false;
}
if(node.addEventListener){//W3C方法
node.addEventListener(type,listener,false);
return true;
}else if(node.attachEvent){
node['e'+type+listener] = listener;
node[type+listener] = function(){
node['e'+type+listener](window.event);
}
node.attachEvent('on'+type,node[type+listener]);
return true;
}
return false;
}
//根據classname找出所有符合的元素
function getElementsByClassName(className,tag,parent){
parent = parent || document;
if(!(parent = $(parent))){
return false;
}
var allTags = (tag == "*" && parent.all) ? parent.all:parent.getElementsByTagName(tag);
className = className.replace(/\-/g,"\\-");
var regex = new RegExp("(^|\\s)"+className +"(\\s|$)");
var element;
var matchingElements = new Array();
for(var i = 0; i < allTags.length; i ++){
element = allTags[i];
if(regex.test(element.className)){
matchingElements.push(element);
}
}
return matchingElements;
}
function toggleDisplay(node,value){
if(!(node = $(node))){
return false;
}
if(node.style.display != 'none'){
node.style.display = 'none';
}else{
node.style.display = value || '';
}
return true;
}
function insertAfter(node,referenceNode){
if(!(node = $(node))){
return false;
}
if(!(referenceNode = $(referenceNode))){
return false;
}
return referenceNode.parentNode.insertBefore(node,referenceNode.nextSibling);
}
function bindingFunction(obj,func){
return function(){
func.apply(obj,arguments);
}
}
function getBrowserWindowSize() {
var de = document.documentElement;
return {
'width' : (window.innerWidth || de && de.clientWidth || document.body.clientWidth),
'height' : (window.innerHeight || de && de.clientHeight || document.body.clientHeight)
}
}
//獲取當前鼠標坐標
function getMousecCoordinate(){
event = window.event || arguments[0];
return {
'X':event.clientX || document.body.scrollLeft|| document.documentElement.scrollLeft,
'Y':event.clientY || document.body.scrollTop || document.documentElement.scrollTop
};
}
window['ADS']['$‘] = $;
window['ADS']['isCompatible'] = isCompatible;
window['ADS']['addEvent'] = addEvent;
window['ADS']['getElementsByClassName'] = getElementsByClassName;
window['ADS']['toggleDisplay'] = toggleDisplay;
window['ADS']['insertAfter'] = insertAfter;
window['ADS']['bindingFunction'] = bindingFunction;
window['ADS']['getBrowserWindowSize'] = getBrowserWindowSize;
window['ADS']['getMousecCoordinate'] = getMousecCoordinate;
《JavaScript DOM高级程序设计》的笔记-第二章 - 第二章
第二章
一切都是對象。
Javascript是一種原型式的語言，沒有類的概念，所有一切都派生自現有對象的一個副本。
Js對象分為兩種：Funciton對象 如alert()函數
Object對象
Js提供的內置對象：Object，通用基礎對象
Function：被所有使用參數的對象復制的對象
Array:集合，使用方括號可以訪問他們的屬性
String Boolean及Number對象
Math，Date，RegExp對象
Function是對象，this的范圍是它被執行時的環境的上下文
call()和apply()
functionReference.call(object,arg1,arg2);//每個參數放到環境對象之后
functionReference.apply(object,args[]);//將方法的參數作為一個數組放在第二個參數位置上
《JavaScript DOM高级程序设计》的笔记-第23页 - 让JavaScript运行起来
ADS.getElementsByClassName()方法
其中， className = className.replace(/\-/g,'\\-'); 其作用是转义-，因为有可能会成为范围。例如[a-z]，[0-9]。
《JavaScript DOM高级程序设计》的笔记-第26页
//ADS.js
(function(){
if(!window.ADS){ window['ADS']={} }
//检测浏览器兼容
function isCompatible(other){
//能力检测
if(other===false
||!Array.prototype.push
||!Object.hasOwnProperty
||!document.creatElement
||!document.getElementsByTagName
){return false;}return false;
};
window['ADS']['isCompatible'] = isCompatible;
//获得ID
function $(){
var elements = new Array();
for (var i=0; i<arguments.length; i++){
var element = arguments[i];
if (typeof element == 'string'){
element = document.getElementById(element);
}
if (arguments.length == 1){
return element;
}
elements.push(element);
}
return elements;
};
window['ADS']['$']=$;
//添加事件
function addEvent(node, type, listener){
if(!isCompatible()){return false}
if(!(node=$(node))){return false}
if(node.addEventListener){
//-W3C的方法
node.addEventListener(type,listener,false);
return true;
} else if(node.attachEvent) {
//-MSIE的方法
node['e'+type+listener] = listener;
node[type+listener] = function(){
node['e'+type+listener](window.event);
}
node.attachEvent('on'+type, node[type+listener]);
return true;
}
return false;
};
window['ADS']['addEvent']=addEvent;
//移除事件
function removeEvent(node,type, listener){
if(!(node=$(node))){return false;}
if(node.removeEventListener){
//-W3C的方法
node.removeEventListener(type,listener,false);
return true;
} else if(node.detachEvent){
//-MSIE的方法
node.detachEvent('on'+type,node[type+listener]);
node[type+listener] = null;
return true;
}
return false;
};
window['ADS']['removeEvent']=removeEvent;
//获取Class
function getElementsByClassName(className, tag, parent){
parent = parent || document;
if(!(parent = $(parent))){return false;}
var allTags = (tag=="*" && parent.all) ? parent.all : parent.getElementsByTagName(tag);
var matchingElements = new Array();
};
window['ADS']['getElementsByClassName']=getElementsByClassName;
function toggleDisplay(node,value){
if(!(node = $(node))){return false;}
if(node.style.display!='none'){
node.style.display = 'none';
} else {
node.style.display = value || '';
}
return true;
};
window['ADS']['toggleDisplay']=toggleDisplay;
//节点后插入
function insertAfter(node, referenceNode){
if(!(node = $(node))){return false;}
if(!(referenceNode = $(referenceNode))) return false;
return referenceNode.parentNode.insertBefore(
node, referenceNode.nextSibling
);
};
window['ADS']['insertAfter']=insertAfter;
//移除子元素
function removeChildren(parent){
if(!(parent = $(parent))){return false;}
//-当子节点存在时删除
while (parent.firstChild){
parent.firstChild.parentNode.removeChild(parent.firstChild);
}
//-返回父元素，以便链式使用
return parent;
};
window['ADS']['removeChildren']=removeChildren;
//prependChild
function prependChild(parent, newChild){
if(!(parent = $(parent))){return false;}
if(!(newChild = $(newChild))) return false;
if(parent.firstChild){
//-如果存在子节点，就在其前插入
parent.insertBefore(newChild, parent.firstChild);
} else {
//-否则直接添加
parent.appendChild(newChild);
}
//-返回父元素，以便链式使用
return parent;
};
window['ADS']['prependChild']=prependChild;
})()
《JavaScript DOM高级程序设计》的笔记-第21页 - 让JavaScript运行起来
function addEvent(node, type, listener ){
if(!isCompatible) return false
if(!(node = $(node)) return false
if(node.addEventListener){
//W3C
node.addEventListener( type, listener, false); //false为只发生冒泡
return true
}else if( node.attachEvent){
//MSIE
node['e' + type + listener] = listener;
node[type + listener] = function(){
node[ 'e'+type+listener](window.event);
}
node.attachEvent( 'on‘+ type, node[type+lisener]);
return true
}
return false;
}
这个代码片断是2005年所写，是由Jquery作者John Resing所写。尽管不是十分完美，但是却实现了IE和W3C的目标，把事件绑定在元素上，并且this指向正确。其实最费解的是：
node['e' + type + listener] = listener;
node[type + listener] = function(){
node[ 'e'+type+listener](window.event);
}
node.attachEvent( 'on‘+ type, node[type+lisener]);
首先，将事件监听函数赋给了元素的一个属性，然后把事件的执行结果再返回给事件句柄，最后拼成了跟w3c相似的结构。因为w3c的注册函数第三个参数为false，因此此时它们是相同的，都是只发生在冒泡阶段。