Fork me on GitHub

第十五章 事件

JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻。 可以使用仅在事件发生时执行的监听器（也叫处理程序）订阅事件。在传统软件工程领域，这个模型叫 “观察者模式”，其能够做到页面行为（在 JavaScript 中定义）与页面展示（在 HTML 和 CSS 中定义）的 分离。

事件流

1、事件冒泡
事件定义从最为具体的元素开始触发，然后传播至没那么具体的元素

2、事件捕获
最不具体的元素节点应该最先受到事件，而最具体的元素因该最后收到事件

more >>

展开全文 >>

第十八章 canvas与动画

requestAnimationFrame

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
早期js动画 都是通过定时器 来控制动画的执行。但是动画的时间间隔精度不足毫秒一直是个问题。

IE8 及更早版本的计时器精度为 15.625 毫秒； 
IE9 及更晚版本的计时器精度为 4 毫秒； 
Firefox 和 Safari 的计时器精度为约 10 毫秒； 
Chrome 的计时器精度为 4 毫秒。

requestAnimationFrame()方法接收一个参数，此参数是一个要在重绘屏幕前调用的函数。这个

函数就是修改 DOM 样式以反映下一次重绘有什么变化的地方。为了实现动画循环，可以把多个 requestAnimationFrame()调用串联起来，就像以前使用 setTimeout()时一样： 

function updateProgress() { 
	var div = document.getElementById("status"); 
	div.style.width = (parseInt(div.style.width, 10) + 5) + "%"; 
	if (div.style.left != "100%") { 
	requestAnimationFrame(updateProgress); 
	} 
} 
requestAnimationFrame(updateProgress); 

因为 requestAnimationFrame()只会调用一次传入的函数，所以每次更新用户界面时需要再手 动调用它一次。同样，也需要控制动画何时停止。结果就会得到非常平滑的动画。


cancelAnimationFrame

	与 setTimeout 类似， requestAnimationFrame 返回ID，可以通过 cancelAnimationFrame来取消
    
    let requestID = window.requestAnimationFrame(() => { 
        console.log('Repaint!'); 
    }); 
	window.cancelAnimationFrame(requestID);


通过requestAnimationFrame节流

function expensiveOperation() { console.log('Invoked at', Date.now()); } window.addEventListener('scroll', () => { 
    window.requestAnimationFrame(expensiveOperation); 
});

//因为重绘是非常繁琐的操作，所以上不上真正的节流

 
function expensiveOperation() { console.log('Invoked at', Date.now()); } 
window.addEventListener('scroll', () => { 
    if (!expensiveOperation.enabled) { 
        expensiveOperation.enabled = true; 
        window.requestAnimationFrame(expensiveOperation); 
        window.setTimeout(() => expensiveOperation.enabled = false, 50); } 
});


more >>

展开全文 >>

第十四章 DOM

Node类型

DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。Node 接口 在 JavaScript中被实现为 Node 类型，在除 IE之外的所有浏览器中都可以直接访问这个类型。在 JavaScript 中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。
more >>

展开全文 >>

第十章 函数

​ 函数实际上是对象。每个函数都是Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样。因为函数是对象，所以函数名就是 指向函数对象的指针，而且不一定与函数本身紧密绑定。

函数的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
1、函数声明式
function sum (num1, num2) { return num1 + num2; }

2、函数表达式
let sum = function(num1, num2) { return num1 + num2; };

3、箭头函数
let sum = (num1, num2) => { return num1 + num2; };

4、Function 构造函数
let sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐


箭头函数

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。