Question

我刚刚浏览了transit.js的来源并遇到了以下问题::

  $.cssHooks['transit:transform'] = {
    // The getter returns a `Transform` object.
    get: function(elem) {
      return $(elem).data('transform') || new Transform();
    },

    // The setter accepts a `Transform` object or a string.
    set: function(elem, v) {
      var value = v;

      if (!(value instanceof Transform)) {
        value = new Transform(value);
      }

      // We've seen the 3D version of Scale() not work in Chrome when the
      // element being scaled extends outside of the viewport.  Thus, we're
      // forcing Chrome to not use the 3d transforms as well.  Not sure if
      // translate is affectede, but not risking it.  Detection code from
      // http://davidwalsh.name/detecting-google-chrome-javascript
      if (support.transform === 'WebkitTransform' && !isChrome) {
        elem.style[support.transform] = value.toString(true);
      } else {
        elem.style[support.transform] = value.toString();
      }

      $(elem).data('transform', value);
    }
  };

我理解函数的后半部分，但是它很难理解函数的初始部分，函数也可以在git上找到， HERE 。

最初我看到这个，$.cssHooks['transit:transform']这条线真的在说什么？

之后我们有以下代码行I.E. getter和setter方法，

set: function(elem, v) {

但是谁在函数内传递elem和v，我没有看到任何传递？

Answer 1

在jQuery cssHooks

了解cssHooks

查看source code（搜索hooks.get和hooks.set）

.cssHooks是array的{{1}}，其中包含 getter 和 setters ，它们将由objects执行。多数民众赞成。

.css()

$.cssHooks['transit:transform'] = {set: function(elem,value){}, get: function(elem){}} equal: $.cssHooks['transit:transform'] = {}; $.cssHooks['transit:transform'].set = function(elem, value){}; $.cssHooks['transit:transform'].get = function(elem){}; $(element).css('transit:transform',value) comes to: $.cssHooks['transit:transform'].set(element,value) $(element).css('transit:transform') comes to: $.cssHooks['transit:transform'].get(element)

$.cssHooks['transit:transform'] = {set:function(){}, get: function(){} }是一个对象创建。
{...}和get此时尚未执行。
他们创建了set

因此。简单地说：{set:function(){}, get: function(){} }将为hooked属性执行.css()和set函数。

<小时/> 如果你想知道真正的 getter和setter是如何工作的： Object.defineProperty()

Answer 2

在Javascript中，您可以使用以下语法添加/访问属性：

myObject.myProperty

或使用以下语法：

myObject['myProperty']

这是相同的结果

所以你的行

$.cssHooks['transit:transform']

只是意味着我们要在'transit：transform'属性中存储一个对象（原始帖子中{}之间的代码），该属性位于$ object内的cssHooks属性内

这是相同的事情：

$['cssHooks']['transit:transform']

他们使用['']语法的原因是transit：transform包含'：'char，如果你想以这种方式访问它是不允许的：

$.cssHooks.transit:transform //doesn't work

修改

要回答你的第二个问题，我不知道......你所展示的代码只是“transit：transform”属性的“描述”

理解来自transit.js的代码

2 个答案: