ES6(ECMAScript 6)笔记4-正则的扩展

RegExp构造函数

ES5中RegExp构造函数值接受字符串作为参数,而ES6支持真个表达式作为参数。

1
var reg = new RegExp(/xyz/i);

如果使用RegExp构造函数的第二个参数指定修饰符,则返回的表达式会忽略原有的修饰符,使用新指定的。

1
2

y修饰符

y修饰符也叫做 粘连(sticky)修饰符,作用与g类似,也是全局匹配,后一次匹配都从上一次匹配成功的下一个位置开始,不同之处在于,g修饰符只要剩余位置中存在匹配即可,而y修饰符确保匹配必须从剩余的第一个位置开始,也就是 粘连 的含义。

阅读全文

ES6(ECMAScript 6)笔记3-字符串的扩展

includes(), startsWith(), endsWith()

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
1
2
3
4
5
var s = "Hello world!";

s.startsWith("Hello") // true
s.endsWith("!") // true
s.includes("o") // true

以上都支持第二个参数,表示开始搜索的位置。

1
2
3
4
5
var s = "Hello world!";

s.startsWith("world", 6) // true
s.endsWith("Hello", 5) // true
s.includes("Hello", 6) // false

阅读全文

ES6(ECMAScript 6)笔记2-变量的解构赋值

概念

按照一定的模式,从数组和对象中提取值,对变量进行赋值,这个被成为解构。

数组的解构赋值

下面表示可以从数组中提取值,按照对应的位置对变量赋值。

1
2
3
4
5
6
7
8
9
10
11
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [,,third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

阅读全文

再一次,javascript设计模式与开发实践-开放-封闭原则

定义

很多时候,一个程序具有良好的设计,它通常是符合开发-封闭原则的。

软件实体(类、模块、函数)等应该是可以扩展的,但是不可修改的。

例子

过多的if是造成违反开发-封闭原则的一个常见原因。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var markSound = function (animal) {
    if (animal instanceof Duck) {
        console.log('嘎嘎嘎');
    }
    else if (animal instanceof Chicken) {
        console.log('咯咯咯');
    }
};

var Duck    = function () {};
var Chicken = function () {};

markSound(Duck());
markSound(Chicken());

显然如果动物世界再增加一只狗之后,我们必须改写markSound函数。

阅读全文

再一次,javascript设计模式与开发实践-最少知识原则

定义

某军队中的将军需要挖掘一些散兵坑,下面是完成任务的一种方式:

将军通知上校,上校通知上尉,上尉通知军士,最后军士叫来士兵,让士兵来挖一些散兵坑。

将军根本不必考虑挖散兵坑的细节信息,只要通知下属就好了,

减少对象之间的联系

在程序中,对象的“朋友”多并不是一件好事,“城门失火,殃及池鱼”和“一人犯法,株连九族”的事情时有发生..
最少知识原则要求我们在设计程序时,应当尽可能的减少对象之间的交互,如果两个对象之间不必彼此直接通信,那么这两个对象就不要发生直接的相互联系。
常见的做法是引入一个第三者对象来承担这些对象之间的通信。

阅读全文

再一次,javascript设计模式与开发实践-单一职责原则

定义

如果我们有两个动机去改写一个方法,那么这个方法就具有两个职责。
每个职责都是变化的一个轴线,如果一个方法承担了过多的职责,那么在需求变化的过程中,需要改写这个方法的可能性就越大。
因此,单一职责(SRP)原则体现为:一个对象(方法)只做一件事。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var createLayer = (function () {
    var div;

    return function () {
        if(!div) {
            div = document.createElement('div');
            div.innerHTML = '我是浮动窗';
            document.body.appendChild(div);
        }

        return div;
    };
})();

var layer1 = createLayer();
var layer2 = createLayer();

console.log(layer1 === layer2); // true

上面的代码把生成单例和创建悬浮窗的职责合在了一起,这个两个方法可以独立变化而不相互影响,那么遵守单一职责应该这样写。

阅读全文

再一次,javascript设计模式与开发实践-适配器模式

简述

使接口保持一致

在火车站、机场有临时的手机充电处,那里的数据线比较特别,一头有供各种手机用的接头,另一头是标准的USB接口,这种属于适配器模式。

使用场景

  • 多个不同的数据接口
  • ..

案例

渲染地图的API来自不同的提供,那么使用适配器模式来使API保持一致。

阅读全文

再一次,javascript设计模式与开发实践-状态模式

简述

允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类。

酒店的台灯开关顺序通常是:关灯 → 弱等 → 强灯 → 关灯,这这种行为就是状态。

使用场景

  • 文件状态
  • 角色动作
  • ..

案例

如上台灯的状态行为,用多层if可以很快的编写代码,但假如新设计的台灯又多了一种状态呢?
随着情况越来越多,显然if的方式会违反开发-封闭原则,后续维护将变得复杂。
状态模式能够很好的解决这种问题。

阅读全文

再一次,javascript设计模式与开发实践-装饰者模式

简述

在不改变对象自身的基础上,在程序运行期间给对象动态的添加功能。

很多时候我们不想去碰原函数,也许原函数是其他同事的,也可能是一个很古老的项目,现在可以通过装饰者模式在不改变原函数的情况下给函数增加功能。

使用场景

  • 统计
  • 表单验证
  • ..

案例

在项目开发中难免要加上很多统计代码,这些统计代码与业务代码并没有多大关系,那么使用装饰者模式再好不过了。

阅读全文