FE.BASE-前端设计模式、编码与重构笔记

头像
seasonley
    阅读 5 分钟
    16

    高质量Javascript

    1. Javascript特性：面向对象，无类，原型
    2. 可维护的代码(可读;一致;可预测;看起来像是同一个人写的;文档)
    3. 减少全局对象，传参访问全局对象
    4. 单 var 模式，忘记 var 时的副作用(显式声明的全局变量无法用 delete 删除)
    5. (不)扩充内置原型

    6. switch 模式

      • 每个 case 和 switch 对齐(这里不考虑花括号相关的缩进规则)
      • 每个 case 中的代码整齐缩进
      • 每个 case 都以 break 作为结束
      • 避免连续执行多个 case 语句块(当省略 break 时会发生),如果你坚持认为连续
      • 执行多 case 语句块是最好的方法,请务必补充文档说明,对于其他人来说,这种情况看起来是错误的。
      • 以 default 结束整个 switch,
      • 以确保即便是在找不到匹配项时也会有正常的结果
    7. 避免隐式类型转换（推荐使用===和!===）
    8. typeof null==='object'；instanceof 检测引用值
    9. 避免使用 eval()（用 new Function()来代替，它是局部函数作用域，var 定义的变量不会自动变成全局变量）
    10. 使用 parseInt()进行数字转换，总是指定第二个参数(parseInt(year, 10))
    11. 编码风格（缩进，花括号，左花括号位置，空格）
    12. 命名规范（构造函数大驼峰 函数和方法小驼峰 变量名小写下划线分隔 常量全大写）
    13. 注释jsdoc生成文档，eslint检查，相互评审

    直接量和构造函数

    1.对象直接量，JSON,正则表达式直接量
    1.强制new,避免使用其他的内置构造函数:String()、Number()、Boolean()以及不同种类的
    Error()构造器,that=this

    函数

    1. 函数特性：是一等对象，可以有属性和方法，声明提前，提供局部变量作用域
    2. 回调模式：作用域，监听（addEventListener），超时(setTimeout)
    3. IIFE,Memoization
    4. 柯里化

    对象创建模式

    1. 命名空间方式

      • 优点:

        • 避免了自身代码的命名冲突,
        • 避免了同一个页面上自身代码和第三方代码的冲突

      • 缺点

        • 代码量稍有增加;在每个函数和变量前加上这个命名空间对象的前缀,会增加代码量,增大文件大小
        • 该全局实例可以被随时修改
        • 命名的深度嵌套会减慢属性值的查询

    2. 模块模式（命名空间模式+IIFE+私有和特权成员模式+依赖声明模式）

      MYAPP.utilities.module = (function (app, global) {
return (function(){})()
}(MYAPP, this))

    3. 沙箱模式

      Sandbox.modules = {};
Sandbox.modules.dom = function (box) {};
Sandbox('dom', 'event', function (box) {
    Sandbox('ajax', function(box) {
    });
});

    4. 链式调用模式

      • 优点：节省代码量，易读性

      • 缺点：调用这样写的代码会更困难

        myobj.method1("hello").method2().method3("world").method4();

    5. 代码复用模式

      • 类式继承1：默认模式
        缺点：既继承了(父对象)“自己的属性”,也继承了原型中的属性。大部分情况下你可能并不需要“自己的属性”,因为它们更可能是为实例对象添加的,并不用于复用。

        function inherit(C, P) {
    C.prototype = new P();
}

      • 类式继承2:借用构造函数
        缺点：无法继承原型

        function Child(a, c, b, d) {
    Parent.apply(this, arguments);
}

      • 类式继承3:借用并设置原型(1,2的缺点修复，接近java)
        缺点：父构造函数被调用了两次,所以不是很高效

        function Child(a, c, b, d) {
    Parent.apply(this, arguments);
}
Child.prototype = new Parent();

      • 类式继承4:共享原型
        缺点：修改原型影响所有的继承

        function inherit(C, P) {
   C.prototype = P.prototype;
}

      • 类式继承5:临时构造函数

          function inherit(C, P) {
      var F = function () {};
      F.prototype = P.prototype;
      C.prototype = new F();
  }

      • 原型继承(现代继承模式)

        var child = Object.create(parent);

      • 借用方法

         //call() example
 notmyobj.doStuff.call(myobj, param1, p2, p3);
 // apply() example
 notmyobj.doStuff.apply(myobj, [param1, p2, p3]);

    设计模式

    单例

    var obj = {
myprop: 'my value'
};

    工厂模式

    var corolla = CarMaker.factory('Compact');
var solstice = CarMaker.factory('Convertible');
var cherokee = CarMaker.factory('SUV');
corolla.drive(); // "Vroom, I have 4 doors"
solstice.drive(); // "Vroom, I have 2 doors"
cherokee.drive(); // "Vroom, I have 17 doors"

    迭代器

    var element;
while (element = agg.next()) {
// do something with the element ...
console.log(element);
}

    装饰器

    var sale = new Sale(100); // the price is 100 dollars
sale = sale.decorate('fedtax'); // add federal tax
sale = sale.decorate('cdn'); // format using CDN
sale.getPrice(); // "CDN$ 105.00"

    策略模式

    var data = {
    first_name: "Super",
    last_name: "Man",
    age: "unknown",
    username: "o_O"
};
validator.config = {
    first_name: 'isNonEmpty',
    age: 'isNumber',
    username: 'isAlphaNum'
};
validator.validate(data);
if (validator.hasErrors()) {
    console.log(validator.messages.join("\n"));
}

    外观模式

    var myevent = {
// ...
stop: function (e) {
    // others
    if (typeof e.preventDefault === "function")
        e.preventDefault();
    if (typeof e.stopPropagation === "function")
        e.stopPropagation();
    // IE
    if (typeof e.returnValue === "boolean") 
        e.returnValue = false;
    if (typeof e.cancelBubble === "boolean") 
        e.cancelBubble = true;
}
// ...
};

    代理模式

    scroll_per_second=throttle(scroll,1000)

    中介者

    counter=function(){
    var i=0;
    return function(){
        return ++i;
    }
}
counter()

    观察者模式

    paper.subscribe(joe.drinkCoffee);
