Tại sao tôi nên tránh Inline Scripting?

Một người bạn am hiểu gần đây đã xem một trang web tôi đã giúp khởi chạy và nhận xét một cái gì đó như "trang web rất tuyệt, xấu hổ về kịch bản nội tuyến trong mã nguồn".

Tôi chắc chắn ở một vị trí để loại bỏ kịch bản nội tuyến nơi nó xảy ra; Tôi mơ hồ nhận ra rằng đó là "một điều xấu". Câu hỏi của tôi là: những vấn đề thực sự với kịch bản nội tuyến là gì? Có một vấn đề hiệu suất đáng kể, hoặc chủ yếu chỉ là một vấn đề phong cách tốt? Tôi có thể biện minh cho hành động ngay lập tức trên mặt trận kịch bản nội tuyến với cấp trên của mình không, khi có những thứ khác để làm việc có thể có tác động rõ ràng hơn trên trang web? Nếu bạn kéo lên một trang web và xem qua mã nguồn, yếu tố nào sẽ khiến bạn phải nói "hmm, công việc chuyên nghiệp ở đây", và điều gì sẽ khiến bạn phải giật mình từ một công việc nghiệp dư rõ ràng?

Được rồi, câu hỏi đó biến thành nhiều câu hỏi trong bài viết. Nhưng về cơ bản, kịch bản nội tuyến - thỏa thuận là gì?

các vấn đề thực sự với kịch bản nội tuyến là gì? Có một vấn đề hiệu suất đáng kể, hoặc chủ yếu chỉ là một vấn đề phong cách tốt?

Những lợi thế không dựa trên hiệu suất, chúng (như Michael đã chỉ ra trong bình luận của mình) có liên quan nhiều hơn đến việc tách biệt khung nhìn và bộ điều khiển. Lý tưởng nhất là tệp HTML / CSS chỉ chứa bản trình bày và các tệp riêng biệt nên được sử dụng cho các tập lệnh. Điều đó giúp bạn (và đồng nghiệp) dễ dàng đọc và duy trì cả khía cạnh hình ảnh và chức năng.

Tôi có thể biện minh cho hành động ngay lập tức trên mặt trận kịch bản nội tuyến với cấp trên của mình không, khi có những thứ khác để làm việc có thể có tác động rõ ràng hơn trên trang web?

Không, có lẽ là không. Có thể rất khó để thuyết phục các quyền lực là công việc bảo trì thuần túy, ngay cả khi bạn tin rằng nó sẽ giúp họ tiết kiệm tiền trong thời gian dài. Tuy nhiên, trong trường hợp này, tôi không nghĩ nó quan trọng đến mức bạn nên dừng mọi thứ và loại bỏ kịch bản nội tuyến của mình. Thay vào đó, chỉ cần đảm bảo rằng bạn thực hiện một nỗ lực có ý thức để khắc phục các khu vực khi bạn làm việc với chúng vì những lý do khác. Mã tái cấu trúc nên là thứ bạn làm thường xuyên nhưng chỉ một chút một lúc.

Nếu bạn kéo lên một trang web và xem qua mã nguồn, yếu tố nào sẽ khiến bạn phải nói "hmm, công việc chuyên nghiệp ở đây", và điều gì sẽ khiến bạn phải giật mình từ một công việc nghiệp dư rõ ràng?

Yếu tố số một sẽ cho tôi biết nó không chuyên nghiệp là việc sử dụng quá mức các bảng hoặc div. Đây là một bài viết giải thích tại sao không nên quá lạm dụng.

Tôi sẽ không trở thành người ủng hộ của quỷ, nhưng không có mối quan hệ chặt chẽ giữa công việc nghiệp dư và JavaScript nội tuyến. Hãy xem mã nguồn của một số trang web được biết đến nhiều nhất:

• Google,
• Wikipedia
• Microsoft,
• Adobe,
• Dell
• IBM.

Mỗi trang chủ của họ sử dụng JavaScript nội tuyến. Có nghĩa là tất cả những công ty đó thuê những người nghiệp dư để tạo ra trang chủ của họ?

