前端知识体系回顾——第一章 Web标准

posted @ May 2, 2016 • 陈凯 • 技术基础

摘要：「这是我学习前端开发知识体系的第一章 Web标准知识的总结。深刻理解Web标准是前端开发的第一步。」

1. 三层架构

三层架构指的是：结构层对应HTML，表现层对应CSS，行为层对应Javascript，三者所构成web标准。网页分成三个层次，即：结构层、表示层、行为层。

  • 网页的结构层（structural layer）：由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
  • 网页的表示层（presentation layer）由CSS负责创建。CSS 对“如何显示有关内容”的问题做出了回答。
  • 网页的行为层（behavior layer）：负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

2. web语义化

Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。HTML的每个标签都有其特定含义（语义），页面语义明确，结构清晰，搜索引擎也可以认出哪些是页面重要内容，予以较高的权值，有利于整个网站的SEO优化。

HTML 规范其实一直在往语义化的方向上努力，许多元素、属性在设计的时候，就已经考虑了如何让各种用户代理甚至网络爬虫更好地理解 HTML 文档。

HTML5 更是在之前规范的基础上，将所有表现层（presentational）的语义描述都进行了修改或者删除，增加了不少可以表达更丰富语义的元素。为什么这样的语义元素是有意义的？因为它们被广泛认可。所谓语义本身就是对符号的一种共识，被认可的程度越高、范围越广，人们就越可以依赖它实现各种各样的功能。

语义化经历的三个阶段：

A、浏览器和W3C组织推出的如h1~h6、thead、ul、ol的HTML标签，用于在Web页面中组织对应的内容，如网页标题、表头、无序、有序列表，以达到更方便的协作及传播互联网内容。搜索引擎很好的利用了这些语义化标签抓取内容，又鉴于搜索引擎的巨大流量推荐，Web前端不得不考虑SEO，从而两者实现有益的循环，共同推进着语义化标签的使用。

B、但Web的发展超乎想象，起初定义的HTML语义化标签，不足以实现对Web页面各个部分的功能或位置描述，所以Web前端人员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id=”footer”或者class=”footer”的属性（值），以“无声”的方式在不同的前端程序员或者前后端程序员间实现交流。

C、W3C组织意识到了之前HTML版本的不足，推出的HTML5进一步推进了Web语义化发展，采用了诸如footer、section等语义化标签，弥补了采用id=”footer”或者class=”footer”形式的不足，以更好的推动Web的发展。

说说你对语义化的理解？

1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构; 2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重； 3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页； 4，便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3. 响应式web设计

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端–而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用”大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

主要是采用CSS3的Media Query媒体查询技术，实现不同终端下的布局排版的调整，著名的Bootstrap和Foundation前端UI框架采用了响应式布局，移动先行。

4. 前后台交互方式及区别

原始的由cookie方法，session方法来进行信息数据交互。Java中使用Servlet来处理JSP传来的数据。当前最流行的是采用Ajax技术来抓取HTML页面的数据，交给后台脚本处理。还有比较流行的Comet和H5的websocket来交互数据

如果是ajax的话，前端负责用js操作数据并展示，下面是一个前后端规定的数据格式：

{"flag":"001","content":{}}

上面是应该json数据，有项目的时候，前后端会大概说一下接口地址，前端请求的参数，后端返回的参数

现在主流的前后端交互是用ajax，主流的框架用jquery，一个jquery请求ajax的例子：

$.ajax({
           url: '/path/to/file',//请求地址
           type: 'GET',
        dataType: 'json',
        data: {param1: 'value1'},//参数
        success: function (obj){ //返回的内容
            //遍历obj//前端在这里操作返回的数据，并展示
        }
})

前后端交互没那么难，前端最关键核心的东西是core js。

DOM操作都是可以找API，然后对着文档来做，想提高前端就提高自己的core js。这样的话才能提高核心竞争力。 简单点说，就是前端技术与后端技术沟通，根据业务定义交互接口，交互接口的的形式可能包含：

// 将后台数据输出到html中，可以通过获取div的innerHTML获取数据
<div id="div1">content............</div>
// 将动态数据输出到input中
<input type="hidden" value="content" />
// 定义一个window下的全局变量，在JS需要使用时，可以随时取得
window.Configs = {
username: 'xxxx'
};

