当前位置:千赢国际官网 > 千赢网页手机版登入 > Components构建单页面应用,你可能需要了解的知识

Components构建单页面应用,你可能需要了解的知识

文章作者:千赢网页手机版登入 上传时间:2019-11-30

用Web Components构建单页面应用

2015/01/19 · JavaScript · Web Components

本文由 伯乐在线 - 周进林 翻译,Mxt 校稿。未经许可,禁止转载!
英文出处:www.polymer-project.org。欢迎加入翻译组。

你是如何使用Polymer构建一个单页应用的?这个问题我们在Polymer团队里已经问过很多遍了。我们的答案(一如既往地)是“使用组件(component)!”。然而,使用新技术去解决现有的问题往往不会马上得到显著的效果。如何把一堆模块化组件组合到一个大型的实用的应用中去?

在本教程,我将会给你展示如何去构建一个功能完整的单页应用:

图片 1

  • 完全使用Polymer的核心元素构建
  • 使用响应式设计
  • 使用数据绑定特性过渡视图
  • 使用URL路由和深层链接特性
  • 可访问键盘
  • 按需动态载入内容(可选)

 打开演示

关于 bind 你可能需要了解的知识点以及使用场景

2016/08/18 · JavaScript · bind

本文作者: 伯乐在线 - 韩子迟 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

不看不知道,一看吓一跳,已经整整一个月没有更新 underscore 源码解读系列文章了。前面我们已经完成了 Object ,Array,Collection 上的扩展方法的源码剖析,本文开始来解读 Function 上的扩展方法。

完整的 underscore 源码解读系列文章请移步 ,觉得还阔以的话,给个 star 鼓励下楼主呗 ^_^

H5 Crash 研究

2016/05/31 · HTML5 · Crash

原文出处: 小胡子哥(@Barret李靖)   

我们知道,支撑页面在 webview 上良好运转的前提是具备一个高效并且稳定的 webview 容器,而容器的高效稳定不仅仅由容器提供方来保障,也需要容器使用者遵守一些基本准则,否则就有可能出现页面 Crash 的情况,这些准则是什么?什么样的上层代码会引起容器异常退出?这是本文需要阐述的内容。

应用架构

设计布局是开始一个项目的首要任务之一。作为核心元素集合的一部分,Polymer通过几个布局元素 来支撑应用程序的构架(<core-header-panel>, <core-drawer-panel>, <core-toolbar>)。这些组件本身就很好用,但是为了更快地开始项目,我们打算着重于<core-scaffold>。有了它你可以通过组装几个基本的元素就能做出一个响应式的移动端布局。

<core-scaffold>的子元素可以是指定特定的元素或使用特定的标签(或两者一起使用)。举个例子,使用<nav>元素创建应用抽屉菜单。你可以在任意的元素里使用navigation属性(e.g <core-header-panel navigation>)。工具栏通过工具属性标识。它的所有其他子元素都定义在主要内容区域里。

bind 简介

Ok,今天要讲的正是 bind。关于 bind,可以先移步楼主以前写的文章 ECMAScript 5(ES5) 中 bind 方法简介备忘,有个基本的概念。

bind() 方法会创建一个新函数,当这个新函数被调用时,它的 this 值是传递给 bind() 的第一个参数, 它的参数是 bind() 的其他参数和其原本的参数。

语法是这样样子的:

fun.bind(thisArg[, arg1[, arg2[, ...]]])

1
fun.bind(thisArg[, arg1[, arg2[, ...]]])
  • thisArg 当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用 new 操作符调用绑定函数时,该参数无效。
  • arg1, arg2, … (可选)当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。

H5 Crash 问题概况

下图是 H5 Crash 的大致流程图:

图片 2

由于前端没办法捕捉到页面 Crash 的状态和堆栈,但是 H5 页面上发生的错误会传递到 Java 和更底层的 Native 直到容器异常退出,在退出的那一刻,容器会将堆栈写入到日志中,当下次打开容器时(也可能是定时上报)就会上报这些堆栈信息。

例子

XHTML

<body unresolved fullbleed> <core-scaffold id="scaffold"> <nav>Left drawer</nav> <core-toolbar tool>Application</core-toolbar> <div>Main content</div> </core-scaffold> </body>

1
2
3
4
5
6
7
<body unresolved fullbleed>
  <core-scaffold id="scaffold">
    <nav>Left drawer</nav>
    <core-toolbar tool>Application</core-toolbar>
    <div>Main content</div>
  </core-scaffold>
