我这人，最大的毛病就是浮躁。
下面开始我再一次的学习之旅，希望我能坚持到最后。记笔记除了分享以外，更重要的是让自己看见自己学习之路。
先把ADS库贴出来http://vdisk.weibo.com/s/DaX18
把行为从结构中分离出来
全部脚本，都使用外部源文件，就当其他方式没有了解过。
昔日的javascript:前缀。（相对合理的写法。）
<script type="text/javascript">
function popup(url) {
window.open(url);
//do not return anything!
}
</script>
<a href="http://advanceddomscripting.com" onclick="popup(this.href); return false;">
但是可以通过在文档中包含popupLoadEvent.js这样的脚本文件来应用与嵌入式脚本相同的逻辑（ADS库，稍后创建。先有这种思想。）
//添加载入事件来修改页面 ADS.addEvent(window,‘load‘,function(W3CEvent) { //查找文档中带popup类的所有锚的标签 var popups = ADS.getElementsByClassName(‘popup‘, ‘a‘); for(var i=0 ; i<popups.length ; i++ ) { //为每个锚添加单击事件侦听器 ADS.addEvent(popups[i],‘click‘,function(W3CEvent) { //使用href属性打开窗口 window.open(this.href); //取消默认事件 ADS.eventPreventDefault(W3CEvent); }); } });
另外一个好处就是，通过相同的类名添加独特的样式
.popup { padding-right: 25px; background: transparent url(images/popup.png) no-repeat right center; }View Code
使用能力检测
使用版本检测的范例：
if(pitcher.screwball){ pitcher.screwball.throw(); }else if (pitcher.fastball){ pitcher.fastball.throw(); }else{ alert(‘Sorry,you can‘t throw the ball.‘); }
if (pitcher.screwball) { pitcher.screwball.throw(); } else if (pitcher.fastball) { pitcher.fastball.throw(); } else { alert("Sorry,you can‘t throw the ball."); }
if(documen.body) { //依赖document.body的代码 }
var W3CDOM = document.createElement&&document.getElementsByTagName; function exampleFunctionThatRequiresW3CMethods() { if (!W3CDOM) { return; } //使用document.createElement()和document.getElementsByTagName()的代码 }
为重用命名空间而进行规划
保持唯一性
不共享
(function() { function $(id) { return document.getElementById(id); } function alertNodeName(id) { alert($(id).nodeName); } window[‘myNamespace‘]={}; window[‘myNamespace‘][‘showNodeName‘]=alertNodeName; } )();
通过可重用的对象把事情简化（本书是通过创建ADS库贯穿的）
(function() { //ADS命名空间 if (!window.ADS) { window[‘ADS‘]={}; } } //确定当前类库是否与整个浏览器兼容 function isCompatible(other) { //使用能力检测来检查必要条件 if (other==false ||!Array.prototype.push ||!Object.hasOwnProperty ||!document.createElement ||!document.getElementsByTagName) { return false; } return true; } window[‘ADS‘][‘isCompatible‘]=isCompatible; /* if(ADS.isCompatible()) { //使用ADS库的代码 } */ function $() { var elements=new Array(); //查找作为参数提供的所有元素 for (var i = 0;i<arguments.length ;i++ ) { var element=arguments[i]; //如果该参数是一个字符串那假设他是一个id if(typeof element="string") { element=document.getElementById(element); } //如果只提供一个参数，则立即返回这个元素 if (arguments.length==1) { return element; } //否则将他添加到数组中 elements.push(element); } //返回包含多个被请求的数组 return elements; }; window[‘ADS‘][‘$‘]=$; /* var element=ADS.$(‘example‘); */ /* var elements = ADS.$(‘a‘,‘b‘,‘c‘,‘d‘) for(e in elements) { //执行某些操作 } */ 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+lisener]= function() { node[‘e‘+type+listener](window.event); } node.attachEvent(‘on‘+type,node[type+listener]); return true; } //若两种方法都不具备则返回false； return false; }; window[‘ADS‘][‘addEvent‘]=addEvent; /*实例 ADS.addEvent(window,‘load‘,function(W3CEvent)) { //查找文档中所有带popup类的锚标签 var popup=ADS.getElementsByClassName(‘popup‘,‘a‘); for(var i= 0;i<popups.length;i++) { //给每个锚添加一个事件侦听器 ADS.addEvent(popup[i],‘click‘,function(W3CEvent)) { //使用href属性打开窗口 window.open(this.href); //取消默认事件 ADS.eventPreventDefault(W3CEvent); }); } }); //甚至可以添加多个事件 function sayHello(){alert(‘Hello‘); } ADS.addEvent(window,‘load‘,sayHello);//注意 ，不包含on function sayGoodBye() { alert(‘GoodBye!‘); } ADS.addEvent(window,‘load‘,sayGoodBye) */ 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; } //若两种方法都不具备则返回false； return false; }; window[‘ADS‘][‘removeEvent‘]=removeEvent; function getElementByClassName(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(); //创建一个正则表达式。来判断className是否正确。 className=className.replace(/\-/g,"\\-"); var regex=new RegExp("(^|\\s)"+className+"(\\s|$)"); var element; //检查每个元素 for (var i=0; i<allTags.length;i++ ) { elemetn=allTags[i]; if (regex.test(element.className)) { matchingElements.push(element); } } //返回任何匹配的元素 return matchingElements; }; window[‘ADS‘][‘getElementByClassName‘]=getElementByClassName; /*范例 ... <p class="findme"> This is just an <em calss="findme">example</em><p> <div id="theList"> <h2 class="findme">A list </h2> <ol> <li class="findme">foo </li> <li class="findme">bar </li> <ol> </div> */ //切换显示 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; /*实例 ADS.toggleDisplay(ADS.$(‘example‘)); */ function insertAfter(node,refereceNode) { if (!(node=$(node))) { return false; } if(!(referenceNode=$(referenceNode))) return false; return referenceNode.parentNode.insertBefore( node,referenceNode.nextSibling ); }; /*实例 ADS.insertAfter(ADS.$(‘example‘),domNode); 比下面的容易多： ADS.$(‘example‘).parentNode.insertBefore(ADS.$(‘example‘),domNode); */ 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; //prepend追加在前 function prependChild(parent,newChild) { if (!(parent=$(parent))) { return false; } if (parent.firstChild) { //如果存在一个子节点，则在这个子节点之前插入 parent.insertBefore(newChild.parent.firstChild); } else{ parent.appendChild(newChild); } return parent; }; window[‘ADS‘][‘prependChild‘]=prependChild; )();