Whats cách tốt nhất để giải quyết xung đột tên trong javascript là gì?

Question

Gần đây tôi đã viết một số mã javascript có chứa một danh sách thả xuống dựa trên một số XML, những thứ khá đơn giản. Vấn đề là tôi phải viết mã tương tự để làm hầu như cùng một thứ trên một trang khác.

Vì mã gần như giống hệt nhau, tôi đặt tên hầu hết các chức năng giống nhau, cho rằng chúng sẽ không bao giờ được đưa vào cùng một trang. Tuy nhiên, xung đột đặt tên phát sinh bởi vì cả hai tệp javascript cuối cùng đều được bao gồm trong cùng một trang HTML.

Khi tôi phải quay lại và thay đổi tên, tôi chỉ cần thêm first_ hoặc second_ vào tên của phương thức. Đây là một nỗi đau và nó không có vẻ rất tao nhã với tôi. Tôi đã tự hỏi nếu có một cách tốt hơn để giải quyết xung đột tên trong javascript?

Answer 1

Thử JavaScript module pattern (hoặc không gian tên) được sử dụng trong các thư viện khác nhau.

Hãy thử DRY (không lặp lại chính mình) để bạn có thể tránh va chạm tên. Nếu mã gần như giống nhau, bạn nên tránh trùng lặp mã bằng cách tạo một hàm có thể xử lý cả hai trường hợp. Hàm có thể lấy hai tham số: trình đơn thả xuống để điền và với dữ liệu nào. Điều này giúp bảo trì tốt.

cập nhật: Tôi cho rằng bạn lấy XML từ yêu cầu AJAX. Trong trường hợp này, bạn có thể tạo các hàm ẩn danh trực tiếp với các tham số thích hợp để gọi lại bên trong một vòng lặp.

Answer 2

Tôi sẽ xem xét cách tôi có thể hợp nhất hai đoạn mã (hàm?) Vào một hàm duy nhất. Nếu bạn cần điền một hộp danh sách, sau đó chuyển id hộp danh sách vào hàm, do đó bạn không được mã hóa cứng để hoạt động trên một điều khiển duy nhất ...

Tôi đã làm điều này trên trang web của doanh nghiệp tên lửa của tôi Tôi đã bán động cơ tên lửa với các giá trị độ trễ khác nhau, nhưng về bản chất, chúng là cùng một sản phẩm, chỉ là một giá trị trễ khác nhau.

Có lẽ điều này có thể thử và giải thích những gì tôi đang cố gắng nói ... Tôi sử dụng điều này nếu tệp hình ảnh bị thiếu, nó sẽ hiển thị hình ảnh "không có hình ảnh" thay cho hình ảnh thực.

function goBlank(image) 
{ 
    if(image) { 
    var imgobj = document[image]; 
    imgobj.src="/images/blank.png"; 
    } 
} 

Trong trường hợp này, bạn gọi nó với:

<img src="/images/aerotech.png" name="header" onError="goBlank('header');"> 

Nếu bạn cần ví dụ hơn với những thứ như hộp danh sách sử dụng, cho tôi biết. Có lẽ thậm chí đăng một số mã mẫu của bạn.

Answer 3

Một tùy chọn khác (nếu có thể) là cẩn thận buộc mã vào chính phần tử đó.

ví dụ:

<input type="text" name="foo" id="foo" value="World" onchange="this.stuff('Hello ' + this.value);"/> 
<script> 
    document.getElementById('foo').stuff = function(msg){ 
    //do whatever you want here... 
    alert('You passed me: ' + msg); 
    }; 
</script>