</body>

让我们一起来深入这些内容的每一部分

参数

bind 的第一个参数会作为原函数运行时的 this 指向,不多说;而第二个开始的参数是可选的,当绑定函数被调用时,这些参数加上绑定函数本身的参数会按照顺序作为原函数运行时的参数。怎么理解?

function fn(a, b, c) { return a b c; } var _fn = fn.bind(null, 10); var ans = _fn(20, 30); // 60

1
2
3
4
5
6
function fn(a, b, c) {
  return a b c;
}
 
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30); // 60

fn 函数需要三个参数,_fn 函数将 10 作为默认的第一个参数,所以只需要传入两个参数即可,如果你不小心传入了三个参数,放心,也只会取前两个。

function fn(a, b, c) { return a b c; } var _fn = fn.bind(null, 10); var ans = _fn(20, 30, 40); // 60

1
2
3
4
5
6
function fn(a, b, c) {
  return a b c;
}
 
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30, 40); // 60

这有啥用呢?如果某些函数,前几个参数已经 “内定” 了,我们便可以用 bind 返回一个新的函数。也就是说,bind() 能使一个函数拥有预设的初始参数。这些参数(如果有的话)作为 bind() 的第二个参数跟在 this 后面,之后它们会被插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们的后面。

function list() { return Array.prototype.slice.call(arguments); } var list1 = list(1, 2, 3); // [1, 2, 3] // Create a function with a preset leading argument var leadingThirtysevenList = list.bind(undefined, 37); var list2 = leadingThirtysevenList(); // [37] var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

1
2
3
4
5
6
7
8
9
10
11
function list() {
  return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3); // [1, 2, 3]
 
// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);
 
var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

H5 Crash 原因初探

测试代码 仓库地址:

git clone ; cd demo;

1
2
git clone https://github.com/barretlee/h5crash.git;
cd demo;

注意: 代码需要在 Webview 容器中测试,PC 浏览器下不会出现异常。

H5 Crash 的原因不太明显,但是从经验上判断和摸索,大致归类为以下三种:

1. 内存问题

  • 测试方法:使用闭包,不断增加内存量,看看增加到哪个区间大小, webview 容器会出现异常
  • 测试地址:(微信、微博或者其他客户端打开该页面的用户,可以点进去测试下,选择 100M 内存,不出意外,你的客户端会闪退。)

XHTML

<script> var Closure = function() { var _cache = []; var cache = 0; var add = function(size) { cache = size; size = size * 1024 * 1024; _cache.push(new Array(size).join('x')); refresh(); }; var refresh = function() { r.innerHTML = '内存消耗: ' cache 'M'; }; return { cache: cache 'M', add: add, refresh: refresh } }; var closure = Closure(); </script> <button onclick="closure.add(1)">增加 1M 内存消耗</button> <button onclick="closure.add(10)">增加 10M 内存消耗</button> <button onclick="closure.add(20)">增加 20M 内存消耗</button> <button onclick="closure.add(50)">增加 50M 内存消耗</button> <button onclick="closure.add(100)">增加 100M 内存消耗</button> <div id="r">内存消耗:0 M</div>

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
<script>
var Closure = function() {
  var _cache = [];
  var cache = 0;
  var add = function(size) {
    cache = size;
    size = size * 1024 * 1024;
    _cache.push(new Array(size).join('x'));
    refresh();
  };
  var refresh = function() {
    r.innerHTML = '内存消耗: ' cache 'M';
  };
  return {
    cache: cache 'M',
    add: add,
    refresh: refresh
  }
};
var closure = Closure();
</script>
 
<button onclick="closure.add(1)">增加 1M 内存消耗</button>
<button onclick="closure.add(10)">增加 10M 内存消耗</button>
<button onclick="closure.add(20)">增加 20M 内存消耗</button>
<button onclick="closure.add(50)">增加 50M 内存消耗</button>
<button onclick="closure.add(100)">增加 100M 内存消耗</button>
 
<div id="r">内存消耗:0 M</div>

存在的干扰:这种测试存在比较多的干扰,比如设备类型、系统类型(iOS/Android)、和设备内存运行状态等。

2. Layers 数问题

Layers 数的获取比较麻烦,Chrome Driver 没有提供该数据的接口,目前也没有比较好的办法拿到这个数据。

  • 测试方法:通过不同的方式创建层,观察页面的 Crash 情况
  • 测试地址:

