让开发也懂前端

让开发也懂前端玉伯

Thursday, July 7, 2011

Who am I ?

• 淘宝花名：玉伯• Frank Wang / lifesinger

• 王保平 / 射雕

• http://lifesinger.wordpress.com/


http://lifesinger.wordpress.com

http://lifesinger.wordpress.com

Topics

• 前端开发知识概要• Web 应用的基石：HTML

• 程序员的画笔：CSS

• 潜力无限的语言：JavaScript

• 浏览器与调试工具• 总结与展望


前端开发知识概要


http://www.flickr.com/photos/kejun/3114605967/Thursday, July 7, 2011

http://www.flickr.com/photos/kejun/3114605967/

http://www.flickr.com/photos/kejun/3114605967/


Web 应用的基石：HTML



http://www.w3.org/People/Berners-Lee/Thursday, July 7, 2011

http://www.w3.org/People/Berners-Lee/

http://www.w3.org/People/Berners-Lee/

• 1989 年，Tim Berners-Lee 发明 HTML

• 1993 年，Mosaic 浏览器发布

• 1994 年，W3C 成立

• 1997 年，HTML 3.2

• 1999 年，HTML 4.01

• 2000 年，XHTML 1.0

• 2008 年，HTML 5

http://www.w3.org/People/Raggett/book4/ch02.htmlThursday, July 7, 2011

http://www.w3.org/People/Raggett/book4/ch02.html

http://www.w3.org/People/Raggett/book4/ch02.html

HTML是什么

• 超文本标记语言（HyperText Markup Language）

• 用“链接”将网页、设置整个网络串联起来



标记、元素和属性


http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/






常用元素• 结构元素：p, div, span, h1-h6, body...

• 列表元素：ul, ol, dl, li, dd, dt

• 文本格式化元素：a, em, strong, pre...

• 表单元素：form, input, button, label...

• 媒体元素：img, object...

• 表格元素：table, tr, td, caption, tbody...

• ...

http://reference.sitepoint.com/html/elementsThursday, July 7, 2011

http://reference.sitepoint.com/html/elements

http://reference.sitepoint.com/html/elements

HTML的语义化

• 用合适的标记表示合适的内容• 如同作文，没有唯一的标准• 优美很难达到，但不可放弃努力


• 该用 table 的时候大胆用

• 避免多 div 症和多 span 症

• 避免多 li 症







HTML5



http://www.w3.org/TR/html5/

<canvas>

<video>

<audio>

<datalist>

<figure>

<nav>

<ruby>

<progress>

<section>

<time>

...




推荐资源





程序员的画笔：CSS


• 1994 年，Håkon Wium Lie 提出 CSS 概念

• 1996 年，CSS Level 1

• 1997 年，CSS Working Group 创建

• 1998 年，CSS Level 2

• CSS Level 3 一直在开发中


什么是CSS

• 层叠样式表（Cascading Style Sheet）

• 负责展现

• 是演员的化妆，是女人的头饰



CSS 基础• 选择器：样式作用给谁

• 属性：要修改什么样式

• 属性值：要修改成什么值


选择器

http://www.w3.org/TR/css3-selectors/Thursday, July 7, 2011

http://www.w3.org/TR/css3-selectors/

http://www.w3.org/TR/css3-selectors/

属性

http://www.w3.org/wiki/CSS/PropertiesThursday, July 7, 2011

http://www.w3.org/wiki/CSS/Properties

http://www.w3.org/wiki/CSS/Properties

盒模型


显示：display

• div、p 等是 block 元素

• span、a、img 等是 inline 元素

• display: block/inline/inline-block/none; 可以改变元素的展现形式



http://www.quirksmode.org/css/display.htmlThursday, July 7, 2011

http://www.quirksmode.org/css/display.html

http://www.quirksmode.org/css/display.html

浮动：float

• 指定元素浮动方式

• 是页面布局的重要方式



定位：position

• position: relative/absolute/static/fixed

• 用来定位元素




Cascading

• 不同的样式表会按照优先级层叠应用在页面元素上

• 不同的样式规则会按照权重层叠应用在页面元素上


权重和优先级

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html






CSS 禅意花园

http://csszengarden.com/Thursday, July 7, 2011

http://csszengarden.com/

http://csszengarden.com/

CSS 的兼容性

http://www.quirksmode.org/css/contents.html




CSS 的兼容性

http://www.gtalbot.org/BrowserBugsSection/Thursday, July 7, 2011

http://www.gtalbot.org/BrowserBugsSection/

http://www.gtalbot.org/BrowserBugsSection/

CSS 3

http://media.24ways.org/2009/15/space.html




推荐资源


潜力无限的语言：JavaScript


• 1995 年，JavaScript 诞生

• 1996 年，ECMAScript 诞生

• 1999 年，ECMAScript 3

• 2009 年，ECMAScript 5

• ECMAScript Harmony 正在讨论中


开发人员都懂 JavaScript


但 Java 和 JavaScript 的关系，就和雷锋和雷峰塔一样。


与其说我爱 JavaScript，不如说我恨它。它是 C 语言和 Self 语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：“它的优秀之处并非原创，它的原创之处并不优秀。”

-- Brendan Eich

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html






JavaScript

JavaC

Scheme

Self




Closure

for(var i = 0; i < elements.length; i++) { (function(n) { elements[n].addEventListener(‘click’, function() { alert(n); }); })(i);}