1、后端将数据输出到HTML页面，在JS控制逻辑中需要访问数据时可以从HTML中取得，如下：

还有一种，使用cookie进行数据的交互，但是cookie的限制就比较多，所以应用场景会受到限制。

2、定义前后端请求的接口，一般是AJAX接口，如果存在跨域问题或一些特殊的业务场景，可能也会使用JSONP或者其他方式，总之，不论是何种方式请求，目的都是动态的请求数据，然后根据返回数据刷新页面内容。返回数据的格式现在主流是使用JSON格式，但是也不排除一些特殊的业务场景需要是使用XML或其他格式的数据。

总之，前端后端交互无非就是，前端如何取到后台数据，然后控制页面的显示与操作，使用什么方式获取数据其实无所谓，目的只有一个就是获取到数据用于展示。 ajax写在js脚本里，一般是获取表单的数据（value）然后传到php脚本进行处理，再接受返回的数据。jquery的写法

js脚本:
$.ajax({
    type:'get', 
    url:'index.php',
    data:{
        id:1,
        num:2
        },
    datatype:'json',
    success:function(data){   //这里的data是php返回的数据，参数是data固定不变
        alert(data);//输出php脚本里'echo' 后面的数值，也就是3
    };
})

type是传值的方式，有get和post，php脚本里取值语句也要用对应的方式。url后面的参数是将数据传递到你想要的php脚本路径，这里是相对路径。data是你要传递的数据，一般从表单中娶过来后写成json的形式传递。 datatype是上一行传递的数据的格式，success是传递成功后的反馈或者使用接收回来的数据，这里的data参数是php处理后的（你想要的）数据，php那边对应的是echo后面的东西。

php脚本：
index.php
<?php 
    $id=$_GET['id'];//$id=1
    $num=$_GET['num'];//$num=2
    $data=$id+$num;
 //$data=1+2=3
    echo $data;
  ?>

前面两句是取传过来的数据，分别对应了ajax里data的数值，第三句是一个简单的数据处理。最后php脚本的输出值就是echo语句后面的内容，并返回给js脚本里success的function的参数data。

更多参考是前后台数据交互的几种方法（项目工具库中前后台数据交互方式）。

5.渐进增强和优雅降级

  • 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
  • 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

6.你觉得前端工程的价值体现在哪

  • 为简化用户使用提供技术支持（交互部分）
  • 为多个浏览器兼容性提供支持(兼容性角度)
  • 为提高用户浏览速度（浏览器性能）提供支持
  • 为跨平台或者其他基于webkit或其他渲染引擎的应用提供支持
  • 为展示数据提供支持（数据接口）

7.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。

  1. 实现界面交互
  2. 提升用户体验
  3. 有了Node.js，前端可以实现服务端的一些事情
  4. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，
  5. 参与项目，快速高质量完成实现效果图，精确到1px；
  6. 与团队成员，UI设计，产品经理的沟通；
  7. 做好的页面结构，页面重构和用户体验；
  8. 处理hack，兼容、写出优美的代码格式；
  9. 针对服务器的优化、拥抱最新前端技术。

8.网站重构的理解？

网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。

对于传统的网站来说重构通常是：

  • 表格(table)布局改为DIV+CSS
  • 使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
  • 对于移动平台的优化
  • 针对于SEO进行优化
  • 深层次的网站重构应该考虑的方面
  • 减少代码间的耦合
  • 让代码保持弹性
  • 严格按规范编写代码
  • 设计可扩展的API
  • 代替旧有的框架、语言(如VB)
  • 增强用户体验
  • 通常来说对于速度的优化也包含在重构中
  • 压缩JS、CSS、image等前端资源(通常是由服务器来解决)
  • 程序的性能优化(如数据读写)
  • 采用CDN来加速资源加载
  • 对于JS DOM的优化
  • HTTP服务器的文件缓存

9.说说你对前端架构师的理解

  • 负责前端团队的管理及与其他团队的协调工作，提升团队成员能力和整体效率；
  • 带领团队完成研发工具及平台前端部分的设计、研发和维护；
  • 带领团队进行前端领域前沿技术研究及新技术调研，保证团队的技术领先
  • 负责前端开发规范制定、功能模块化设计、公共组件搭建等工作，并组织培训。

10.什么样的前端代码是好的

  • 高内聚低耦合，这样文件小，好维护，而且好扩展。