Tôi là một trong những nhà phát triển không thể đặt mã JavaScript trong HTML. Tôi không bao giờ thực hiện nó bên trong các dự án mà tôi làm việc (ngoại trừ một số cuộc gọi như <a href="javascript:...">đối với các dự án mà JavaScript không phô trương không phải là một yêu cầu ngay từ đầu và tôi luôn loại bỏ JavaScript nội tuyến khi tôi cấu trúc lại mã của người khác. Nhưng nó có đáng để nỗ lực không ? Không chắc lắm.

Hiệu suất khôn ngoan, bạn không phải lúc nào cũng có hiệu suất tốt hơn khi đặt JavaScript vào một tệp riêng. Thông thường, chúng tôi muốn xem xét băng thông lãng phí JavaScript nội tuyến, vì nó không thể được lưu trong bộ nhớ cache (ngoại trừ khi bạn xử lý HTML tĩnh có thể lưu trong bộ nhớ cache). Ngược lại, một tệp .js extern chỉ được tải một lần.

Trong thực tế, đây chỉ là một tối ưu hóa sớm khác : bạn có thể nghĩ đúng rằng việc ngoại lệ hóa JavaScript sẽ làm nhanh trang web của bạn, nhưng bạn cũng có thể hoàn toàn sai:

• Điều gì xảy ra nếu hầu hết người dùng của bạn đi kèm với bộ đệm trống?
• Bạn có nghĩ rằng với tệp .js bên ngoài, một yêu cầu sẽ được gửi đến tệp này ở mỗi yêu cầu trang, nếu trang web không được định cấu hình đúng (và thông thường, không phải vậy),
• Là tập tin .js thực sự được lưu trữ (với IIS, nó có thể không dễ dàng như vậy)?

Vì vậy, trước khi tối ưu hóa sớm, hãy thu thập số liệu thống kê về khách truy cập của bạn và đánh giá các màn trình diễn có và không có JavaScript nội tuyến.

Sau đó, đến đối số cuối cùng: bạn đã trộn JavaScript và HTML trong nguồn của mình, vì vậy bạn rất thích. Nhưng ai nói bạn trộn cả hai? Mã nguồn được trình duyệt sử dụng không phải lúc nào cũng là mã nguồn bạn đã viết. Ví dụ, mã nguồn có thể được nén, minified, hoặc một số CSS hoặc JS tập tin có thể được tham gia vào một tập tin, nhưng điều này không có nghĩa là bạn thực sự đặt tên của bạn biến a, b, c... a1vv hay mà bạn đã viết một tập tin CSS lớn mà không có không gian hoặc dòng mới. Theo cùng một cách, bạn có thể dễ dàng nhập mã nguồn JavaScript bên ngoài vào HTML vào thời gian biên dịch hoặc sau đó thông qua các mẫu.

Để kết luận, nếu bạn trộn JavaScript và HTML trong mã nguồn bạn viết, bạn nên cân nhắc việc không làm điều đó trong các dự án tương lai của mình. Nhưng điều đó không có nghĩa là nếu mã nguồn được gửi tới trình duyệt chứa JavaScript nội tuyến thì nó luôn xấu.

• Nó có thể là xấu.
• Ngược lại, đó có thể là một dấu hiệu cho thấy trang web được viết bởi các chuyên gia quan tâm đến hiệu suất, thực hiện các thử nghiệm cụ thể và xác định rằng khách hàng của họ sẽ nhanh hơn các phần nội tuyến của JavaScript.
• Hoặc nó có thể không có ý nghĩa gì cả.

Vì vậy, thật xấu hổ cho người nói rằng "trang web rất tuyệt, xấu hổ về kịch bản nội tuyến trong mã nguồn" bằng cách chỉ nhìn vào nguồn được gửi đến trình duyệt, mà không biết gì về cách trang web được thực hiện.

Nói chung là tốt để cố gắng tách HTML và JS nói chung. HTML là để xem, JS là cho logic ứng dụng. Nhưng theo kinh nghiệm của tôi, việc tách rời html và javascript (vì mục đích thuần túy) không làm cho nó dễ bảo trì hơn; nó thực sự có thể được duy trì ít hơn.

Ví dụ: đôi khi tôi sử dụng mẫu này (mượn từ ASP.net) trong việc thiết lập trình xử lý sự kiện:

<input type="button" id="yourId" onclick="clickYourId()" />

hoặc là

<input type="button" id="yourId" onclick="clickYourId(this)" />

Không có gì bí ẩn những gì đang gây ra một sự kiện sẽ xảy ra. Lý do là sáu tháng sau, bạn có thể kiểm tra phần tử (ví dụ: trong Chrome) và xem ngay sự kiện javascript nào được kích hoạt.

Mặt khác, hãy tưởng tượng bạn đang đọc mã của người khác, đó là một trăm ngàn dòng và bạn bắt gặp một yếu tố ma thuật kích hoạt một sự kiện javascript:

<input id="yourId"  />

Làm thế nào bạn có thể dễ dàng cho tôi biết phương thức javascript này đang gọi là gì? Chrome đã làm điều này dễ dàng hơn, nhưng có lẽ sự kiện này bị ràng buộc với id hoặc có lẽ nó bị ràng buộc với đứa con đầu tiên của container. Có thể sự kiện được gắn vào đối tượng cha. Ai biết? Chúc may mắn tìm thấy nó. :)

