Dojo 学习笔记 之 Dojo hitch&partial

前端之家收集整理的这篇文章主要介绍了Dojo 学习笔记 之 Dojo hitch&partial前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

原文: http://dojotoolkit.org/documentation/tutorials/1.10/hitch/index.html

版本: Dojo 1.10

为了更好地使用JavaScript原生函数,dojo/_base/lang模块提供了很多非常有用的方法。这里,我们来学习JavaScript函数(Function)对象基础,及如何使用lang.hitch来绑定函数的上下文。在此基础上,学习如何使用lang.partial来绑定函数的特定参数,及如何使用lang.hitch实现这两个操作。

在开始学习之前,你需要对Dojo Toolkit基础知识有一定的了解,如dojo/query,Dojo's Array helpers等。

在理解如何及何时使用lang.hitch和lang.partial之前,我们需要知道它们解决了什么问题。JavaScript中最容易被误解的一个概念是:this是什么?通常,在面向对象编程中,当一个对象的方法调用时,this就指向这个对象。然而在JavaScript中并不是这样,为了更好的理解它,我们要先理解执行上下文(execution context)概念。

JavaScript中的执行上下文

在JavaScript中,无论何时调用一个函数,就会创建它的执行上下文。这个上下文的创建步骤是:

1)创建arguments对象;

2)创建函数的scrope对象;

3)初始化函数的变量;

4)创建this属性

这里的this属性是开发者最容易迷惑的地方,它就是调用函数的上下文或scope的对象一个引用。理解这一点是理解JavaScript如何工作的关键,因为JavaScript中,一个函数执行的真正上下文是在函数调用时才能决定的。

下面是一个例子: 假如我们有一个对象,对象中的一个方法将被用作文档中的某些节点的事件处理函数

// Require the query resource,and wait until the DOM is ready
require(['dojo/query','dojo/domReady!'],function(query) {
    var myObject = {
        foo: "bar",myHandler: function(e) {
            // This is very contrived but will do.
            alert("The value of 'foo' is " + this.foo);
        }
    };

    // later on in the script:
    query('.myNodes').forEach(function(node) {
        node.onclick = myObject.myHandler;
    });
});
当点击了具有‘myNodes’类的任何一个DOM节点时,你可能会认为上面的函数定义会弹出一个JavaScript警示框提示“The value of 'foo' is bar”,然而,由于我们设定myObject.myHandler为节点点击的事件处理器,我们将会得到“The value of 'foo' is undefined”提示信息。看看原因:

node.onclick = myObject.myHandler; 这个表达式myObject.myHandler调用了myHandler函数,事实上,myHandler函数是在myObject对象中定义这一事实已经被忽视了,现在node.onclick是myHandler函数的引用,注意这里只是myHandler这个函数,而并不是myObject的上下文。DOM事件处理器运行的上下文是触发这个事件的节点,也就是说,不考虑它是在哪及如何定义的,这个函数如同是该节点的一个方法一样被执行,结果就是在执行时myHandler函数内部的this值是当前触发事件的节点。

注意:如果觉得这很迷惑,牢记一点:根本原因是因为如同其它非基本类型,Function对象是引用传递,而不是值传递。

用.apply和.call方法改变执行上下文

由于JavaScript函数执行上下文是在函数调用时决定的,它提供了一种在执行时通过Function.apply和Function.call来改变上下文(即this)的方法。很简单,两个方法均允许传递一个对象作为执行函数的上下文。例如,如果你想保证上面例子的handler是在myObject上下文中执行的,可以使用Function.call方法来包装我们的引用,如下:

query('.myNodes').forEach(function(node) {
    node.onclick = function(e) {
        myObject.myHandler.call(myObject,e);
    }
});
在大多数情况下,会使用Function.apply方法,并从外部函数传递arguments对象。然而,当一个函数的参数已知时,推荐使用call方法,因为当JavaScript解释器不需要直接访问arguments对象时,会获得稍微高的性能

用lang.hitch绑定执行上下文

Dojo Toolkit提供了一种简便的方法lang.hitch来绑定函数的上下文,简单来说,lang,hitch创建了一个Function对象,绑定给了一个特定的上下文,这样就可以实现安全地调用函数,而不需要担心函数上下文的变化。下面是一个例子:

// `foo` is intentionally global
var foo = "bar";
require(['dojo/_base/lang'],function(lang) {
    var myFunction = function() {
        return this.foo;
    };
    var myObject = {foo: 'baz'};
  
    // later on in your application
    var boundFunction = lang.hitch(myObject,myFunction);

    // test
    myFunction();  // "bar"
    boundFunction();  // "baz"
    myFunction();  // "bar"
});
lang.hitch确保了一个特定函数,绑定了一个特定执行上下文,调用时不再需要考虑执行时上下文的变化。

arguments对象

arguments对象是一个类数组对象,保存了传递给当前函数的参数列表。另外,在创建上下文时,该对象的任何命名变量已被创建,因此,这些值可以在函数内部使用,如同当前函数自身的变量一样。记住,arguments对象并不是一个真正的Array对象,尽管它与Array对象有许多相似的地方,但它是只读的,也就意味着Array对象的其他一些方法不能对arguments对象使用(如Array.prototype.slice等)。

当定义了一个函数时,函数的签名就固定下来了,不能通过除非重新定义该函数的其他任何方法增加删除命名参数。这样也就带来了一个问题,尤其是当你需要使用一个函数签名,而不去真正复制或重写原始函数,Dojo Toolkit提供了一个简单的方法来实现这个功能——lang.partial方法

用lang.partial改变函数的参数列表

经常会遇到的一个问题是,一个函数定义了多个参数,但是有时我们只需要部分参数。例如,假如我们有一个函数有4个参数(取自dojo/data):

var putValue = function(store,item,attr,value) {
    return store.setValue(item,value);
}
但是,可能在项目的其它地方有一个类似的定义,只有3个参数:
someObject.setValueHandler = function(item,value) {
    // placeholder function to be overriden
};
用lang.partial,你可以创建一个新的预先设置好参数值的函数,在上面的例子中,可以通过预先设定好store的值,然后将someObject.setValueHandler设置为部分函数的引用,如下:
// assuming we have a dojo/data store called "myStore"

// our function
var putValue = function(store,value);
}

// ...
// their function signature
someObject.setValueHandler = function(item,value) {
    // placeholder function to be overriden
};

// ...
// our solution using lang.partial
someObject.setValueHandler = lang.partial(putValue,myStore);

// ...
// somewhere in the application when setValueHandler is invoked,// our putValue function will already have the "store" arg
// set to a reference to "myStore"
someObject.setValueHandler(someItem,"foo","bar");
对上面的解释:

1. 首先定义了一个具有4个参数的函数

2. 发现setValueHandler函数只需要3个参数,并且我们不可以修改

3. 我们在putValue基础上创建了一个新的函数,并且putValue的第一个参数store的值被初始设定为myStore;

4. 新的部分函数调用时只传递了3个参数,但是此时部分函数的第一个参数的值已经被设定为myStore.

需要注意的是,不像lang.hitch方法,lang.partial并不会预先设定返回部分函数的执行上下文,换句话说,根据你使用新部分函数的不同,this的值可能有变化。

在使用lang.partial时,将函数的一个参数代表执行上下文,你可以通过设定一个对象的引用作为对象的执行上下文,从而可以同时获得二者的优势。

结合hitch和partial的优势

如果你想同时具有hitch和partial的优势,lang.hitch可以同时具有二者,你可以在上下文和方法名后添加任意多个值,lang.hitch会用预定的上下文和预先设定的参数值来创建新的函数。如下:

someObject.setValueHandler = lang.hitch(someObject,putValue,myStore);

// ...
// later on in the application,the setHandler is invoked
// again -- this time in the context of someObject
someObject.setValueHandler(someItem,'foo','bar');
hitch和partial是了解函数式编程的基础,Dojo Toolkit中通过dojox/lang/functional命名空间提供了很多函数式编程技巧,推荐看一看。

总结

这里我们回顾了JavaScript Function对象——包括函数调用过程。然后引入了lang.hitch,允许你去绑定一个函数的执行上下文,在些基础上,我了学习了如何使用lang.partial预设一个函数的参数值,最后介绍了如何使用lang.hitch同时绑定上下文和参数值。

由于lang.hitch允许预先绑定函数执行上下文,因此它在事件驱动的编程技术(或者基于回调的编程)中非常有用。

原文链接:https://www.f2er.com/dojo/290982.html

猜你在找的Dojo相关文章