当前位置:千赢国际官网 > 千赢网页手机版登入 > 深入之bind的模拟实现,制作动画

深入之bind的模拟实现,制作动画

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

JavaScript 深入之bind的模拟实现

2017/05/26 · JavaScript · bind

原文出处: 冴羽   

JavaScript 深入之类数组对象与 arguments

2017/05/27 · JavaScript · arguments

原文出处: 冴羽   

使用 Snap.svg 制作动画

2017/02/22 · HTML5 · SVG

原文出处: 凹凸实验室   

图片 1

bind

一句话介绍 bind:

bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

由此我们可以首先得出 bind 函数的两个特点:

  1. 返回一个函数
  2. 可以传入参数

类数组对象

所谓的类数组对象:

拥有一个 length 属性和若干索引属性的对象

举个例子:

var array = ['name', 'age', 'sex']; var arrayLike = { 0: 'name', 1: 'age', 2: 'sex', length: 3 }

1
2
3
4
5
6
7
8
var array = ['name', 'age', 'sex'];
 
var arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}

即便如此,为什么叫做类数组对象呢?

那让我们从读写、获取长度、遍历三个方面看看这两个对象。

一、Snap.svg是什么

从主要功能上说,Snap.svg.js 是一个操纵 SVG 节点/制作 SVG 动画的框架,简单点理解可以看下面文字:

Snap.svg 是一个可以使你操纵 SVG 资源和 jQuery 操作 DOM 一样简单的类库

——译自官网

拿 Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ ) 来做对比最合适不过,很可能作者也是参考了 JQ 的 API 设计,那么它们的相似程度有多高呢?请看下面的对比表:

