前端 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!

Made with Slides.com