Làm cách nào để triển khai javascript không phô trương với tạo nội dung động?

Question

Tôi viết rất nhiều nội dung được tạo động (phát triển theo PHP) và tôi sử dụng jQuery để bổ sung thêm tính linh hoạt và chức năng cho các dự án của tôi.

Điều đó là khá khó để thêm JavaScript một cách kín đáo. Dưới đây là ví dụ:

Bạn phải tạo một số ngẫu nhiên div yếu tố mỗi chức năng khác nhau được kích hoạt onClick. Tôi có thể sử dụng thuộc tính onclick trên các phần tử div của mình để gọi hàm JS có tham số nhưng đó chỉ là một giải pháp tồi. Ngoài ra tôi có thể tạo ra một số mã jQuery cùng với mỗi div trong vòng lặp PHP for của tôi, nhưng sau đó một lần nữa điều này sẽ không hoàn toàn không phô trương.

Vậy giải pháp trong các tình huống như thế này là gì?

Answer 1

Bạn cần phải thêm thứ gì đó vào các div để xác định loại hành vi chúng có, sau đó sử dụng jQuery để chọn các div đó và thêm hành vi. Một tùy chọn là sử dụng thuộc tính lớp, mặc dù cho rằng điều này nên được sử dụng để trình bày chứ không phải là hành vi. Một thay thế sẽ là thuộc tính rel, nhưng tôi thường thấy rằng bạn cũng muốn chỉ định CSS khác nhau cho mỗi hành vi, vì vậy lớp có lẽ là ok trong trường hợp này.

Vì vậy, ví dụ, cho phép giả sử bạn muốn số lẻ và chẵn hành vi:

<div class="odd">...</div> 
<div class="even">...</div> 
<div class="odd">...</div> 
<div class="even">...</div> 

Sau đó, trong jQuery:

$(document).load(function() { 
$('.odd').click(function(el) { 
// do stuff 
}); 
$('.even').click(function(el) { 
// dostuff 
}); 
}); 

jQuery có một động cơ selector rất mạnh mẽ mà có thể tìm thấy dựa trên bất kỳ CSS dựa bộ chọn, và cũng hỗ trợ một số XPath và bộ chọn riêng của nó. Tìm hiểu chúng! http://docs.jquery.com/Selectors

Answer 2

Hơi khó để nói từ câu hỏi của bạn, nhưng có lẽ bạn có thể sử dụng các bộ chọn jQuery khác nhau để thiết lập các hành vi nhấp chuột khác nhau? Ví dụ, nói rằng bạn có những điều sau đây:

<div class="section-1"> 
    <div></div> 
</div> 
<div class="section-2"> 
    <div></div> 
</div> 

lẽ bạn có thể làm như sau trong jQuery:

$('.section-1 div').onclick(...one set of functionality...); 
$('.section-2 div').onclick(...another set of functionality...); 

Về cơ bản, quyết định dựa trên bối cảnh những gì cần phải xảy ra. Bạn cũng có thể chọn tất cả các div và thử nghiệm cho một số phần tử cha hoặc con để xác định chức năng nào chúng nhận được.

Tôi phải biết thêm thông tin cụ thể về tình huống của bạn để đưa ra lời khuyên tập trung hơn, nhưng có lẽ điều này sẽ giúp bạn bắt đầu.

Answer 3

Tôi muốn giới thiệu không tuân thủ các tiêu chuẩn W3C và viết ra HTML thuộc tính trên các yếu tố cần xử lý gắn liền với chúng:

Lưu ý: đây sẽ không phá vỡ vẽ trang!

<ul> 
    <li handler="doAlertOne"></li> 
    <li handler="doAlertTwo"></li> 
    <li handler="doAlertThree"></li> 
</ul> 

Khai báo một vài chức năng:

function doAlertOne() { } 
function doAlertTwo() { } 
function doAlertThree() { } 

Và sau đó sử dụng jQuery như vậy:

$("ul li").each(function() 
{ 
    switch($(this).attr("handler")) 
    { 
     case "doAlertOne": 
      doAlertOne(); 
      break; 

     case ... etc. 
    } 
}); 

Hãy thực dụng.

Answer 4

Tôi chưa thực sự biết về JQuery, nhưng tôi biết rằng bộ công cụ DOJO thực hiện Javascript không phô trương cao nhất có thể.

Hãy xem ví dụ ở đây:

Bản demo động thêm sự kiện vào một bảng đơn thuần html dựa trên lớp.

Một ví dụ khác là các tính năng hành vi, mô tả ở đây: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Answer 5

tôi sẽ khuyên bạn nên sử dụng điều này được gọi là "Event delegation". Đây là cách nó hoạt động.

Vì vậy, nếu bạn muốn cập nhật một khu vực, hãy nói một div và bạn muốn xử lý sự kiện một cách kín đáo, bạn đính kèm trình xử lý sự kiện vào chính div đó. Sử dụng bất kỳ khuôn khổ nào bạn muốn làm điều này. Tệp đính kèm sự kiện có thể xảy ra bất kỳ lúc nào, bất kể bạn đã cập nhật div hay chưa.

Trình xử lý sự kiện gắn với div này sẽ nhận đối tượng sự kiện là một trong các đối số của nó. Sử dụng đối tượng sự kiện này, bạn có thể hình thành yếu tố nào đã kích hoạt sự kiện. Bạn có thể cập nhật div bất kỳ số lần nào: các sự kiện được tạo bởi trẻ em của div sẽ bong bóng tới div nơi bạn có thể nắm bắt và xử lý chúng.

Điều này cũng hóa ra là một tối ưu hóa hiệu suất rất lớn nếu bạn đang nghĩ đến việc gắn nhiều trình xử lý cho nhiều phần tử bên trong div.