XHTML

<style>.transform { transform: translateZ(0); } .animation { width:100px; height:100px; background:red; position:relative; animation:move 5s infinite; } @keyframes move { from {left:0px;} to {left:200px;} } </style> <script> var Layer = function() { function getType() { return document.querySelector('input:checked').value; }; return { createOne: function(index) { var div = document.createElement('div'); div.appendChild(document.createTextNode(index)); switch(getType()) { case 'opacity': div.style.cssText = "opacity:" (index / 1000); break; case 'transform': div.className = 'transform'; break; case 'animation': div.className = 'animation'; break; case 'zindex': div.style.cssText = "position:relative; z-index:" index; break; } document.body.appendChild(div); }, create: function(num) { [].slice.call(document.querySelectorAll('div')).forEach(function(item) { item.parentNode && item.parentNode.removeChild(item); }); while(num--) { this.createOne(num); } } } }; var layer = Layer(); </script> <strong>层类型: </strong> <ul> <li><label><input type="radio" checked name="type" value="opacity"> <span>通过 opacity 创建层</span></label></li> <li><label><input type="radio" name="type" value="transform"> <span>通过 transforms 创建层</span></label></li> <li><label><input type="radio" name="type" value="animation"> <span>通过 animation 创建层</span></label></li> <li><label><input type="radio" name="type" value="zindex"> <span>通过绝对定位分层</span></label></li> </ul> <button onclick="layer.create(1)">创建 1 个层</button> <button onclick="layer.create(10)">创建 10 个层</button> <button onclick="layer.create(20)">创建 20 个层</button> <button onclick="layer.create(50)">创建 50 个层</button> <button onclick="layer.create(100)">创建 100 个层</button> <button onclick="layer.create(200)">创建 200 个层</button> <button onclick="layer.create(500)">创建 500 个层</button> <button onclick="layer.create(1000)">创建 1000 个层</button> <button onclick="layer.create(2000)">创建 2000 个层</button> <button onclick="layer.create(5000)">创建 5000 个层</button> <button onclick="layer.create(10000)">创建 10000 个层</button>

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<style>.transform {
  transform: translateZ(0);
}
.animation {
  width:100px;
  height:100px;
  background:red;
  position:relative;
  animation:move 5s infinite;
}
 
@keyframes move {
  from {left:0px;}
  to {left:200px;}
}
</style>
<script>
var Layer = function() {
  function getType() {
    return document.querySelector('input:checked').value;
  };
  return {
    createOne: function(index) {
      var div = document.createElement('div');
      div.appendChild(document.createTextNode(index));
      switch(getType()) {
        case 'opacity':
          div.style.cssText = "opacity:" (index / 1000);
          break;
        case  'transform':
          div.className = 'transform';
          break;
        case  'animation':
          div.className = 'animation';
          break;
        case  'zindex':
          div.style.cssText = "position:relative; z-index:" index;
          break;
      }
      document.body.appendChild(div);
    },
    create: function(num) {
      [].slice.call(document.querySelectorAll('div')).forEach(function(item) {
        item.parentNode && item.parentNode.removeChild(item);
      });
      while(num--) {
        this.createOne(num);
      }
    }
  }
};
var layer = Layer();
</script>
 
<strong>层类型: </strong>
<ul>
  <li><label><input type="radio" checked name="type" value="opacity"> <span>通过 opacity 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="transform"> <span>通过 transforms 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="animation"> <span>通过 animation 创建层</span></label></li>
  <li><label><input type="radio" name="type" value="zindex"> <span>通过绝对定位分层</span></label></li>
</ul>
 
<button onclick="layer.create(1)">创建 1 个层</button>
<button onclick="layer.create(10)">创建 10 个层</button>
<button onclick="layer.create(20)">创建 20 个层</button>
<button onclick="layer.create(50)">创建 50 个层</button>
<button onclick="layer.create(100)">创建 100 个层</button>
<button onclick="layer.create(200)">创建 200 个层</button>
<button onclick="layer.create(500)">创建 500 个层</button>
<button onclick="layer.create(1000)">创建 1000 个层</button>
<button onclick="layer.create(2000)">创建 2000 个层</button>
<button onclick="layer.create(5000)">创建 5000 个层</button>
<button onclick="layer.create(10000)">创建 10000 个层</button>
  • 实际上,创建多个层,也是对内存的巨大消耗,页面 Crash 可能还是因为内存消耗过大

