有没有简单的方法来找到jQuery代码的“JavaScript等效”？

Question

我做一些同事对jQuery的介绍，我想演示如何在JavaScript的某些任务可以使用jQuery变得更加容易。

我想出了一个小的jQuery的功能，做一些元素选择/动画，我希望向他们展示这个代码的JavaScript等价的。

我的问题是，我的JavaScript是有点生疏了，我宁愿不揣摩如何实现这个使用JavaScript。有谁知道从jQuery生成JavaScript的方法吗？如果没有，任何人都可以推荐一个很好的资源来找到等效的JavaScript和jQuery的并排比较？

我的代码：

var move = 200; 
$('#clickme').click(function() { 
    $('#main div:even').animate({ 
     left:"+="+move 
    }, 2000); 
    move = -move; 
}); 

Answer 1

This article有良好的表现，显示了你想显示你的同事是什么。

它表明了这一点：

var example = null; // object 
function doMove() { 
    example.style.left = parseInt(example.style.left)+1+'px'; 
    setTimeout(doMove,20); // call doMove in 20msec 
} 
function init() { 
    example = document.getElementById('example'); // get the "example" object 
    example.style.left = '0px'; // set its initial position to 0px 
    doMove(); // start animating 
} 
window.onload = init; 

可以变成这样：

$("#element").animate({ left: 100px; }); 

Answer 2

因为jQuery是JS实现的，并没有转化为它（如CoffeeScript的或其他），还有展现一个VS其他没有准确的方法。

您可以通过剖析了jQuery和显示结果在同样的想法 - “看所有的jQuery开发团队写了我们的代码，我们得到基本上免费使用！”或通过示出的$().attr的定义或隐藏一串特定浏览器的怪异的另一个类似的方法。

Answer 3

，如果你还不知道如何完成直JavaScript的任务最简单的方法是看源代码，看看它在做什么，并编写JavaScript，做同样的事情。

Answer 4

这里是Javascript Animation一些文档的JavaScript，你将在这里实现另一种是有关选择元素like selecting by tag name

Answer 5

嗯，我想你可以尝试

document.querySelector('#clickme') 

这是基本相似的jQuery $(' ')但这种意志以前只会返回一个元素。

没有直接的方式，如果你通过jQuery的来源，你会发现，节点选择使用正则表达式这是不容易实现的要写入每个代码解析，

也有一个调用的方法之间的直接关系：

例如这里：

.click(function) -> .addEventListener('click',function,false); 

Answer 6

我会考虑只向他们展示了一堆它是多么容易的例子在jquery中做些事情 - 动画，DOM操作等。如果他们对JavaScript有任何的理解，他们会知道它存储了多少工作，并且他们不知道他们为什么做出决定？

我会提出的一个重点是，jquery中的所有内容都可以正常工作，不再存在跨浏览器问题。

Answer 7

该选择器非常简单，可以转换为getElementById，但如果它更复杂，Sizzle库将被调用以获取元素。

点击是绑定的别名，并指定点击。绑定通过添加事件来工作。下面是从源代码片段：

add: function(elem, types, handler, data) { 
    if (elem.nodeType === 3 || elem.nodeType === 8) { 
     return; 
    } 

    if (handler === false) { 
     handler = returnFalse; 
    } else if (!handler) { 
     // Fixes bug #7229. Fix recommended by jdalton 
     return; 
    } 

    var handleObjIn, handleObj; 

    if (handler.handler) { 
     handleObjIn = handler; 
     handler = handleObjIn.handler; 
    } 

    // Make sure that the function being executed has a unique ID 
    if (!handler.guid) { 
     handler.guid = jQuery.guid++; 
    } 

    // Init the element's event structure 
    var elemData = jQuery._data(elem); 

    // If no elemData is found then we must be trying to bind to one of the 
    // banned noData elements 
    if (!elemData) { 
     return; 
    } 

    var events = elemData.events, 
     eventHandle = elemData.handle; 

    if (!events) { 
     elemData.events = events = {}; 
    } 

    if (!eventHandle) { 
     elemData.handle = eventHandle = function(e) { 
      // Discard the second event of a jQuery.event.trigger() and 
      // when an event is called after a page has unloaded 
      return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ? 
       jQuery.event.handle.apply(eventHandle.elem, arguments) : 
       undefined; 
     }; 
    } 

    // Add elem as a property of the handle function 
    // This is to prevent a memory leak with non-native events in IE. 
    eventHandle.elem = elem; 

    // Handle multiple events separated by a space 
    // jQuery(...).bind("mouseover mouseout", fn); 
    types = types.split(" "); 

    var type, i = 0, namespaces; 

    while ((type = types[ i++ ])) { 
     handleObj = handleObjIn ? 
      jQuery.extend({}, handleObjIn) : 
      { handler: handler, data: data }; 

     // Namespaced event handlers 
     if (type.indexOf(".") > -1) { 
      namespaces = type.split("."); 
      type = namespaces.shift(); 
      handleObj.namespace = namespaces.slice(0).sort().join("."); 

     } else { 
      namespaces = []; 
      handleObj.namespace = ""; 
     } 

     handleObj.type = type; 
     if (!handleObj.guid) { 
      handleObj.guid = handler.guid; 
     } 

     // Get the current list of functions bound to this event 
     var handlers = events[ type ], 
      special = jQuery.event.special[ type ] || {}; 

     // Init the event handler queue 
     if (!handlers) { 
      handlers = events[ type ] = []; 

      // Check for a special event handler 
      // Only use addEventListener/attachEvent if the special 
      // events handler returns false 
      if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) { 
       // Bind the global event handler to the element 
       if (elem.addEventListener) { 
        elem.addEventListener(type, eventHandle, false); 

       } else if (elem.attachEvent) { 
        elem.attachEvent("on" + type, eventHandle); 
       } 
      } 
     } 

     if (special.add) { 
      special.add.call(elem, handleObj); 

      if (!handleObj.handler.guid) { 
       handleObj.handler.guid = handler.guid; 
      } 
     } 

     // Add the function to the element's handler list 
     handlers.push(handleObj); 

     // Keep track of which events have been used, for event optimization 
     jQuery.event.global[ type ] = true; 
    } 

    // Nullify elem to prevent memory leaks in IE 
    elem = null; 
} 

