Post Jobs

10个HTML5素描及绘画设计工具,深入之bind的模拟实现

图片 11

JavaScript 深入之call和apply的模拟实现

2017/05/25 · JavaScript
· apply,
call

原文出处: 冴羽   

JavaScript 深入之bind的模拟实现

2017/05/26 · JavaScript
· bind

原文出处: 冴羽   

10个HTML5素描及绘画设计工具

2011/03/26 · HTML5 · 来源:
smashinghub    
· HTML5

  1. Mr. Doob’s Harmony

非常适合随手绘制勾勒图像轮廓的一个工具。

图片 1

  1. Sketch

这个工具的开发者是Hakim El
Hattab。你会发现用它画素描非常有趣,甚至还可以画3D草图。

图片 2

  1. Deviant Muro

这是个很强大的工具。带有多种笔刷跟滤镜,能够进行比较精细的创作。不必安装FLASH
插件就可以使用。

图片 3

  1. Sketchy
    Structures

用它可以绘制梦幻般复杂的场景。

图片 4

  1. Multi-User
    Sketchpad

支持多用户同时绘画。

图片 5

  1. Sketchpad

一款小巧好用的绘图应用,非常容易上手。

图片 6

  1. Bezier
    Sketching

可以很方便地定义路径的素描工具。

图片 7

8.Spirograph

Spirograph是一个非常有趣的HTML
5工具,通过设置不同的参数,可以自动绘制千变万化的圆圈类图形。

图片 8

  1. Bomomo

Bomomo 具有20种绘画和造型的工具。鼠标跟随效果很好玩哦。

图片 9

  1. Zwibbler

用Zwibbler可以绘制任何形状圆形跟矩形,还可以自由手绘。具备加阴影,撤消,重做,复制和粘贴功能。

图片 10

原文:smashinghub

 

赞 收藏
评论

图片 11

call

一句话介绍 call:

call() 方法在使用一个指定的 this
值和若干个指定的参数值的前提下调用某个函数或方法。

举个例子:

var foo = { value: 1 }; function bar() { console.log(this.value); }
bar.call(foo); // 1

1
2
3
4
5
6
7
8
9
var foo = {
    value: 1
};
 
function bar() {
    console.log(this.value);
}
 
bar.call(foo); // 1

注意两点:

  1. call 改变了 this 的指向,指向到 foo
  2. bar 函数执行了

bind

一句话介绍 bind:

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

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

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

模拟实现第一步

那么我们该怎么模拟实现这两个效果呢?

试想当调用 call 的时候,把 foo 对象改造成如下:

var foo = { value: 1, bar: function() { console.log(this.value) } };
foo.bar(); // 1

1
2
3
4
5
6
7
8
var foo = {
    value: 1,
    bar: function() {
        console.log(this.value)
    }
};
 
foo.bar(); // 1

这个时候 this 就指向了 foo,是不是很简单呢?

但是这样却给 foo 对象本身添加了一个属性,这可不行呐!

不过也不用担心,我们用 delete 再删除它不就好了~

所以我们模拟的步骤可以分为:

  1. 将函数设为对象的属性
  2. 执行该函数
  3. 删除该函数

以上个例子为例,就是:

// 第一步 foo.fn = bar // 第二步 foo.fn() // 第三步 delete foo.fn

1
2
3
4
5
6
// 第一步
foo.fn = bar
// 第二步
foo.fn()
// 第三步
delete foo.fn

fn 是对象的属性名,反正最后也要删除它,所以起成什么都无所谓。

根据这个思路,我们可以尝试着去写第一版的 call2 函数:

// 第一版 Function.prototype.call2 = function(context) { //
首先要获取调用call的函数,用this可以获取 context.fn = this;
context.fn(); delete context.fn; } // 测试一下 var foo = { value: 1 };
function bar() { console.log(this.value); } bar.call2(foo); // 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 第一版
Function.prototype.call2 = function(context) {
    // 首先要获取调用call的函数,用this可以获取
    context.fn = this;
    context.fn();
    delete context.fn;
}
 
// 测试一下
var foo = {
    value: 1
};
 
function bar() {
    console.log(this.value);
}
 
bar.call2(foo); // 1

正好可以打印 1 哎!是不是很开心!(~ ̄▽ ̄)~

返回函数的模拟实现

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

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);
    }
 
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图