3. 并发过多问题

  • 测试方法:尝试并发发出多种不同的请求(Fetch请求、XHR 请求、Script/CSS 资源请求),观察页面 Crash 情况
  • 测试地址:

XHTML

<script> var Request = function() { function getType() { return document.querySelector('input:checked').value; }; function getResource() { var type = getType(); var resource = { fetch: '/', xhr: '/', script: '//g.alicdn.com/sd/data_sufei/1.5.1/aplus/index.js', css: '//g.alicdn.com/kg/global-util/1.0.3/index-min.css' }; return resource[type]; }; return { emitOne: function() { var url = getResource() "?_t=" (new Date * 1 Math.random()); switch(getType()) { case 'fetch': return fetch('/'); case 'xhr': with(new XMLHttpRequest) { open('GET', url); send(); } return; case 'script': var s = document.createElement('script'); s.src = url; document.body.appendChild(s); return; case 'css': var s = document.createElement('link'); s.href = url; document.body.appendChild(s); } }, emit: function(num) { [].slice.call(document.querySelectorAll('script,link')).forEach(function(item) { item.parentNode && item.parentNode.removeChild(item); }); while(num--) { this.emitOne(); } } } }; var request = Request(); </script> <strong>请求类型: </strong> <ul> <li><label><input type="radio" checked name="type" value="fetch"> <span>使用 Fetch 发送请求</span></label></li> <li><label><input type="radio" name="type" value="xhr"> <span>使用 XHR 发送请求</span></label></li> <li><label><input type="radio" name="type" value="script"> <span>并发请求脚本资源</span></label></li> <li><label><input type="radio" name="type" value="css"> <span>并发请求样式资源</span></label></li> </ul> <button onclick="request.emit(1)">并发 1 个请求</button> <button onclick="request.emit(10)">并发 10 个请求</button> <button onclick="request.emit(20)">并发 20 个请求</button> <button onclick="request.emit(50)">并发 50 个请求</button> <button onclick="request.emit(100)">并发 100 个请求</button> <button onclick="request.emit(500)">并发 500 个请求</button> <button onclick="request.emit(1000)">并发 1000 个请求</button>

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<script>
var Request = function() {
  function getType() {
    return document.querySelector('input:checked').value;
  };
  function getResource() {
    var type = getType();
    var resource = {
      fetch: '/',
      xhr: '/',
      script: '//g.alicdn.com/sd/data_sufei/1.5.1/aplus/index.js',
      css: '//g.alicdn.com/kg/global-util/1.0.3/index-min.css'
    };
    return resource[type];
  };
  return {
    emitOne: function() {
      var url = getResource() "?_t=" (new Date * 1 Math.random());
      switch(getType()) {
        case 'fetch':
          return fetch('/');
        case 'xhr':
          with(new XMLHttpRequest) {
            open('GET', url);
            send();
          }
          return;
        case 'script':
          var s = document.createElement('script');
          s.src = url;
          document.body.appendChild(s);
          return;
        case 'css':
          var s = document.createElement('link');
          s.href = url;
          document.body.appendChild(s);
      }
    },
    emit: function(num) {
      [].slice.call(document.querySelectorAll('script,link')).forEach(function(item) {
        item.parentNode && item.parentNode.removeChild(item);
      });
      while(num--) {
        this.emitOne();
      }
    }
  }
};
var request = Request();
</script>
 
<strong>请求类型: </strong>
<ul>
  <li><label><input type="radio" checked name="type" value="fetch"> <span>使用 Fetch 发送请求</span></label></li>
  <li><label><input type="radio" name="type" value="xhr"> <span>使用 XHR 发送请求</span></label></li>
  <li><label><input type="radio" name="type" value="script"> <span>并发请求脚本资源</span></label></li>
  <li><label><input type="radio" name="type" value="css"> <span>并发请求样式资源</span></label></li>
</ul>
 
<button onclick="request.emit(1)">并发 1 个请求</button>
<button onclick="request.emit(10)">并发 10 个请求</button>
<button onclick="request.emit(20)">并发 20 个请求</button>
<button onclick="request.emit(50)">并发 50 个请求</button>
<button onclick="request.emit(100)">并发 100 个请求</button>
<button onclick="request.emit(500)">并发 500 个请求</button>
<button onclick="request.emit(1000)">并发 1000 个请求</button>
  • 存在的干扰:设备的种类、设备的 CPU 使用情况和网络状况等。

