ES6开发账号体系SDK-原创手记-慕课网

环境准备（html-bundler）

https://github.com/be-fe/html-bundler

图片描述

babel-plugin-transform-runtime代替babel-polyfill,因为babel-polyfil是全量包，兼容全部ES6 api，但是我们在项目中用不到这么多API,减少体积
babel-preset-env取代babel-preset-2015,babel-preset-2016......
webpack.optimize.ModuleConcatenationPlugin()用于作用域的提升，把每一个模块都封装到一个function作用域中，提升效率
DLLPlugin & DllReferencePlugin 打包各种第三方依赖，该包在后续不再打包编译，提升我们的打包速度，而且可以作为公共依赖在页面中引用，可以利用页面缓存，提升我们的性能

需求分析

图片描述

架构设计

图片描述

前端API对外设计

图片描述

公共模块

图片描述

模块划分与关联

图片描述

业务模块

图片描述

ES6

图片描述

CommonJs没有静态化，也就是说他的引用可以用在循环判断里，这无疑增加了维护的成本；CommonJs是缓存值
可以对CommonJs模块重新赋值
对ES6模块重新赋值会报错
都可以对对象内部的值进行改变
CommonJs是对模块的拷贝
ES6是对模块的引用

let const

箭头函数

Object.assign

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。Symbol也可以合并
在没有es6之前，我们的方案是使用lodash（只会合并传统的值，比如字符串）,或者是自己实现浅拷贝（容错处理）
使用 Symbol防止同名值的覆盖

API

Object.assign
Array.from
for..of..遍历
String.fromCodePoint
String.prototype.codePointAt
Array.prototype.find

unicode

支持unicode码点>65535的字符
\u6211=>\u{6211}unicode字符的最佳写法
正则表达式中的u修饰符和unicode属性，字符串中的String.fromCodePoint和String.prototype.codePointAt

SDK

软件开发工具包（Software Development Kit)
SDK是对通用业务逻辑的封装
常见的领域：统计、支付、云上传、IM等

安全注意事项

防止注册机：活人认证
防止中间人截取和重放：https，非对称加密，key与时间戳
跨域Post请求&前后端过滤：防止XSS注入
兜底的风控预警策略

SDK开发规范

对外暴露方便友好的接口
灵活的参数配置和友好的参数默认值
尽量做到无外部依赖
登录、注册、找回、账户设置、安全设置
前后端都需要友好的错误提示与限制
功能的严格限制，样式和文字的灵活定制

class定义样式，id定义选择器
名字加前缀，防止重名问题

fetch

除了XMLHttpRequest对象来获取后台的数据之外，还可以使用一种更优的解决方案fetch
Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})
服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。

const fetchPost = (url, params) => {
    return fetch(url, {
        method: 'POST',
        headers: {
            "Content-Type": "application/x-www-form-urlencoded"
        },
        credentials: 'include',
        params: params
    }).then((res) => {
        if (!res.ok) {
            throw Error(res.statusText);
        }
        return res.json();
    });
};

let data = await fetchPost('/login', {
                account: $account.value,
                password: $password.value,
                remember: remember
            });

            console.log(data);
            if (data.code === 200) {
                alert('登录成功');
                opts.success && opts.success();
            }
            else {
                $error.innerHTML = data.message;
            }