Kỹ thuật để nhóm mã javascript

Question

Tôi có rất nhiều chức năng và trình xử lý sự kiện được phân tách trên nhiều tệp javascript được bao gồm trên các trang khác nhau trong toàn bộ trang web của tôi.

Vì lý do hiệu suất, tôi muốn kết hợp tất cả các tệp đó thành 1 tệp toàn cầu trên trang web.

Vấn đề là tôi sẽ có trình xử lý sự kiện được gọi trên các phần tử không nhất thiết phải tồn tại và có cùng tên hàm.

Đây là một ví dụ về một tập tin javascript điển hình ...

$(document).ready(function(){ 
    $('#blah').keypress(function(e){ 
     if (e.which == 13) { 
      checkMap(); 
      return false; 
     } 
    }); 
}); 

function checkMap() { 
    // code 
} 

function loadMap() { 
    // code 
} 

tôi sẽ cần phải tách mã này vào một đối tượng đó được gọi là trên trang đó cụ thể.

những suy nghĩ của tôi là tôi có thể viết lại nó như thế này:

(function($) { 
    $.homepage = { 
     checkMap: function(){ 
      // code 
     }, 
     loadMap: function(){ 
      //code 
     } 
    }; 
})(jQuery); 

Và sau đó trên trang đó đòi hỏi nó, tôi có thể gọi $.homepage.checkMap(), vv

Nhưng sau đó thế nào tôi sẽ tuyên bố xử lý sự kiện như document.ready mà không chứa nó trong chức năng riêng của nó?

Bất kỳ lời khuyên nào về thực tiễn tốt nhất sẽ là tuyệt vời, cảm ơn!

Answer 1

Tôi nghĩ rằng tất cả những gì bạn cần là một không gian tên cho ứng dụng của bạn. Một namespace là một đối tượng JSON đơn giản mà có thể trông như thế này:

var myApp = { 
    homepage : { 
     showHeader : function(){}, 
     hideHeader : function(){}, 
     animationDelay : 3400, 
     start : function(){} // the function that start the entire homepage logic 
    }, 
    about : { 
    .... 
    } 
} 

Bạn có thể chia nó trong các tập tin hơn:

1. MyApp sẽ chứa MyApp = {} đối tượng, có lẽ với một số tiện ích hữu ích như object.create hoặc những gì có bạn.
2. Homepage.js sẽ chứa myApp.homepage = {...} với tất cả các phương pháp của trang chủ của bạn.
3. Danh sách tiếp tục và tiếp tục với phần còn lại của các trang.

Hãy coi đó là gói. Bạn không cần sử dụng $ làm đối tượng chính.

<script src="myapp.js"></script> 
<script src="homepage.js"></script> 
<-....-> 
<script> 
    myApp.homepage.start(); 
</script> 

Sẽ là cách tôi sẽ sử dụng đối tượng trang chủ.

Khi nén với YUI, bạn nên có:

<script src="scripts.min.js"></script> 
<script> 
    myApp.homepage.start(); 
</script> 

Answer 2

Để đảm bảo rằng tôi đã hiểu chính xác bạn, bạn có một tệp js với tất cả mã của mình, nhưng bạn vẫn muốn kiểm soát những gì được thực hiện trên một trang nhất định?

Nếu đúng như vậy, thì Terrific JS framework có thể khiến bạn quan tâm. Nó cho phép bạn áp dụng chức năng javascript cho một mô-đun. Mô-đun là một thành phần trên trang web của bạn, như điều hướng, tiêu đề, công cụ chuyển đổi tiền tệ. Terrific JS quét các dom và thực hiện các js cho các mô-đun nó tìm thấy, do đó bạn không phải lo lắng về việc thực hiện. Terrific JS yêu cầu quy ước đặt tên OOCSS để xác định các mô-đun. Đó không phải là giải pháp nhanh cho vấn đề của bạn nhưng nó sẽ giúp ích nếu bạn sẵn sàng dành thời gian. Dưới đây là một số liên kết nhiều hơn bạn có thể thấy hữu ích:

Hello World Ví dụ: http://jsfiddle.net/brunschgi/uzjSM/

blogpost về việc sử dụng: http://thomas.junghans.co.za/blog/2011/10/14/using-terrificjs-in-your-website/

Answer 3

Trước hết: Tùy thuộc vào bao nhiêu mã bạn có, bạn nên xem xét, nếu phục vụ tất cả các mã của bạn trong một tập tin thực sự là một ý tưởng tốt. Bạn có thể lưu các yêu cầu http, nhưng nếu bạn tải một đoạn mã lớn, từ đó bạn sử dụng 5% trên một trang, bạn có thể tốt hơn bằng cách giữ riêng các tệp js đó (đặc biệt trong môi trường di động!). Hãy nhớ rằng, bạn có thể cho phép trình duyệt lưu trữ các tệp đó. Tùy thuộc vào tần suất mã của bạn thay đổi và số lượng nguồn thay đổi, bạn có thể muốn tách mã của mình thành các chức năng cốt lõi ổn định và các gói .js bổ sung cho các mục đích đặc biệt. Bằng cách này, bạn có thể giảm lưu lượng truy cập và bảo trì tốt hơn.

Việc đóng gói các chức năng của bạn thành các đối tượng khác nhau là một ý tưởng tốt để ngăn chặn sự ô nhiễm không gian tên và chức năng không gian tên không cần thiết.

Cuối cùng bạn có thể ngăn ngừa việc gọi xử lý sự kiện không cần thiết bởi một trong hai:

Giới thiệu một số loại loại trang giúp bạn quyết định chỉ gọi các chức năng cần thiết.

hoặc

kiểm tra sự tồn tại của một số yếu tố như thế này if($("specialelement").length > 0){ callhandlers}

để tăng tốc độ JS của bạn, bạn có thể sử dụng Closure Compiler Google. Nó tối thiểu hóa và tối ưu hóa mã của bạn.

Answer 4

Tôi sẽ sử dụng thứ gì đó như máy nén YUI để hợp nhất tất cả các tệp thành một tệp min.js được rút gọn. Nếu bạn đang tìm kiếm hiệu suất cả sáp nhập và minifiying là con đường để đi. http://developer.yahoo.com/yui/compressor/

Ví dụ: Javascript tập tin đầu vào: jquery.js, ads.js support.js

chạy yui với jquery.js, ads.js, support.js đầu ra nó vào min.js

Tệp đầu ra Javascript: min.js

sau đó sử dụng min.js trong mã html của bạn.

Answer 5

Đây là một bài thuyết trình về cách thức họ làm điều đó trong Yahoo (YUI): http://www.youtube.com/watch?v=HifKkERVtVs

Answer 6

Hãy nhìn vào chàng trai này web site và liên quan presentation. Trang web được THIẾT KẾ để giúp bạn chọn một khuôn khổ.