QQs'Note

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

将Angular项目样式由css改为scss

安装 node-sass sass-loader

修改angular.json

1
2
3
4
5
6

"styles": [
    "src/styles.scss"
],
"default": {
    "styleExt":"scss"
},

SCSS嵌套结构样式优先级高于非嵌套结构样式，因此可以用某元素父元素嵌套的写法覆盖该元素样式

常用新语法

map类型

1 2 3 4

$pie:( width:125px height:140px )

1	width:map-get($pie, width)

@import @mixin

定义一个Mixin模块

1 2 3 4 5

@mixin button{ font-size:1em; padding:0.5em; color:#fff }

调用

1 2 3 4

.button-green{ @include button; back-ground:green }

@extend

引用已定义的样式

1 2 3 4

.button-green-mini{ @extend .button-green; width:2em }

循环语句创建样式

1 2 3 4 5 6 7 8 9

$lvlcolors:( 1:$color-danger 2:$color-orange 3:$color-warning 4:$color-blue ) @for $lvl from 1 through 4{ .lvl#{$lvl} {background: map-get($lvlcolors, $lvl)} }

each：

1 2 3 4 5 6 7 8 9

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f"); @each $name, $glyph in $icons { .icon-#{$name}:before { display: inline-block; font-family: "Icon Font"; content: $glyph; } }

issue: scss variables are not working in calc

1 2 3 4 5

.main { width: 100%; height: calc(100% - #{$header-height}); background: #313030; }

伪类 icon

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$icon:( add:"%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox...", edit:"%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox...", delete:"%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox...", refresh:"%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox..." ) @each $key, $val in $icon{ .qqs-design-icon.icon-#{$key}{ position: relative; padding-left: 22px; margin-left: 4px; &::before{ content: ''; position: absolute; left: 0px; bottom: calc(50% - 10px); background: url("data:image/svg+xml," + $val + "") no-repeat top left; width: 25px; height: 25px; } } }

拼接url

1 2 3 4 5 6 7

$sites: ("twitter.com", "facebook.com", "linkedin.com"); @each $site in $sites { a[href*="#{$site}"] { background-image: url("/images/" + $site + ".png"); } }

总结一下就是#{}这个符号用于将变量拼接在css选择器上，包括class名，属性名等，在样式的值中，字符串与变量的拼接可以直接用“+”连接

issues

jenkins build fail

1	npm i -g node-sass

以下理解未必完全正确，但包含了若干方面的可能因素，可日后进一步探究（QQs：不太会探究）：jenkins 在打包angular过程中为webpack的sass-loader安装所需包node-sass，但是缺少node-gyp，python等工具链的调用权限，因而build失败，至于npm install为什么会build，electron编译过程中也遇到过，编译对象是package中调用的c++库。对此的解决方案之一是在jenkins所在的物理机上全局安装node-sass，当下的默认版本是5.0.0，曾尝试在项目package.json中将node-sass更新为5.0.0，然而angular9中的sass-loader似乎是支持node-sass^4.0.0，因此出现“Node Sass version 5.0.0 is incompatible with ^4.0.0”的报错，应在全局重装npm i -g node-sass@4

参考
node-sass troubleshooting#Running with sudo or as root
stackoverflow:Error: Node Sass version 5.0.0 is incompatible with ^4.0.0
node-sass issues#941

Cannot download “https://github.com/sass/node-sass/releases/download/v4.13.1/win32-x64-83_binding.node”
package-lock指定了node-sass@4.13.1, 关于node-sass的release版本没有win32-x64-83_binding.node, ‘-83’为node 14的支持模块，而4.13的node-sass不支持node 14，见Node version support policy. 即此问题是由于编译环境升级到node14造成的，解决方法是安装支持node14的4.14+

参考

Worker

多线程 worker.js

• 同源限制： worker线程运行的脚本 必须与主线程脚本文件同源(QQs按：这里应该指的是同域)
• 无法访问dom 不能调用阻塞主线程的alert confirm等
• 通过postmessage/onmessage与主线程通讯
• 无法访问文件系统file：// Worker可用的Web Api

单线程和事件循环

js是单线程的 但是‘同时’能做很多事情 如js逻辑执行不影响交互事件的响应，可以设置定时器而不是阻塞在等待时间上

我们可以将整个事件循环机制拆解为几个核心部分来理解：

1. 核心组件

• 调用栈：一个后进先出的数据结构，用于追踪当前正在执行的函数。所有同步代码都在这里执行。
• 堆：用于存储对象、数组等非结构化数据的内存区域。
• Web APIs (或 Node.js APIs)：由浏览器或 Node.js 环境提供的线程，用于处理异步操作（如 setTimeout、DOM 事件、网络请求）。它们不属于 JS 引擎本身。
• 任务队列：这是一个总称，它至少包含两种不同优先级的队列：
  • Macrotask Queue (宏任务队列)：有时也被称为 Task Queue 或 Callback Queue。这是我们通常所说的“事件队列”。
    • 来源：setTimeout、setInterval、I/O (如文件读取、网络请求 fetch)、UI 渲染、DOM 事件（如点击、键盘事件）。
  • Microtask Queue (微任务队列)：一个优先级更高的队列。
    • 来源：Promise.then() / Promise.catch() / Promise.finally()、queueMicrotask()、MutationObserver。

2. 事件循环的运行规则

第一步：执行同步代码

• JS 引擎从全局代码开始执行，将所有同步函数调用压入 调用栈 中，依次执行。
• 在执行过程中，如果遇到异步操作（如 setTimeout、Promise.resolve().then()），JS 引擎会将其交给 Web APIs 处理，然后立即继续执行调用栈中的下一条同步代码，不会等待。

第二步：Web APIs 处理异步任务

• Web APIs 在后台执行相应的操作。例如：
  • setTimeout 会启动一个计时器。
  • fetch 会发起网络请求。
• 当异步操作完成时（例如，计时器到期、网络数据返回），Web APIs 不会立即将回调函数放入任务队列。它会将对应的回调函数推入到相应的任务队列中。
  • setTimeout 的回调进入 Macrotask Queue。
  • Promise.then() 的回调进入 Microtask Queue。

第三步：主线程空闲，开始事件循环

• 当 调用栈 为空时（意味着所有同步代码都已执行完毕），事件循环 开始工作。

第四步：执行 Microtask Queue（关键！）

• 事件循环会首先检查 Microtask Queue。
• 如果 Microtask Queue 中有任务，事件循环会一次性执行完所有存在的微任务，直到微任务队列为空。
• 在执行微任务的过程中，如果产生了新的微任务，它们会被添加到微任务队列的末尾，并在当前循环中被继续执行。这可能导致微任务的无限循环（需谨慎）。
• 只有当 Microtask Queue 完全清空后，事件循环才会进行下一步。

第五步：执行 Macrotask Queue

• 事件循环检查 Macrotask Queue。
• 如果 Macrotask Queue 中有任务，事件循环会只取出队列中的第一个任务，将其放入调用栈中执行。
• 注意：每次循环只执行一个宏任务。

第六步：循环往复

• 当这一个宏任务执行完毕，调用栈再次为空。事件循环会重新回到第四步，再次检查并清空 Microtask Queue。
• 这个“执行一个宏任务 -> 执行所有微任务”的循环会不断重复，构成了完整的事件循环。

总结

核心要点修正：

1. 不是两个队列，而是至少两个（宏任务和微任务）。
2. 微任务队列优先级远高于宏任务队列。
3. 每次事件循环只执行一个宏任务，但会执行所有可用的微任务。
4. Promise.then 等产生微任务，setTimeout 等产生宏任务。
   代码示例验证：

1
2
3
4
5
6
7
8
9
10

console.log('1. 同步代码开始');
setTimeout(() => {
  console.log('4. 宏任务: setTimeout');
}, 0);
Promise.resolve().then(() => {
  console.log('2. 微任务: Promise.then 1');
}).then(() => {
  console.log('3. 微任务: Promise.then 2');
});
console.log('1. 同步代码结束');

执行顺序分析：

1. 同步代码：console.log('1. 同步代码开始') 和 console.log('1. 同步代码结束') 执行。输出 1. 同步代码开始 和 1. 同步代码结束。
2. 遇到异步：
   • setTimeout 交给 Web APIs，其回调被推入 Macrotask Queue。
   • Promise.resolve().then() 的两个回调被推入 Microtask Queue。
3. 调用栈为空，事件循环开始：
   • 检查 Microtask Queue：发现有两个微任务。
   • 执行第一个：console.log('2. 微任务: Promise.then 1')。输出 2。
   • 执行第二个：console.log('3. 微任务: Promise.then 2')。输出 3。
   • Microtask Queue 现在为空。
4. 检查 Macrotask Queue：
   • 发现一个宏任务 (setTimeout 的回调)。
   • 取出并执行：console.log('4. 宏任务: setTimeout')。输出 4。
5. 本次循环结束，等待下一次循环。
   最终输出：

1
2
3
4
5

1. 同步代码开始
1. 同步代码结束
2. 微任务: Promise.then 1
3. 微任务: Promise.then 2
4. 宏任务: setTimeout

这个结果清晰地展示了微任务在当前宏任务结束后、下一个宏任务开始前被全部执行的特性。

与typescript集成

定义一个common module

1
2
3
4
5
6
7
8
9

// worker-loader.d.ts

declare module "worker-loader!*" {
    class WebpackWorker extends Worker {
        constructor();
    }

    export default WebpackWorker;
}

worker

1
2
3
4
5

// MyWorker.ts
const worker :Worker = self as any;
worker.postMessage({ foo: "foo"});

worker.addEventListener("message", (event)=>console.log(evnet));

调用worker

1
2
3
4
5
6
7

// index.ts
import Worker from "worker-loader!./Worker";
const worker = new Worker();

worker.postMessage({ a: 1 });
worker.onmessage = (event) => {};
worker.addEventListener("message", (event) => {})

ComLink

web服务器

1 2 3 4 5

<VirtualHost *:80> DocumentRoot "E:/wamp/www" ServerName localhost ServerAlias localhost </VirtualHost>

访问权限

浏览器报You don’t have permission to access /index.html on this server.

1 2 3 4 5 6 7

<Directory /> Options FollowSymLinks AllowOverride All Order deny,allow Deny from all Satisfy all </Directory>

上述配置是没毛病的，然而只是Apache22语法，Apache24不支持
服务器启动报Invalid command Order等

Apache2.4版本中，提供了由mod_authz_host支持的新的访问控制配置语法。而2.2版本中的Order、Allow等命令在新版本中也可以得到兼容，实现这个兼容功能的模块就是mod_access_compat。所以Load这个模块后，apache2.4就能识别这些语句了。

还有，一般情况下，http.conf中可能有其他关于访问权限的配置，如默认有

1
2

AllowOverride none
Require all denied

解决跨域

P类问题(Polynomial Problem)

简单的认为，P问题就是可以在多项式时间被图灵机判定的语言类。这里又涉及到图灵机，那么我们可以简单的认为，如果一个算法可以在多项式时间内求解，那么就可以认为它是P类问题。这样你就会感觉好多算法都是P类问题，对！没错！如何证明一个问题是否是P类问题呢？只要它满足以下两个条（证明它在多项式时间内完成）

1. 运行步骤数要有多项式上届时间
2. 每一步都要保证它可以由合理的确定模型在多项式时间内完成，其实就是每一步的求解过程也是多项式时间

这样步骤是多项式时间的，而每一步也是多项式时间，整合起来整个算法还是多项式时间的。

NP类问题(Non-deterministic Polynomial Problem)

NP问题指的是，这个算法可以在多项式时间内可验证，什么意思呢？我们知道对于P类问题，可以在多项式时间内求解出来，但是NP问题不行。可以这样理解，NP虽然不能在多项式时间内被求解，但是如果给出这个问题的某个解，那么我们可以在多项式时间内验证这个解是不是这个问题的解。
P是属于NP的，但是NP是否等于P是著名的千禧年七大难题之一 (有人说证明NP=P，相当于论证，世间万事皆有捷径)

NPC(Non-deterministic Polynomial Complete Problem)

月份的英文缩写

• 使用数组
  [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘June’, ‘July’, ‘Aug’, ‘Sept’, ‘Oct’, ‘Nov’, ‘Dec’][(new Date()).getMonth()]
• 使用格式化字符串
  (new Date()).toDateString().split(“ “)[1]

星期同理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Date.property.format=function(format){
    // eg: format="yyyy-MM-dd hh:mm:ssS"
    var o = {
        "M+": this.getMonth() + 1,
        "d+": this.getDate(),
        "h+": this.getHours(),
        "m+": this.getMinutes(),
        "s+": this.getSeconds(),
        "q+": Math.floor((this.getMonth() + 3)/3), //quarter
        "S": this.getMilliseconds()
    };
    if(/(y+)/.test(format)){
        format = format.replace(RegExp.$1,(this.getFullYear) + "").substr(4 - RegExp.$1.length)
    }
    for(var k in o){
        if(new RegExp("(" + k + ")").test(format)){
            format = format.replace(RegExp.$1, RegExp.$1.length == 1?o[k]:("00" + o[k]).substr(("" + o[k]).length));
        }
    }
    return format;
}

基本概念

• 作用域
• 词法作用域
• 函数级作用域和块级作用域
• 作用域提升
• 作用域闭包

作用域简单地理解就是变量的可访问范围，词法作用域也称静态作用域，强调编码决定作用域范围而与运行时无关，js使用的是词法作用域

函数级作用域指函数内定义的变量在函数体范围内有效

let const具备块级作用域，通常是大括号的范围

var在运行时具有声明提前的作用，但不会突破函数级作用域或者块级作用域

题目1

1
2
3
4
5
6
7

function t1(){
    console.log(str1);
    console.log(str2);

    var str1="xx1";
    str2="xx2"
}

调用t1();输出

1
2

undefined
Uncaught ReferenceError: str2 is not defined

关键字var提示js编译器词法分析对变量进行声明，没有该关键字，分析认为是单纯赋值操作；执行时自上而下，输出str1时未赋值，其值为undefined，而str2为未声明。

题目2

1
2
3
4
5
6
7

var i=10;
function t2(){
    i=20;
    for(var i=0;i<6;i++){
    }
    console.log(this.i);
}

调用t2()输出10。
this指向window对象

题目3

关于闭包

闭包的作用和垃圾回收

创建对象

1 工厂方式

1
2
3
4
5
6
7
8
9

function createPerson(name, age, job){ 
    var o = new Object(); o.name = name; o.age = age; o.job = job;
    o.sayName = function(){ 
        alert(this.name);
        };
    return o; 
}
var person1 = createPerson("Nicholas", 29"Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

工厂模式虽然解决了创建 多个相似对象的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）

2构造方法

1
2
3
4
5
6
7

function Person(name, age, job){ 
    this.name = name; this.age = age; 
    this.job = job;
    this.sayName = function(){ alert(this.name);}; 
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

构造的对象属于同一类型

1
2
3
4
5
6
7

alert(person1.constructor == Person); //true 
alert(person2.constructor == Person); //true

alert(person1 instanceof Object); //true 
alert(person1 instanceof Person); //true 
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true

3原型方式

1
2
3
4
5
6
7
8
9

function Person(){ }
Person.prototype.name = "Nicholas"; 
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer"; 
Person.prototype.sayName = function(){ alert(this.name);};
var person1 = new Person(); 
person1.sayName();
var person2 = new Person(); 
person2.sayName();

所有对象可以通过引用Person.prototype属性，从而实现共享属性和方法

原型对象，对象属性和原型属性

无论什么时候，只要创建了一个新函数（如上文Person），就会根据一组特定的规则为该函数创建一个原型对象prototype，在默认情况下，所有原型对象都会自动获得一个 constructor，该构造方法指向 prototype 属性所在函数（即Person.prototype.constructor=Person）。通过这个构造函数，我们还可继续为原型对象添加其他属性和方法。创建了自定义的构造函数之后，其原型对象默认只会取得 constructor 属性；至于其他方法，则都是从 Object 继承而来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（__proto__,注，ECMA-262第5版中管这个指针叫[[Prototype]]。虽然在脚本中没有标准的方式访问[[Prototype]]，但 Firefox、Safari 和 Chrome 在每个对象上都支持属性 proto ；而在其他实现中，这个属性对脚本则是完全不可见的），指向构造函数的原型对象（即person1.__proto__=Person.prototype）。

代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先 从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到， 则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这 个属性，则返回该属性的值。也就是说，在我们调用 person1.sayName()的时候，会先后执行两次搜 索。首先，解析器会问：“实例 person1 有 sayName 属性吗？”答：“没有。”然后，它继续搜索，再 问：“person1 的原型有 sayName 属性吗？”答：“有。”于是，它就读取那个保存在原型对象中的函数。

可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果我们 在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。而delete对象实例的这个属性，会重新暴露原型对象的属性

1
2
3
4
5
6

Person.prototype.name = "Nicholas";
var person1 = new Person(); 
person1.name = "Greg"; 
alert(person1.name); //"Greg"——来自实例 
delete person1.name; 
alert(person1.name);//"Nicholas"——来自原型

从in说到for in，遍历所有能够通过对象访问的、可枚举的（enumerated）属性，其中 既包括存在于实例中的属性，也包括存在于原型中的属性。

“可枚举”相当于”可以出现在对象属性的遍历中”，在数组上使用for in遍历，不仅会包含所有数值索引，还会包含所有可枚举属性，。最好只在对象上应用 for in 循环，如果要遍历数组就使用传统的 for 循环来遍历数值索引

Object.propertyIsEnumerable()方法可以检查给定属性名是否直接存在于实例中且enumerable = true
不可枚举属性，即将 [[Enumerable]]标记为 false 的属性，而屏蔽不可枚举属性的实例属性也会遍历到。
Object.keys()返回所有可枚举属性的字符串数组。
Object.getOwnPropertyNames()返回所有属性的数组，无论是否可以枚举

更多创建对象姿势

动态原型模式

1
2
3
4
5
6
7
8
9

function Person(name, age, job){ //属性
    this.name = name; this.age = age;
    this.job = job;
    if (typeof this.sayName != "function"){    
        Person.prototype.sayName = function(){ 
            alert(this.name);
        }; 
    }
}

原型对象方法sayName在第一次调用构造方法Person时执行。

寄生构造方法模式

1
2
3
4
5
6
7
8
9
10
11

function Person(name, age, job){ 
    var o = new Object(); 
    o.name = name; 
    o.age = age; 
    o.job = job;
    o.sayName = function(){ 
        alert(this.name);
    }; 
    return o; 
}
var friend = new Person("Nicholas", 29, "Software Engineer");

注意这种方式不能依赖 instanceof 操作符来确定对象类型

稳妥构造函数模式

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name, age, job){ //创建要返回的对象
    var o = new Object();
    //可以在这里定义私有变量和函数 
    //添加方法
    o.sayName = function(){ 
        alert(name);
    };
    //返回对象 
    return o;
}
var friend = Person("Nicholas", 29, "Software Engineer"); 
friend.sayName(); //"Nicholas"

对象实例只能调用闭包内函数以返回name，而无法直接访问任何属性

原型链和继承

原型链

假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是所谓原型链的基本概念。

1
2
3
4
5
6
7
8
9
10
11
12
13

function SuperType(){ 
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){ 
    return this.property;
};
function SubType(){ }
SubType.prototype = new SuperType();//继承了 SuperType 
SubType.prototype.getSubValue = function (){ 
    return this.subproperty;
};
var instance = new SubType(); 
alert(instance.getSuperValue());//true

借用构造方法constructor stealing

1
2
3
4
5
6
7
8
9
10
11
12

function SuperType(){ 
    this.colors = ["red", "blue", "green"]; 
}
function SubType(){ 
    //继承了 SuperType 
    SuperType.call(this);
}
var instance1 = new SubType(); 
instance1.colors.push("black"); 
alert(instance1.colors);//"red,blue,green,black"
var instance2 = new SubType(); 
alert(instance2.colors);//"red,blue,green"

传参

1
2
3
4
5
6
7
8
9
10

function SuperType(name){ 
    this.name = name;
}
function SubType(){ 
    SuperType.call(this, "Nicholas");//调用SuperType构造方法
    this.age = 29; //实例属性 
}
var instance = new SubType(); 
alert(instance.name); //"Nicholas";
alert(instance.age);//29

组合构造

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

function SuperType(name){ 
    this.colors = ["red", "blue", "green"]; 
    this.name=name;
}
SuperType.prototype.sayName=function(){alert(this.name)};

function SubType(name,age){ 
    //继承了 SuperType 
    SuperType.call(this,name);
    this.age=age;
}
SubType.prototype=new SuperType();
SubType.prototype.constructor=SubType;// 注@
SubType.prototype.sayAge=function(){alert(this.age)};

var instance1 = new SubType(); 
instance1.colors.push("black"); 
alert(instance1.colors);//"red,blue,green,black"
var instance2 = new SubType(); 
alert(instance2.colors);//"red,blue,green"

在注@这一行，将原型对象的构造方法指向到SubType，因为之前该对象根据继承关系图示，作为SuperType实例，其[[prototype]]指向SuperType.prototype，故而SubType.prototype.constructor原先为SuperType方法。

组合继承避免了原型链和借用构造函数的缺陷，融合了它们的优点，成为 JavaScript 中最常用的继承模式。而且，instanceof 和 isPrototypeOf()也能够用于识别基于组合继承创建的对象。

原型式继承

浅复制方法

1
2
3
4
5

function object(o){ 
    function F(){}
    F.prototype = o; 
    return new F();
}

操作符instanceOf

1
2
3
4
5
6
7
8
9
10
11

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
 var O = R.prototype;// 取 R 的显示原型
 L = L.__proto__;// 取 L 的隐式原型
 while (true) { 
   if (L === null) 
     return false; 
   if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true 
     return true; 
   L = L.__proto__; 
 } 
}

可迭代 (Iterable) 可枚举 (Enumerable)

可迭代决定了能不能用 for…of 循环遍历每一项。

其本质是对象内部定义了iterator 遍历时调用iterator.next()

原生可迭代对象：数组 (Array)、字符串 (String)、Map、Set、TypedArray、Arguments 对象

可枚举决定了能不能用 for…in 循环看到该属性。

js对象其属性包含描述符enumerable 当enumerable为true的可枚举 即可以for in、Object.keys()、 Object.values()、Object.entries()、 JSON.stringify()

1
2
3
4
5
6
7

// 定义不可枚举属性
Object.defineProperty(obj, 'secret', {
  value: '123456',
  enumerable: false, 
  writable: true,
  configurable: true
});

编写方法时，考虑到不同的业务需求（如首次加载配置项js片段，甚至是为了兼容不同内核浏览器）需要用多个if语句加以区分，这将使每次调用都回进行判断，然而往往在具体的情景下是不必要的，比如已经以chrome载入了该页面。
一种思路是覆盖方法定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else{
        addEvent = function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
    return addEvent(type, element, fun);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var addEvent = (function () {
    if (document.addEventListener) {
        return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
    else if (document.attachEvent) {
        return function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
    else {
        return function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();

剔除符号

1	str.replace(/[^0-9a-zA-Z]/g,"");

1 2 3 4 5

function palindrome(str) { str = str.replace(/[^0-9a-zA-Z]/g,""); str = str.toLowerCase(); return str==str.split("").reverse().join(""); }

指定内容行前注#

1 2	^(Proxy.+)$ #$1

$1为()内的内容

常见用法

regExp.test(target)

判断target是否符合正则表达式规则

target.match(regExp)

返回target字符串中符合正则表达式规则的部分

匹配语法

flag: g, i

g: global

i: case insensitive

集合[]

非和开头^

^在集合中表示非

比如上面剔除符号的用法

在集合外表示以…开头

频率 +， *， ?

symbol	description
+	出现1次或者多次
*	出现任意次
?	出现一次或者不出现
{n}	重复n次
{m, n}	重复m~n次

greedy matching vs lazy matching

贪心匹配（?）匹配最长的串，惰性匹配（?）匹配最小的串

1
2
3
4
5
6
7
8
9
10

let text = "<h1>Winter is coming</h1>";
let myRegex = /<.*>/; 
let result = text.match(myRegex); // matching <h1>Winter is coming</h1>

myRegex = /<.*?>/; 
result = text.match(myRegex); // matching <h1>

let article = "<h1>Winter is coming</h1><div></div><h1>north remembers</h1><h1>dragon is coming</h1><h1>the Queen is coming</h1>"
let titles = article.match(/<h1>.*?<\/h1>/g)

• 思考：折中的需求

匹配符合下列规律的字符串,规律是连续的两个parameter，即某规则重复2次

1
2
3

<parameter key="xxx" value="1" />
<any-other-marks>
<parameter key="yyy" value="2" type="0"/>

1

xmlInfo.match(/<parameter.*?\/>.*?<parameter.*?\/>/)

代码占位符

lookaheads

暂时不知道如何翻译

例 密码规则不少于6位，且至少包含连续2位数字

1
2

let pwRegex = /(?=\w{6,})(?=\D*\d{2})/;
let result = pwRegex.test(sampleWord);

()

括号的本义是封装模式，封装的模式可以用\1 \2的方式代替
上面有个遗留问题，重复部分可写作

1

xmlInfo.match(/(<parameter.*?\/>).*?\1/)

正/反向断言

• (?=pattern)：正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串。
  非获取匹配,即符合该模式的匹配结果不需要获取供以后使用。例如，“Windows(?=95|98|NT|2000)”能匹配“Windows2000”中的“Windows”，但不能匹配“Windows3.1”中的“Windows”。
  不消耗字符，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。

• (?!pattern)：正向否定预查，在任何不匹配pattern的字符串开始处匹配查找字符串。

• (?<=pattern)： 反向肯定预查，与正向肯定预查类似，只是方向相反。例如，“(?<=95|98|NT|2000)Windows”能匹配“2000Windows”中的“Windows”，但不能匹配“3.1Windows”中的“Windows”。

• (?<!pattern)：反向否定预查，与正向否定预查类似，只是方向相反。例如“(?<!95|98|NT|2000)Windows”能匹配“3.1Windows”中的“Windows”，但不能匹配“2000Windows”中的“Windows”。
  从结果理解正向反向：匹配得到的“Windows”，如果对其接下来的内容有要求，正则表达式/Windows/要追加一个断言模式，如果对其之前的内容有要求，除了在/Windows/之前加断言模式，还要用“？<”表明这是反向断言

  写过的例子

• 常见邮箱格式
  

  1	/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

• 以,分隔的邮箱地址
  

  1	/^(([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4}),)*(([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4}))$/

• 获取文件扩展名

  1	filename.match(/\.(\w+)$/);

  返回match的Array,取第一项为扩展名

• 查找代码中所有的描述字符串(目的是做多语言替换)

  1	(?<!from |require\(|: |console\.log\()'.+'

  即非空字符串且排除import from，require，以及console.log等语法

• 图床地址https://tvax+数字+.sinaimg.cn 模式的字符串替换为 https://i0.wp.com/tvax+相同数字+.sinaimg.cn 的字符串
  捕获组

  1	(https:\/\/tvax)(\d)(\.sinaimg\.cn)

  替换

  1	https://i0.wp.com/tvax$2.sinaimg.cn

• 查找项目对某个库任意api的引用

  1	import\s*\{([^}]*)\}\s*from\s+['"]three['"]$