渐进增强是前端开发的根本基础。从根本的层面上讲,它可以将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请求数量降至最低。
这是我认知的一些简显得前端知识,希望对一些朋友能有所帮助!