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请求数量降至最低。
这是我认知的一些简显得前端知识，希望对一些朋友能有所帮助！
web前端的渐进增强式开发模型的更多相关文章
- 最受Web前端开发者欢迎的五大开发工具
工其事,必利于器.好的开发工具毋容置疑会帮助Web前端开发者事半功倍,51CTO在上期主办的技术沙龙<大型网站PHP开发之道> 对现场的百余位Web开发者做了问卷调查,后经51CTO调研小 ...
- Web前端框架与移动应用开发第八章
Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...
- Web设计思想——渐进增强
最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...
- Web前端工程师需要注意的开发规范有哪些？
从事web前端开发工作我们就需要了解web前端开发的规范,这样才能保证高效快速的完成工作,本篇就和大家分享一下web前端开发工程师需要注意的web前端开发规范有哪些,希望对小伙伴们有所帮助. web前 ...
- 【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读 评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...
- Web前端面试指导(九)：盒子模型你是怎么理解的？
问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...
- web前端-移动端响应式与自适应
一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="v ...
- Web前端框架与移动应用开发第七章：二
3.练习3:抽奖大转盘 注意事项:需要使用Zepto.js,区别于zepto.min.js 实现效果:转盘转动抽奖 html <!DOCTYPE html><html>< ...
- Web前端框架与移动应用开发第七章
1.练习1:焦点图切换 html: <!doctype html><html><head> <meta charset="utf-8" / ...
随机推荐
- sql server2008中sql server身份能登录，window身份登录不了
用sql server身份的sa登录成功进入,一切正常,用window身份登录不了,问题如下
- 在windows下配置Eclipse + go环境
http://blog.csdn.net/hengyunabc/article/details/7371446 本文章地址:http://blog.csdn.net/hengyunabc/articl ...
- PHP OAuth2 Server库
想找比较正宗的库,查了蛮久的.最后在 oauth官方站上,看到PHP版本的相关链接. 发现都是php 5.3版本以上的环境,基于命名空间的写法编写的. 访问下面这个页面,难得,发现文档给出了5.2版本 ...
- Erlang 内存泄漏分析
随着项目越来越依赖Erlang,碰到的问题也随之增加.前段时间线上系统碰到内存高消耗问题,记录一下troubleshooting的分析过程.线上系统用的是Erlang R16B02版本. 问题描述 有 ...
- Android笔记——Android中数据的存储方式（一）
Android中数据的存储方式 对于开发平台来讲,如果对数据的存储有良好的支持,那么对应用程序的开发将会有很大的促进作用. 总体的来讲,数据存储方式有三种:一个是文件,一个是数据库,另一个则是网络.其 ...
- 自定义XML动态配置程序
概述 1 在做程序开发时,我们往往要用到如下两个基本模块 1> 设置程序的基础参数,如分页的参数.邮件参数等: 2> 在基于表驱动开发时,即把一些判断的逻辑放在表数据中: 2 在这两个基本 ...
- EF数据库初始化策略及种子数据的添加
EF数据库初始化策略及种子数据的添加 CreateDatabaseIfNotExists 判断当前数据库连接字符串对应的数据库是否存在,若不存在则根据代码定义的model进行创建 DropCreate ...
- SQL2012 提示评估已过期 解决方案- sql server问题
SQL2012 提示评估已过期 解决方案提示评估已过期的解决方法和 sql2008一样 第1步:进入SQL2012配置工具中的安装中心第2步:再进入维护界面,选择版本升级第3步:进入产品密钥,输入密钥 ...
- Web安全开发注意事项
1.sql注入:这个很常规了,不要拼字符串以及过滤关键字都可以防住,需要注意的是,Cookie提交的参 数也是可以导致注入漏洞的.2.旁注:就是说在保证自己的程序没问题的同时,也要保证同台服务器的其他 ...
- Swing（一）：JFrame框架窗体
Swing窗体是一个组件,也是可视化的窗体,可以将其他组件放在这里.Jfream框架是一个容器,是Swing程序中各个组件的载体,可以将它看做为 一个容器,在开发中可以通过java.swing.jfr ...