在浏览器的控制台中输入下面一句JS代码，即可显示当前页面所有元素的边框
1 | [].forEach.call($$('*'), function(a) { |
2 | a.style.border = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16); |
3 | }); |
1.选取所有元素
$$('*')等价于 document.querySelectorAll('*')
2.改变边框的颜色
1 | a.style.border="1px solid #" + color |
这个不难理解，往下看
1 | (~~(Math.random()*(1<<24))).toString(16); |
1 | window.number = 1 |
2 | var obj = { |
3 | 'number':4, |
4 | 'dbl':(function(){ |
5 | this.number *=2 |
6 | return function(){ |
7 | this.number *=2 |
8 | } |
9 | })() |
10 | } |
11 | var dbl = obj.dbl |
12 | dbl() |
13 | obj.dbl() |
14 | console.log(window.number + obj.number) |
执行函数dbl 时，this指向了window， 所以window.number = 1*2* 2 = 4,执行 函数obj.dbl()时，this指向了obj，所以 obj.number = 8, 最终结果为12
在官方文档中，强调了computed区别于method最重要的两点
OK，下面我们看一个具体的例子
1 | <div id="app"> |
2 | <h1>{{message}}</h1> |
3 | <p class="test1">{{methodTest}}</p> |
4 | <p class="test2-1">{{methodTest()}}</p> |
5 | <p class="test2-2">{{methodTest()}}</p> |
6 | <p class="test2-3">{{methodTest()}}</p> |
7 | <p class="test3-1">{{computedTest}}</p> |
8 | <p class="test3-2">{{computedTest}}</p> |
9 | </div> |
10 | |
11 | let vm = new Vue({ |
12 | el: '#app', |
13 | data: { |
14 | message: '我是消息，' |
15 | }, |
16 | methods: { |
17 | methodTest() { |
18 | return this.message + '现在我用的是methods' |
19 | } |
20 | }, |
21 | computed: { |
22 | computedTest() { |
23 | return this.message + '现在我用的是computed' |
24 | } |
25 | } |
26 | }) |
作用域链的原理和原型链很类似，如果这个变量在自己的作用域中没有，那么它会寻找父级的，直到最顶层。JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同，并非用“堆栈”方式，而是使用列表，具体过程如下(ECMA262中所述):
任何执行上下文时刻的作用域, 都是由作用域链(scope chain)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.
ES6 允许使用“箭头”（=>）定义函数。
1 | let xxx = (p1,p2)=>{ |
2 | console.log(1) |
3 | return 2 |
4 | } |
5 | |
6 | // 只有一个参数，可以省略括号 |
7 | let xxx = p1 =>{ |
8 | console.log(1) |
9 | return 2 |
10 | } |
11 | |
12 | // 代码块只有一句话时，可以省略花括号和return |
13 | let xxx = (p1,p2) => p1+p2 |
14 | // 等同于 |
15 | let xxx = function(p1,p2) { |
16 | return p1 + p2; |
17 | }; |
18 | |
19 | // 只有一个参数，代码块只有一句话时，可以省略括号、花括号和return |
20 | let xxx = p1 => p1*2 |
21 | |
22 | // 如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。 |
23 | let f = () => 5; |
24 | // 等同于 |
25 | let f = function () { return 5 }; |
CSS Grid 布局由两个核心组成部分是 wrapper（父元素）和 items（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。
1 | //HTML |
2 | <div class="wrapper"> |
3 | <div>1</div> |
4 | <div>2</div> |
5 | <div>3</div> |
6 | <div>4</div> |
7 | <div>5</div> |
8 | <div>6</div> |
9 | </div> |
使用grid-template-row和grid-template-column属性
1 | //CSS |
2 | .wrapper { |
3 | display: grid; |
4 | grid-template-columns: 100px 100px 100px; |
5 | grid-template-rows: 50px 50px; |
6 | } |
显示如下：
异步模块定义规范（Async Module Definition 简称AMD）制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。 是 require.js 的作者发明的。其实只有一个主要接口 define(id?, dependencies?, factory)，它要在声明模块的时候指定所有的依赖 dependencies，并且还要当做形参传到 factory 中，对于依赖的模块提前执行，依赖前置。
1 | // xxx.js |
2 | define(['jquery'],function(){ |
3 | return {} |
4 | }) |
5 | |
6 | require(['./xxx'],function(xxx){ |
7 | console.log(xxx) |
8 | }) |
1.<DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
2.严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
3.DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
Flash提供了ExternalInterface接口与JavaScript通信
两个方法：call和addCallback
作用：call让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。
RequireJS是一个工具库，主要用于客户端的模块管理。
1 | npm i -D requirejs |
安装到项目文件下，安装完成后有个node_modules文件，路径是node_modules/requirejs/require.js
Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。（简单说就是处理异步请求。一个诺言，一个成功，一个失败。）
看个例子
1 | var promise = new Promise(function(resolve){ |
2 | resolve(42); |
3 | }); |
4 | promise.then(function(value){ |
5 | console.log(value); |
6 | }).catch(function(error){ |
7 | console.error(error); |
8 | }); |
运行后，打印出42，为什么会是42呢？带着这个疑惑继续放下看