让开发也懂前端

让开发也懂前端玉伯

Thursday, July 7, 2011

Who am I ?

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

• 王保平 / 射雕

• http://lifesinger.wordpress.com/

Topics

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

• 程序员的画笔：CSS

• 潜力无限的语言：JavaScript

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

前端开发知识概要

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

Web 应用的基石：HTML

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

• 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

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

HTML的语义化

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

• 该用 table 的时候大胆用

• 避免多 div 症和多 span 症

• 避免多 li 症

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

<video>

<audio>

<ruby>

<time>

推荐资源

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

程序员的画笔：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/wiki/CSS/PropertiesThursday, July 7, 2011

盒模型

显示：display

• div、p 等是 block 元素

• span、a、img 等是 inline 元素

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

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

浮动：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

CSS 的兼容性

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

CSS 的兼容性

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

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

Scheme

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

• 文档对象模型（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

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• yahoo-dom-event.js 很好用

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

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

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

• KISSY 开始基础性工作

• 内部系统有用 ExtJS

2010• Yahoo 开始主推 YUI3

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

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

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

• 线上开始出现 webww 等 web apps

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

• 起初是个编辑器 KISSY Editor

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

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

KISSY 遇到的问题

core 的进化与维护

组件开发成本高

头疼的文档新人培训

我们究竟需要什么？

解决业务问题技能成长

做酷且有趣的应用

自由的时间

领略业界前沿

解决业务问题

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

-- 周爱民

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

-- 周爱民

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

-- 大教堂与集市

类库的第三种风格

提供最基础的功能

规范最基本的约定

百花齐放优胜劣汰

丛林法则

商场风格

不是集市

不是大教堂有门槛

品质保障开放式竞争

SeaJS 之路

http://seajs.com/

SeaJS 的理念

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

路走对了，就不怕远

浏览器与调试工具

1991年，首个浏览器：WorldWideWeb

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

1993年，Mosaic

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

Firefox

Chrome

Safari

WebKit Gecko

Trident

Presto

How browsers work

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

开发和调试工具

WebKit Developer Tools

总结

• 读好书• 练习 1800 个小时

• 在实战中进阶

展望

2022 ?

• Twitter: @lifesinger

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

• 阿里旺旺：玉伯• 最喜欢的交流方式：lifesinger@gmail.com

Thanks!

让开发也懂前端

Technology

三分钟看懂GBL产业链 - puworld.com

盛唐天街南极的惊喜与惊吓 - paper.ce.cnpaper.ce.cn/jjrb/page/1/2020-05/17/06/2020051706_pdf.pdf · 精心周到的服务，不仅让不夜城人潮如织，也让经营者收益颇丰。2019年，大唐不夜城接

高雄氣爆責任不懂就別裝懂

西西 - Guilinlife.comepaper.guilinlife.com/glrb/images/2018-09/06/07/RB07.pdf一座村庄走向另一座村庄的路，也是一座村庄连接另一座村庄的绳结。田埂让村庄联了姻，田埂也让村庄挽

让微笑温暖整个世界 - Capital Normal University · 典，对我来说是人生难忘的经历，是个人成长的见证。在这十年的跨度中，合唱一直与自己相伴而行，让我懂得了团队精神、组织

· Web view让︱您︱的︱选︱择︱更︱专︱业︱项目编号：CLF0120GZ04ZC28A. ︱让︱您︱的︱选︱择︱更︱专︱业︱. ︱让︱您︱的︱选︱择

懂得開心 —— 方能獲得幸福

让阅读慢下来，让生活慢下来石头博物馆每一方石头€¦ · 他叫梁宇，今年36岁，是一位普通的重庆市民，也是一位奇石爱好者。他喜

影迷荐剧》：的喷发hnrb.hinews.cn/resfile/2015-04-20/028/hnrb20150420028.pdf2015/04/20 · 引起全民效仿的热潮，此时的海军也门撤侨也让无数人热泪盈

爬长城游清华，盲人也能闹市穿梭自如 - wxrb.comszb.wxrb.com/jnwb/pc/attachment/201912/18/1452fca3... · 这个训练营让她自强自信这个训练营让她收获良多

各区为爱心暑托班设计专属特色课程把好 · 的青花瓷元素最容易让青少年接受，也是让他们接触传统文化，感受美的好途径。第一次设计让徐梓涵觉得

正玄教授著 - lamatruth.com懂的人天乘佛法，也是世俗人听了都喜欢的表相佛法。正觉弘扬的却是一般学佛人所不懂的如来藏妙义，也是各大

UrSchool 三分鐘搞懂願景

赞美黎明醒来的事物（组诗） - cjzk.jjxw.cncjzk.jjxw.cn/resfile/2019-11-24/A3/cjzk03b191124c_h.pdf · 普希金的诗人之死，让全俄罗斯疯狂也让我血热

· Web view让︱您︱的︱选︱择︱更︱专︱业︱项目编号：CLF0119QY01ZC46. ︱让︱您︱的︱选︱择︱更︱专︱业︱. ︱让︱您︱的︱选︱择

别告诉我你懂运动时尚 Final

2019 是您让我从懵懂走向成熟 - epaper.sanqin.comepaper.sanqin.com/resfile/2019-07-30/T16/sqdsb20190730T16.pdf西安经开第一学校长庆二中西安经开第二中学

只需要懂Jquery也能學react js

这年头，你只需要懂Node webkit

【好風光】5/12 自己的電自己發! 風力發電工程我也懂