重庆首届前端培训体验班资料

《你真的会切图吗》

切图概念

前端职责

与产品经理和交互、视觉设计师协作，根据需求文档、线框图、设计稿完成页面制作（切图部分）；
与后台工程师协作，完成数据交互、动态信息展现和用户的互动

切图定义

• 设计思路的理解和还原
• 页面模块化制作的预演

切图理论储备

常见图片格式

设备像素比

devicePixelRatio = 物理像素 / dips(device-independent像素，设备无关的像素)，常见@1x，@2x，@3x

切图实践要领

心中有数

需求定位、结果模块、资源细分、 疑难杂症

大刀阔斧

• 工欲善其事，必先利其器：硬件舍得、软件恰当、工具够用

• 图层的合理运用：选择、分组、复制

精雕细磨

压缩图片体积、图片大小范围、仿色杂边处理、雪碧图合并

simple than simple

不切图、让他人切图、自动化切图

《HTML构建之法》

HTML释义

HTML与XHTML、结构与表现分离、使用语义化标签

语义化

What：用合理的HTML标签标记相应的内容。

Why：可用性、易用性、可维护、SEO等

How：认识HTML标签、理解标签的意义

HTML5

新特性

• Canvas 元素
• Video 、 Audio 元素
• 本地离线存储
• 新标签： article、footer、header、nav、section
• 新表单： calendar、date、time、email、url、search

模块化

可复用性、方便维护、利于协作

BEM：B -> 块（Block）、E -> 元素 （Element）、M -> 修饰符（Modifier）

最佳实践

• 书写规范：小写、闭合
• 合理使用标签：语义化、模块化
• 声明正确的文档类型
• 少使用框架
• 结构、表现、行为分离：不写内联样式

学习提升

• 多看手册（W3School）
• 分享文章（UED、个人博客、前端社区）
• 查看元素（Chrome、Firefox）
• 告别随意（实践出真知...）

《CSS基础》

CSS概念

CSS基本概念、引入方式、CSS规则

CSS选择器

CSS基本选择器：标记选择器、类别选择器、ID选择器、伪类选择器、伪元素选择器

选择器优先级：从高到低：

• 使用了 !important声明的规则。
• 内嵌在 HTML 元素的 style属性里面的声明。
• 使用了 ID 选择器的规则。
• 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
• 使用了元素选择器的规则。
• 只包含一个通用选择器的规则。

CSS继承：继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。一般文本样式和列表样式可继承。

CSS盒模型

CSS内定义的宽（width）和高（height），指的是填充以内的内容范围

实际宽度=左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

实际高度=上外边距+上边框+上内边距+内容高度+下内边距+下边框+下外边距

CSS定位和布局

常规流(Normal Flow):static position、relative position

浮动(Float)

绝对定位(Absolute Position):absolute position、fixed position

CSS3介绍

• 文字渲染
• 边框和颜色
• 渐变效果
• 阴影和反射
• 变换和动画
• 多列布局

浏览器兼容性

兼容性查询：http://caniuse.com/

条件注释、CSS Hack、Javascript：http://browserhacks.com/

CSS预处理器

• Less、Sass、Stylus
• 变量、嵌套、混入(Mixin)、继承、函数和操作符
• 用户根据这些语法定义自己的样式规则，最终会通过解析器生成对应的 CSS 文件

《JavaScript Rocks》

JS能做些什么？

面试时都问些什么？

this、原型、作用域、函数各种方式定义

介绍

ECMAScript介绍、版本历史

JS宿主环境、Web解析引擎

特性

动态语言、松散类型、函数特征、原型

曙光

语言改善：ES6 / ES7、CoffeeScript、TypeScript

开发方式：React、AngularJS, Meteor等

跨平台：React-native

How to start

多造轮子、和优秀的人为伍、读万卷书、行万里路

《前端开发实践》

前端开发历史演变

系统在变，浏览器在变，终端在变，技术在变

对前端的要求越来越高，前端发挥的空间越来越大

前端开发流程

需求沟通

深入理解产品，了解需求，有利于后期排期

风险控制，与需求方确认详细交互细节，避免后期需求变更

提出自己专业性的意见建议，对产品负责，对自己负责

技术选型

• 基础库 ： jQuery、Zepto、Lodash、Angulajs、Backbone、Ember、React
• UI框架 ： Bootstrap、jQuery UI、Foundation
• 样式管理 ： LESS、SASS、Stylus
• 模块管理 ： SeaJS、RequireJS
• 模板选择 ： Smarty、Handlebars、Jade
• 构建工具 : NODE、Grunt、Gulp、F.I.S
• 包管理工具 ： Bower、SPM、Component

拥抱开源技术 、使用成熟稳定的产品、社区活跃， 文档丰富、功能、性能维度、可维护性、可扩展、团队学习成本、

规范意义

统一全局，促进团队合作、降低维护成本、提高代码的可读性、提升团队代码质量、降低缺陷引入机会、有利于知识传递

前后端分离意义

工作依赖关系解耦、让擅长的人做擅长的事、职责分工明确、修改维护方便

前端自动化处理

• 编译预处理语言比如LESS、SASS、CoffeScript
• 代码美化、压缩、合并、语法检查
• 静态资源版本号管理
• 图片压缩
• 图片自动合并

前端调试

chrome为主

前端优化

抛开背景谈优化都是耍流氓

可维护性为主，当性能成为问题的时候才谈优化

前端基本优化原则：降低HTTP请求数、降低文件大小、加载顺序

前端的发展

ATWOOD定律：任何可以使用JavaScript来编写的应用，最终会由JavaScript编写

扩展：如果一个软件可以被 JavaScript 实现，这个软件就一定会被 JavaScript 的实现版所取代——那个金科玉律的马云（反正大家也不知道真假）

浏览器、服务器、移动端、游戏端，全方位发展

前端最好的时代已经到来

《前端无线开发实践》

• viewport介绍
• 响应式介绍
• Hybird混合模式介绍
• 移动端事件介绍
• 移动端调试