Cách tốt nhất để thực hiện js chỉ trên trang cụ thể

Tôi đã tự hỏi điều gì sẽ là cách tốt nhất để thực thi mã java-script chỉ trên các trang cụ thể.Cách tốt nhất để thực hiện js chỉ trên trang cụ thể

Hãy tưởng tượng chúng ta có một trang web dựa trên mẫu, viết lại quy tắc cho các thiết lập nội dung ist, jquery sẵn và nó về cơ bản trông như thế này:

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="script.js"></script> 
    </head> 
    <body> 
    ... 
    include $content; 
    .. 
    </body> 
</html>

nội dung 'thông tin' chứa một nút, chúng tôi muốn một cái gì đó sẽ xảy ra khi nhấp chuột, nội dung 'cảnh báo' sẽ đưa ra dưới dạng tin nhắn, khi bạn di chuột qua một trường văn bản.

Cách tốt nhất để kích hoạt các hành động này là gì, mà không gặp lỗi, vì đối tượng không được tìm thấy?

Lựa chọn một: sử dụng window.location.pathname

$(document).ready(function() { 
     if (window.location.pathname == '/info.php') { 
      $("#button1").click(function(){' 
      //do something 
      }) 
     }else if(window.location.pathname == '/alert.php'){ 
      $("#mytextfield").hover(){ 
      alert('message'); 
      } 
    }

Lựa chọn hai: kiểm tra nếu các yếu tố tồn tại

$(document).ready(function() { 
    if ($("#button1").length > 0) { 
     $("#button1").click(function(){' 
     //do something 
     }) 
    }else if ($("#mytextfield").length > 0){ 
     $("#mytextfield").hover(){ 
     alert('message'); 
     } 
}

Lựa chọn ba: bao gồm các kịch bản trong mẫu đã tải

//stands for itself

Đây có phải là giải pháp tốt hơn không? Hay tôi phải làm quen với một trong những giải pháp này?

Trải nghiệm, sử dụng của bạn hoặc bất kỳ liên kết nào liên quan đến chủ đề này được đánh giá cao.

// EDIT:

tôi có thể không có quyền trả một ví dụ xấu, các mã thực tế sẽ giống như là:

mCanvas = $("#jsonCanvas"); 
    mMyPicture = new myPicture (mCanvas);

nơi get constructor myPicture là bối cảnh của phần tử canvas, và ném một lỗi, nếu mCanvas là không xác định.

Nguồn

2012-03-06 Johannes Staehlin

Một ý tưởng hay là chỉ bao gồm javascript trên các trang yêu cầu nó và '$ (tài liệu) .ready' có thể được gọi nhiều lần trên một trang, vì vậy bạn nên an toàn ở đây. –

Bạn không cần kiểm tra xem phần tử có tồn tại hay không trước khi gán trình xử lý sự kiện nếu bạn đang sử dụng jQuery: '$ (" someselector "), nhấn (...)' sẽ áp dụng trình xử lý nhấp chuột cho các phần tử _zero hoặc more_ "someselector" phù hợp - nó không đưa ra lỗi nếu không có kết quả nào phù hợp. – nnnnnn

@IanBishop: Đó là tùy chọn ba :) -> tải js với mẫu @ nnnnnn: Xem chỉnh sửa của tôi, nhưng bạn nói đúng, liên quan đến hành động nhấp chuột 'duy nhất' –

Cách tiếp cận hơi khác so với việc kiểm tra đường dẫn URL: Bạn có thể nhóm các trình xử lý sự kiện cụ thể của trang trong một hàm duy nhất và sau đó trong mỗi hàm, có một số định vị sẽ gọi các hàm này.

Ví dụ: trong script.js bạn có hai hàm (bên ngoài domready) viz. onPage1Load() và onPage2Load().

Khi ở trong số page1.php, bạn có $(document).ready(onPage1Load) v.v. cho các trang khác. Điều này sẽ đảm bảo rằng các trình xử lý sự kiện không mong muốn không được đăng ký.

Nguồn

2012-03-06 05:45:51 Nikhil

tôi nghĩ rằng đây là cách dễ nhất để làm những điều viết và nó rất dễ dàng để đọc và gỡ lỗi. Tùy chọn một trong những tôi nghĩ là giống như bộ điều khiển phía trước không xấu nhưng có thể dẫn đến một mess.Also khi có bí danh đó là có được hard.That có thể làm việc nếu có một khuôn khổ để tự động hóa bằng cách nào đó ... cũng là ý tưởng hay. – GorillaApe

Điều gì làm việc tốt nhất cho tôi là có một tập lệnh nội tuyến được gọi là chức năng chỉ trên trang đó. – AntonB

Tôi sẽ sử dụng lệnh chuyển đổi và biến. (Tôi đang sử dụng jQuery!)

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname 

switch(windowLoc){  
    case "/info.php": 
    //code here 
    break; 
    case "/alert.php": 
    //code here 
    break; 
} 

//use windowLoc as necessary elsewhere

Điều này sẽ cho phép bạn thay đổi "nút" nào dựa trên trang bạn đang truy cập. Nếu tôi hiểu câu hỏi của bạn một cách chính xác; đây là những gì tôi sẽ làm. Ngoài ra, nếu tôi đã phục vụ số lượng lớn javascript, tôi chỉ cần thêm hoàn toàn tệp JS mới.

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname 

switch(windowLoc){  
    case "/info.php": 
    var infoJS = document.createElement('script'); 
    infoJS.type = 'text/javascript'; 
    infoJS.src = 'location/to/my/info_file.js'; 
    $('body').append(infoJs); 
    break; 
    case "/alert.php": 
    var alertJS = document.createElement('script'); 
    alertJS.type = 'text/javascript'; 
    alertJS.src = 'location/to/my/alert_file.js'; 
    $('body').append(alertJs); 
    break; 
}

Hope this helps -

Cheers.

Nguồn

2012-03-06 05:44:03 Ohgodwhy

vì bạn đang sử dụng jquery. jQuery.getScript() hữu ích – Bamboo

cách tiếp cận tốt đẹp để tải lại các tệp js. :) –

Đặt thuộc tính class vào thẻ nội dung của bạn.

<body class="PageType">

Và sau đó trong kịch bản của bạn ..

$(function(){ 
    if($('body').is('.PageType')){ 
    //add dynamic script tag using createElement() 
    OR 
    //call specific functions 
    } 
});

Nguồn

2012-03-06 06:22:45

Tôi nghĩ rằng đó là thực tế tuyệt vời để thêm tên lớp cho mỗi trang .. cả cho js và cho css – Damon

Không phải là một ý tưởng tồi cho đến khi ai đó đổi tên một lớp – Neil

cộng một cho phương pháp này; sử dụng [jQuery'is] (http://api.jquery.com/is/) – numediaweb

Bạn có thể sử dụng Yêu cầu js (RequireJS là một tập tin JavaScript và module loader) và kịch bản tải nếu họ chỉ cần thiết. Liên kết là http://requirejs.org/, tôi biết việc sử dụng js không quá dễ dàng.

Nguồn

2017-07-04 07:26:06

Cách tốt nhất để thực hiện js chỉ trên trang cụ thể

Trả lời

Các vấn đề liên quan