web前端的渐进增强式开发模型

104 阅读 0 评论 69 点赞

我是靠谱客的博主贤惠黑猫，最近开发中收集的这篇文章主要介绍web前端的渐进增强式开发模型，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

渐进增强是前端开发的根本基础。从根本的层面上讲，它可以将HTML,CSS,JavaScript这三者的功能分离开来，这能让当前的项目开一个好头。我们在创建项目的开始要将这三者分开，它们对应的称呼是结构层、表现层、行为层。这种方式可以原封不动地套用在网页设计之外的其他领域中，无论怎么说，他都是一种自底向上或由内而外的模型，我们应该以此来构建网站。

渐进增强是一种分层设计的网页开发方式，其重点是强调内容，用户和易访问性。模型的目的是让这三层自上而下依赖：javascript依赖CSS，CSS依赖HTML，这样做的好处是自上而下的一除每一层，都不会损失网站中最重要的内容，也就是内容。

只要把这三层隔开，让网站在只有HTML代码的情况下运行，同时在逐层添加CSS美化页面，以javascript程序平滑的控制浏览器的行为，那么你就能确保用户可以访问到网站中的内容。

 1 结构层
2 <body>
3 <headerid="header">
4
<h1><ahref="/">这是一个主页</a></h1>
5 </header>
6 <navid="nav">
7
<ul>
8
<li><ahref="/">页面一</a></li>
9
<li><ahref="/">页面二</a></li>
10
<li><ahref="/">页面三</a></li>
11
<li><ahref="/">页面四</a></li>
12
</ul>
13 </nav>
14 <articleid="main">
15
<!--网页主体/-->
16
<buttonid="about"type="submit"></button>
17 </article>
18 <footerid="footer">
19
<p>2006版权所有</p>
20 </footer>
21 </body>

 1 表现层
2 #nav{
3
background-color:#201F1F;
4
padding:10px;
5
overflow:hidden;
6 }
7 #navul{
8
list-style:none;
9
margin:0;
10
padding:0;
11 }
12 #navli{
13
float:left;
14 }
15 #navlia{
16
padding:010px;
17
color:#03a9f4;
18 }

1 行为层
2 function doTheThing(){
3 alert("这是一则弹窗消息");
4 }
5
6 Var
elem=document.getElementById("about");
7 elem.addEventListener(click,doTheThing,false);

可以发现，当移去（浏览器出错）css或javascript外部文件时，用户仍能访问到网页中的主体内容，只不过不漂亮而已。这种更加符合开发者的思维模式，能精准的找到所需的信息，可以更好的维护团队的项目，间接地改善了开发流程。

另外，在性能方面，如果CSS文件和javascript文件是通过外部文件（务必使用外链）的方式链接进来的，那么每个访问者的浏览器可以单独缓存它们，也就是说，只要用户打开一次过本网站的一个网页，在浏览其他页面的同时就不再下载这些资源了，这样也以减少页面的加载时间，并且将HTTP请求数量降至最低。

这是我认知的一些简显得前端知识，希望对一些朋友能有所帮助！

转载于:https://www.cnblogs.com/xuanya/p/5730755.html