注意，有各种聪明的事情那儿的情况，使这个作品不管是什么。

动画是这样工作的：

animate: function(prop, speed, easing, callback) { 
    var optall = jQuery.speed(speed, easing, callback); 

    if (jQuery.isEmptyObject(prop)) { 
     return this.each(optall.complete, [ false ]); 
    } 

    // Do not change referenced properties as per-property easing will be lost 
    prop = jQuery.extend({}, prop); 

    return this[ optall.queue === false ? "each" : "queue" ](function() { 
     // XXX 'this' does not always have a nodeName when running the 
     // test suite 

     if (optall.queue === false) { 
      jQuery._mark(this); 
     } 

     var opt = jQuery.extend({}, optall), 
      isElement = this.nodeType === 1, 
      hidden = isElement && jQuery(this).is(":hidden"), 
      name, val, p, 
      display, e, 
      parts, start, end, unit; 

     // will store per property easing and be used to determine when an animation is complete 
     opt.animatedProperties = {}; 

     for (p in prop) { 

      // property name normalization 
      name = jQuery.camelCase(p); 
      if (p !== name) { 
       prop[ name ] = prop[ p ]; 
       delete prop[ p ]; 
      } 

      val = prop[ name ]; 

      // easing resolution: per property > opt.specialEasing > opt.easing > 'swing' (default) 
      if (jQuery.isArray(val)) { 
       opt.animatedProperties[ name ] = val[ 1 ]; 
       val = prop[ name ] = val[ 0 ]; 
      } else { 
       opt.animatedProperties[ name ] = opt.specialEasing && opt.specialEasing[ name ] || opt.easing || 'swing'; 
      } 

      if (val === "hide" && hidden || val === "show" && !hidden) { 
       return opt.complete.call(this); 
      } 

      if (isElement && (name === "height" || name === "width")) { 
       // Make sure that nothing sneaks out 
       // Record all 3 overflow attributes because IE does not 
       // change the overflow attribute when overflowX and 
       // overflowY are set to the same value 
       opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ]; 

       // Set display property to inline-block for height/width 
       // animations on inline elements that are having width/height 
       // animated 
       if (jQuery.css(this, "display") === "inline" && 
         jQuery.css(this, "float") === "none") { 
        if (!jQuery.support.inlineBlockNeedsLayout) { 
         this.style.display = "inline-block"; 

        } else { 
         display = defaultDisplay(this.nodeName); 

         // inline-level elements accept inline-block; 
         // block-level elements need to be inline with layout 
         if (display === "inline") { 
          this.style.display = "inline-block"; 

         } else { 
          this.style.display = "inline"; 
          this.style.zoom = 1; 
         } 
        } 
       } 
      } 
     } 

     if (opt.overflow != null) { 
      this.style.overflow = "hidden"; 
     } 

     for (p in prop) { 
      e = new jQuery.fx(this, opt, p); 
      val = prop[ p ]; 

      if (rfxtypes.test(val)) { 
       e[ val === "toggle" ? hidden ? "show" : "hide" : val ](); 

      } else { 
       parts = rfxnum.exec(val); 
       start = e.cur(); 

       if (parts) { 
        end = parseFloat(parts[2]); 
        unit = parts[3] || (jQuery.cssNumber[ p ] ? "" : "px"); 

        // We need to compute starting value 
        if (unit !== "px") { 
         jQuery.style(this, p, (end || 1) + unit); 
         start = ((end || 1)/e.cur()) * start; 
         jQuery.style(this, p, start + unit); 
        } 

        // If a +=/-= token was provided, we're doing a relative animation 
        if (parts[1]) { 
         end = ((parts[ 1 ] === "-=" ? -1 : 1) * end) + start; 
        } 

        e.custom(start, end, unit); 

       } else { 
        e.custom(start, val, ""); 
       } 
      } 
     } 

     // For JS strict compliance 
     return true; 
    }); 
} 

再次，很多聪明的，以确保这样做你的期望。

在现实生活中，带有事件监听器的getElementById，然后重复使用元素上的setStyle来获取动画的循环将起作用。