http://jibbering.com/faq/notes/closures/




Prototypefunction Animal(name) { this.name = name;}function Dog(name) { Animal.call(this, name);}

Dog.prototype = Object.create(Animal.prototype);Dog.prototype.constructor = Dog;

var dog = new Dog(‘汪汪’);

http://javascript.crockford.com/inheritance.htmlThursday, July 7, 2011

http://javascript.crockford.com/inheritance.html

http://javascript.crockford.com/inheritance.html


DOM

• 文档对象模型（Document Object Model）

• DOM 是脚本与页面交互的桥梁

• DOM 往往是 JavaScript 操作的性能瓶颈


DOM Scripting: Web Design with JavaScript and the Document Object Model


推荐资源

http://es5.github.com/

http://lifesinger.wordpress.com/2011/02/27/references-for-javascript-study/Thursday, July 7, 2011



http://lifesinger.wordpress.com/2011/02/27/references-for-javascript-study/

http://lifesinger.wordpress.com/2011/02/27/references-for-javascript-study/

JavaScript 类库的世界




大教堂式 vs. 集市风格


http://www.google.com/trends?q=yui%2Cjquery%2Cmootools%2Cdojo%2Csencha%2Cdojo




http://www.google.com/trends?q=backbone%2Czepto%2Clabjs%2Cunderscore%2Cmustache%2Cmodernize&ctab=0&geo=all&date=all&sort=0






我们需要什么？


基础功能：DOM、Event、Ajax...

通用工具：Validator、Storage、Template...

常用组件：Calendar、Tabs、Dialog...

应用框架：MVC、Unit Testing、Module Loader...




http://addyosmani.com/resources/toolschart/chart.pdf




KISSY 历程


2008


2009


2008 - 2009• yahoo-dom-event.js 很好用

• 其他组件特别是 UI 组件，体积太大，交互不太符合国情，由此诞生了 TBra

• 2009 年始，开始有了 suggest, kissy editor 等复杂组件

• 线上以 web pages 为主，比较简单

• KISSY 开始基础性工作

• 内部系统有用 ExtJS


2010


2010• Yahoo 开始主推 YUI3

• YUI3 不够成熟，组件更加庞大；内部系统试用时，出现性能问题；再 IE6-7 下有性能隐患

• jQuery 发展迅猛，但因为历史原因，很难入驻淘宝

• KISSY 逐步完善，开始有了 Switchable、Calendar、DataLazyload、AJBridge 等组件

• 线上开始出现 webww 等 web apps

• 内部系统一直抱怨前端组件不够用


KISSY

• 起初是个编辑器 KISSY Editor

• 核心部分，是 YUI2 与 jQuery 多夜情的产物

• 组件，是源自淘宝业务的需求• KISSY 如今是一整套解决方案


KISSY 遇到的问题

core 的进化与维护

组件开发成本高

头疼的文档新人培训


我们究竟需要什么？


解决业务问题技能成长

做酷且有趣的应用

自由的时间

领略业界前沿


解决业务问题


...我以前就一直说：我们离最先进的技术的差距只有半年。我们并不差多少，在一个问题上努力耕耘半年，我们就会变成顶尖的好手。但是，接下来我们仍然会白费、湮没，以至于消失得无影无踪。而现在的kissy，也面临这样的一个问题。

-- 周爱民


...我的观点中，必须说明两点，工程师，从职业素养上来说，我们的价值就是“把一件事做得更好、更专业、更完美，优秀，及至无可挑剔”。这本身就是对我们而言最有意义的事情。如果没有这种心态，那根本就谈不上专业、职业，以及职业修养。

-- 周爱民


世界上有很多聪明人，很多事情已经做得非常棒。有太多更需要投入的地方，的确不应该在别人已经做得很好的地方浪费时间了。

-- 大教堂与集市


类库的第三种风格




提供最基础的功能

规范最基本的约定

百花齐放优胜劣汰

丛林法则


商场风格

不是集市

不是大教堂有门槛

品质保障开放式竞争


SeaJS 之路

http://seajs.com/


http://seajs.com/

http://seajs.com/

SeaJS 的理念

• 保持简单• 避免重复• 追求卓越


路走对了，就不怕远


浏览器与调试工具


1991年，首个浏览器：WorldWideWeb

http://en.wikipedia.org/wiki/Web_browserThursday, July 7, 2011

http://en.wikipedia.org/wiki/Web_browser

http://en.wikipedia.org/wiki/Web_browser

1993年，Mosaic

http://en.wikipedia.org/wiki/Mosaic_(web_browser)Thursday, July 7, 2011

http://en.wikipedia.org/wiki/Mosaic_(web_browser)

http://en.wikipedia.org/wiki/Mosaic_(web_browser)

IE


Firefox


Chrome


Safari


Opera



WebKit Gecko

Trident

Presto


How browsers work

http://taligarsiel.com/Projects/howbrowserswork1.htm




开发和调试工具



WebKit Developer Tools




总结


• 读好书• 练习 1800 个小时

• 在实战中进阶


展望


1993


2005


2010


2022 ?


Q & A

• Twitter: @lifesinger

• 新浪微博：@玉伯也叫射雕

• 阿里旺旺：玉伯• 最喜欢的交流方式：[email protected]


mailto:[email protected]

mailto:[email protected]

Thanks!


Technology

让开发也懂前端