Ngoài ra, tôi sẽ lập luận rằng việc ẩn javascript hoàn toàn khỏi nhà thiết kế thực sự có thể làm tăng khả năng họ phá vỡ nó trên một bản cập nhật. Nếu ai đó chỉnh sửa mã cho một yếu tố hoạt động kỳ diệu, họ có chỉ dẫn nào trong mã đó để cho họ biết đây là một yếu tố hoạt động trên trang?

Vì vậy, trong ngắn hạn, thực hành tốt nhất là tách HTML và Javascript. Nhưng cũng hiểu quy tắc của ngón tay cái đôi khi phản tác dụng khi mang đến cực đoan. Tôi muốn tranh luận về một cách tiếp cận giữa đường. Tránh số lượng lớn js nội tuyến. Nếu bạn sử dụng nội tuyến, chữ ký hàm sẽ rất đơn giản như:

1. emptyFunction()
2. doCallWithThis(this)
3. atTheExtremOnlyPassOneNumber(2)

Một lập luận tôi thiếu ở đây là khả năng tăng cường bảo vệ chống lại các cuộc tấn công kịch bản chéo trang .

Có thể vô hiệu hóa việc thực thi JavaScript nội tuyến trong trình duyệt hiện đại thông qua Chính sách bảo mật nội dung . Điều này làm giảm nguy cơ trang web của bạn trở thành nạn nhân của XSS. Đây có thể là một lý lẽ thuyết phục hơn để quản lý của bạn đầu tư vào việc loại bỏ tập lệnh nội tuyến.

Đây là một vài lý do.

1. Tập lệnh nội tuyến không thể được thu nhỏ (chuyển đổi thành phiên bản ngắn hơn thông qua giảm ký hiệu). Không phải là mối quan tâm về băng thông rộng nhưng hãy xem xét một thiết bị di động ở khu vực băng thông thấp hoặc người dùng đang chuyển vùng dữ liệu toàn cầu-- mỗi byte có thể được tính.

2. Tập lệnh nội tuyến không thể được lưu trong bộ nhớ cache của trình duyệt trừ khi bản thân trang có thể được lưu trong bộ nhớ cache (điều này sẽ tạo ra một trang rất buồn tẻ). Các tệp Javascript bên ngoài chỉ cần được truy xuất một lần, ngay cả khi nội dung trang thay đổi mỗi lần. Có thể ảnh hưởng nghiêm trọng đến hiệu suất trên các kết nối băng thông thấp.

3. Tập lệnh nội tuyến khó gỡ lỗi hơn vì số dòng liên quan đến bất kỳ lỗi nào là vô nghĩa.

4. Tập lệnh nội tuyến được cho là can thiệp vào các cân nhắc về khả năng truy cập (508 / WAI), mặc dù điều đó không có nghĩa là tất cả các tập lệnh nội tuyến gây ra sự cố. Nếu bạn kết thúc với một trình đọc màn hình thông báo nội dung kịch bản, bạn có vấn đề! (Chưa bao giờ thấy điều này xảy ra mặc dù).

5. Tập lệnh nội tuyến không thể được kiểm tra độc lập với trang của nó; các tệp Javascript bên ngoài có thể được chạy qua thử nghiệm độc lập, bao gồm các thử nghiệm tự động.

6. Kịch bản nội tuyến có thể dẫn đến sự phân tách mối quan tâm kém (như được mô tả bởi nhiều câu trả lời khác ở đây).

Có nhiều lý do sẽ biện minh cho việc không bao gồm tập lệnh nội tuyến:

• Trước hết, câu trả lời rõ ràng - nó làm cho mã sạch hơn, ngắn gọn hơn, dễ hiểu và dễ đọc hơn.

