应用
- 构建模板结构
- 模拟同步数据
- 模拟异步数据
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){
});
各种模块系统
- Browserify
兼容 Node 模块引用语法和 Node 模块化文件加载方案,
浏览器端运行前需要完成代码的合并, 并配合 SourceMap 进行调试. - Webpack
它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理 - Component
是一个对客户端 JavaScript 包进行管理的工具，用于更好的构建 Web 应用，编写模块化 commonjs 组件 - rderjs
一个开源的 JS 按需、异步加载工具，同时也是 JS 模块化管理工具。 - 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+
- 大量组件