抽屉菜单

你放在导航元素里的标记都定义在滑走的应用抽屉菜单里。为了我们的目标 ,我坚持使用标题(<core-toolbar>)和导航链接 (<core-menu>):

XHTML

<nav> <core-toolbar><span>Single Page Polymer</span></core-toolbar> <core-menu selected="0"> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#one">Single</a> </paper-item> <paper-item noink> <core-icon icon="label-outline"></core-icon> <a href="#two">page</a> </paper-item> ... </core-menu> </nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav>
  <core-toolbar><span>Single Page Polymer</span></core-toolbar>
  <core-menu selected="0">
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#one">Single</a>
    </paper-item>
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#two">page</a>
    </paper-item>
    ...
  </core-menu>
</nav>

注意,现在<core-menu selected=”0″>被硬编码为选择第一个条目。我们以后会把它改为动态的。

new

使用 bind 返回的结果还是个 function,是个 function 就可以被 new 运算符调用,那么结果呢?规范中说的很清楚了,当使用 new 操作符调用绑定函数时,bind 的第一个参数无效。

function Person(name, age) { this.name = name; this.age = age; } var _Person = Person.bind({}); var p = new _Person('hanzichi', 30); // Person {name: "hanzichi", age: 30}

1
2
3
4
5
6
7
function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
var _Person = Person.bind({});
var p = new _Person('hanzichi', 30); // Person {name: "hanzichi", age: 30}

一般我们不会去这么用,但是如果要写个 bind 的 polyfill(),还是需要考虑用 new 调用的情况。

我们也可以设置默认值(参考上一小节),原先提供的那些参数仍然会被前置到构造函数调用的前面。

function Person(name, age) { this.name = name; this.age = age; } var _Person = Person.bind(null, 'hanzichi'); var p = new _Person(30); // Person {name: "hanzichi", age: 30}

1
2
3
4
5
6
7
function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
var _Person = Person.bind(null, 'hanzichi');
var p = new _Person(30); // Person {name: "hanzichi", age: 30}

H5 Crash 测试结果

测试结果:

  • 通过 opacity、animation、positon 等方式创建层,即便是 1w 个,页面也没有明显变化;但是使用 transform 创建 2k~5k 个层,页面会卡顿几秒后立即闪退;
  • 内存是条红线,测试发现,一次性消耗 20M 的内存,会导致客户端立即闪退;
  • 并发请求也是存在响应问题的,Fetch API 和 CSS Resource 并发 1k 请求没有出现问题,但是 XHR 和 Script Resource 请求,问题特别明显,虽然没有导致页面闪退,但是页面已经进入了假死状态。

以上临界值还可以继续精确。

工具栏

工具栏横跨了页面顶部并包含了功能按钮图标。满足这种功能的完美元素是<core-toolbar>:

XHTML

<!-- flex makes the bar span across the top of the main content area --> <core-toolbar tool flex> <!-- flex spaces this element and jusifies the icons to the right-side --> <div flex>Application</div> <core-icon-button icon="refresh"></core-icon-button> <core-icon-button icon="add"></core-icon-button> </core-toolbar>

1
2
3
4
5
6
7
<!-- flex makes the bar span across the top of the main content area -->
<core-toolbar tool flex>
  <!-- flex spaces this element and jusifies the icons to the right-side -->
  <div flex>Application</div>
  <core-icon-button icon="refresh"></core-icon-button>
  <core-icon-button icon="add"></core-icon-button>
</core-toolbar>

配合 setTimeout

什么时候容易丢失 this 指向?恩,setTimeout 是一个场景,很容易把 this 指向 window,当然,setInterval 也是一样。当使用对象的方法时,需要 this 引用对象,你可能需要显式地把 this 绑定到回调函数以便继续使用对象。

