JSDOM编程艺术-笔记-ch5 平稳退化&分离JS（BY 弹窗实例）

使用JS前需要确认：

1.这么做会对用户的浏览体验产生那些影响？---非必要的不添加。

2.如果用户的浏览器不支持JS怎么办？---平稳退化graceful degradation。

==》渐进增强：用一些额外的信息去包裹原始数据。

 

实例：

JS代码弹窗实现

Function popUP(winUrl）

{window.open(winUrl,name,features);}

html语句内嵌的调用JS弹窗函数：

(1)不能平稳退化：定义JS函数，使用伪协议

<a href=”javascript:JS函数名（‘JS函数参数’）;”>链接名</a>

(2)不能平稳退化：onclick

<a href=#  onclick=”javascript:popUP（‘winUrl’）;”>链接名</a>

#是未指向任何内部目标的内部链接，或者指向当前文档的开头，这样会创建一个空链接，依赖onclick属性实现JS代码。

(3)平稳退化方案：使用有效链接

  <a href=”winUrl” onclick=”popUp(‘winUrl’); return false;”></a>

<a href=”winUrl” onclick=”popUp(this.getAttribute(‘href’));return false;”></a>使用JS语言

  <a href=”winUrl” onclick=”popUp(this.href);return false;”></a>使用DOM ★

 

在JS中调用事件/分离JS代码（渐进增强）：

1.将所有链接建立一个数组。

2.遍历数组。

3.如果某个链接的class属性等于popUP,就表示链接被点击时调用此函数。(A.将此链接的href属性传递给popUP函数，取消链接的默认行为，不将访问者带离窗口。)

【JS将一个事件添加到HTML文档的元素上：Elemnet.event=action...;】