《孙丽平前端开发作业》由会员分享，可在线阅读，更多相关《孙丽平前端开发作业（27页珍藏版）》请在金锄头文库上搜索。
1、前端开发知识总结前端开发知识总结一、前端简介一、前端简介Web 前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过 5 年。Web 前端开发是从网页制作演变而来的，名称上有很明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web 前端开发工程师这一职业终于从设计和制作不分的局面中独立出来。早期的前端其实就是 Table 布局，后来发展到所谓的 Div + CSS 网站重构，再到现在的让人 眼花缭乱的各种各样的新技术，Web 前端技术发展是非常快速的，因此选择了前端这个行 业就意前端开发的核心是前端开发的核心是 HTML + CSS + J
2、avaScript。本质上它们构成一个。本质上它们构成一个 MVC 框架，即框架，即HTML 作为信息模型（作为信息模型（Model），），CSS 控制样式（控制样式（View），），JavaScript 负责调度数据和负责调度数据和实现某种展现逻辑（实现某种展现逻辑（Controller）。）。二、知识要点二、知识要点（一）信息结构（一）信息结构【HTML】1. 标签的分类标签的分类（1）. 标签表示一个元素标签表示一个元素（2）. 按性质划分按性质划分: Block-Level 和和 Inline-Level（3）. 按语义划分按语义划分: 2. XHTMLXHTML 于 2000 年的
3、1 月 26 日成为 W3C 标准。W3C 将 XHTML 定义为最新的HTML 版本。XHTML 将逐渐取代 HTML。XHTML 是通过把 HTML 和 XML 各自的长处加以结合形成的。3. 标签的语义化标签的语义化为表达语义而标记文档，而不是为了样式，结构良好的文档可以向浏览器传达尽可能多的语义，不论是浏览器位于掌上电脑还是时髦的桌面图形浏览器。结构良好的文档都能向用户传达可视化的语义，即使是在老的浏览器，或是在被用户关闭了 CSS 的现代浏览器中。同时结构良好的 HTML 代码也有助于搜索引擎索引你的网站。不要使用 table 布局，table 是用来表格显示的。不要到处滥用 div
4、 标签，div 是用来分块用的。不要使用样式标签，如 font, center, big, small, b, i，样式可以用 CSS 来控制，b 和 i 可以用 strong 和 em 来代替。不要使用换行标签和空格来控制样式，请用 CSS。尽量不要使用内联 CSS （二）（二）【CSS】1. CSS 基础知识基础知识层叠和继承优先级盒模型定位浮动2. CSS 进阶进阶A. CSS SpriteCSS Sprite 主要用于前端性能优化的一种技术，原理是通过将多张背景图片合成在一张图片上从而减少 HTTP 请求，加快载入速度。B. 浏览器兼容性浏览器兼容性绝大部分情况下我们需要考虑浏览器的兼
5、容性，目前正在使用的浏览器版本非常多，IE6, IE7, IE8, IE9, IE10, Chrome, Firefox, Safari。C. IE HasLayout 和和 Block Format ContentIE HasLayout 是一个 Internet Explorer for Windows 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。目前只有 IE6 和 IE7 有这个概率。BFC 是
6、W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。这个其实和浏览器的兼容性有关，因为绝大部分的兼容性问题都是它们引起的。参考：CSS BFC 和 IE Haslayout 介绍D. CSS FrameworkCSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化 web 前端开发的工作，提高工作效率。目前常见框架有：960 Grid SystemBlueprint CSSBluetripMinimum Page还是一个比较出名和特殊的框架是 Twitter 的 Boot
7、strap。Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS 和 HTML 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式，表单，buttons，表格，网格系统等等。它是基于 Less 开发的。不支持 IE6，在 IE7 和 IE8 里效果也不咋地。E. CSS3虽然 CSS3 还没有正式成为标准，但是包括 IE9+, chrome, Firefox 等现代浏览器都支持CSS3。CSS 提供了好多以前需要用 JavaScript 和切图才能搞定的功能，目前主要功能有：圆角多背景font-face 动画与渐变渐变色Box 阴影RGBa-加入透
8、明色文字阴影F. CSS 性能优化性能优化CSS 代码是控制页面显示样式与效果的最直接“工具”，但是在性能调优时他们通常被 Web 开发工程师所忽略，而事实上不规范的 CSS 会对页面渲染的效率有严重影响，尤其是对于结构复杂的 Web 2.0 页面，这种影响更是不可磨灭。所以，写出规范的、高性能的 CSS 代码会极大的提高应用程序的效率。参考 CSS 性能优化探讨G. LESS 和和 SASSLESS 和 SASS 都是 CSS 预处理器，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以
9、让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。SASS 基于 Ruby 开发。LESS 既可以在客户端运行，也可以借助 Node.js 或者 Rhino 在服务端运行。（三）（三）【JavaScript】1. JavaScript 基础知识基础知识数据类型变量表达式与运算符控制语句函数异常OO 事件BOM 闭包2. JavaScript 进阶进阶A. DOMDOM 即文档对象模型，HTML DOM 定义了访问和操作 HTML 文档的标准方法。几乎所有的现代浏览器都能很好的支持 DOM 了。B. JSONJSON(JavaScript Object Notation) 是一种轻量级
10、的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。是目前事实上数据交换的标准格式，几乎所有语言都支持JSON，比 XML 强太多了。C. AJAXAJAX 即“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML)，AJAX 并非缩写词，而是由 Jesse James Gaiiett 创造的名词，由 Google 发扬光大。用于创建更好更快以及交互性更强的 Web 应用程序的技术。D. JavaScript FrameworksJavaScript Frameworks 可以极大简化我们 JavaScript 编程的工作量，它主要提
11、供了以下几个主要功能： DOM 操作，跨浏览器兼容性，以及程序架构。当然像 jQuery 它本身其实并不是一个框架，它是一个库(lib)。目前主流的框架或库有如下几个：jQueryYUIDOJOMootoolosExtJSPrototypeE. HTML5HTML5 同 CSS3 类似，即虽然没有成为标准，但是主流的浏览器都支持了。HTML5 不是HMTL，虽然也提供了一些新标签，但是它的主要用途还是 JavaScript。HTML5 主要提供以下功能：本地音频视频播放Canvas/SVG 地理信息硬件加速本地运行本地存储从桌面拖放文件到浏览器上传语义化标签，Form 表单F. 前端模板前端模
12、板前端模板主要是为了解决复杂的数据拼接问题，可以将模板语言转换化为 HTML 结构，可以大大简化工作量，同时代码的可维护性得到很大的提高。目前比较主流前端模板有：MustCacheJsRenderG. 前端前端 MVCWeb 应用的功能越来越强，Javascript 代码也越来越多，大量的 JS 代码要以何种架构来组织就成了一个亟待解决的问题，于是就有人把传统的 MVC 架构移植到前端来解决这些问题。目前主流前端 MVC 框架主要有以下这些：Backbone.jsSpineKnockoutJSYUIAgility.jsEmber.jsBatman.jsAngularJS(Google)Dojo
13、TodoMVC 用上面所有的 MVC 框架写了同一个示例代码“Todo List”，是个学习对比 MVC框架的好地方。H. 模块化开发模块化开发其实现在 JavaScript 模块化是个很热门的东西了，主要特点是“模块化开发，按需加载“。这其中 CommonJS 组织定义了 AMD 的规范用来规范浏览器端的模块定义。RequireJS和 SeaJS 是实现了 AMD 的两个优秀的框架。详见：http:/ 单元测试单元测试但是随着单元测试的普及，尤其是敏捷开发的推动，涌现了许多优秀的 JavaScript 单元测试框架，见详细列表。所有的这些框架基本上都能对 Javascript 代码进行很好的
14、测试，当然 UI 部分的代码测试一样比较麻烦，但是我们可以通过精心构造我们的测试代码来测试部分 UI 代码。主流的测试框架如下：QUnitJasmineJsTestDriver目前 jQuery 的所有代码都是通过 QUnit 进行测试的，并且将测试代码放在 Github 上了，大家感兴趣可以参考一下。详见：JavaScript 单元测试框架介绍J. JavaScript 设计模式设计模式好多设计模式是可以应用于 JavaScript 的，比如经常用到的事件处理的观察者模式，因此设计模式是提升编码层次的必学技术。K. NodeJSNodeJS 现在是比较火热的，其最大的贡献就是把 JavaSc
15、ript 移植到服务器端了，这样前端和后端就可以使用同样的技术，方便统一开发。而且 NodeJS 是非阻塞调用的，在特定领域性能是非常强劲的。而且这是前端开发人员进军后台开发的好机会，进而前后端统一开发，但又不用去学习其它后台开发语言。L. ES5ES5 就是 ECMAScript 5，也就是最新的 JavaScript 规范，对之前的 JavaScript 作了很多改进，增加了好多新的特性，比如 JSON，而且现代主流浏览器都开始支持 ES5 了，还是非常有必要学习一下的。（四）（四）【Others】下面是一些和 HTML, CSS, JavaScript 没有直接关系，但是对于前端开发同样
16、非常重要的一些技术。1. 响应式设计响应式设计伴随着各种智能设备的流行，响应式设计现在是非常火热。以前做网页只要面向 PC 机的浏览器，页面直接固定宽度就行，比如 960px，而现在通过手机的访问量已经超过 PC 机，并且设备的尺寸多种多样，未来会更多。在这种背景下，网页支持所有设备进行访问是基本要求了，而响应式设计能很好的解决这些问题。2. Http1.1HTTP 对于前端开发来说还是很重要的，比如最简单的 GET，POST 方式，Request/Response 头部，状态码等。3. Web 移动开发移动开发现在移动开发非常非常流行了，而开发方式一般是 native 的方式或者 Web 方式，作为前端开发人员来说自然是去学习 Web 移动开发了。PhoneGap 是必学的，前端层面的框架如 jQueryMobile, Sencha Touch
