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

web前端的渐进增强式开发模型相关推荐

WEB前端项目实战/酒仙网开发-李强强-专题视频课程
WEB前端项目实战/酒仙网开发-204人已学习课程介绍 WEB前端项目实战/酒仙网开发课程收益 WEB前端项目实战/酒仙网开发讲师介绍李强强更多讲师课程 ...
个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)
HTML期末大作业课程设计游戏主题html5网页~响应式游戏网站(HTML+CSS+Bootstrap) ~个人设计web前端大作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
【Web前端HTML5CSS3】05-样式继承与其他概念
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位像素屏幕分辨率图像分辨率百分比 e ...
【Web前端HTML5CSS3】02-前端开发准备
笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版文章目录前端开发准备 1. 离线文档的下载 2. 文本编辑器的选择 Notepad++ Sublime VS Cod ...
【web前端】CSS笔记小结盒子模型+PS基操+样例（Day 3+部分Day 4）
来源:黑马程序员pink老师前端入门教程目录 I. 盒子模型 Box Model ①网页布局的本质 ②组成部分 ❀图解 ❀边框 border ※ 组成 ※※ 样式 ※ 简写 ※练习 ※细线边框 ...
软件推荐：Web前端初学者会用到开发工具（附官网下载地址）
目前市面上比较流行的前端开发工具主要有WebStorm.Vscode.Sublime.HBuilder.notepad++.EditPlus.记事本等,今天介绍一下这些开发工具,并且给出了下载地址,下 ...
尚硅谷Java、HTML5前端、全栈式开发视频
Java基础阶段: 一.20天横扫Java基础(课堂实录) https://pan.baidu.com/s/1htTzZRQ 二.尚硅谷Java基础实战--Bank项目 http://pan.baid ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
web前端【HTML网页制作开发】一篇就够
大家好!今天分享一下关于HTML的知识,一是帮助自己复习,二是想告诉小伙伴们,网页没你想的那么复杂,我会用大白话讲解,让你快乐走上前端之路,我是一个后端的,手动狗头,话不多说,coding

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

web前端的渐进增强式开发模型相关推荐

最新文章

热门文章