Table of Contents

Tips

$(document).ready(function() {}) vs $(function(){})

以前入门学习都是见的前者这种格式:

// 方式1
$(document).ready(function(){
  ...
});

最近见到不少这种写法：

// 方式2
$(function() {
  ...
});

这两种实际是等价的，后者是前者的简写。

方式1还可以写为：

// 方式3, 不推荐
$().ready(function(){
  ...
});

这三种都是在DOM被加载后才执行。

参考:

再拓展下，这种写法：

(function() {
  ...
});

这个是定义一个匿名函数，并在浏览器开始解释js脚本时就会执行。

比如之前用过的扩展jQuery：

// http://stackoverflow.com/a/4180972/1276501
(function($) {
  $.fn.outerHTML = function() {
    return $(this).clone().wrap('<div></div>').parent().html();
  };
})(jQuery);

参考：jQuery document.ready vs self calling anonymous function

这个总结挺好from：

如何复制一个对象

涉及到深复制和浅复制的问题

参考SO上回答：What is the most efficient way to clone an object in JavaScript?

最简单的答案，通过jQuery来处理。注意我之前在搜相关API时，也看到下面提到的clone这个方法，不过看文档说是针对DOM的。

I want to note that the .clone() method in jQuery only clones DOM elements. In order to clone JavaScript objects, you would do:

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

More information can be found in the jQuery documentation.

I also want to note that the deep copy is actually much smarter than what is shown above – it's able to avoid many traps (trying to deep extend a DOM element, for example). It's used frequently in jQuery core and in plugins to great effect.

其它参考：

click事件在Ajax下失效问题

最开始给一个click事件写一个Ajax，更新#board的html内容：

$('#board').click(function(){
    $.ajax() {
        ...
    }
})

但是在点击一次后，后续点击就不再触发click事件了。

搜了下，针对.click()，因为ajax中有replace替换了原来绑定了这个事件的元素(element)，所以导致失效。

.on()方法使用事件代理(event delegation)，可以保证在动态元素上：

$('document').on("click", "#board", function(){
    $.ajax() {
        ...
    }
})

参考：

其它

Related: