渐进增强模型

  1. 总述: 结构层(Structure),表现层(presentation)与行为层(behavior). HTML,CSS,JavaScript. 只有HTML 的情况下也可以显示内容,CSS用来美化,Js则负责平滑的控制浏览器的行为,确保用户访问到里面的内容.
  2. 结构层: HTML增加了文档的信息量: 新引入 <header><nav><section><article><aside><footer>等元素.
  3. 表现层: 技术渲染比不上CSS, Js辩编写的目标是绕过Js代码,直接以css来完成需求. CSS有如下三种表现形式.
    • 內联CSS. CSS效果仅局限于元素内部,不能被缓存,也不可以被复用.
      1. <navid="nav"role="navigation"style="background:#c00;padding:10px;">

    无论通过Js代码即时生成内嵌CSS,还是手动编写到HTML文档中,都不是明智选择.

    • 链接外部样式表
      1. <head>
      2. <tilte>Great Home Page in HTML5</tilte>
      3. <metacharset="utf-8">
      4. <!--css-->
      5. <linkrel="stylesheet"href="css/styles.css">
      6. </head>

  4. 行为层

    我们必须保证即便没有Js代码的情况下, 用户仍然能够访问网站中的内容.

    三种HTML中加入Js的方式: 内联Js代码, 嵌入式Js代码, 外部Js代码

    • 内联Js代码
      <li><a href="/about" onclick="alert('this is the thing'); ">About</a></li>
    • 嵌入式Js代码 剥离了Js代码,放在HTML元素<script>中* –低调的Js代码*
    • 外联式Js代码, 放在单独的Js文件中,然后被引用. –外联的低调的Js代码

      原理上HTML任意位置均可以链接js文件,不过在尾部放入,因为我们的Js不影响网站的正常运行,在HTML文档全部渲染完毕后在用Js对其操作,相对容易.

  5. 总结
    渐进增强开发模型 对于前端开发的重要性, 网站的首要责任是保证用户能访问到它的内容.

一 JavaScript应用开发实践指南的更多相关文章

  1. 2 JavaScript应用开发实践指南

    JavaScript 语言在浏览器中的运用 HTTP请求,加载HTML后根据内容加载CSS等,大部分浏览器默认2个下载链接. HTML元素要尽可能简洁,不需要将Table元素变成多个div, css代 ...

  2. 2.1 JavaScript应用开发实践指南

    创建交互层 循环 示例代码如下: var people = family, peopleCount = items.length, i; if(peopleCount>0){ for(i=0; ...

  3. 精通BIRT：Eclipse商务智能报表工具开发实践指南

    http://blog.csdn.net/birtbird/article/details/8935520 [置顶] 精通BIRT:Eclipse商务智能报表工具开发实践指南 分类: BIRT 201 ...

  4. OpenGL ES应用开发实践指南：iOS卷

    <OpenGL ES应用开发实践指南:iOS卷> 基本信息 原书名:Learning OpenGL ES for iOS:A Hands-On Guide to Modern 3D Gra ...

  5. lua游戏开发实践指南学习笔记1

    本文是依据lua游戏开发实践指南做的一些学习笔记,仅用于继续自己学习的一些知识. Lua基础 1.  语言定义: 在lua语言中,标识符有非常大的灵活性(变量和函数名),只是用户不呢个以数字作为起始符 ...

  6. 【SpringCloud技术专题】「Gateway网关系列」（3）微服务网关服务的Gateway全流程开发实践指南（2.2.X）

    开发指南须知 本次实践主要在版本:2.2.0.BUILD-SNAPSHOT上进行构建,这个项目提供了构建在Spring生态系统之上API网关. Spring Cloud Gateway的介绍 Spri ...

  7. 《Lua游戏开发实践指南》读后感

    书籍地址:http://book.douban.com/subject/20392269/ 一句话点评该书:想用Lua作游戏脚本开发的同学值得一读! (一)本书特点 市面专门讲Lua的中文书籍非常少, ...

  8. 1. 初次尝试Core Data 应用程序（Core Data 应用开发实践指南）

    本书以实践的方式讲解 Core Data,不会过早讲一些难懂的话题.从入门知识入手,演示如何为范例程序添加Core Data 支持,后续章节再依次讨论更复杂的话题. 1.1. Core Data 是什 ...

  9. 读Lua游戏开发实践指南

    11月11日开读,到今天正好一个月. 起因是被裁员之后,发现很多公司都在使用lua编写cocos2d-x游戏,原因是上手快,技术人员比较便宜. 如果引擎封装比较好,几乎在lua里写写基本逻辑就行了,不 ...

随机推荐

  1. [Objective-c 基础 - 1.3] OC带返回值的类方法

    /* 计算器类 1>返回π 2>计算两个整数的平方 3>计算两个整数的和 */ #import <Foundation/Foundation.h> @interface ...

  2. 起底多线程同步锁(iOS)

    iOS/MacOS为多线程.共享内存(变量)提供了多种的同步解决方案(即同步锁),对于这些方案的比较,大都讨论了锁的用法以及锁操作的开销,然后就开销表现排个序.春哥以为,最优方案的选用还是看应用场景, ...

  3. PowerShell中的数学计算

    Double类型和float都属于浮点类型,精度不高.而Decimal属于高精度

  4. Android设备上i-jetty环境的搭建-手机上的web服务器

    本文主要跟大家分享如何将一台Android设备打造成一个web服务器使用. 编译i-jetty 1.将源码download下来,http://code.google.com/p/i-jetty/dow ...

  5. Android 获取信号强度

    大 家看到标题就明白了,我们有的时候在电梯里,有时有的电话有信号,有时有的电话没有信号,这个是非常闹心的,要是我们能监听一下我们自己手机信号的强度就 好了.这样,当我们在等重要的人士的电话,不至于接不 ...

  6. pomelo 服务器开发常用术语

    gate服务器 一个应用的gate服务器,一般不参与rpc调用,也就是说其配置项里可以没有port字段,仅仅有clientPort字段,它的作用是做前端的负载均衡.客户端往往首先向gate服务器发出请 ...

  7. IIS 之 添加MIME扩展类型及常用的MIME类型列表

    经常用IIS作为下载服务器的时候有时传上去的文件比如 example.mp4 文件名上传后,但是用http打开的时候确显示为 404 文件不存在.其实是IIS对文件的一种保护,不在IIS指定的MIME ...

  8. 面试体验：Google 篇（转）

    http://www.cnblogs.com/cathsfz/archive/2012/08/08/google-interview-experience.html 尝试在自己的博客上搜索点东西,结果 ...

  9. javascript中window.event事件用法详解

    转自http://www.jb51.net/article/32564.htm描述 event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生 ...

  10. 工作中遇到的UIScrollview的问题及解决方案

    用scrollview的时候,记得创建scrollview后再在scrollview上放一个view,将其他子空间和子view都放在这个view上. 目前遇到的问题: ImagePlayerView( ...