var canvas = { render: function() { this.update(); this.draw(); }, update: function() { // ... }, draw: function() { // ... } }; window.setInterval(canvas.render, 1000 / 60);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var canvas = {
  render: function() {
    this.update();
    this.draw();
  },
 
  update: function() {
    // ...
  },
 
  draw: function() {
    // ...
  }
};
 
window.setInterval(canvas.render, 1000 / 60);

用 canvas 写特效或者做游戏时经常会碰到类似的问题。上面的代码是有问题的,render 方法中的 this 其实被指向了 window!我们可以用 bind,显式地把 this 绑定到回调函数以便继续使用该对象。

window.setInterval(canvas.render.bind(canvas), 1000);

1
window.setInterval(canvas.render.bind(canvas), 1000);

类似的情况还有 dom 的事件监听,一不小心可能 this 就被指向了 dom 元素。可以参考下以前做 bigrender 时写的这部分代码 。

小结

本文主要是对 H5 Crash 做了一个预研,测试可能存在诸多误差,测试方法也需要改进,不过沿着这些的思路考究会比较容易找到结论。

后续会给出比较有意义的边界数据以及探测工具。

 

1 赞 3 收藏 评论

图片 3

主要内容

最后一部分是为你的内容而留的。它可以是任何的元素。<div>是一个很好的选择:

XHTML

<div layout horizontal center-center fit> <!-- fill with pages --> </div>

1
2
3
<div layout horizontal center-center fit>
  <!-- fill with pages -->
</div>

fit属性表示主要区域的内容会布满父元素的宽带和高度,layout horizontal center-center属性表示使用弹性框(flexbox)来使内容居中和垂直居中。

tip

bind 还能做一些有意思的事情。

通常来说,将一个类数组转为数组,我们会用 slice(ie9- 不支持)。参考

var slice = Array.prototype.slice; // slice.apply(arguments); // slice(arguments, 1);

1
2
3
4
var slice = Array.prototype.slice;
 
// slice.apply(arguments);
// slice(arguments, 1);

bind 能让调用变的更加简单。

// same as "slice" in the previous example var unboundSlice = Array.prototype.slice; var slice = Function.prototype.call.bind(unboundSlice); // ... slice(arguments); // slice(arguments, 1);

1
2
3
4
5
6
7
8
// same as "slice" in the previous example
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);
 
// ...
 
slice(arguments);
// slice(arguments, 1);

再举个类似的例子,比如说我们要添加事件到多个节点,for 循环当然没有任何问题,我们还可以 “剽窃” forEach 方法:

Array.prototype.forEach.call(document.querySelectorAll('input[type="button"]'), function(el){ el.addEventListener('click', fn); });

1
2
3
Array.prototype.forEach.call(document.querySelectorAll('input[type="button"]'), function(el){
  el.addEventListener('click', fn);
});

更进一步,我们可以用 bind 将函数封装的更好:

var unboundForEach = Array.prototype.forEach , forEach = Function.prototype.call.bind(unboundForEach); forEach(document.querySelectorAll('input[type="button"]'), function (el) { el.addEventListener('click', fn); });

1
2
3
4
5
6
var unboundForEach = Array.prototype.forEach
  , forEach = Function.prototype.call.bind(unboundForEach);
 
forEach(document.querySelectorAll('input[type="button"]'), function (el) {
  el.addEventListener('click', fn);
});

同样类似的,我们可以将 x.y(z) 变成 y(x,z) 的形式:

var obj = { num: 10, getCount: function() { return this.num; } }; var unboundBind = Function.prototype.bind , bind = Function.prototype.call.bind(unboundBind); var getCount = bind(obj.getCount, obj); console.log(getCount()); // 10

1
2
3
4
5
6
7
8
9
10
11
12
var obj = {
  num: 10,
  getCount: function() {
    return this.num;
  }
};
 
var unboundBind = Function.prototype.bind
  , bind = Function.prototype.call.bind(unboundBind);
 
var getCount = bind(obj.getCount, obj);
console.log(getCount());  // 10

再举个栗子。每隔一秒在控制台打印 1-5,看起来是道考察闭包的经典题目。

for(var i = 1; i <= 5; i ) { !function(i) { setTimeout(function() { console.log(i); }, i * 1000); }(i); }

1
2
3
4
5
6
7
for(var i = 1; i <= 5; i ) {
  !function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }(i);
}

ES6 下能用 let

for(let i = 1; i <= 5; i ) { setTimeout(function() { console.log(i); }, i * 1000); }

1
2
3
4
5
for(let i = 1; i <= 5; i ) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

也可以用 bind,瞬间逼格提升:

for(var i = 1; i <= 5; i ) { setTimeout(console.log.bind(console, i), i * 1000); }

1
2
3
for(var i = 1; i <= 5; i ) {
  setTimeout(console.log.bind(console, i), i * 1000);
}

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:Components构建单页面应用,你可能需要了解的知识

关键词: 千赢国际官网