而今

导航

第一章 渐进增强模型

1.1 渐进增强式网页开发模型的定义

　　意义：这是所有前端开发的根本基础。

　　功能：将html,css,js这三者的功能分离开。

　　焦点：强调内容，用户与易访问性

　　结构划分：最底层是结构层（html）,中间是表现层（css）,顶层是行为层（js）

　　优点：将三层分开，是为了让上层彼此依赖于下层，而且可以在某些场景下从上至下地移除每一层，同时又不损失网站的内容

　　1.1.1 历史

　　在2003年德克萨斯州奥斯丁市的西南偏南（south by southwest）艺术节.

　　1.1.2 目标

　　　　提升性能，浏览器将单独缓存每层文件，减少了多次混合于一起的文件重复渲染请求的问题

　　　　易访问性 由于html的代码简洁予以明确是所有人可以轻松获取到网站内容

　　　　代码可读性　重复使用的代码能在每层很容易找到，减少冗余

　　　　渐进增强与平稳退化 两个是=开发模型是从不同的角度去看待同一开发流程得出。渐进增强模型的关注重点是内容，平稳退化模型的重点是浏览器

1.2 结构层

　　结构层也就是html的页面

<!doctype html>
<html>
  <head>
        <meta charset='utf-8'>
        <title>Great Home page</title>
  </head>
  <body>
        <div id='header'>
            <h1><a href='/'>Great Home Page</a></h1>
        </div>
        
        <div id='nav'>
            <ul>
                 <li><a href='/about'>About</a></li>   
                 <li><a href='/articles'>Articles</a></li>
                 <li><a href='/staff'>Staff</a></li>   
                 <li><a href='/contact'>Contact</a></li>
            </ul>
        </div>
        <div id='main'>
             hello world!
        </div>

        <div id='footer'>
              <p>&copy; 2019 Awesome Site</p>
        </div>
  </body>
</html>

 

　　1.2.1使用html5的新特性可以增加文档的信息量

　　　　<nav></nav>比<div class='nav'></div>语义要好得多

　　1.2.2html新引入的标签

　　　　header nav section article aside footer

 　　　　以下代码将重构建之前的html网页结构

<!doctype html>
<html>
  <head>
        <meta charset='utf-8'>
        <title>Great Home page</title>
  </head>
  <body>
        <header id='header' role='banner'>
            <h1><a href='/'>Great Home Page</a></h1>
        </header>
        
        <nav id='nav' role='navigation'>
      <ul>
      <li><a href='/about'>About</a></li>   
      <li><a href='/articles'>Articles</a></li>
      <li><a href='/staff'>Staff</a></li>   
      <li><a href='/contact'>Contact</a></li>
  </ul>
        </nav>
        <article id='main' role='main'>
             hello world!
        </article>

        <footer id='footer' role='contentinfo'>
              <p>&copy; 2019 Awesome Site</p>
        </footer>
  </body>
</html>

 

　　　　我们可以看到html5标准的新元素都附有一个名为‘role’的属性，这对文档中反复使用的html5元素极为有用

 

1.3 表现层

　　表现层即css.从灵活度看，表现层在渐进增强模型的三个层次中是最为重要的一层。如果css层掌握的好，那么对js的代码编写也有促进作用。从性能渲染上看，其他技术的渲染都比不上css的渲染尤其是js的代码，js的熟读是出了名的慢。

　　如果熟悉了css的全部功能，并将认识到表现层与行为层分离所带来的好处，那么可以直接将许多原来以js语言编写的复杂函数改写成更为高效的css代码。也可以说写好js代码的关键在于明白什么时候应该绕过js代码，直接以css来完成需求。

　　1.3.1 内联css

<nav id='nav' role='navigation' style='background:#c00;padding:10px;'>
  <ul style='list-style:none;margin:0;'>
      <li style='float:left;'><a href='/about'>About</a></li>   
      <li style='float:left;'><a href='/articles'>Articles</a></li>
      <li style='float:left;'><a href='/staff'>Staff</a></li>   
      <li style='float:left;'><a href='/contact'>Contact</a></li>
  </ul>
</nav>

 

　　　　内联css是一style属性的形式书写的，并且直接附着在某个html元素之上。但这种css的效果仅仅局限在该元素的内部，既不能缓存也不能复用，所以我们尽量不要采用这种不明智的写法.

　　　　虽然说内联css有上述缺点,不过它还是很重要的,因为很多js程序在html中动态生产的就是这些style属性,况且如果你的js代码就是为了生产css代码而写,那么为何不直接使用css呢?这就是如果css层掌握的好，那么对js的代码编写也有促进作用.

　　1.3.2 链接外部样式表

　　　　设计页面时将css放在一个完全单独的文件之中，并在html文档中将其链接进来，这在很大程度上说是一种最为理想且最为适合的方式。

<head>
    <title>Greate Home PAge</title>
    <meta charset='utf-8'>
    
    <!--CSS-->
    <link rel='stylesheet' href='css/style.css'>
</head>

　　　　尽管理论上可以将css代码分散放置在多份文件中，不过实际上还是建议大家把他们都放在一个文件里。在html文档中链入的资源(包括css文件,js文件及图像)都将产生http请求(http request),也就是说,浏览器在向用户呈现页面之前,必须先将链入的资源下载下来,这个过程每时每刻都在发生.但我们得尽可能地降低http请求的数量,因为过多的请求终究会影响网站的性能.

　　　　我们将

 

posted on 2019-11-19 11:23  而今  阅读(112)  评论(0)    收藏  举报