前端开发基础，是什么，怎么做。

1. 前端开发基础
是什么 怎么做
jiayi.xu@dianping.com 2015.3.15

2. • 前端开发
web页面开发（狭义），客户端开发（广义）
• 还原设计，交换数据
• 直观，变化快，碎片化

3. 构件
HTML
（结构）
JAVASCRIPT
（行为）
CSS
（样式）

4. HTML
文档 标记内容

5. 信息结构与超链接

6. 文档类型
元信息
主体
类XML，更宽松

7. 文字，内容结构

8. 多媒体，表单
img,video,object,audio,canvas…
form,input,fieldset,legend,button…

9. 布局（内容上的划分）

10. <div class=“main”></div>
<div class=“breadcrumb”></div>
<div class=“aside”>
</div>

11. 以及
语义化 可访问性
• 让更多人类可以无障碍使用
• 图片包含alt，tabindex
• http://accessibility.psu.edu/checklist
• 让机器更容易了解网页信息（SEO）
• 使用合理的标签
• 不要用标签来表达样式

12. CSS

13. 引入
• 直接运用到元素
• style标签
• link标签引用外部资源

14. 选择器
属性
值
解析顺序从右往左（想想为什么）

15. 选择器
• #id
• .class
• div
• 嵌套 .parent .child
• 叠加 .female.doctor
• 样式继承

16. 优先级
• 越具体越优先
- id > class > tag
- div a > a
- div .classA.classB > div .classA
• 先来后到
• style=“”
• !important （慎用）

17. 文件划分
• 抹平浏览器默认样式差异 reset.css
• 产品通用样式
• 页面/模块样式

18. 盒子模型
• block 默认占满整行，垂直排列 (h1,div,p,ol,ul,li …)
• inline 行内元素，无视长宽及上下边距
(span,strong,a…)
• inline-block 对外部内容呈inline，对内部呈block
• …

20. 外边距折叠
<div style=“margin-bottom:20px”></div>
<div style=“margin-top:30px”></div>
<div style=“margin-bottom:20px”>
<div style=“margin-top:20px”></div>
</div>
30px20px 30px20px

21. 普通流(Normal Flow)
默认 position:static position:relative

22. 浮动（Floats）
1. 脱离文档流，靠到容器边缘（left/right）
2. 文档流中的inline box内容将环绕float box
3. 宽度默认为内容宽度
4. box变为block box
5. top/right/bottom/left/z-index 无效

23. inline box block box

24. Block Formatting Contexts
• 作用
- 阻止边距折叠
- 包含浮动元素
- 阻止元素覆盖浮动元素
• 触发条件
- 浮动元素，float 除 none 以外的值
- 绝对定位元素，position（absolute，fixed）
- display 为以下其中之一的值 inline-blocks，table-cells，table-captions
- overflow 除了 visible 以外的值（hidden，auto，scroll）
- ie的hasLayout（zoom:1 最无害）

25. 绝对定位（Absolute）
1. 完全脱离文档流，无视float，不会被围绕
2. 宽度默认为内容实际宽度
3. 依据父元素中首个absolute/relative元素定位
4. position:fixed 同absolute，相对viewport

26. 小练习
<style>
body{margin:0;}
div{
border: 1px dashed #000;
width: 50px;
height: 50px;
top: 10px;
left: 10px;
}
</style>
<div>A</div>
<div style=“position:relative”>B</div>
<div style=“position:absolute”>C</div>

27. Javascript

28. 数据类型
• 基本类型
• boolean
• number
• string
• object
• null
• undefined
• 构造类型（引用）
• Array
• Function
• Date
• RegExp

29. 语言特性
1.弱类型 （3 + “3”，+new Date()，parseInt(“010”)）
2.一切皆对象 ( (3).toString()，true.toString() )
3.布尔类型（0，“”，NaN，null，undefined 为 false）
4.reference类型特点
5.prototype-base继承

30. 变量
• 全局变量
• 宿主环境的成员(window, global)
• 没var的变量会被转为全局变量（”use strict”）
• 尽可能减少全局变量
• 局部变量
• 定义在函数内部
• 函数执行完成未被其他对象引用会被GC回收

31. Lexical scoping
var x = 10;
function foo(){
alert(x);
}
function bar(){
var x = 20;
foo();
}
bar();
var x = 10;
function bar(){
var x = 20;
function foo(){
alert(x);
}
foo();
}
bar();

32. Scope Chain

33. Scope Chain
http://archive.oreilly.com/pub/a/server-administration/excerpts/even-faster-
websites/writing-efficient-javascript.html

34. Scope Chain

35. Hoisting
http://adripofjavascript.com/blog/drips/variable-and-function-hoisting

36. 小问答

37. 原型继承(prototype)

38. 闭包 (Closure)

39. DOM编程
• 查找，创建，移除，查找，修改元素(CRUD)
• 获取修改html属性
• 事件监听处理，事件捕获，冒泡

40. jQuery
• $(‘.selector’), $(‘<div></div>’),
$(‘.selector’).parent(), $(‘.selector’).next(),
$(‘.selector’).remove(), $(‘.selector’).attr(‘src’, ‘…’)
• $(‘.selector’).html(), $(‘.selector’).html(‘hello’)
• $(‘.selector’).css(‘color’, ‘blue’)
• $(‘.selector’).on(‘click’, function(){})

41. 性能优化
• 业务考虑
- 减少请求（Combo，按需加载lazyload，css-sprite）
- 感知性能（优先初始化主要功能）
• 基础设施
- 减少请求大小（压缩工具closure compiler, cssmin等
，服务端开启gzip）
- 缓存 （正确设置Response Header中的）

42. 编码规范
• https://github.com/dianping-f2e/javascript-spec
• https://github.com/dianping-f2e/css-spec

43. 荐书
语法书 上手入门 实践

44. 谢谢！