2012-03-14 47 views
19

Như tiêu đề nói, nếu tôi loại bỏ một thẻ script từ DOM sử dụng:Liệu jQuery .remove() có xóa javascript đã nạp khi nó được sử dụng để xóa một thẻ script không?

$('#scriptid').remove(); 

Liệu javascript bản thân vẫn còn trong bộ nhớ hoặc là nó làm sạch?

Hoặc ... tôi có hoàn toàn hiểu nhầm cách thức mà trình duyệt xử lý javascript không? Điều này hoàn toàn có thể.

Đối với những người quan tâm đến lý do của tôi để hỏi xem dưới đây:

Tôi đang di chuyển một số tương tác javascript phổ biến từ tập tin kịch bản tĩnh vào những tạo động trong PHP. Được tải theo yêu cầu khi người dùng yêu cầu họ.

Lý do làm việc này là để di chuyển máy chủ logic và chạy một tập lệnh nhỏ, được trả về từ máy chủ, khách hàng. Thay vì có một kịch bản lớn có chứa một lượng lớn logic, khách hàng.

Đây là một cách tiếp cận tương tự như những gì facebook không ...

Facebook talks frontend javascript

Nếu chúng ta lấy một hộp thoại đơn giản ví dụ. Thay vì tạo ra html trong javascript, gắn nó vào dom, sau đó sử dụng tiện ích hộp thoại của jqueryUI để tải nó, tôi bây giờ làm như sau.

  • yêu cầu Ajax được thực hiện để dialog.php
  • Server tạo ra html và javascript đó là đặc trưng cho hộp thoại này sau đó mã hóa chúng như JSON
  • JSON được trả lại cho khách hàng.
  • HTML được nối vào <body> sau đó khi điều này được hiển thị, javascript cũng được nối vào DOM.

javascript được thực thi tự động khi chèn và hộp thoại động mở ra.

Làm điều này đã giảm số lượng javasript trên trang của tôi một cách đáng kể tuy nhiên tôi lo ngại về việc dọn dẹp javascript đã chèn.

Rõ ràng khi hộp thoại đã bị đóng cửa nó được lấy ra từ DOM sử dụng jQuery:

$('#dialog').remove();

Các javascript được gắn với một ID và tôi cũng loại bỏ điều này từ DOM qua cùng một phương pháp.

Tuy nhiên, như đã nêu ở trên, không sử dụng jQuery .remove() thực sự xóa javascript khỏi bộ nhớ hay đơn giản xóa phần tử <script> khỏi DOM?

Nếu có, có cách nào để làm sạch điều này không?

+0

Nếu bạn lo lắng về lượng JS để tạo ra một hộp thoại , bạn có thể nhìn vào EJS. Điều này sẽ cho phép bạn tạo các mẫu HTML từ JS. – westo

+0

Cảm ơn westo, tôi sử dụng JsRender cho khuôn mặt khách hàng. tuy nhiên cách tiếp cận mà tôi đã đề cập ở trên không chỉ dành cho các hộp thoại, mà còn cho rất nhiều tương tác khác trong đó các mẫu không phù hợp. Có lẽ ví dụ về hộp thoại không phải là một ví dụ hay. – gordyr

Trả lời

19

Không. Khi tập lệnh được tải, các đối tượng và chức năng được định nghĩa sẽ được lưu trong bộ nhớ. Việc xóa phần tử tập lệnh sẽ không xóa các đối tượng mà nó xác định. Điều này trái ngược với các tệp CSS, trong đó việc xóa phần tử sẽ loại bỏ các kiểu mà nó định nghĩa. Đó là bởi vì các kiểu mới có thể dễ dàng được chỉnh lại. Bạn có thể hình dung được việc tạo ra một thẻ script và làm thế nào để loại bỏ nó?

EDIT: Tuy nhiên, nếu bạn có tệp xác định myFunction, thì bạn thêm một tập lệnh khác xác định lại myFunction thành một giá trị khác, giá trị mới sẽ được giữ. Bạn có thể xóa thẻ cũ script nếu bạn muốn giữ DOM sạch, nhưng đó là tất cả việc xóa nó.

EDIT2: Cách thực sự duy nhất để "dọn sạch" các chức năng mà tôi có thể nghĩ là có tệp JS về cơ bản gọi delete window.myFunction cho mọi đối tượng và chức năng có thể mà tệp tập lệnh khác của bạn có thể xác định. Vì lý do rõ ràng, đây là một ý tưởng thực sự tồi tệ.

+0

Thật vậy, Đáng buồn thay tôi tưởng tượng điều này sẽ là trường hợp. Bạn có thể nghĩ ra giải pháp nào cho điều này không? hoặc, đối với trường hợp được đưa ra ở trên, nó sẽ là tốt nhất để tăng id của các hộp thoại và có các gương javascript động id yếu tố? Vì vậy, đảm bảo không có bất kỳ tham chiếu trùng lặp tiềm năng nào? Hay bạn cảm thấy toàn bộ cách tiếp cận này cần phải suy nghĩ lại? – gordyr

+0

Cảm ơn Kolink - Tôi vừa xem bản chỉnh sửa của bạn. Vì vậy, chỉ cần làm rõ, nếu tôi sử dụng jQueryUI's $ ('# dialog'). Dialog() widget lần thứ hai trên phần tử #dialog mới được tạo ra, với javascript rõ ràng khác ... Nó có thể thay thế cái cũ không? Nếu vậy điều này là hoàn hảo. – gordyr

+0

Lý do rõ ràng xóa là một ý tưởng tồi? Ngoài ra, sẽ không phải là người thu gom rác thải đối phó với các đối tượng mà không có gì đề cập đến chúng? Có vẻ như sẽ khai thác bộ thu gom rác. –

4

Nếu tập lệnh của bạn đã thực thi việc xóa các phần tử DOM sẽ không loại bỏ chúng. Chuyển đến bất kỳ trang nào có JavaScript, mở bảng điều khiển javascript ưa thích của bạn và nhập $ ("script"). Remove(). Mọi thứ đều tiếp tục chạy.

Và điều này cho thấy câu trả lời @Kolink:

http://jsfiddle.net/X2mk8/2/

HTML:

<div id="output"></div> 

<script id="yourDynamicGeneratedScript"> 
    function test(n) { 
    $output = $("#output") 
    $output.append("test " + n + "<br/>") 
    } 
    test(1); 
</script> 

Javascript:

$("script").remove(); 
// or $("#yourDynamicGeneratedScript").remove(); 

test(2); 
test(3); 
test(4); 

function test(n) { 
    $output = $("#output") 
    $output.append("REDEFINED! " + n + "<br/>") 
} 

test(5); 
test(6); 
test(7); 
+0

Cảm ơn tomasmuller. Ví dụ được nhiều người đánh giá cao. :) – gordyr

+0

Và tùy thuộc vào từng trường hợp, có lẽ một cách tiếp cận khác là xây dựng hệ thống của bạn như một ứng dụng một trang, sử dụng Backbone.js chẳng hạn. Khám phá [bài đăng rất hay này giải thích kiến ​​trúc đằng sau Trello] (http://blog.fogcreek.com/the-trello-tech-stack/). – tomasmuller

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