• Từ quan điểm thực tế hơn, bạn thường muốn sử dụng lại các tập lệnh / CSS / vv. trên tất cả các trang web của bạn - nội tuyến các phần này có nghĩa là phải chỉnh sửa từng trang mỗi khi bạn thực hiện một thay đổi nhỏ.

• Nếu bạn sử dụng SCM cho dự án của mình, thì việc tách biệt các thành phần khác nhau của bạn sẽ giúp việc theo dõi thay đổi và cam kết dễ dàng hơn cho mọi người tham gia.

Theo tôi biết, hiệu suất sẽ không phải là một mối quan tâm. Nó sẽ phụ thuộc vào rất nhiều thứ liên quan đến bản chất của trang web của bạn, thông số kỹ thuật của máy chủ của bạn, v.v. Ví dụ: nếu trang web của bạn sử dụng nhiều javascript, trình duyệt của bạn có thể lưu trữ các tập lệnh, điều này sẽ mang lại hiệu quả tốt hơn khi mã được phân tách trong nhiều tập tin. Mặt khác, tôi muốn nói rằng một số máy chủ có thể phục vụ một tệp lớn nhanh hơn nhiều tệp nhỏ hơn - trong trường hợp này, người ta có thể lập luận rằng không tách mã là hiệu suất tốt hơn khôn ngoan.

Tôi không biết về bất kỳ thử nghiệm chính thức nào trong lĩnh vực này, mặc dù rất có khả năng ai đó đã thực hiện chúng.

Cuối cùng, tôi sẽ nói rằng đó là vấn đề thực hành tốt hơn bất kỳ điều gì khác, và những lợi thế về khả năng đọc và tổ chức (cụ thể là điểm 2) làm cho việc tách mã trong các tệp riêng biệt trở thành một lựa chọn tốt hơn nhiều.

Câu trả lời thực sự phụ thuộc vào cách sử dụng mã nội tuyến (giả sử javascript).

Chúng tôi đã sử dụng kết hợp mã nội tuyến, của SSI (bao gồm phía máy chủ), tệp js và tệp css để tạo hiệu ứng chúng tôi muốn và cũng để giảm các chuyến đi trả lại máy chủ cho các sự kiện onClick.

Vì vậy, đối với một người nào đó đưa ra tuyên bố về việc sử dụng "mã nội tuyến" là không tốt mà không hiểu đầy đủ về cách sử dụng nó có thể gây hiểu nhầm.

Phải nói rằng, nếu mỗi trang có cùng một bản sao và dán mã javascript thay vì sử dụng tệp js thì tôi nói điều đó thật tệ.

Nếu mỗi trang có bản sao và dán phần CCS riêng thay vì sử dụng tệp css, tôi nói điều đó thật tệ.

Nó cũng có rất nhiều chi phí để bao gồm toàn bộ thư viện js của bạn trên mỗi trang, đặc biệt nếu không có chức năng nào đang được sử dụng trên trang đó.

Tôi sẽ giả sử javascript nội tuyến ở đây.

Không nhìn thấy mã, thật khó để chắc chắn. Tôi nghi ngờ anh ta đang đề cập đến một trong hai điều sau:

1. Bạn đã <script>s rải rác khắp trang
2. Tất cả các bạn JS đều ở trong tiêu đề của trang, không phải trong các tệp bên ngoài

Đầu tiên là một quyết định thiết kế tồi. Truyền bá tập lệnh trong toàn bộ tệp nguồn khiến trang khó bảo trì hơn nhiều , vì bạn phải tìm kiếm tập lệnh đã cho. Sẽ tốt hơn nhiều nếu giữ tất cả mã đó ở một nơi (tôi thích ở đầu tệp nguồn).

Về phần hai - đó không hẳn là một điều xấu. Mã cụ thể của trang nên ở trong trang đó. Nếu bạn có mã trùng lặp giữa các trang, bạn nên sử dụng nó bên ngoài <script src>. Sau đó, khi bạn đi tạo một trang mới, bạn chỉ cần bao gồm tệp đó và bất kỳ lỗi nào bạn đã sửa ở đó sẽ không phải xem lại.

