2012-08-17 29 views
26

tôi đang học Backbone và các ứng dụng todo ví dụ từ http://todomvc.com/ tôi đã nhận thấy có 3 severals cách bắt đầu từ mã trong các file:

$(function() { 
// code here 
}); 

$(function($) { 
// code here 
}); 

(function() { 
// code here 
}()); 

tôi không hiểu sự khác nhau và khi tôi nên sử dụng một trong khác

tôi cũng thấy một số người sử dụng này để bắt đầu mã của họ:.

$(document).ready(function(){ 
    // code here 
}); 

Từ những gì tôi đã thấy, đây là cách viết đầy đủ đúng không?

Nói chung, tôi có nên luôn bao gồm mã javascript của mình vào thứ gì đó tương tự trong mỗi tệp không?

Cảm ơn lời khuyên của bạn.

+4

Ví dụ thứ ba là ** không ** tương đương với những người khác. – PPvG

+0

Xem thêm [Ký hiệu đô la trước khi tự khai báo chức năng ẩn danh trong JavaScript?] (Https://stackoverflow.com/questions/7614574/dollar-sign-before-self-declaring-anonymous-function-in-javascript] – Bergi

Trả lời

53
  1. $(document).ready(function(){}) đảm bảo rằng mã của bạn chạy trên DOM sẵn sàng để bạn có quyền truy cập vào DOM. Bạn có thể đọc thêm về điều này trong jQuery's documentation.

  2. $(function(){}) chỉ là bí danh cho # 1. Bất kỳ mã nào ở đây sẽ đợi DOM sẵn sàng (see the docs).

  3. $(function($){}) tương đương với # 1 và # 2, chỉ bạn mới có được tham chiếu rõ ràng cho jQuery trong local scope (xem ghi chú bên dưới). Bạn cũng có thể vượt qua trong $ đến hàm trong # 1, và nó sẽ làm điều tương tự (tạo một tham chiếu cục bộ tới jQuery).

  4. (function(){}()) chỉ là một self-executing-anonymous-function, được sử dụng để tạo đóng cửa mới.

Xin lưu ý rằng không có điều nào trong số này đặc trưng cho Backbone. 3 đầu tiên là đặc trưng cho jQuery, trong khi # 4 chỉ là vani JavaScript.


Lưu ý: Để hiểu những gì đang xảy ra ở # 3 trên, hãy nhớ rằng $ là một bí danh để jQuery. Tuy nhiên, jQuery không phải là thư viện duy nhất sử dụng biến số $. Vì $ có thể bị ghi đè bởi người khác, bạn muốn đảm bảo rằng trong phạm vi của mình, $ sẽ luôn tham chiếu jQuery - do đó, đối số $.


Cuối cùng, nó về cơ bản nắm để 2 tùy chọn sau:

  1. Nếu JavaScript được nạp trong head, bạn phải đợi cho tài liệu đã sẵn sàng, vì vậy sử dụng này:

    jQuery(function($) { 
        // Your code goes here. 
        // Use the $ in peace... 
    }); 
    
  2. Nếu bạn tải JavaScript ở cuối tài liệu (trước thẻ đóng - which you should definitely be doing), thì không cần đợi tài liệu ent sẵn sàng (vì DOM đã được xây dựng vào thời điểm trình phân tích cú pháp đến tập lệnh của bạn) và SEAF (A.K.A. IIFE) sẽ đủ:

    (function($) { 
        // Use the $ in peace... 
    }(jQuery)); 
    

T.B. Để hiểu rõ hơn về Đóng và Phạm vi, hãy xem JS101: A Brief Lesson on Scope.

+1

Chỉ để tránh nhầm lẫn (và giận dữ trong một số) tự thực hiện-vô danh-chức năng không thực sự thực hiện chính mình .. họ đã được đặt ra này nhưng thực sự [Ngay lập tức gọi chức năng] (http://benalman.com/news/2010/11/ ngay lập tức-gọi-chức năng-biểu hiện /). ** và ** sau khi đăng bài này tôi * Ngay lập tức * thấy chú thích nhỏ về (AKA IIFE) để nvm: P Nó là buồn cười như thế nào cả hai chúng tôi liên kết với cùng một bài báo mặc dù – rlemon

+1

@ rlemon - Trong khi tôi đồng ý với Cowboy (Ben Alman) rằng ** instant-invoked-function-expression ** là thuật ngữ chính xác hơn, ** self-executing-anonymous-function ** đã trở thành cách tiêu chuẩn để chỉ chúng. Cả hai chúng tôi liên kết với cùng một bài viết vì đó là nguồn cho tên ** IIFE **. bài viết đáng đọc bất kể bạn gọi gì. Nó có một số thông tin tuyệt vời về các biểu thức hàm này. –

+0

Ohh Tôi đã đọc nó, và cá nhân tôi không quan tâm chúng tôi gọi chúng là gì, miễn là mọi người biết chúng hoạt động như thế nào và tại sao lại sử dụng chúng. Tôi chỉ đang làm sự tích cực của tôi và liên kết nó: P nhưng Nó là tất cả cho không: P bạn đã có :) Tôi thích IIFE chỉ vì nó là chính xác hơn và SEAF là một từ viết tắt xấu xí. – rlemon

2

Hai:

$(function() { 
// code here 
}); 

$(document).ready(function(){ 
    // code here 
}); 

Are trực tiếp tương đương, họ đều là cách để bắt đầu một số jQuery khi tài liệu đã được nạp. Trước đây chỉ là một phiên bản ngắn hơn sau này.

này một:

(function() { 
// code here 
}()); 

chỉ là một chức năng scoped với zero thông số, mà ngay lập tức được gọi với zero tham số.

18

Tôi đoán có ý nghĩa khi bắt đầu, bằng cách nhận ra rằng $ = jQuery. Mục đích của nó dưới đây khi đọc về các không gian tên trong các hàm ẩn danh sẽ có ý nghĩa hơn. Nhưng về bản chất, bạn có thể sử dụng một trong hai. Người ta sẽ sử dụng jQuery() thay vì $() nếu họ đang sử dụng nhiều thư viện và muốn sử dụng $ để người khác sử dụng.

$(document).ready(function(){ 
    // Here we have jQuery(document) firing off the ready event 
    // which executes once the DOM has been created in 
    // order to ensure that elements you are trying to manipulate exist. 
}); 

​$(function() { 
    // Short-hand version of $(document).ready(function() { }); 
}); 

More information on Document.ready()

Đưa $ trong ngoặc đảm bảo jQuery $ alias (bạn có thể được an toàn nó luôn luôn có nghĩa jQuery theo cách này).

$(function ($) { /* code here : $ always means jQuery now */ }); 

Cuối cùng bạn có một IIFE (Immidiately-Được triệu gọi hàm Expression) - IIFE explanation

(function (myNameSpace, $) { 
    // This is an anonymous function - it is ran instantly 
    // Usually used for namespaces/etc 
    // This creates a scope/wrapper/closure around everything inside of it 
}(window.myNameSpace, jQuery)); 

Các $ ở đầu (với nó phù hợp với jQuery ở phía dưới) biểu thị rằng $ (ký hiệu đô la) là viết tắt của jQuery trong phạm vi của các namepsace. Điều này được thực hiện để đảm bảo rằng các thư viện khác không xung đột với những gì nhà phát triển dự định/muốn $ được sử dụng cùng.

(function (myNameSpace, $) { 
    // Now because of all of this scope/wrapper/closure awesome... 
    // you can create -INTERNAL- variables (sort of like Private variables from other langs) 
    // this variable cannot be accessed outside the namespace unless it is returned/exposed 

    var internalVariable = '123'; // Internal 

    // Even Internal functions! 
    function privateFunction() { 
     console.log('this is private!'); 
    } 

    // -------------------------------------------------------- 
    // Public -method- of nameSpace exposing a private variable 
    // Notice we're using the myNameSpace object we exposed at the top/bottom 

    myNameSpace.nameSpaceMethod = function() { 
     privateFunction(); // we can call the private function only inside of the namespace 
     return internalVariable; // now we could get this variable 
    }; 
}(window.myNameSpace, jQuery)); // notice these mirror the above arguments in the anon function 

More information on anonymous functions

Bây giờ nếu chúng ta bên ngoài namespace, chúng ta có thể xem như thế nào những phương pháp công cộng/nội bộ và các biến được thực hiện:

// This will come up undefined 
alert(internalVariable); 

// This will trigger a -method- of the myNameSpace namespace - and alert "123" 
// Showcasing how we access a Public method - which itself has access to the internal variable 
// and exposes it to us! 
alert(myNameSpace.nameSpaceMethod()); 
​