理解transit.js中的代码

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上也可以找到函数，这里。

一开始我看到这个，$.cssHooks['transit:transform']，这句话到底在说什么？

在此之后，我们有下面的代码行，即getter和setter方法，

set: function(elem, v) {

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

Answer 1

阅读关于cssHooks at jQuery cssHooks的文章

看看源代码 (搜索hooks.get和hooks.set)

.cssHooks是一个包含getter和setters的objects的array，它将由.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(){} }

所以。简单地说：.css()将为挂起的属性执行set和get函数。

如果您想知道实际的getter和setter是如何工作的：Object.defineProperty()

​

Answer 2

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

myObject.myProperty

或者使用这种语法：

myObject['myProperty']

这也是同样的结果

所以你的台词

$.cssHooks['transit:transform'] 

只意味着我们想要将一个对象(在原始文章中{}之间的代码)存储在‘transport:transform’属性中，该属性位于$ object内的cssHooks属性中。

这是同样的事情：

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

他们使用'‘语法的原因是transit:transform包含':’char，如果您想以这种方式访问它，则不允许这样做：

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

编辑：

要回答您的第二个问题，我不需要know...the代码，您所显示的只是“transport:transform”属性的“描述”