Cách sửa lỗi jslint 'Không thực hiện các chức năng trong vòng lặp.'?

Question

Tôi đang làm việc để làm cho tất cả các mã JS của chúng tôi đi qua jslint, đôi khi với rất nhiều tinh chỉnh với các tùy chọn để lấy mã kế thừa ngay bây giờ với mục đích sửa lỗi chính xác sau này.

Có một điều mà jslint phàn nàn về việc tôi không có workround cho. Đó là khi sử dụng các cấu trúc như thế này, chúng tôi nhận được lỗi 'Không thực hiện các chức năng trong vòng lặp.'

for (prop in newObject) { 
    // Check if we're overwriting an existing function 
    if (typeof newObject[prop] === "function" && typeof _super[prop] === "function" && 
     fnTest.test(newObject[prop])) { 
     prototype[prop] = (function(name, func) { 
      return function() { 
       var result, old_super; 

       old_super = this._super; 
       this._super = _super[name]; 
       result = func.apply(this, arguments); 
       this._super = old_super; 

       return result; 
      }; 
     })(prop, newObject[prop]); 
    } 
} 

Vòng lặp này là một phần của một thực hiện JS thừa kế cổ điển mà các lớp học mở rộng các lớp học hiện có giữ lại các tài sản của các lớp mở rộng siêu khi gọi một thành viên của lớp mở rộng. Chỉ cần làm rõ, việc thực hiện ở trên được lấy cảm hứng từ điều này blog post bởi John Resig.

Nhưng chúng tôi cũng có các phiên bản khác của các hàm được tạo trong vòng lặp.

Cách giải quyết duy nhất cho đến nay là loại trừ các tệp JS này khỏi jslint, nhưng chúng tôi muốn sử dụng jslint để xác thực mã và kiểm tra cú pháp như một phần của quá trình tích hợp liên tục và xây dựng quy trình làm việc của chúng tôi.

Có cách nào tốt hơn để triển khai các chức năng như thế này hay có cách nào để tinh chỉnh mã như thế này thông qua jslint không?

Answer 1

Douglas Crockford có một cách thành ngữ mới để đạt được điều này - kỹ thuật cũ của ông là sử dụng một hàm bên trong để liên kết các biến, nhưng kỹ thuật mới sử dụng một trình tạo hàm. Xem slide 74 in the slides to his "Function the Ultimate" talk. [SlideShare này không còn tồn tại]

Đối với lười biếng, đây là mã:

function make_handler(div_id) { 
    return function() { 
     alert(div_id); 
    }; 
} 
for (i ...) { 
    div_id = divs[i].id; 
    divs[i].onclick = make_handler(div_id); 
} 

Answer 2

JSLint chỉ là hướng dẫn, bạn không phải luôn tuân thủ các quy tắc. Vấn đề là, bạn không tạo ra các hàm trong một vòng lặp theo nghĩa mà nó đề cập đến. Bạn chỉ tạo các lớp học của bạn một lần trong ứng dụng của bạn, không phải hơn và hơn nữa.

Answer 3

Chỉ cần di chuyển của bạn:

(function (name, func) {...})()

khối ra khỏi vòng lặp và gán nó vào một biến, như:

var makeFn = function(name, func){...};

Sau đó, trong vòng có:

prototype[prop] = makeFn(...)

Answer 4

(Tôi chỉ cần stumbled về các vấn đề này trong nhiều tháng sau khi nó đã được đăng ...)

Nếu bạn tạo một hàm trong một vòng lặp, một thể hiện của một hàm được tạo ra cho mỗi lần lặp của vòng lặp. Trừ khi chức năng đang được tạo ra là khác nhau cho mỗi lần lặp, sau đó sử dụng phương pháp đặt trình tạo hàm ngoài vòng lặp - làm như vậy không chỉ là Crockery, nó cho phép những người khác đọc mã của bạn biết rằng đây là ý định của bạn .

Nếu hàm thực sự là hàm được gán cho các giá trị khác nhau trong một lần lặp (hoặc đối tượng được tạo lặp lại), thì thay vào đó bạn cần gán hàm cho biến được đặt tên và sử dụng hàm duy nhất đó của hàm trong nhiệm vụ trong vòng lặp:

handler = function (div_id) { 
    return function() { alert(div_id); } 
} 

for (i ...) { 
    div_id = divs[i].id; 
    divs[i].onclick = handler(div_id); 
} 

Greater bình luận/thảo luận về vấn đề này đã được thực hiện bởi những người khác thông minh hơn tôi khi tôi đặt ra một câu hỏi tương tự ở đây trên stack Overflow: JSlint error 'Don't make functions within a loop.' leads to question about Javascript itself

đối với JSLint: Vâng, nó là một giáo điều d thành ngữ. Điều đó nói rằng, nó thường là "đúng" - tôi phát hiện ra rằng nhiều người hát theo cách tiêu cực về JSLint thực sự không hiểu (sự tinh tế của) Javascript, vốn rất nhiều và ngớ ngẩn.

Answer 5

Nếu bạn đang sử dụng JQuery, bạn có thể muốn làm một cái gì đó như thế này trong một vòng lặp:

for (var i = 0; i < 100; i++) { 
    $("#button").click(function() { 
    alert(i); 
    }); 
} 

Để đáp ứng JSLint, một cách để làm việc xung quanh này là (trong JQuery 1.4.3+) để sử dụng thêm đối số dữ liệu xử lý để .click():

function new_function(e) { 
    var data = e.data; // from handler 
    alert(data); // do whatever 
} 

for (var i = 0; i < 100; i++) { 
    $("#button").click(i, new_function); 
} 

Answer 6

theo nghĩa đen, có xung quanh vấn đề bằng cách làm như sau:

1. Tạo một file .jshintrc

2. Thêm dòng sau vào tập tin .jshintrc bạn

   {"loopfunc" : true, // tolerate functions being defined in loops }