ES6开发网站账号体系 SDK

1 笔记简介

1 原生ES6+开发，除兼容库外不引用任何三方库
2 包括工程化，架构设计，数据Mock等常用前端开发模式与流程
3 账号体系SDK，统一控制核心功能，对下游开放样式定制

架构：
环境搭建--架构设计、开发流程
公共、登录、注册、账号设置、密码找回

收获：
1 加深对ES6+ 的理解
2 体会ES6+ 对开发效率，可维护性的提升
3 理解SDK开发过程，加深对前端整体开发流程的认识

2 环境

浏览器支持程度：
最新版除模块化外几乎都支持； 历史版本支持度一般，IE8，9仍然占有一定份额。
所需环境：工程化工具Webpack、编译工具Bable、合适的脚手架工具
Webpack配置：
使用最广泛的打包工具，用于支持模块化开发。配合Bable-loader将ES6转为ES5、压缩合并等其他前端优化。
Bable：
ES6实用化的核心：可以通过.babelrc配置文件进行配置，与Webpack或Gulp打包工具配合，在浏览器引入Bable-polyfill转换新的API
环境准备：
使用html-bundler初始化项目，安装必要的polyfill ，加入 gulp-file-include

3 需求分析与架构设计

需求分析：
产品要怎样的效果？技术要做哪些工作？技术指标是什么？
产品要求：
包含登录、注册、找回密码、信息设置和修改
支持PC和移动端，各个子网站需要有自己的样式
功能逻辑必须统一和同步
技术应对
通过SDK的方式，统一开发，功能和修改同步
支持PC和移动端，因此包的体积要小，不能有依赖
SDK要包含全部业务逻辑，但不包含具体样式，由下游业务方进行自定义
技术指标
兼容到IE8
大小不超过30KB
支持多种引用方式：直接引用，CommonJS，AMD

架构设计
对外API接口的设计；模块的划分与关联；模块的具体实现与一般性套路。
暴露什么样的接口？
（类：即构造函数，互相关联的功能集合或存在内部状态的功能。
普通函数：单一功能且无内部状态。
对象：无关联的功能集合）
有哪些配置项？默认值是什么？
模块的划分与关联：

如何编写业务模块？
init：初始化，用于接收参数和设置初始值
render：渲染
event：事件绑定