最佳时间 (DOM编程艺术)

最新推荐文章于 2025-09-07 22:29:54 发布

Msro

最新推荐文章于 2025-09-07 22:29:54 发布

阅读量99

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/NathanChen/blog/786904

本文介绍了如何确保JavaScript与网页结构和内容分离的最佳实践，包括平稳退化、向后兼容性和性能考虑等方面，并提供了一个具体的示例来说明如何实现。

2019独角兽企业重金招聘Python工程师标准>>>

1. 平稳退化：确保浏览器在没有开启JS的时候也能正常工作

2. 分离JS：把网页的结构和内容与JS的脚本行为分离

3. 向后兼容性：确保老版本老版本浏览器的使用

4. 性能考虑

JavaScript伪协议：

<a href="javascript:pop('http://www.example.com');">example</a>

在支持伪协议的浏览器能正常运行，老版本浏览器可能不行，

同样内嵌事件处理函数的方法也不可取，有时为了触发事件，我们会将onclick等事件触发函数写在HTML中，这样不能做到网页的结构内容与JS脚本分离

通过CSS样式和结构分离的做法，JS也如下修改

<script type="text/JavaScript">
window.onload = function() {
  if (!document.getElementsByTagName) return false;
  var lnks = document.getElementsByTagName("a");
  for (var i=0; i<lnks.length; i++) {
    if (lnks[i].getAttribute("class") == "popup") {
      lnks[i].onclick = function() {
        popUp(this.getAttribute("href"));
        return false;
      }
    }
  }
}

function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=480");
}

</script>
</head>
<body>
<a href="http://www.baidu.com/" class="popup">Example</a>
</body>

通过标签中属性的查询，与js行为连接

转载于:https://my.oschina.net/NathanChen/blog/786904