平稳退化、渐进增强、分离js

最新推荐文章于 2019-06-28 18:10:33 发布

singsingasong

最新推荐文章于 2019-06-28 18:10:33 发布

阅读量408

点赞数 1

分类专栏： JavaScript 文章标签： javascript 浏览器脚本

本文链接：https://blog.csdn.net/singsingasong/article/details/76419867

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

什么是平稳退化：

如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持js的情况下仍然能顺利地浏览该网站。就是说，虽然某些功能无法使用，但是最基本地操作仍能顺利完成。

什么是渐进增强：

　　用一些额外的信息层去包裹原始数据。按这个规则创建出来的网页几乎都符合”平稳退化”的功能。
　　或者说：渐进增强（Progressive Enhancement）就是一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

.transition { /*渐进增强写法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}

什么是分离JS？

内嵌的事件处理函数（诸如在HTML文档中使用onclick之类的属性）是一种既没有效率又容易引发问题的做法。如果又一个「挂钩」，像CSS机制中的class或id属性那样，把js代码调用行为与HTML文档的结构和内容分离开，网页就会健壮得多。

举个例子：

<a href="http://www.example.com" class="popup"></a>

可以利用 element.event = action… 在外部的js文件中把一个事件添加到HTML文档中的a元素中。

keypoint：给谁添加事件？怎么添加？

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Example</title>
<script type="text/JavaScript">
//把行为和结构分离开

window.onload = function(){
  var link  =  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(href){
  window.open(href,"popup","width:400px;height:300px;")
}


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

1. window.open()方法来创建新的浏览器窗口

对应的3个参数分别是 新窗口的url地址、新窗口的名字、新窗口的其他属性（如宽、高）

2. 用window.onload的目的：让以上代码在HTML文档全部加载到浏览器之后马上开始执行。

注意：如果js文件是从HTML文档的< head >部分用< script >标签调用的，它将HTML文档之前加载到浏览器中。同样，如果< script >标签位于文档底部< /body >之前，就不能保证哪个文件最先结束加载（浏览器可能一次加载多个）。

因为脚本加载时文档可能不完整，所以模型也不完整。没有完整的DOM，getElementsByTagName等方法就不能正常工作。