Architecture

Gaia

• Applications and UI
• Third-party application can be installed

Gecko

• JS Runtime (?)
• APIs
• Consists: network stack, graph stack, layout engine, virtual machine(for JS), porting layers

Gonk

• Linux Kernel
• Device Drivers
• Hardware Abstraction Layer

Start up

1. Primary bootloader (usually show the first flash screen)
2. Linux Kernel and Modem
3. The end of bootstrapping process modem image loaded.
4. The end of kernel startup, userspace “init” process launched
5. A ramdisk mounted

DOM特性和DOM属性

• 访问特性值：getAttribute／setAttribute 或者使用DOM对象上与之对应的属性。

1
2

e.getAttribute('id')
e.id

id 的属性和特性以某种方式联系在一起，修改属性值也会改变特性值，但它们并没有共享一个相同的值。

一些特性名和属性名不同的情况:
class/className, tabindex/tabIndex 等等。

事件

在冒泡阶段，事件将从事件源传播到DOM的根节点；而在捕获阶段，事件则是从DOM根节点遍历传播到事件源上。

线程

在Web worker(?web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能)可用之前，++浏览器的所有Javascript代码都是在单线程中执行的++。异步事件的处理程序，如用户界面事件和定时器，在线程中没有代码执行的时候才执行，处理程序在执行时必须排队，并且一个处理程序不能中断另一个。

• Javascript 是单线程的

  1. Javascript 运行在浏览器中，是单线程的，每个windows一个线程。
  2. 浏览器是事件驱动，很多行为异步的，会创建事件并放入执行队列中。
  3. Javascript 引擎单线程处理它的任务队列，也就是普通函数和回调函数组成的队列。
  4. 异步事件发生时，会把异步执行的callback放入队列，并等待当前代码执行完成。

• 浏览器不是单线程的

  1. javascript 引擎线程
  2. 界面渲染线程
  3. 浏览器事件触发线程
  4. http请求线程(Ajax)

• Ajax 异步

  Ajax请求确实是异步的，这请求是由浏览器新开一个线程请求，事件回调的时候是放入Event loop单线程事件队列等候处理。

• 利用定时器分解长时间任务
  setTimeout(fun, 0)

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

  var count = 2000; var divide = 4; var chunkSize = count/divide; var iteration = 0;; var table = document.createElement('tbody'); setTimeout(function generateRows() { var base = (chunkSize) * iteration; for (let i = 0; i < chunkSize; i++) { let tr = document.createElement('tr'); for (let t = 0; t < 6; t++) { let td = document.createElement('td'); td.appendChild(document.createTextNode((i + base) + "," + t + ',' + iteration)); tr.appendChild(td); } table.appendChild(tr); } iteration++; if (iteration < divide) { setTimeout(generateRows, 0); } }, 0);

正则

• 正则字面量

  正则字面量用正斜杠界定:

1
2

var pattern = /test/;
var pattern = /test/ig;

• 构造RegExp实例

1
2

var pattern = new RegExp("test");
var pattern = new RegExp("test", "ig");

如果正则是已知的，优先选择字面量语法，而构造器的方式多用在运行时。

• 3个标志

• i: 让正则表达式不区分大小写
• g: 匹配模式中的所有实例

• m: 允许匹配多行

• 匹配一类

• [abc]: a或b或c
• [^abc]: abc以外的任意字符

• [a-m]: a到m之间的所有字符

• 重复出现

• ?: 出现1次或根本不出现
• +: 字符出现1次或者多次
• *: 字符出现0次或者多次
• a{4}: a连续出现4次
• a{4, 10}: a连续出现4次到10次之间的随意值

• a{4,}: a连续出现4次以上的次数

• 分组

  /(ab)+/ 匹配1个或者多个连续出现的字符串ab。

• 反向引用

  在正则中所定义的捕获的反向引用。/^([dtn])a\1/，可以是任意1个以d，t，n开头的，并且后面跟着1个a字符，并且后面跟着的是和第一个捕获相同的字符的字符串。dad

捕获和表达式分组都使用小括号表示。

被动子表达式，阻止不必要的捕获: /((?:nijia-)+)sword/ ,防止任何意外的捕获，所以在确定表达式是只用于分组时，需要使用 被动子表达式”?:”。

• 常用方案

• /[\S\s]/ 匹配所有字符包括换行符。
• /^\s+|\s+$/g 匹配所有开头或者结尾的空格。
• /[\w\u0080-\uFFFF_-]+/ 匹配包括Unicode在内的所有字符

实例属性的优先级

1. 通过原型给对象实例添加的属性
2. 在构造器函数内给对象的实例添加的属性

在构造器内绑定的操作的优先级永远都高于在原型上绑定的操作优先级，因为构造器的this上下文指向的是实例自身。

查询属性引用时，首先查询对象自身，如果不存在，再去原型上查找，如果还是不存在，那么返回undefine。

原型链

例如: 忍者是一个人，人又是一个哺乳动物，哺乳动物又是动物的一种…直到最终的是一个Object。
创建这样一个原型链的最好的方式是，使用一个对象的实例作为另一个对象的原型。

用原型实现继承(即原型链)

