我这人,最大的毛病就是浮躁。

下面开始我再一次的学习之旅,希望我能坚持到最后。记笔记除了分享以外,更重要的是让自己看见自己学习之路。

先把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);
});
}
});

然后在class属性中加上popup类标记出相应的锚:<a href="http://advanceddomscripting.com" class="popup">
  另外一个好处就是,通过相同的类名添加独特的样式

.popup {
padding-right: 25px;
background: transparent url(images/popup.png) no-repeat right center;
}

不要版本检测
使用能力检测

使用版本检测的范例:

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.");
}

类是的,如果你代码里需要document.body,你就应该想下面这样进行检测

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;
}
)();

这样就可调用:myNaespace.showNodeName('example');

通过可重用的对象把事情简化(本书是通过创建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;
)();

一定要自己动手写代码

JavaScript DOM高级程序设计1.2-循序最佳实践--我要坚持到底!的更多相关文章

  1. JavaScript DOM高级程序设计 5动态修改样式和层叠样式表2--我要坚持到底!

    把样式置于DOM脚本之外 style属性 我们可以这样设置前景色之类的属性: element.style.color='red'; 也可以使用下面的代码设置背景颜色: element.style.ba ...

  2. JavaScript DOM高级程序设计 7.向应用程序加入Ajax--我要坚持到底!

    有时候,或许是因为理解能力,也或许是因为浮躁,看东西总是不入心,而且还老是想跳过本节,或者赶紧看完本节,这样的恶性循环,让我在即没有真正的学习到知识,又打击我的学习信心,还浪费了我很多事件,我想,当遇 ...

  3. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  4. JavaScript DOM高级程序设计 3.6 实例 将HTML代码转换成DOM代码(附源码)--我要坚持到底!

    作为一名Web开发者,最讨厌的事情就是重复性任务,摆脱乏味的日常重复性事物的一种方法,是借助可重用的对象或者说与你现在建立的ADS库类似的库,另外一种让事情变得有意思,且能够加速开发进程的方式是编写能 ...

  5. JavaScript DOM高级程序设计 3.-DOM2和HTML2--我要坚持到底!

    由一个HTML进行说明,我就不敲了,直接copy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  6. JavaScript DOM 高级程序设计读书笔记二

    响应用户操作和事件 事件就是操作检测与脚本执行的组合,或者基于检测到的操作类型在某个对象上调用事件侦听器(事件处理程序). 事件的类型 事件可以分为几种类型:对象事件,鼠标事件,键盘事件(只适用于do ...

  7. JavaScript DOM 高级程序设计读书笔记一

    创建可重用的对象 简而言之,对象就是包含一组变量(称为属性)和函数(称为方法)的集合的实例.对象通常由类派生而来,而类中定义了对象拥有的属性和方法.如果你的脚本中都是对象之间的交互操作,那么就可以称之 ...

  8. JavaScript DOM高级程序设计 5动态修改样式和层叠样式表1(源代码)--我要坚持到底!

    W3C DOM2样式规范 现在这边贴出本章要的源代码,注意要结合前面用到的ADS库http://vdisk.weibo.com/s/Dq8NU CSSStyleSheet对象属性: type :始终是 ...

  9. JavaScript DOM高级程序设计 2.4-try{}catch{}--我要坚持到底!

    先看一段有异常的语句 var sound = 'Roar!'; function myOrneryBeast() { this.style.color='green';//window没有style属 ...

随机推荐

  1. 【转载】GDB反向调试(Reverse Debugging)

    记得刚开始学C语言的时候,用vc的F10来调试程序,经常就是一阵狂按,然后一不小心按过了.结果又得从头再来,那时候我就问我的老师,能不能倒退回去几步.我的老师很遗憾地和我说,不行,开弓没有回头箭.这句 ...

  2. 《Spring3.0就这么简单》

    第一章 认识Spring 1.Spring提供的IOC容器,是Spring大杀器之一.容器将对象之间的依赖关系交给Spring进行控制,采用配制的方式对依赖关系进行描述,由Ioc容器负责依赖类之间的创 ...

  3. 锋利的qjuey-ajax

    jquery 中的ajax   load方法主要获取web服务器上静态数据 1 load方法载入HTML文档 load(url [,data] [,callback]) $(function(){ $ ...

  4. DWZ 刷新 dialog

    DWZ刷新dialog: 1,在删除按钮上添加callback属性;如:(callback="dialogAjax") <a class="delImg" ...

  5. CSS 中的 em单位

    em的对应的像素值如何计算,一言以蔽之:em就是倍数当前元素font-size的倍数,其结果就是当前字体的像素值乘以em的值,至于font-size来自何处?有两个来源:继承自父元素和通过CSS直接设 ...

  6. js自运行函数

    学习闭包的基础知识: 函数声明 function fn(){ //这里是代码 }; fn(); //运行fn函数 与上面等价 var fn = function(){ //这里是代码 } fn(); ...

  7. 装tortoiseSVN时遇到的坑

    今天给新电脑配置开发环境,线上SVN地址申请权限以后,在本地装了tortoiseSVN,可是安装了以后死活打不开.明明浏览器里可以打开SVN地址,但是tortoiseSVN的浏览器里却打不开,摆弄了很 ...

  8. spark向量

    转自 1.本地向量MLlib的本地向量主要分为两种,DenseVector和SparseVector,顾名思义,前者是用来保存稠密向量,后者是用来保存稀疏向量,其创建方式主要有一下三种(三种方式均创建 ...

  9. 深入理解jsavascript的作用域

    一. JavaScript声明提前 在JavaScript中如果不创建变量,直接去使用,则报错: console.log(xxoo); // 报错:Uncaught ReferenceError: x ...

  10. ubuntu14.04 中文输入法无法使用

    说下我的解决方法吧,我是忘了在All Settings -> Text Entry 的 Input sources to use中添加Chinese(Pinyin)了,添加后就好了. from: ...