/ context(上下文) 选择器 事件绑定 节点操作 属性操作 链式写法
Snap svg Snap.select(‘circle’) el.click(…)/el.touchend(…) after()/remove()/append() attr() svg.paper.circle(50,50,40).attr({fill:”#f00”});
JQ document jQuery(‘div’) el.click(…) after()/remove()/append() attr() elem.addClass(‘hide’).remove();

在 JQ 中,可操作的最外层 DOM 边界是 document 。而在 Snap 的概念里,可操作的最外层的节点是 svg ,svg 节点的选择、事件绑定都需要在这个上下文里完成。

在上面的对比图可以看出很多 JQ 的影子,无论是选择器、事件绑定、节点操作等等,都是非常的类似 JQ ,有 JQ 基础的同学基本可以半天掌握 Snap 的全部 API。

返回函数的模拟实现

从第一个特点开始,我们举个例子:

var foo = { value: 1 }; function bar() { console.log(this.value); } // 返回了一个函数 var bindFoo = bar.bind(foo); bindFoo(); // 1

1
2
3
4
5
6
7
8
9
10
11
12
var foo = {
    value: 1
};
 
function bar() {
    console.log(this.value);
}
 
// 返回了一个函数
var bindFoo = bar.bind(foo);
 
bindFoo(); // 1

关于指定 this 的指向,我们可以使用 call 或者 apply 实现,关于 call 和 apply 的模拟实现,可以查看《JavaScript深入之call和apply的模拟实现》。我们来写第一版的代码:

// 第一版 Function.prototype.bind2 = function (context) { var self = this; return function () { self.apply(context); } }

1
2
3
4
5
6
7
8
// 第一版
Function.prototype.bind2 = function (context) {
    var self = this;
    return function () {
        self.apply(context);
    }
 
}

读写

console.log(array[0]); // name console.log(arrayLike[0]); // name array[0] = 'new name'; arrayLike[0] = 'new name';

1
2
3
4
5
console.log(array[0]); // name
console.log(arrayLike[0]); // name
 
array[0] = 'new name';
arrayLike[0] = 'new name';

二、Snap 的代码结构

图片 2

笔者根据 Snap 的 API 制作了上面的图表,并且简单标注了注释方便大家理解,可以重点关注一下 Element 和 Paper 这两个类。

传参的模拟实现

接下来看第二点,可以传入参数。这个就有点让人费解了,我在 bind 的时候,是否可以传参呢?我在执行 bind 返回的函数的时候,可不可以传参呢?让我们看个例子:

var foo = { value: 1 }; function bar(name, age) { console.log(this.value); console.log(name); console.log(age); } var bindFoo = bar.bind(foo, 'daisy'); bindFoo('18'); // 1 // daisy // 18

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var foo = {
    value: 1
};
 
function bar(name, age) {
    console.log(this.value);
    console.log(name);
    console.log(age);
 
}
 
var bindFoo = bar.bind(foo, 'daisy');
bindFoo('18');
// 1
// daisy
// 18

函数需要传 name 和 age 两个参数,竟然还可以在 bind 的时候,只传一个 name,在执行返回的函数的时候,再传另一个参数 age!

这可咋办?不急,我们用 arguments 进行处理:

// 第二版 Function.prototype.bind2 = function (context) { var self = this; // 获取bind2函数从第二个参数到最后一个参数 var args = Array.prototype.slice.call(arguments, 1); return function () { // 这个时候的arguments是指bind返回的函数传入的参数 var bindArgs = Array.prototype.slice.call(arguments); self.apply(context, args.concat(bindArgs)); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 第二版
Function.prototype.bind2 = function (context) {
 
    var self = this;
    // 获取bind2函数从第二个参数到最后一个参数
    var args = Array.prototype.slice.call(arguments, 1);
 
    return function () {
        // 这个时候的arguments是指bind返回的函数传入的参数
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(context, args.concat(bindArgs));
    }
 
}

长度

console.log(array.length); // 3 console.log(arrayLike.length); // 3

1
2
console.log(array.length); // 3
console.log(arrayLike.length); // 3

1. Element

这个部分是节点操作相关的方法集,也是该类库最基础的部分。

JavaScript

// 选择节点 var svg = Snap('#svg'); svg.select('circle'); // 选择 svg.select('.rect_01'); // 选择

1
2
3
4
// 选择节点
var svg = Snap('#svg');
svg.select('circle'); // 选择
svg.select('.rect_01'); // 选择

JavaScript

// 事件绑定 var svg = Snap('#svg'); svg.select('circle').click(function() { // do something });

1
2
3
4
5
// 事件绑定
var svg = Snap('#svg');
svg.select('circle').click(function() {
// do something
});

更多方法请参考文后 API 资料。

构造函数效果的模拟实现

完成了这两点,最难的部分到啦!因为 bind 还有一个特点,就是

一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

也就是说当 bind 返回的函数作为构造函数的时候,bind 时指定的 this 值会失效,但传入的参数依然生效。举个例子:

var value = 2; var foo = { value: 1 }; function bar(name, age) { this.habit = 'shopping'; console.log(this.value); console.log(name); console.log(age); } bar.prototype.friend = 'kevin'; var bindFoo = bar.bind(foo, 'daisy'); var obj = new bindFoo('18'); // undefined // daisy // 18 console.log(obj.habit); console.log(obj.friend); // shopping // kevin

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
var value = 2;
 
var foo = {
    value: 1
};
 
function bar(name, age) {
    this.habit = 'shopping';
    console.log(this.value);
    console.log(name);
    console.log(age);
}
 
bar.prototype.friend = 'kevin';
 
var bindFoo = bar.bind(foo, 'daisy');
 
var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin

注意:尽管在全局和 foo 中都声明了 value 值,最后依然返回了 undefind,说明绑定的 this 失效了,如果大家了解 new 的模拟实现,就会知道这个时候的 this 已经指向了 obj。

(哈哈,我这是为我的下一篇文章《JavaScript深入系列之new的模拟实现》打广告)。

所以我们可以通过修改返回的函数的原型来实现,让我们写一下:

// 第三版 Function.prototype.bind2 = function (context) { var self = this; var args = Array.prototype.slice.call(arguments, 1); var fbound = function () { var bindArgs = Array.prototype.slice.call(arguments); // 当作为构造函数时,this 指向实例,self 指向绑定函数,因为下面一句 `fbound.prototype = this.prototype;`,已经修改了 fbound.prototype 为 绑定函数的 prototype,此时结果为 true,当结果为 true 的时候,this 指向实例。 // 当作为普通函数时,this 指向 window,self 指向绑定函数,此时结果为 false,当结果为 false 的时候,this 指向绑定的 context。 self.apply(this instanceof self ? this : context, args.concat(bindArgs)); } // 修改返回函数的 prototype 为绑定函数的 prototype,实例就可以继承函数的原型中的值 fbound.prototype = this.prototype; return fbound; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 第三版
Function.prototype.bind2 = function (context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
 
    var fbound = function () {
 
        var bindArgs = Array.prototype.slice.call(arguments);
        // 当作为构造函数时,this 指向实例,self 指向绑定函数,因为下面一句 `fbound.prototype = this.prototype;`,已经修改了 fbound.prototype 为 绑定函数的 prototype,此时结果为 true,当结果为 true 的时候,this 指向实例。
        // 当作为普通函数时,this 指向 window,self 指向绑定函数,此时结果为 false,当结果为 false 的时候,this 指向绑定的 context。
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype,实例就可以继承函数的原型中的值
    fbound.prototype = this.prototype;
    return fbound;
}

如果对原型链稍有困惑,可以查看《JavaScript深入之从原型到原型链》。

遍历

for(var i = 0, len = array.length; i len; i ) { …… } for(var i = 0, len = arrayLike.length; i len; i ) { …… }

1
2
3
4
5
6
for(var i = 0, len = array.length; i  len; i ) {
   ……
}
for(var i = 0, len = arrayLike.length; i  len; i ) {
    ……
}

是不是很像?

那类数组对象可以使用数组的方法吗?比如:

arrayLike.push('4');

1
arrayLike.push('4');

然而上述代码会报错: arrayLike.push is not a function

所以终归还是类数组呐……

2. Paper

这部分是画图相关的方法集,这是几乎每个动画框架都有的部分,类似于createjs的Graphics。

SVG 有6种基本图形:矩形、圆形 、椭圆、线条、折线、多边形。还有另外一种:路径(path),path 是最复杂的一种绘图方式,它可以绘制复杂的图形——当然6种基本图形也不在话下。而关于基本图像与 path 之间的转换,可以参考本站的另外一篇文章:聊聊 SVG 基本形状转换那些事。

图片 3

Paper 方法集主要可以绘制6种基本图形(节点),以及文本(节点)、图片(节点)、渐变等。

JavaScript

// 画一个圆 var svg = Snap('#svg'); svg.paper.circle({ cx: 100, cy: 100, r: 50, fill: '#f00' });   // 创建一张图片 svg.paper.image('url.jpg', 0, 400, 300, 300);

1
2
3
4
5
6
7
8
9
10
11
// 画一个圆
var svg = Snap('#svg');
svg.paper.circle({
cx: 100,
cy: 100,
r: 50,
fill: '#f00'
});
 
// 创建一张图片
svg.paper.image('url.jpg', 0, 400, 300, 300);

构造函数效果的优化实现

但是在这个写法中,我们直接将 fbound.prototype = this.prototype,我们直接修改 fbound.prototype 的时候,也会直接修改函数的 prototype。这个时候,我们可以通过一个空函数来进行中转:

// 第四版 Function.prototype.bind2 = function (context) { var self = this; var args = Array.prototype.slice.call(arguments, 1); var fNOP = function () {}; var fbound = function () { var bindArgs = Array.prototype.slice.call(arguments); self.apply(this instanceof self ? this : context, args.concat(bindArgs)); } fNOP.prototype = this.prototype; fbound.prototype = new fNOP(); return fbound; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 第四版
Function.prototype.bind2 = function (context) {
 
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);
 
    var fNOP = function () {};
 
    var fbound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        self.apply(this instanceof self ? this : context, args.concat(bindArgs));
    }
    fNOP.prototype = this.prototype;
    fbound.prototype = new fNOP();
    return fbound;
 
}

到此为止,大的问题都已经解决,给自己一个赞!o( ̄▽ ̄)d

调用数组方法

如果类数组就是任性的想用数组的方法怎么办呢?

既然无法直接调用,我们可以用 Function.call 间接调用:

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 } Array.prototype.join.call(arrayLike, '&'); // name&age&sex Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"] // slice可以做到类数组转数组 Array.prototype.map.call(arrayLike, function(item){ return item.toUpperCase(); }); // ["NAME", "AGE", "SEX"]

1
2
3
4
5
6
7
8
9
10
11
var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
 
Array.prototype.join.call(arrayLike, '&'); // name&age&sex
 
Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"]
// slice可以做到类数组转数组
 
Array.prototype.map.call(arrayLike, function(item){
    return item.toUpperCase();
});
// ["NAME", "AGE", "SEX"]

3. Snap 工具方法

Snap下有不少实用工具,比如 Snap.ajax、Snap.format模板、颜色格式转换和插件方法等。

JavaScript

// 扩展Snap,为其添加插件方法 Snap.plugin(function (Snap, Element, Paper, global, Fragment) { Snap.newmethod = function () {}; Element.prototype.newmethod = function () {}; Paper.prototype.newmethod = function () {}; });

1
2
3
4
5
6
// 扩展Snap,为其添加插件方法
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
Snap.newmethod = function () {};
Element.prototype.newmethod = function () {};
Paper.prototype.newmethod = function () {};
});

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:深入之bind的模拟实现,制作动画

关键词: 千赢国际官网 千赢国际qy966