Một lý do KHÔNG nên sử dụng InLine Javascript (thậm chí không phải onclick = "Do This (this)" trên các nút), là nếu bạn có ý định biến ứng dụng web của mình thành Ứng dụng Chrome. Vì vậy, nếu bạn dự định chuyển ứng dụng web của mình sang Ứng dụng Chrome gốc, hãy bắt đầu bằng cách KHÔNG bao gồm BẤT K jav javascript nội tuyến nào. Điều này được giải thích ngay khi bắt đầu những gì bạn sẽ cần thay đổi (bắt buộc) từ ứng dụng web của bạn nếu bạn có ý định "Chrome-etize" nó.

Các vấn đề thực sự với kịch bản nội tuyến là gì?

Kịch bản nội tuyến là xấu và nên tránh vì nó làm cho mã khó đọc hơn.

Mã khó đọc rất khó duy trì. Nếu bạn không thể dễ dàng đọc nó và hiểu những gì đang xảy ra, bạn sẽ không thể dễ dàng phát hiện ra lỗi. Nếu khó bảo trì, nó sẽ lãng phí nhiều thời gian của bạn sau này khi có vấn đề.

Khó khăn thường đến từ mã hóa lồng nhau. Có một vấn đề trong dòng mã tiếp theo, bạn có thể phát hiện ra nó không?

<a onclick='alert("What\'s going wrong here?")'>Alert!</a>

Mã lý tưởng được viết theo cách giúp bạn dễ dàng nhận ra khi có lỗi. Joel Spolsky đã viết một bài viết tuyệt vời nhấn mạnh điểm này vào năm 2005 . Các ví dụ mã có thể sử dụng một số cải tiến đáng kể, vì chúng cho thấy tuổi của chúng là 9 tuổi, nhưng khái niệm cơ bản vẫn còn mạnh mẽ: viết mã theo cách giúp bạn dễ dàng phát hiện ra lỗi.

Có một vấn đề hiệu suất đáng kể, hoặc chủ yếu chỉ là một vấn đề phong cách tốt?

Kịch bản nội tuyến dẫn đến sự lặp lại. Thay vì thay đổi một dòng mã để ảnh hưởng đến 100 trang, bạn có thể cần phải thay đổi 100 trang riêng lẻ. Điều này cùng với khả năng đọc kém ảnh hưởng nghiêm trọng đến hiệu suất của người bảo trì . Thời gian lập trình có chi phí thực tế ảnh hưởng đến lợi nhuận của doanh nghiệp nhanh hơn vài mili giây từ hầu hết các tối ưu hóa mã. Chắc chắn tối ưu hóa các tắc nghẽn là quan trọng, nhưng sự khác biệt hiệu năng của mã là không đáng kể trong trường hợp này.

Tôi có thể biện minh cho hành động ngay lập tức trên mặt trận kịch bản nội tuyến với cấp trên của mình không, khi có những thứ khác để làm việc có thể có tác động rõ ràng hơn trên trang web?

Không. Nếu nó ngu ngốc và nó hoạt động, nó không ngu ngốc.

Hệ quả của lập trình này là: nếu đó là mã ngu ngốc và nó hoạt động, thì đó không phải là mã ngu ngốc. Tập trung vào các vấn đề thực sự trước khi cố gắng khắc phục điều gì đó không bị hỏng. Khi mã nội tuyến cuối cùng cần một bản cập nhật, cho dù đó là trong sáu giờ, sáu tháng hay sáu năm, hãy sửa mã theo cách giúp bảo trì trong tương lai dễ dàng hơn.

Những yếu tố nào sẽ khiến bạn nói "hmm, công việc chuyên nghiệp ở đây", và điều gì sẽ khiến bạn phải giật mình từ một công việc nghiệp dư rõ ràng?

Tôi có xu hướng thích định nghĩa "chuyên nghiệp" chỉ đơn thuần là một người được trả tiền để thực hiện một nhiệm vụ, thay vì cho rằng họ sở hữu bất kỳ khả năng đáng kể nào trong những gì họ được trả tiền để làm. Nhiều chuyên gia chắc chắn có khả năng thực hiện công việc tốt, nhưng thường thì tôi thấy mình đang kinh hãi trong công việc khủng khiếp mà các chuyên gia khác đã làm hơn là một việc mà một người nghiệp dư nghĩ ra. Phần lớn công việc của tôi cho đến nay đã liên quan đến việc trục vớt các dự án tàu đắm đã bị các nhà phát triển ban đầu thực hiện, do đó số dặm của bạn có thể thay đổi.

Với tất cả những gì đã nói, nói chung, thật dễ dàng để chọn ra chương trình chất lượng doanh nghiệp