paper.subscribe(joe.sundayPreNap, 'monthly');
paper.daily();
paper.monthly();

    DOM 和浏览器中的模式

    1. 减少DOM访问操作次数

      • 避免在环境中访问 DOM
      • 将 DOM 引用赋给本地变量,然后操作本地变量
      • 当可能的时候使用 selectors API
      • 遍历 HTML collections 时缓存 length

    2. 事件处理:隔离应用逻辑,不要分发event对象

      var MyApplication={
    handleClick(event){
        this.showPopup(event.clientX,event.clientY)
    },
    showPopup:function(x,y){
    }
}
b.addEventListener('click', function(event){
    MyApplication.handleClick(event)
}, false);

    3. 事件委托

      Y.delegate('click', myHandler, "#click-wrap", "button");

    4. 加载策略

      • script 元素放到页面的尾部
      • HTTP 分块
      • 动态<script>元素
      • 延迟加载
      • 按需加载
      • 预加载 JavaScript
    5. UI松耦合
    6. 浏览器嗅探：特性判断

    Design Patterns in Javascript ES6 github

    • Adapter
    • Builder
    • Bridge
    • Chaining
    • Command
    • Composite
    • Composite Iterator
    • Compound (Use some design patterns together to solve a problem)
    • Decorator
    • Facade
    • Factory
    • Iterator
    • Lazy
    • Module
    • Module Revealed
    • Multi-Inheritance ES6
    • MVC
    • Namespace
    • Nullify
    • Observer
    • Prototype
    • Proxy
    • Singleton
    • State
    • Strategy
    • Template
    • Try-Finally

    重构

    重构目的：改进软件设计，使软件更容易理解，帮助找到bug，提高产出。

    重构法则：事不过三，三则重构。添加功能/修补错误/复审代码时重构，重构不如重写简单、项目的最后期限，应该避免重构。

    糟糕代码:

    • 重复代码
    • 过长函数
    • 过大的类
    • 过长参数列
    • 发散式变化
    • 霰弹式修改
    • 依恋情结
    • 数据泥团
    • 基本类型偏执
    • switch惊悚现身
    • 平行继承体系
    • 冗赘类
    • 夸夸其谈的未来星
    • 令人迷惑的暂时字段
    • 过度耦合的消息链
    • 中间人
    • 狎昵关系
    • 异曲同工的类
    • 不完美的库类
    • 纯数据类
    • 被拒绝的遗赠
    • 过多的注释
    • 没有测试

    重构建议：

    • 重新组织函数

      • 提炼函数
      • 内联函数
      • 内联临时变量
      • 以查询取代临时变量
      • 引入解释性变量
      • 分解临时变量
      • 移除对参数的赋值
      • 以函数对象取代函数
      • 替换算法

    • 在对象之间搬移特性

      • 搬移函数
      • 搬移字段
      • 提炼类
      • 将类内联化
      • 隐藏“委托关系”
      • 移除中间人
      • 引入外加函数
      • 引入本地扩展

    • 重新组织数据

      • 自封装字段
      • 以对象取代数据值
      • 将值对象改为引用对象
      • 将引用对象改为值对象
      • 以对象取代数据
      • 复制“被监视数据”
      • 将单向关联改为双向关联
      • 将双向关联改为单向关联
      • 以字面常量取代魔法数
      • 封装字段
      • 封装集合
      • 以数据类取代记录
      • 以类取代类型码
      • 以子类取代类型码
      • 以状态对象取代类型码
      • 以字段取代子类

    • 简化条件表达式

      • 分解条件表达式
      • 合并条件表达式
      • 合并重复的条件片段
      • 移除控制标记
      • 以卫语句取代嵌套条件表达式
      • 以多态取代条件表达式
      • 引入Null对象
      • 引入断言

    • 简化函数调用

      • 函数改名
      • 添加参数
      • 移除参数
      • 将查询函数和修改函数分离
      • 令函数携带参数
      • 以明确函数取代参数
      • 保持对象完整
      • 以函数取代参数
      • 引入参数对象
      • 移除设值函数
      • 隐藏函数
      • 以工厂函数取代构造函数
      • 封装向下转型
      • 以异常取代错误码
      • 以测试取代异常

    • 处理概括关系

      • 字段上移
      • 函数上移
      • 构造函数本体上移
      • 函数下移
      • 字段下移
      • 提炼子类
      • 提炼超类
      • 提炼接口
      • 折叠继承体系
      • 塑造模板函数
      • 以委托取代继承
      • 以继承取代委托

    • 大型重构

      • 梳理并分解继承体系
      • 将过程化设计转化为对象设计
      • 将领域和表述/显示分离
      • 提炼继承体系

    编码经验

    代码大全2摘录（软件构建核对表）

    参考资料

    《Javascript设计模式》
    《编写可维护的Javascript》
    《重构——改善既有代码的设计》
    《代码大全2》
    Design-Patterns-in-Javascript

    javascript
    seasonley
    607 声望693 粉丝

    一切皆数据

    « 上一篇
    FE.SRC-webpack原理梳理
    下一篇 »
    Ops.CI/CD-持续交付概要笔记

    引用和评论

    推荐阅读
    头像
    FE.UX-3D打印入门进阶3月心路历程

    seasonley阅读 294

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新