应用

• 构建模板结构
• 模拟同步数据
• 模拟异步数据

git

分支操作

git check out

• 切换分支: git checkout <branch>
• 创建并切换分支: git checkout -b <branch>
• 切换到指定版本: git checkout <commit id>

git reset: 回退版本

• 不改变暂存区和工作区: git reset --soft <commit id>
• 不改变工作区: git reset --mixed <commit id>
• 改变工作区: git reset --hard <commit id>

使用捷径

• HEAD^ HEAD的上一次提交
• HEAD~n HEAD的前N次提交

stash缓存

• git stach save 'mystach'
• git stach list
• git stach apply
• git stach drop
• git stach pop (stach apply+stach drop)

合并分支

• git merge b1 master

git rebase 变基

• git rebase 获得线性的提交记录

git tag 别名

• git tag v0.0.1 c4f3e1

技术选型

模块化

commonjs

• 主要用于非浏览器环境
• 同步的require

AMD(async module defination)

require(['math'], function (math) {
  math.add(2, 3);
});

优点

• 以来管理成熟可靠
• 专为异步IO环境打造，适用浏览器环境

缺点

• 模块定义繁琐
• 只是库级别
• 无法处理循环依赖
• 无法条件加载

ES6模块管理

SystemJS

• 支持AMD
• 支持CommonJS
• 支持加载ES6
• 支持Transpiler，可支持任意资源

System.path = {
  'app/*':'../es6/*.js',
  'app/*':'../commonjs/*.js',
  'app/*':'../amd/*.js'
}
System.import('app/caculator').then(function(caculator){

});

各种模块系统

1. Browserify
   兼容 Node 模块引用语法和 Node 模块化文件加载方案,
   浏览器端运行前需要完成代码的合并, 并配合 SourceMap 进行调试.
2. Webpack
   它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理
3. Component
   是一个对客户端 JavaScript 包进行管理的工具，用于更好的构建 Web 应用，编写模块化 commonjs 组件
4. rderjs
   一个开源的 JS 按需、异步加载工具，同时也是 JS 模块化管理工具。
5. systemjs
   一个最小系统加载工具。

框架选型

库

• 解决特定问题
• 不控制应用程序
• 被动调用

框架

• 控制反转
• 决定应用程序声明周期
• 一般集成大量的库

前端解决方案

• DOM
• Communication
• Utility
• Templating
• Component
• Routing
• Architec

DOM

• 提供便利的Dom操作
• 事件绑定/事件代理
• 浏览器特性检测
• 节点属性/样式/类名等操作
• 浏览器兼容性

DOM库

MooTools

• 概念清晰
• 接口设计优秀
• 源码清晰易懂，适合学习
  jQuery
• 社区强大
• 包装对象
• 社区水平层次不齐
  zepto.js
• 轻量级
• 接口与jQuery兼容
• 提供了简单的手势
• 支持浏览器少，功能较弱

DOM专业领域

手势相关: Hammer.js
局部滚动: iscroll.js
高级动画: Velocity.js
视频播放: video.js

Communication

• 处理与服务器的请求与响应
• 预处理请求数据/响应数据
• 多种请求类型，统一接口
• 浏览器兼容性

Communication库

• jQuery
• reqwest
• qwest

实时性请求

socket.io

• 实时性
• 支持二进制数据流
• 智能自动回退
• 多种后端语言支持

Utility

• 提供JS原生不提供的功能
• 方法包装
• 异步队列/流程控制

Utility库

underscore

• 兼容IE6+

lodash

• 兼容IE6+

es5-shim
es6-shim

Templating

String-based： dustjs,hogan,dot.js

• 学习成本低
• 不能动态更新

DOM-based: angularjs, vue.js, knockout

Living-template: regularjs, ractivejs, htmlbar

Component

• 提供基础组件css支持
• 提供常用组件如slider, modal
• 提供声明式调用方式

Component库

• bootstrap
• foundation

bootstrap

• mobile first的流式删格
• LESS/SASS，可定制UI
• IE8+
• 大量组件