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

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

先把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. 【Qt】QT5 获取IP地址

    QT获取本机IP地址 #include <QtNetwork/QHostAddress> #include <QtNetwork/QNetworkInterface> #inc ...

  2. phpcms v9二级栏目生成到根目录后三级栏目无法访问的解决办法

    这个栏目问题折腾了我一天多,可怜我这个美工又不会程序!!! 我的问题是: 我的栏目设置如下: 一级栏目[生成到根目录(是)]> 二级栏目[生成到根目录(是)] > 三级栏目[生成到根目录( ...

  3. Delphi Variant oleVariant

    The OleVariant type exists on both the Windows and Linux platforms. The main difference between Vari ...

  4. CorelDRAW 二维码插件

    随着智能手机的流行,二维码在各个领域大量应用,这个插件在补CorelDRAW这方面的不足: 这个插件是 cpg 格式,安装请看这篇博客:http://www.cnblogs.com/o594cql/p ...

  5. s3c-u-boot-1.1.6源码分析之一start.s

    定位到\s3c-u-boot-1.1.6\cpu\s3c64xx\start.s,打开该文件 /* * armboot - Startup Code for S3C6400/ARM1176 CPU-c ...

  6. Android 的自定义Spinner组件实现方式

    一.Android的API方式默认实现的方式 1.layout下编辑main_activity.xml <RelativeLayout xmlns:android="http://sc ...

  7. 2016 系统设计第一期 (档案一)MVC 引用 js css

    @Styles.Render("~/Bootstrap/css/bootstrap-theme.css") @Scripts.Render("~/jQuery/jquer ...

  8. tablib源代码学习

    tablib简介 ----------- Tablib is a format-agnostic tabular dataset library, written in Python. Tablib ...

  9. 简单3d RPG游戏 之 004 攻击(二)

    人物和怪物的攻击都有CD冷却,在PlayerAttack脚本中添加成员 //冷却倒计时 public float attackTimer; //CD冷却时间 public float coolDown ...

  10. Linux下反斜杠号"\"引发的思考

    今天在检查home目录时发现有一个名为“\”的文件,觉得很奇怪,从来没见过,就准备用Vim打开看看,很自然地输入命令查看一下,结果居然打不开. ubuntu@ubuntu:~$ vi \> ub ...