前端 101
@CSS魔法
2017. 07. 03.
——给不了解前端的同学讲前端
- 前端是什么？
- 前端需要用到哪些技术？
- 前端的开发方式是怎样的？
（45 分钟）
前端是什么？
一道面试题：当我们输入网址之后……
服务器端
浏览器端
服
务
器
数
据
库
abc.com
abc.com/a.css
HTML
CSS
abc.com/a.js
JS
（前端）
（后端）
在这个过程中，后端有哪些局限？
- 服务器一旦把资源提供给浏览器之后，
便失去对内容的影响 - 服务器无法得知用户在浏览器里做了什么，
无法与用户交互
用户什么时候再向后端请求资源？
- 导航动作（刷新、点击链接、前进后退）
- 提交表单
- 强制页面自动刷新或跳转
前端的作用与价值？
- 在用户没有发起新请求的时间里，
控制页面内容 - 与用户交互
前端与用户的交互
- 监听用户在浏览器中的操作
- 有些事情前端就可以做出响应
- 有些事情需要交给后端来处理，
拿到处理结果再交给用户
前端与后端的交互
- Ajax
- WebSocket
前端需要用到哪些技术？
- HTML
- CSS
- JS
“三大块”
网页的分层架构
（让合适的技术去做合适的事情）
结构层
表现层
行为层
HTML
CSS
JS
http://www.baixing.com/m/wo/posts/
结构层
表现层
行为层
+
+
- HTTP 相关
- 浏览器相关
- 前端性能优化
- 图形图像
- ……
进阶知识和技能
(Demo)
前端的开发方式是怎样的？
- Template (Jade / Jedi / ...) → HTML
- Preprocessor (Sass / Stylus / ...) → CSS
- ES6+ → ES5
“不再裸写”
HTML
<h2>兴趣爱好</h2>
<ul>
<li>听音乐</li>
<li>看电影（尤其是<strong>科幻电影</strong>）</li>
<li>打篮球</li>
</ul>h2 "兴趣爱好"
ul
li "听音乐"
li
"看电影（尤其是"
strong "科幻电影"
"）"
li "打篮球"
Jedi
CSS
body {
font: 16px/1.5 Arial, sans-serif;
color: #333;
}
aside.related-posts {
box-shadow: 0 1px 2px #333;
}$fg-color = #333
body
font 16px/1.5 Arial, sans-serif
color $fg-color
aside.related-posts
box-shadow 0 1px 2px $fg-color
Stylus
JS (ES3, ES5)
// `_.find()` is defined by Underscore.
var arr = [1, 2, 3]
var firstEvenNumber = _.find(arr, function (x) {
return x % 2 === 0
})// `Array#find()` is defined by ES6.
const arr = [1, 2, 3]
const firstEvenNumber = arr.find(x => x % 2 === 0)JS (ES6)
- 逻辑、抽象、复用
- 语法糖、新特性
目的
- 部署阶段需要构建
- 开发阶段需要动态构建
这意味着
- 模块化、包管理
- 组件化
- 单页应用
- ……
其它进阶知识点
Q & A
Thank You!
前端 101
By CSS魔法
前端 101
- 前端是什么？ - 前端需要用到哪些技术？ - 前端的开发方式是怎样的？
