发表于   |  

事件系统

nodejs的事件模块

nodejs官方api文档

  • nodejs中的事件模块，是用来给其他对象提供绑定事件，触发事件等能力。

  • 官方的一个小demo，可以看出，将一个宿主对象集成 events 模块提供的对象，那么这个宿主对象拥有了这个方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    const EventEmitter = require('events');

    class MyEmitter extends EventEmitter {}

    const myEmitter = new MyEmitter();
    myEmitter.on('event', () => {
      console.log('an event occurred!');
    });
    myEmitter.emit('event');
阅读全文 »

发表于   |  

javascript事件机制

事件流

  1. 事件：我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
  2. 事件触发的三个阶段：
    • 事件捕捉
    • 到达事件位置，触发事件（如果这里既有捕捉事件，也有冒泡事件，则按注册的顺序执行）
    • 事件冒泡，并触发。
  1. 事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
    • 事件处理机制：IE是事件冒泡、firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件。；
    • ev.stopPropagation();注意旧ie的方法 ev.cancelBubble = true;
阅读全文 »

发表于   |  

js继承的概念

有如下两种常用的继承方式：

  • 原型链继承（对象间的继承）
  • 类式继承（构造函数间的继承）

原型链继承与类式继承

类式继承是在子类型构造函数的内部调用超类型的构造函数。
严格的类式继承并不是很常见，一般都是组合着用：

1
2
3
4
5
6
7
function Super(){
    this.colors=["red","blue"];
}
 
function Sub(){
    Super.call(this);
}
阅读全文 »

发表于   |  

数据类型

es5数据类型：

非引用型：

  • “Undefined” : 顾名思义，无法确定。值未定义，很多情况是引用的变量没有明确的值。
  • “Boolean” ： 布尔值，只有”true” 和 “false”两个值。
  • “String” ：字符串。
  • “Number” ：数值。其中”NAN” 属于这个数据类型

    引用型：

  • “Object” ： “Null”属于对象类型。

发表于   |  

长时间运行的javascript任务

　　对于浏览器来说，一些复杂的javascript不能在100毫秒或更短时间内完成。这时候，UI线程被长时间占用，页面UI得不到更新，对于用户来说是非常不好的体验。

这时候最理想的方法就是让出UI线程的控制权，让出控制权意味着停止执行javascript，使得UI有机会更新。然后再执行javascript。
创建一个 定时器 会造成UI线程暂停。

使用定时器处理数组

一种常见的造成长时间运行脚本的起因是耗时过长的循环。 

典型的简单循环模式：
for (var i = 0 , len = items.length; i < len; i++) {
  process(items[i]);
}
阅读全文 »

发表于   |  

为什么需要无阻塞的脚本？

　　由于javascript的阻塞特性，浏览器在执行js脚本代码的时候不能做其他任何事情。简单来说，就是 <script> 标签每次出现都会让页面等待脚本的解析和执行。
　　下面是两种比较简单的提高性能的做法：

  1. 在页面整个渲染过程，由于脚本会阻塞页面其他资源的下载，因此推荐将所有的<script>标签尽可能的放到<body>标签的底部。
  2. 合并脚本，减少http请求，减少每个<script> 标签初始下载，执行带来的迟延。
    阅读全文 »

发表于   |  

说明：本系列是本人读完《你不知道的javascript》的总结和感想。有兴趣的读者可以去看原书籍。

一. 关于this

消除对this的误解

在解释this之前，我们需要先消除一些关于this的错误认识。

  • 指向自身

    　　人们常常容易把this理解指向函数自身，现在我们来看一个例子。

    我们想要记录以下函数foo被调用的次数，思考以下代码：
function foo(num){
    console.log("foo :" + num);
    //记录foo被调用的次数
    this.count++;
}
foo.count = 0;
var i;
for(var i = 0;i<10;i++){
    if( i > 5){
        foo(i);
    }
}
//foo :6
//foo :7
//foo :8
//foo :9        
console.log( foo.count );  //0        

console.log语句输出四次，可点foo()函数调用了四次，
而foo.count仍然为0，说明foo()函数中的this并非指向
foo函数。

console.log( window.count );  //NAN
这里其实this引用的是全局，生成一个window对象下的全局
变量，值为NAN。
    阅读全文 »

发表于   |  

说明：本系列是本人读完《你不知道的javascript》的总结和感想。有兴趣的读者可以去看原书籍。

一. 作用域

编译原理

       虽然通常把javascript分类为“动态”或“解释执行”语言，但事实上是一门编译语言。
       对于传统编译语言，一段源代码在执行之前会经历三个步骤：

  • 分词/词法分析
  • 解析、语法分析
  • 代码生成
           相对只有这三个步骤的语言，javascript引擎要复杂的多。例如其在分词等有特定的步骤对运行性能进行优化。
           这里我们并不对javascript引擎的编译原理进行深入的探讨，有兴趣的读者可以谷歌查询更详细的资料。
           这里我们只需要知道任何javascript代码片段在执行前都要进行编译。
    阅读全文 »