1
2
3
4
5
6
7

function Person() {}
Person.prototype.dance = function() {}
function Ninja() {}
Ninja.prototype = new Person();
var ninja = new Ninja();

注意，不要把原型对象赋值给原型，例如：Ninja.prototype = Person.prototype;，这样任何Ninja原型上的修改都会影响到person。

闭包

闭包是一个函数在创建时允许该自身函数访问并操作该自身函数之外的变量时所创建的作用域。

闭包可以让函数访问所有的变量和函数，只要这些变量和函数存在与该函数声明时的作用域内就行。

闭包的用法

1. 封装私有变量

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

function Ninja() {
    var feints = 0;
    this.getFeints = function() {
        return feints;
    };
    
    this.feints = function() {
        feinits++;
    };
}
var ninja = new Ninja();
ninja.feints();
ninja.getFeints();//1
ninja.feints;//undefine

通过闭包实现缓存记忆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// 查询缓存
Function.prototype.memoized = function(key) {
    this._values = this._values || {};
    return this._values[key] !== undefined ?
    this._values[key] :
    this._values[key] = this.apply(this, arguments);
};
// 封装函数，并且通过闭包把上下文保留下来
Function.prototype.memoize = function() {
    var fn = this;
    return function() {
        return fn.memoized.apply(fn, arguments);
    };
};
var isPrime = (function(num) {
    var prime = num !== 1;
    for (var i = 2; i < num; i++) {
        if (num % i === 0) {
            prime = false;
            break;
        }
    }
    return prime;
}).memoize();
assert(isPrime(17), "17 is prime");

即时函数

代码模式:

1

(function(){})();

• 第一组圆括号作用是用于划定表达式的范围
• 第二组圆括号则是一个操作符
• 第一组圆括号内直接是使用的是匿名函数

这段代码执行的操作:

1. 创建一个函数的实例
2. 执行该函数
3. 销毁该函数，因为语句结束后没有任何引用了

类库包装

不希望一些不必要的变量去污染全局命名空间，尤其时那些零时变量，利用闭包和即时函数封装类库，使它尽可能的私有，并且选择性的暴露一些变量到全局空间。

1
2
3
4
5
6

(function(){
    var jQuery = window.jQuery = function() {
        // initialize
    };
    // ...
})();

首先jQuery构造器(匿名函数)赋值给了window.jQuery,使其作为全局变量，然后将其赋值给了一个局部变量jQuery，强制让它保持在即时函数的作用域内。在即时函数的创建的世界中，名称jQuery的意义就是我们所期望的。

另一种实现方式:

1
2
3
4
5
6
7
8

var jQuery = (function(){
    function jQuery() {
        // initialize
    }
    
    // ...
    return jQuery;
})();

首先在匿名函数的作用域中定义了jQuery函数，它可以自由存在于匿名函数的作用域中，然后将其返回并且赋值给一个名为jQuery全局变量，通常只输出一个变量时优先使用这种方式。

偏应用函数？重载函数？

Todo

函数参数以及形参

• 如果实际传递参数大于形参数量，超出的参数不会给予形参名称，但是依然能够通过其它方式获取到
• 如果形参数量大于实际传递参数数量，那么没有对应实际参数的形参会赋值为undefine
• 所有的函数调用都会默认传递2个隐式参数：arguments、this。

1. arguments拥有length属性的类数组（实际上不是）可以通过arguments[2]取到第3个参数;
2. this参数引用了，与该函数调用时进行隐式关联的一个对象，被称为函数上下文。

函数作为构造器调用

• 调用方式：new function();
• 调用时内部行为：

1. 创建一个空对象
2. 传递给构造器的对象是this参数，从而成为构造器的函数上下文
3. 如果没有显式的返回值，那么新创建的对象则作为构造器的返回值返回

函数的apply和call方法

JavaScript 任何一个函数都有apply() 和call() 方法，二者都可以显式的指定任何一个对象作为其函数的上下文。

• func.apply(obj, [1,2,3]);
• func.call(obj, 1, 2, 3);
• 也可以在callback中指定函数上下文: callback.call(obj, n)

自记忆函数

memorization, 能够记住先前的计算结果，以显著的提高性能。

• 记忆之前计算出的值
• 缓存记忆DOM元素

1
2
3
4
5
6
7

function getElements(name) {
    if (!getElements.cache) {
        getElements.cache = {};
    }
    return getElements.cache[name] =
        getElements.cache[name] || document.getElementsByTagName(name);
}

控制传递函数上下文

函数调用时，通过控制传递函数上下文，在当前对象上执行当前对象没有的方法。例如利用Array或Math上已有的方法，在自定义的数据上进行操作。

1
2
3

function multiMax(multi) {
    return multi * Math.max.apply(Math, Array.prototype.slice.call(arguments, 1));
}

欺骗Array.prototype.slice方法，将其在arguments列表上使用，arguments参数列表并不是一个真正的数组。

no child processes…

现象描述：-j1 单线程编译能够通过，多线程-j8 或其它概率性不能通过，出现上面的报错。

解决方法：jdk版本不对，Ubuntu16.04应该用openjdk8