FE.BASE-前端设计模式笔记

栏目: 后端 · 发布时间: 5年前

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

高质量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

参考资料

《Javascript设计模式》

《编写可维护的Javascript》

https://github.com/tcorral/De...

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

网站搜索设计

网站搜索设计

[美] Shari Thurow、[美] Nick Musica / 向怡宁 / 人民邮电出版社 / 2011-4 / 35.00

本书是提高网站搜索可用性的红宝书,它将SEO 和Web 可用性两个不同领域的知识融会贯通,详细阐述了用户的各种搜索行为和行为背后的真实意图,以及网站如何迎合用户心理,以便提供令其满意的内容,进而实现网站所有者的商业目标。 本书不仅仅是SEO 专业人员和Web 可用性人员的参考必备,同时更可为网络文案、设计开发人员、营销专员以及网站所有者、管理者等其他Web 领域从业人员拓展视野、补强技能。一起来看看 《网站搜索设计》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具