前端概述

676 views

Published on

一份前端的概述介绍,简单介绍前端开发各个方面的基本概念

Published in: Technology
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total views
676
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
22
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • 首先,什么是前端呢,前端的领域是如何划分的?其实我们每个人在生活中都会接触到前端技术,比如你打开浏览器浏览网页。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 用户打开浏览器,在浏览器的地址栏中输入 url。浏览器会发送数据请求到有道的前端服务器上,前端服务器再去后端的数据服务器,比如 omap 去操作数据,生成要给用户的页面。返回给浏览器。浏览器拿到页面后,渲染页面,呈现给用户。\n\n在这个过程中,用户能直接感受到的部分就是前端,比如浏览器中的页面,感受不到的部分就是后端。前端的范围就是虚线框中框到的。之所以一部分 frontend server 在框中,是因为 frontend server 要负责页面的渲染和数据操作。有些公司会将这个 frontend server 也划入前端范围,这个是比较宽泛的前端定义。前端最主要的部分还是都在浏览器中的。\n
  • 以有道首页为例,所有你看到的内容,都是通过前端技术呈现在你的浏览器中。如果你把有道首页通过浏览器保存到本地的话,你可以看到基本上有三类文件,HTML、JS、和 CSS。HTML 决定了页面的内容,比如中间的搜索框,HTML 使得页面上存在输入框这个元素。CSS 决定输入框显示成什么样子,显示多宽多高,显示在哪里,颜色之类的样式。JS 决定当你在输入框中打字时,输入框的行为,比如弹出一个 suggest 列表。\n
  • 这三者分别对应了一个页面上的 内容、样式和行为。拿盖房子做个比方,HTML 是房子的结构,CSS 是房子的装修,JavaScript 就是物业。\n\nHTML CSS JS 最终都是由浏览器来渲染的。浏览器是这三者运行的容器。\n
  • 浏览器的主要作用是,解析渲染 HTML/CSS,下载外部资源,提供 JavaScript 执行环境和响应用户操作。\n
  • 所以,前端技术实际上就是指浏览器中的 JavaScript/HTML/CSS 开发。\n\n接下来我们举一个例子,做一个简单的有道笔记。\n
  • 这个是我们要实现的效果,一个非常简单的 DEMO。它只做两件事情\n
  • 第一件事情是在左侧将所有的笔记列出来,并可以通过点击选择笔记,将笔记的全文显示在右侧。\n
  • 第二件事是你在右侧的笔记编辑区域内可以写笔记,然后点击保存按钮,可以将笔记内容保存回服务器,同时左侧列表的数据会被更新。\n\n要完成这个页面,需要 HTML/CSS/JavaScript 互相配合,还会涉及到 AJAX 技术。接下来我将逐一向大家介绍这几项技术,并逐渐完成这个页面。\n
  • 首先是 HTML,HTML 的全称是超文本标记语言(Hyptertext Markup Language),所谓超文本,就是页面上的一个个超链接。为什么 HTML 要这么强调超链接呢?这跟最初的设想有关,最开始时,HTML 是为了文本的显示而设计的。为了在各个文章中跳转,就需要有一个机制将文章关联起来。因此就设计了超链接这个概念,HTML 页面通过超链接互相联系起来。\n
  • 另外 HTML 的一个重点是标记语言。HTML 本身是 SGML,即通用标记语言的一个实现。因此 HTML 的内容都是通过各种标签来组织的。这是一个最基本标签的实例,一个完整的标签由开始标签、标签属性、标签内容和结束标签组成。\n
  • \n
  • HTML 标签有很多种,每种标签都有自己适合的场合。比如用来划分结构的 p/div,标记列表的 ul、ol,接受用户数据的 form、input 等。\n
  • 这是一个简单的 HTML hello world! DEMO。一份合法的 html 文档应该看起来是这个样子的:有一个 doctype,声明整个代码所遵循的 HTML 标准。有全局唯一的 html 标签,html 标签中有全局唯一的 head 和 body 标签。head 中定义了一些例如浏览器标题、文档编码、js、css 文件资源链接等页面信息。而 body 标签内的内容会直接显示在浏览器里。\n\n在这份文档里,doctype 扮演者很关键的角色。因为 HTML 本身的进化,使得其已经出现了各种不同的版本,例如 HTML 4.0、XHTML、HTML 5.0 等。因此就需要 doctype 来说明,此份文档所遵循的标准格式。\n
  • 这是几个比较有代表性的 HTML doctype,第一行是 HTML 4.01,第二行是 XHTML 1.0。这两行都比较长,大家都纷纷反应打这么一行太累了。于是到了 HTML5,doctype 被简化成最简单的一行。\n\n这也是因为考虑尽管几种 HTML 对于语法上略有不一致,但对于渲染来说,影响不太大。在应用中,doctype 实际上是为了强制 IE 使用标准模式来渲染页面而存在的。因此 HTML5 就取消了 doctype 声明版本的功能,仅使得其 doctype 可以在 IE 下触发标准模式。\n
  • 刚才提到 XHTML,XHTML 可以被认为是为了让搜索引擎和其他程序更好的识别网页内容而提出的一个标准。HTML 4.0 以前的规范对于语法要求是非常松散的,也没有很好用的 HTML parser。因此标准化组织就提出了 XHTML 规范。\n从继承关系上讲,HTML 是 SGML(标准通用标记语言)的一个应用,而 XHTML 是 SGML 的一个子集。\nXML 规范非常严格的定义了一些语法要求,使得一份合法的 HTML 文档同时也是一份合法的 XML 文档。因此各类 parser 可以很方便的解析文档的结构和内容。\n
  • 比如,XHTML 规范要求所有的标签名和属性名都必须小写,所有标签都必须闭合。如果标签不能闭合,则应该在标签的右括号之前加一个斜线。还必须 img 标签必须有 alt 属性等等。\n\nXHTML 规范最流行的版本是 1.0 和 1.1,后来 XHTML 2.0 规范在制定的时候,跟 HTML 5 撞车。标准化组织决定放弃 XHTML。在 HTML5 规范中,已经不在强制要求这些语法规定,但是因为 XHTML 的流行,大多数程序员都保留了这些个习惯。而且这些语法上的要求可以让你的页面更好更快的被浏览器解析,因此推荐大家现在写页面的时候依然遵循 XHTML 规范的要求。\n\nXHTML 的努力是为了让 web 上的各个资源更好的被其他程序所理解。这个目的也是 HTML 5 规范所一直追求的,HTML 5 规范更进一步,希望通过更加语义化的标签来实现整个页面的语义化。\n
  • 以一个页面上的导航栏为例,程序很难识别一组完全不语义化的标签。对于第二种,程序大概能知道其中的几个元素是并列的列表关系。\n\nhtml 5 则通过一个 nav 标签直接标记这组链接是页面上的导航链接。\n
  • html 5 提出了很多这样的标签,比如 header、footer、article、article、section 等。这些都是为了让页面更加的语义化,让程序能更好的分析页面。\n
  • 除此之外,HTML 5 还提出了 data 属性,这样就可以通过一个 data- 前缀把数据嵌入到 HTML 代码里。\n\n这样做可以更好的区分标签自身的属性和标签所携带的数据,对 parser 更加友好,这些数据也更方便管理。\n
  • 那么回到我们最开始的例子,对于我们这个最简单的页面,如何去写 HTML。\n
  • 首先,我们从视觉上对页面进行划分。整个页面最外层是 body 标签。然后左侧是 aside 侧边栏标签。aside 中有很多篇笔记,每一篇笔记都标记成一个 div。右侧是主要的 article 标签,标记这里是一篇文章。article 中有一个文本输入框 textarea,和一个保存按钮 button。\n\n整个页面的基本结构就是这样。\n
  • 写成代码的话,看起来是这个样子的。\n
  • 但是这个代码还没有任何的样式,在浏览器中直接打开的话,就是这个样子。布局跟我们所要求的不一样。为了实现我们所要求的布局,就需要使用 css 来给它加上样式。\n
  • \n
  • \n
  • 接下来讲 JavaScript,前端开发的核心。在将 JS 语法之前,我想先讲一段很有趣的历史,关于 JavaScript 的诞生。\n
  • JavaScript 和 Java 的关系,就像印度和印度尼西亚的关系一样。只是名字类似。\n\n之所以起这个名字,是因为当年 Netscape 与 Sun公司结成联盟。当时的形势就是,网景公司的整个管理层,都是Java语言的信徒,Sun公司完全介入网页脚本语言的决策。因此,Javascript后来就是网景和Sun两家公司一起携手推向市场的,这种语言被命名为"Java+script"并不是偶然的。\n\n然后,1995年4月,34 岁的程序员 Brandan Eich 加入了 NetScape\n\n仅仅一个月之后,1995年5月,网景公司做出决策,未来的网页脚本语言必须"看上去与Java足够相似",但是比Java简单,使得非专业的网页作者也能很快上手。这个决策实际上将Perl、Python、Tcl、Scheme等非面向对象编程的语言都排除在外了。\nBrendan Eich被指定为这种"简化版Java语言"的设计师。\n\n但是,他对Java一点兴趣也没有。为了应付公司安排的任务,他只用10天时间就把Javascript设计出来了。\n总的来说,他的设计思路是这样的:\n(1)借鉴C语言的基本语法;\n(2)借鉴Java语言的数据类型和内存管理;\n(3)借鉴Scheme语言,将函数提升到"第一等公民"(first class)的地位;\n(4)借鉴Self语言,使用基于原型(prototype)的继承机制。\n所以,Javascript语言实际上是两种语言风格的混合产物 ----(简化的)函数式编程+(简化的)面向对象编程。这是由Brendan Eich(函数式编程)与网景公司(面向对象编程)共同决定的。\n
  • 由于设计时间太短,语言的一些细节考虑得不够严谨,导致后来很长一段时间,Javascript写出来的程序混乱不堪。\n多年以后,Brendan Eich还是看不起Java 。如果不是公司的决策,Brendan Eich绝不可能把Java作为Javascript设计的原型。作为设计者,他一点也不喜欢自己的这个作品\n十八世纪英国文学家约翰逊博士说得好:‘它的优秀之处并非原创,它的原创之处并不优秀。’\n\n
  • 但不管 JavaScript 设计时有多少问题,最终它还是借着互联网的发展,火起来了。这是今年3月的编程语言排行,JavaScript 击败了 Python、Ruby 排在了第8位。在 JS 上面,只有 Java、各种 C、PHP 和 VB。\n就脚本语言来说,JavaScript 已经是仅次于 PHP 第二流行语言。\n
  • 也是因为 Javascript 之后发展的如此火爆,1997年,JavaScript1.1作为一个草案提交给欧洲计算机只制造商会(ECMA)。第39种技术委员会(TC39)被委员派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/tc39.htm)。由来自Netscape、Sun、微软、Borland和其他一些对脚本编程感兴趣的公司的程序员组成的TC39锤炼出的ECMA-262,该标准定义了叫做ECMAScript的全新脚本语言。\n \n从此,Web浏览器就开始努力(虽然有着不同程度的成功和失败)将ECMAScript作为JavaScript实现的基础。\n
  • ECMA 规范从 1997 年至今已经发布了 4 个正式版本,最新的正式规范是 ECMAScript 5,ECMAScript 4 最终失败,没有正式对外发布。\nECMA: 语法、类型、语句、关键字、保留字、运算符、对象。\n
  • JavaScript 没有类型检查,变量被声明后可以任意赋值。\n
  • JavaScript 有一些函数式的编程思想(Brendan Eich 本人就很喜欢函数式)。在 JavaScript 中,函数是头等对象,可以被赋值给变量、作为参数传递以及作为函数的返回值返回。\n
  • JavaScript 的作用域是以函数为划分的,每一个函数内部有独立的作用域\n
  • 花括号不会创建新的作用域。在这个例子里面,for 循环块内的 a 就是最外部的 a,因此 for 循环块可以修改 a 的值。\n这个特性(Bug)也叫无块级作用域\n
  • 在当前函数中找不到的变量,JavaScript 会按由内向外的顺序依次查找外层函数作用域,一直查找到全局作用域为止。这个特性也叫词法作用域,\n
  • 闭包是函数作用域+词法作用域的结果。如果一个函数内部有子函数,并且子函数引用了fuhanshu\n
  • 闭包是函数作用域+词法作用域的结果。如果一个函数内部有子函数,并且子函数引用了fuhanshu\n
  • ECMAScript 5 是 2009 年提出的新规范,大幅修改了语言核心的设计,但语法风格保持不变,并且上下兼容。对与开发人员来说,最直接的体会,就是加入了 ‘strict’ 严格模式,以及诸多新增的 API。\n
  • \n
  • \n
  • \n
  • ECMAScript 5 是 2009 年发布的规范,迄今为止,大部分浏览器对其的支持都不错,除了老旧的 IE。为此,有人写了一个 es5-shim 的 javascript 脚本,给这些浏览器补上了一部分所欠缺的 API。因此,在目前的前端开发里,已经可以直接放心地使用大部分的 ES 5 api 了。\n
  • ECMAScript 的下一个版本将会是 6,也是 JavaScript 发明者 Brendan Eric 一直梦想的一个版本。它吸收了当初 ECMAScript 4 的一些设计思想,希望弥补当年的过错。\n
  • ES6 的开发代号是 harmony,Brendan 也曾在 Blog 上发了一篇文章,Harmony my dream 来介绍了一些 ECMAScript 6 的语言特性。\n\n我看过 ES6 的感想是,ES6 看起来很难向下兼容,如果正式发布的话,恐怕会变成 python2 和 python3 的关系。\n
  • 在 JavaScript 的缺点被弥补前,建议大家在写代码前都去阅读 JavaScript 语言精粹这本书。该书中一一指出了 JavaScript 不合理和容易被滥用的地方,并给出了一个安全的语法子集。有效避免代码写恶心。\n
  • 说了半天历史,回过头来说浏览器中的 JavaScript。刚才说到,浏览器中的 JavaScript 实际上只是 ECMAScript 的一个实现。除了 ECMAScript 部分以外,浏览器中的 JavaScript 还包括浏览器对象模型 BOM,以及文档对象模型 DOM。\n
  • \n
  • 浏览器对象模型是一系列的接口,给 JavaScript 控制浏览器的能力。比如获取浏览器的宽和高、改变浏览器当前的 url、读写 cookie、控制历史记录等。HTML 5 还增加了离线存储、地理位置等等新的 API,这些 API 都属于 BOM 范畴。\n
  • DOM 可以说是 BOM 中特殊的一类 API,这类 API 专注于操作文档树。\n
  • 浏览器在解析完 HTML 后,会将 HTML 代码封装成一棵文档树提供给 JavaScript。JavaScript 通过 DOM API 中定义的方法可以实现在文档树中的遍历、查找、增删节点、改变节点样式和内容等功能。\n
  • 比如通过 getElementById 或者 querySelector 方法可以直接检索你想要的节点。\n
  • 再可以通过 firstChild、nextSibling、parentNode 可以在文档树中根据一个已有节点移动到其他要找到的节点上去。\n
  • 找到节点后还可以通过这appendChild/removeChild/insertBefore等方法增删新节点,通过 innerHTML 设置节点的内容,通过 style 属性改变节点的样式等。\n\n\n
  • 另外,还可以在元素上绑定事件监听函数。\n
  • 另外,还可以在元素上绑定事件监听函数。 如果说 BOM API 赋予了 JS 控制浏览器的能力,则 DOM API 赋予了 JS 控制页面内容的能力。 \n
  • DOM API 分为 Level 1 到 Level 3 三个级别。相当于第一版、第二版和第三版。这也是随着技术的发展,原有的 API 不能满足需要,标准化组织就要制定更高级的 API。通常含义上说一个浏览器完整支持 HTML5,则它应该完整的支持 3 级 DOM API。\n\nAPI 文档规范可以直接去 w3.org 查看定义,非常详细,略显枯燥。或者可以看 DOM Scripting 这本书。\n
  • 另外,不要看 MSDN 上的文档,有很多 m$ 的私有 API,代码风格也不太好。\n
  • 说到 IE,就不得不提浏览器兼容性问题。IE 有着众所周知的糟糕的兼容性问题。IE 6 对于 DOM API 的支持非常差。而且 DOM API 用起来也比较麻烦。因此就有了 jQuery 这类方便使用的库。这类库封装了浏览器原生的 API 和浏览器兼容性问题,提供了对开发人员更加友好的 API 来操作文档树。\n\n对于 jQuery,我会在介绍完 AJAX 之后再进行介绍。\n
  • \n
  • AJAX 兴起也快10年了。AJAX 的核心在于浏览器提供的一个 XHR 对象,XHR API 是很早就有了的一个 API,但是 gmail 对于 XHR 的大规模使用让 AJAX 这个名词一夜间火爆整个互联网。\n
  • 那么,AJAX 到底做了什么呢?在AJAX 出现之前,要向服务器发送数据,基本上只有两种方式,点击链接,或者提交一个表单。比如那时候的 google 主页,就只有一个输入框,和两个按钮。当点击搜索按钮时,浏览器把搜索框和按钮所在的表单以 POST 请求形式发送到服务器,服务器处理这个请求。\n\n这种形式对于用户的交互限制的很严格,而且请求数据同时,页面不能做任何操作。用户在访问网站时,就会感觉是在一个页面一个页面之间跳转。\n
  • AJAX 给予了 JavaScript 操纵数据的能力。因为灵活的 JavaScript,使得页面几乎可以实现任意的交互方式。数据的发送和接受不再会导致页面被阻塞,用户也不会感觉到自己在提交数据时是从一个页面跳转到另一个页面。使得网页做到和本地应用程序接近的体验成为了可能。\n\n因此,AJAX 最关键的一点在于提交数据的时候,页面不会被阻塞,也不会被浏览器刷新。\n
  • AJAX 的异步数据请求是通过 XMLHTTPRequest 对象来完成的,也被成为 XHR 对象。\n\nXHR 对象提供了 readystatechange 事件,当服务器的数据返回后,readystatechange 事件被触发,事件回调函数被执行。在数据返回之前,JavaScript 会继续向下执行,数据的发送不阻塞 JavaScript 的执行。\n
  • AJAX 的另一个概念是 XML,即 AJAX 最开始是通过 XML 作为数据的传输格式。XHR 对象直接提供了 responseXML 属性,将服务器返回的 xml 数据变成一个 xml 对象。javascript 可以通过和 dom api 类似的方法遍历这个 xml 对象中的数据。\n\nXML 在 AJAX 刚兴起的时候非常流行。后来逐渐大家发现xml的诸多缺点,比如规则复杂、标记太多、数据量太大等。\n
  • 后来,JSON 出现了,并且迅速代替了 XML,作为最流行的 AJAX 数据格式。\nJSON 的全称是 JavaScript Object Notation,基本上,JSON 就是一段 JavaScript 代码。\n
  • 这是一段 JSON 格式的例子,这段代码可以直接放到浏览器中运行,运行结果是一个 javascript object。\nJSON 格式的优点在于,易于阅读,数据间关系要比 XML 清晰,代码量小,可读性高。因此迅速流行起来,各个浏览器也迅速提供了 JSON 相关的 API,用来解析 JSON 数据。\n
  • 标准的 JSON API 提供了将字符串转为 javascript 对象的 parse 方法和 将一个对象转为字符串的 stringify 方法。\n在比较老的 IE 浏览器下,可以通过引入 JSON2.js 来实现这两个方法。\n
  • 通过 JSON 来充当 AJAX 的数据格式的话,需要从 XHR 对象的 responseText 得到服务器返回的 JSON 字符串,再通过 parse 方法将字符串转为一个 JavaScript 对象。\n\n鉴于 JSON 的流行程度,AJAX 其实改名成 AJAJ 更合适。不过大家还是习惯叫 AJAX,一个是发音比较方便,其二是 AJAX 已经不再是特指利用 XHR 对象异步数据请求,而是已经变成了这一类技术的总称。\n
  • 除了 XHR 对象以外,还有几种常见的 AJAX 技术。\n
  • 首先是我个人非常喜欢一个,这个技术通过 img 对象来发送数据。非常轻量化,代码也很简单,而且还可以发跨域请求。适合只需发送数据,发完不理的场合,比如发送 log。\n
  • 然后是 ajax 之前一种比较常用的技术,通过页面内嵌一个框架,然后提交表单的时候不刷新整个页面,而是只刷新框架内的页面,来实现外部页面的无刷新数据请求。这个技术比 Image 标签好的地方在于,它不受 GET 请求的限制,还可以发送 POST 请求,甚至上传文件。缺点是用了 iframe,比较重。而且也不太容易回调。\n
  • 还有一种夸域请求数据的方法,即在页面中插入一个 script 标签,标签的 url 设置成数据服务器,并且 url 中包含要发送的数据。当这个 script 标签被插入到页面中后,浏览器会向这个 url 发送一个 GET 请求。服务器响应请求,并返回一段可以执行的 javascript 代码,这段代码中包含了要给客户端的数据。浏览器接收到这段代码后会正常执行,客户端通过预先写好的 callback 函数拿到服务器返回的数据。\n
  • JSONP 的优点在于很轻量也很稳定,很容易加入回调函数。缺点在于不能发送 POST 数据请求。\n
  • \n
  • 刚讲完 AJAX,其实不同浏览器对于 AJAX 的 XHR 对象实现也有一些兼容性问题,并且,XHR 对象本身提供的 API 很裸奔,比如 http 异常 code 处理机制等都要自己实现。\n\n除了自己实现以外,还可以使用像 jQuery 这样的工具包。\n\njQuery 是 AJAX 火爆之后跟着火爆起来的一个 JavaScript 工具集合,口号是写更少的代码做更多的事情,它也确实做到了这一点。\n
  • jQuery 是一个专注于 DOM API 和 AJAX 方法的封装的工具包,并且提供了一个 plugin 机制来方便开发者对其扩展。但 jQuery 自身的 plugin 机制设计的并不是很好,如果通过这个机制来组织代码,代码比较容易写乱。因此建议只把 jQuery 当做一个工具包来使用。\n
  • jQuery 的一个特点就是很好的封装了各个浏览器在 DOM API 上的兼容性问题。通过 jQuery 来操作文档树的话,几乎不用再担心 IE 出 bug。不过只是几乎,对于 IE,一切皆有可能\n
  • jQuery 被加载后,会在全局作用域下创建一个 $ 函数。$ 函数通过 css 选择器,在整个文档树中检索符合选择器的 DOM 对象。然后再通过 jQuery 对象的各类 API 来操作 dom element。\n
  • 或者通过其他 API 来增删节点、改变元素的样式、显示或者隐藏 dom 元素\n
  • 此外,jQuery 还封装了一系列 ajax api,可以更加方便的发送 ajax 请求,包括前面提到的 JSONP 请求。\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 前端概述

    1. 1. 前端概述网易有道 张宇辰
    2. 2. Frontend HTML CSS AgendaJavaScript Ajax jQuery
    3. 3. FRONTEND
    4. 4. User
    5. 5. User Browser
    6. 6. User Browser
    7. 7. User Browser
    8. 8. FrontendUser Browser Server
    9. 9. Frontend BackendUser Browser Server Server
    10. 10. Frontend BackendUser Browser Server Server
    11. 11. Frontend BackendUser Browser Server Server
    12. 12. Frontend BackendUser Browser Server Server
    13. 13. Frontend BackendUser Browser Server Server
    14. 14. Frontend BackendUser Browser Server Server
    15. 15. HTML CSS JavaScript内容/样式/行为
    16. 16. BROWSER 解析 染 HTML/CSS 下载外部资源 提供 JavaScript 执行环境 响应用户操作
    17. 17. FRONTEND IS... JavaScript Browser HTML CSS
    18. 18. MISSION
    19. 19. TASK A 列出所有笔记
    20. 20. TASK B 编辑笔记
    21. 21. HTM L yper ext arkup anguage
    22. 22. MARKUP<a href=”http://www.youdao.com”>youdao</a>Start Tag Attribute inner contentEnd Tag
    23. 23. TAG <html> <head> <body> <div> <p> <ul> <ol> <table> ...80+ in XHTML
    24. 24. TAG 结构元素:p,div,span,h1-h6,body... 列表元素:ul,ol,dl,li,dd,dt 表单元素:form,input,button,label... 媒体元素:img,video,audio... 表格元素:table,tr,td,caption,tbody...
    25. 25. DEMO <!DOCTYPE HTML> <html> <head> <title>TITLE</title> </head> <body> <p>Hello World!</p> </body> </html>
    26. 26. DOCTYPE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML>
    27. 27. XHTMLXML + HTML, more strict
    28. 28. <A HREF=’http://www.youdao.com’>youdao</A><br> <br/><img src=”xxx”> <img alt=”xxx” src=”xxx”/>
    29. 29. Semantic <div class=”nav”> <a href=”home”>home</a> 普通 <a href=”user”>user</a> </div> <ul class=”nav”> <li><a href=”home”>home</a></li> 文艺 <li><a href=”user”>user</a></li> </ul> <nav class=”nav”> <a href=”home”>home</a> HTML 5 <a href=”user”>user</a> </nav>
    30. 30. HTML 5 <header> <footer> <article> <section> ...
    31. 31. HTML 5 <a href=”...” data-user-id=”123”>user</a> 区分自定义属性和标准属性 对程序更加友好
    32. 32. MISSION
    33. 33. MISSION
    34. 34. MISSION <!DOCTYPE html> <html> <head><title>YNote</title></head> <body> <aside> <div data-note-id=”1”>A normal note</div> <div data-note-id=”2”>A normal note, too</div> <div data-note-id=”3”>A normal note, three</div> </aside> <article> <button>Save</button> <textarea data-note-id=”1”>A normal note</textarea> </article> </boty> </html>
    35. 35. MISSION<!DOCTYPE html><html> <head><title>YNote</title></head> <body> <aside> <div data-note-id=”1”>A normal note</div> <div data-note-id=”2”>A normal note, too</div> <div data-note-id=”3”>A normal note, three</div> </aside> <article> <button>Save</button> <textarea data-note-id=”1”>A normal note</textarea> </article> </boty></html>
    36. 36. 暂停一下,对于 HTML,Q&A 接下来,是 CSS
    37. 37. C SSascade tyle heet
    38. 38. JavaScript
    39. 39. JavaScript 印度尼西亚
    40. 40. The part that is good is not original, and the part thatis original is not good. -- Dr. Johnson
    41. 41. ECMA-262
    42. 42. ECMAScript
    43. 43. ECMAScript 5
    44. 44. https://github.com/kriskowal/es5-shim
    45. 45. ECMAScript 6
    46. 46. 和谐版ECMAScript harmony
    47. 47. BrowserJavaScript ECMAScript + BOM + DOM
    48. 48. BOMBrowser-Object Model
    49. 49. BOM window document navigator document.cookie history location localStorage
    50. 50. DOMDocument-Object Model
    51. 51. DOM<html> document.body <body> <div>Foo</div> <div>Bar</div> div div </body></html>
    52. 52. Search document.getElementById document.querySelector document.querySelectorAll
    53. 53. Traversing element.firstChild element.nextSibling element.parentNode ...
    54. 54. Manipulation element.appendChild element.removeChild element.insertBefore element.innerHTML element.style
    55. 55. EVENTS element.addEventListener element.removeEventListener elem.addEventListener(‘click’, function (evt) { console.log(‘elem is clicked’); });
    56. 56. EVENTS note.addEventListener(‘click’, switchNote); saveButton.addEventListener(‘click’, saveNote);
    57. 57. http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/DOM-Level-2-Core/http://www.w3.org/TR/DOM-Level-3-Core/
    58. 58. NO MSDN 如果你不想被 IE 绑架
    59. 59. www.jquery.com
    60. 60. 暂停一下,对于 JS,Q&A 接下来,是 AJAX
    61. 61. AJAXAsynchronous JavaScript XML
    62. 62. URL/FORMSend data to server, before AJAX ...
    63. 63. After AJAX ...EVERYTHING
    64. 64. Asynchronous var xhr = new XMLHTTPRequest(); xhr.open(‘GET’, ‘http://www.youdao.com’, true); xhr.onreadystatechange = function () { // 这行在服务器返回数据后执行 }; xhr.send(); // 这行先执行
    65. 65. XML xhr.onreadystatechange = function () { var xml = xhr.responseXML; xml.getElementsByTagName(‘data’); // ... same to DOM API }
    66. 66. JSONBecause XML sucks... JavaScript Object Notation
    67. 67. JSON { “array”: [1, 2, 3], “object”: { “foo”: “bar” }, “boolean”: true } {“array”: [1, 2, 3],“object”: {“foo”: “bar”},“boolean”: true}
    68. 68. JSON IN JS JSON.parse JSON.stringify http://www.json.org/js.html
    69. 69. JSON IN AJAX xhr.onreadystatechange = function () { var data = JSON.parse(xhr.responseText); // data is native object now! }
    70. 70. OTHER something like “AJAX”
    71. 71. IMAGE var img = new Image(); img.src = apiUrl + ‘?data=’ +data; Pros: simplicity cross-domain Cons: no POST hardly callback
    72. 72. IFRAME + FORM <form target=”xxx”></form> <iframe name=”xxx”></iframe> form.submit(); Pros: cross-domain POST/GET Cons: hardly callback
    73. 73. JSONP window.callback = function (data) { // get data! }; var script = document.createElement(‘script’); script.src = apiURL + ‘?data=’ + data; document.body.appendChild(script); server response: window.callback({ “foo”: “bar” });
    74. 74. JSONP Pros: cross-domain easy callback Cons: no POST server api
    75. 75. 暂停一下,对于 AJAX,Q&A 接下来,是 jQuery
    76. 76. jQuery write less, do more
    77. 77. DOM&AJAX a little utility function, just a little
    78. 78. Finally...
    79. 79. Search $(cssSelector)
    80. 80. Manipulation $(selector).append $(selector).appendTo $(selector).insertBefore $(selector).insertAfter $(selector).remove $(selector).show $(selector).hide $(selector).css
    81. 81. AJAX $.post(url, params, function (data) { // get data! }); $.getJSON(url, params, function (data) { // get data! }); $.getJSON("http://anotherDomain/? jsoncallback=?", params, callback);
    82. 82. USE OR NOT Pros: 简单 几乎没有兼容性问题 Cons: 31KB (Gzipped) 太多封装
    83. 83. TASK A 列出所有笔记
    84. 84. TASK A API [{ “id”: 1, “content”: “A normal note” }, { “id”: 2,GET /list “content”: “A normal note, too” }, { “id”: 3, “content”: “A normal note, three” }]
    85. 85. TASK A
    86. 86. TASK A APIGET /note?id={noteId} { “id”: 3, “content”: “A normal note, three” }
    87. 87. TASK A
    88. 88. TASK B 编辑笔记
    89. 89. TASK B API { “id”: 1,POST /save “content”: “A normal note” id: } content:
    90. 90. TASK B
    91. 91. BOOTSTRAP
    92. 92. HTML 5THE POWER
    93. 93. HTML 5 Multi-process Animation Graphic Audio Video Geography User device
    94. 94. ClientTHE ENGINE
    95. 95. CEFChromium Embeded Framework
    96. 96. AIR
    97. 97. WINDOWS 8
    98. 98. iOS/Android

    ×