Khắc phục sự cố tương thích trình duyệt chéo JavaScript


Trịnh Vĩnh Hưng
2 năm trước
Hữu ích 6 Chia sẻ Viết bình luận 0
Đã xem 4155

Trong số tất cả các công nghệ web chính, không có công nghệ nào khác được coi là khả năng tương thích trình duyệt chéo như JavaScript. Bất chấp những tiến bộ trong HTML và CSS thuần túy, sự thật là bạn không thể dễ dàng xây dựng các ứng dụng web hoặc trang web mà không có nó.

Trong bài viết này, chúng tôi xem xét các vấn đề tương thích giữa các trình duyệt với JavaScript và phương pháp luận để khắc phục các sự cố. Trước khi chúng tôi bắt đầu với chủ đề thảo luận thực tế, điều quan trọng là chúng tôi phải xem xét các vấn đề cơ bản và sự phát triển của JavaScript.

Đi sâu vào JavaScript

Đã có những thay đổi nhanh chóng trong phát triển web trong thập kỷ qua, cùng với sự xuất hiện của các loại thiết bị khác nhau - máy tính để bàn, điện thoại thông minh, máy tính bảng, v.v. Cũng có sự gia tăng số lượng trình duyệt web được sử dụng để lướt internet. Điều này đặt ra một loạt thách thức khác nhau cho các nhà thiết kế và nhà phát triển vì các trình duyệt khác nhau có thể diễn giải mã CSS và HTML theo một cách khác. Lý do đằng sau là mỗi trình duyệt có một công cụ kết xuất duy nhất, chịu trách nhiệm hiển thị các thành phần web theo cách khác với các trình duyệt khác. CSS, HTML và JavaScript là ba lớp nâng cao lũy tiến. Tăng cường tiến bộ là một kỹ thuật để tạo các ứng dụng web tương thích với nhiều trình duyệt trong đó ưu tiên cao nhất là trang web cốt lõi, trong khi các tiện ích và tính năng phức tạp khác vẫn là thứ yếu. Khi JavaScript được giới thiệu vào những năm 1990, đã có những vấn đề tương thích trình duyệt chéo lớn vì mọi công ty phát triển trình duyệt đều có triển khai tập lệnh riêng và điều này chủ yếu được thực hiện để chiếm lĩnh thị trường. Mặc dù các vấn đề như vậy không xảy ra ngay bây giờ, việc xử lý các sự cố tương thích giữa các trình duyệt với JavaScript vẫn có thể gây ra ác mộng cho các nhà phát triển.

Sự cố với mã JavaScript chủ yếu xảy ra khi nhà phát triển sử dụng các tính năng trong các trang web không hỗ trợ trình duyệt cũ, sử dụng DOCTYPE không chính xác hoặc sử dụng mã trình duyệt đánh hơi trình duyệt không đầy đủ / không chính xác. Trừ khi một cơ chế tiêu chuẩn để xử lý JavaScript (hoặc các ngôn ngữ kịch bản lệnh khác) được triển khai, các vấn đề tương thích với nhiều trình duyệt với JavaScript sẽ tiếp tục tồn tại. Chúng ta hãy xem xét các vấn đề tương thích trình duyệt chéo này với JavaScript và tìm hiểu một chút về các cơ chế để khắc phục chúng.

Các sự cố JavaScript thường gặp

Trước khi chúng tôi xem xét các vấn đề tương thích giữa các trình duyệt với JavaScript, điều quan trọng là chúng tôi phải xem xét một số vấn đề phổ biến về JavaScript. Giả định rằng bạn đã biết về JavaScript và có kinh nghiệm triển khai trước với JavaScript.

  • Rò rỉ bộ nhớ  là một trong những vấn đề phổ biến mà các nhà phát triển phải đối mặt. Rò rỉ bộ nhớ đơn giản là bộ nhớ mà ứng dụng trước đây đang sử dụng không còn được sử dụng nữa. Tuy nhiên, vì một số lý do (ví dụ: xử lý không chính xác các biến toàn cục, ngoài tham chiếu DOM, v.v.); bộ nhớ được phân bổ không được đưa trở lại nhóm bộ nhớ 'miễn phí'. Một số lý do phổ biến cho rò rỉ bộ nhớ là xử lý không chính xác các biến toàn cục và ngoài tham chiếu DOM. 'Công cụ định hình cho Chrome' có thể được sử dụng để định hình bộ nhớ cũng như xác định rò rỉ bộ nhớ. Dưới đây là ảnh chụp mẫu của Cấu hình bộ nhớ Chrome đang hoạt động.
  • JavaScript thực thi mã theo thứ tự xuất hiện trong tài liệu. Do đó, nó chỉ trở nên quan trọng đối với mã tham chiếu khi nó được tải. Nếu bạn đang tham chiếu mã trước khi được tải, mã sẽ dẫn đến lỗi.
  • Không giống như các ngôn ngữ khác, không có lỗi nào được đưa ra nếu bạn chuyển 'số lượng tham số không chính xác' cho một hàm trong JavaScript. Nếu các tham số đó là tùy chọn, mã của bạn sẽ được thực thi mà không có bất kỳ vấn đề nào. Nó có thể dẫn đến các vấn đề khi các tham số đó được sử dụng trong chức năng và không sử dụng chúng có thể làm thay đổi chức năng. Nên có các quy ước đặt tên thống nhất để việc xác định các vấn đề đó trở nên dễ dàng.
  • Các toán tử đẳng thức  là cơ bản trong JavaScript, nhưng chúng phải được sử dụng với độ chính xác. Có một sự khác biệt giữa 'gán / toán tử bằng' (= = ) và 'toán tử bằng bằng nghiêm ngặt' (== = ). Chúng chủ yếu được sử dụng trong các câu lệnh có điều kiện và vô tình sử dụng '= =' thay vì '=== '  có thể gây ra các vấn đề về chức năng. Một hướng dẫn mã kỹ lưỡng cần phải được thực hiện để xem xét những sai lầm ngớ ngẩn nhưng tốn kém như vậy.
  • Các biến  được sử dụng theo phạm vi của chúng (cục bộ và toàn cầu). Đảm bảo rằng bạn sử dụng các quy ước đặt tên nhất quán cho các loại biến khác nhau để việc duy trì mã dễ dàng hơn. Đảm bảo rằng mã nguồn của bạn không có bất kỳ vấn đề cú pháp nào  .
  • Thêm các phần tử DOM  trong JavaScript được coi là một hoạt động tốn kém. Trong một số trường hợp, bạn sẽ cần thêm các phần tử DOM liên tiếp, nhưng làm như vậy không phải là một cách thực hành tốt. Trong một kịch bản như vậy, thay vào đó bạn có thể sử dụng các đoạn tài liệu vì nó có hiệu suất và hiệu suất vượt trội.
  • Chỉ mục bắt đầu trong  mảng JavaScript  là 0 chứ không phải 1. Nếu bạn có ý định tạo một mảng gồm 10 phần tử, bạn nên khai báo một mảng có chỉ số là 9 chứ không phải 10. Tham chiếu các phần tử mảng bị ràng buộc sẽ dẫn đến lỗi.
  • Việc thực hiện một nhiệm vụ tốn thời gian trong một hoạt động đồng bộ có thể làm chậm hiệu suất của trang web / ứng dụng web của bạn. Đảm bảo rằng bạn di chuyển logic đó sang hoạt động không đồng bộ để nó không làm hỏng CPU. Do bản chất hoạt động không đồng bộ, bạn phải cẩn thận trong khi sử dụng các biến được sử dụng trong hoạt động đó vì chúng có thể không phản ánh giá trị mới nhất (vì việc thực thi thao tác không đồng bộ vẫn có thể được tiến hành). Các nhà phát triển nên sử dụng  promise đối tượng trả về trạng thái (thành công / thất bại) khi hoàn thành thao tác không đồng bộ. Mã mẫu với  promise được hiển thị dưới đây:
  • Việc sử dụng không đúng các 'chức năng bên trong các vòng lặp' dẫn đến việc phá vỡ chức năng.

Các sự cố JavaScript trên trình duyệt chéo phổ biến

Cho đến nay chúng tôi đã xem xét một số vấn đề JavaScript cơ bản; chúng ta hãy xem xét một số cơ chế để giải quyết những vấn đề đó:

Sử dụng thư viện

Có nhiều thư viện (bản địa và bên thứ ba) có thể không được hỗ trợ bởi tất cả các trình duyệt. Trước khi sử dụng thư viện, bạn nên phân tích kỹ lưỡng về hỗ trợ trình duyệt, hỗ trợ tính năng, v.v. Bạn cũng nên kiểm tra 'lịch sử phát triển' của thư viện vì không nên có rất ít cập nhật thư viện và một khi bạn sử dụng thư viện, không có cập nhật nào cho nó!

Sử dụng Tác nhân người dùng và Trình duyệt đánh hơi

Mỗi trình duyệt có một chuỗi tác nhân người dùng xác định trình duyệt mà người dùng đã sử dụng để truy cập trang web / ứng dụng web của bạn. Các nhà phát triển sử dụng mã đánh hơi trình duyệt để điều chỉnh các chức năng UI / UX dựa trên trình duyệt được sử dụng. Một số chuỗi tác nhân người dùng phổ biến được đề cập dưới đây.

Nguồn:  https://mzl.la/2TBPY9a

Các nhà phát triển có thể sử dụng  navigator.userAgent.indexOf ('user-agent')  trong đó tác nhân người dùng là chuỗi tác nhân người dùng (được đề cập trong bảng trên). Dưới đây là ảnh chụp mã nơi các nhà phát triển có thể đưa ra các chức năng dựa trên loại trình duyệt.

Phát hiện tính năng cho các tính năng JavaScript hiện đại

JavaScript không được coi là cho phép như HTML và CSS khi xử lý các lỗi và các tính năng không được nhận dạng. JavaScript chắc chắn sẽ báo hiệu lỗi khi gặp phải cú pháp được sử dụng không đúng, dấu ngoặc hoặc dấu chấm phẩy bị thiếu, v.v.

Có nhiều tính năng mới được triển khai theo tiêu chuẩn ECMAScript 6 (ES6) / ECMAScript Tiếp theo và nhiều trình duyệt cũ không hỗ trợ các tính năng này. Ví dụ:  promise đối tượng mà chúng ta đã thảo luận trước đó sẽ không hoạt động trên phiên bản cũ của trình duyệt. "Mảng đánh máy" là một ví dụ khác. 'Hàm mũi tên' là một tính năng rất hữu ích được giới thiệu trong ES6 và cung cấp cách thức ngắn gọn để viết các hàm trong JavaScript. Bối cảnh bên trong Chức năng Mũi tên được xác định tĩnh. Các nhà phát triển JavaScript hiện đại sử dụng tính năng này rất nhiều, nhưng nó cũng không được hỗ trợ trên các trình duyệt cũ / phiên bản cũ của trình duyệt như IE, Firefox, Chrome, v.v. Trình duyệt Safari không hỗ trợ 'Chức năng mũi tên'.

Vậy, làm thế nào để bạn đảm bảo chức năng JavaScript là liền mạch trên các trình duyệt cũ hơn? Giải pháp là xác minh xem tính năng đang sử dụng có được hỗ trợ trên các trình duyệt cũ hay không. Bạn có thể xác minh tương tự bằng cách sử dụng tài nguyên trực tuyến như  caniuse ; chỉ cần nhập tên tính năng và nó cho biết phiên bản trình duyệt có tính năng được hỗ trợ. Ví dụ: bên dưới là trường hợp cho 'Hàm mũi tên.' Các mục nhập màu đỏ ngụ ý rằng tính năng này không được hỗ trợ.

Dựa trên đối tượng mục tiêu, bạn nên cung cấp hỗ trợ cho tất cả các trình duyệt mới nhất và một số phiên bản trình duyệt cũ hơn (tùy thuộc vào nghiên cứu thị trường ban đầu của bạn). Bạn có thể kiểm tra các công cụ phân tích trang web này   có thể giúp bạn hiểu khách hàng của mình một cách tốt hơn. Bạn cũng có thể chọn thực hiện có điều kiện để luôn có cơ chế dự phòng trong trường hợp người dùng đang sử dụng trình duyệt cũ. Có nhiều phiên bản trình duyệt cũ không hỗ trợ WebRTC (hội nghị video), API Maps , v.v. Trong ví dụ dưới đây, chúng tôi đang sử dụng API vị trí địa lý ; thuộc tính định vị địa lý của  navigator đối tượng được sử dụng cho mục đích đó. Nếu trình duyệt không hỗ trợ API Bản đồ, người dùng sẽ được cung cấp tùy chọn sử dụng Bản đồ tĩnh (dưới dạng tùy chọn dự phòng).

Có nhiều thư viện JavaScript mà nhà phát triển phải nhập đơn giản để sử dụng các chức năng của nó. Điểm hay của việc sử dụng là nhà phát triển không còn phải viết mã mọi thứ từ đầu vì thư viện đã hỗ trợ các chức năng đó.

Truyền mã JavaScript

Trong trường hợp bạn muốn cung cấp hỗ trợ cho các trình duyệt cũ, nhưng không muốn sử dụng trình duyệt đánh hơi, phát hiện tính năng, v.v., một tùy chọn tiện dụng có sẵn được gọi là dịch mã. Nói một cách đơn giản, dịch mã giúp chuyển đổi mã JavaScript có thể đang sử dụng các tính năng ES6 / ECMAScript mới nhất thành mã có thể hoạt động trên các trình duyệt cũ hơn.

Bạn có thể sử dụng một công cụ chuyển mã JavaScript phổ biến như  Babel  , nơi bạn chỉ cần nhập mã JavaScript mới nhất ở bên trái và nó xuất ra mã được mã hóa ở bên phải.

Polyfill

Tương tự như các thư viện của bên thứ ba giúp tăng cường chức năng và giảm thời gian phát triển, polyfill cũng bao gồm các tệp JavaScript của bên thứ ba mà bạn có thể sử dụng trong dự án của mình. Tuy nhiên, điều làm cho polyfill khác với các thư viện là polyfill có khả năng cung cấp các chức năng hoàn toàn không tồn tại. Ví dụ: bạn có thể sử dụng một polyfill để hỗ trợ promisecác tính năng dựa trên WebRTC / / ES6 khác bằng cách sử dụng polyfill tương đương cho tính năng đó.

Bạn có thể xem  danh sách  này có chi tiết về polyfill tương đương với các tính năng JavaScript. Chúng ta hãy xem một ví dụ. Dưới đây là đoạn mã nơi chúng tôi đã sử dụng một polyfill để hỗ trợ  startsWith tính năng được giới thiệu trong ES6.

Giải quyết các vấn đề phổ biến về JavaScript

Trình gỡ lỗi JavaScript

Điểm dừng thường được sử dụng cho mục đích gỡ lỗi và khi điểm dừng bị tấn công, việc thực thi bị dừng và nhà phát triển có thể xem xét các chi tiết khác nhau như ngăn xếp cuộc gọi, biến số xem, thông tin bộ nhớ, v.v. JavaScript có từ khóa được gọi  debugger và khi từ khóa được gặp phải, việc thực thi mã JavaScript bị dừng lại. Điều này tương tự như chèn một điểm dừng trong mã.

var x = 6 * 5; 
debugger;
/* Logic here */

Cách khác, bạn cũng có thể sử dụng phương pháp gỡ lỗi truyền thống là sử dụng Bảng điều khiển JavaScript trong Chrome để gỡ lỗi mã.

Công cụ phát triển trình duyệt

Các công cụ dành cho nhà phát triển trình duyệt có thể được sử dụng để xóa các cảnh báo và lỗi trong mã JavaScript. Nó cũng hữu ích để gỡ lỗi mã vì các nhà phát triển có thể chèn các điểm dừng tại các vị trí cụ thể trong mã.

Trong trường hợp bạn đang sử dụng Chrome hoặc Firefox, chỉ cần nhấp chuột phải vào cửa sổ sau khi tải mã và nhấp vào  'Kiểm tra phần tử'.  Công cụ dành cho nhà phát triển trình duyệt cũng có  tab tab Trình gỡ lỗi '  nơi nhà phát triển có thể chèn các điểm dừng, kiểm tra bảng gọi, thêm biến để xem cửa sổ, v.v.

Dưới đây là ảnh chụp nhanh Công cụ dành cho nhà phát triển được tích hợp trong trình duyệt Firefox.

Các nhà phát triển cũng có thể sử dụng API Console để in nhật ký trong giai đoạn phát triển. Khuyến cáo rằng các loại nhật ký giao diện điều khiển khác nhau được sử dụng cho các mục đích khác nhau. Ví dụ:  console.log() có thể được sử dụng để gỡ lỗi,  console.assert() có thể được sử dụng  nếu bạn muốn đưa ra một xác nhận và  console.error() có thể được sử dụng trong các tình huống lỗi.

Plugin trình chỉnh sửa mã

Có nhiều trình soạn thảo có các plugin kẻ nói dối có thể tải xuống cũng có thể được sử dụng để sửa các cảnh báo và lỗi trong mã JavaScript của bạn. Atom là một IDE nguồn mở phổ biến có các bổ trợ cho mã linting. Các nhà phát triển có thể cài đặt các plugin lint, jslint và linter-jshint để lint mã nguồn của họ. Các plugin này đưa ra các cảnh báo và lỗi xuất hiện trong mã trong một bảng riêng biệt ở dưới cùng của cửa sổ phát triển. Dưới đây là ảnh chụp nhanh của IDE IDE nơi nó đang hiển thị các cảnh báo trong mã nguồn. Atom IDE có thể được tải xuống từ  đây .

Linters được sử dụng để đảm bảo rằng mã có chất lượng tốt hơn, được căn chỉnh chính xác và không có lỗi trong mã. Các công cụ cho JavaScript cũng là công cụ duy trì chất lượng mã, bất kể kích thước của tệp JavaScript của bạn. Linters có thể được tùy chỉnh theo các mức báo cáo lỗi / cảnh báo khác nhau. Một số công cụ được sử dụng rộng rãi cho JavaScript là  JSHint  và  ESLint .

Giải quyết các vấn đề chung về JavaScript

Ngoài các vấn đề JavaScript mà chúng tôi đã thảo luận cho đến nay, có nhiều vấn đề chung mà các nhà phát triển cần giải quyết. Một số vấn đề phổ biến là:

  • Vỏ / chính tả không chính xác đang được sử dụng cho các biến, tên hàm , v.v ... Nhiều nhà phát triển có kinh nghiệm vô tình sử dụng các hàm dựng sẵn với vỏ / viết sai chính tả. Ví dụ, bạn có thể sử dụng  getElementByClassName() thay vì getElementsByClassName().
  • Trong khi thực hiện đánh giá mã, người đánh giá cần đảm bảo rằng không có mã nào sau  return câu lệnh vì mã đó là dự phòng (hoặc không thể truy cập được).
  • Chú thích  khác với các bài tập thông thường và bạn cần kiểm tra xem tên thành viên của đối tượng có được phân tách bằng dấu phẩy ( ,) và tên thành viên được phân tách khỏi giá trị của chúng bằng dấu hai chấm ( :).
  • Mặc dù đây là một cách thực hành rất cơ bản, hãy kiểm tra xem dấu chấm phẩy ( ;) có được sử dụng đúng nơi không.

Thực tiễn tốt nhất để phát triển JavaScript

Một số thực tiễn tốt nhất để phát triển JavaScript được đưa ra dưới đây:

  • Luôn luôn có tờ khai ở đầu.
  • Thực hiện theo các quy ước đặt tên thích hợp cho các biến, hàm, v.v.
  • Sử dụng ý kiến ​​nhất quán trong suốt mã.
  • Khai báo các biến cục bộ bằng  var từ khóa.
  • Luôn khởi tạo các biến.
  • Không khai báo các đối tượng String, Number hoặc Boolean.
  • Luôn có trường hợp mặc định trong chuyển đổi ... báo cáo trường hợp.
  • Có một cái nhìn cận cảnh về việc sử dụng các toán tử '=='  và '== ='  . Đảm bảo rằng chúng đang được sử dụng ở đúng nơi.
  • Đặt các tập lệnh ở dưới cùng của trang.

Các khung JavaScript để khắc phục các sự cố tương thích trình duyệt chéo

Một thực tế đã biết là sẽ có các vấn đề tương thích trình duyệt chéo cho ứng dụng web hoặc trang web của bạn, bất kể kích thước hoặc độ phức tạp của nó. Như chúng ta đã thấy từ các điểm được đề cập ở trên, vấn đề tương thích giữa nhiều trình duyệt có thể được phóng to khi JavaScript được sử dụng không đúng cách. Nhưng điều đó không có nghĩa là bạn nên tránh sử dụng JavaScript!

Tồn tại nhiều khung công tác JS tạo điều kiện phát triển các trang web tương thích với nhiều trình duyệt. Một số trong những người nổi tiếng nhất là:

  1. React.js
  2. Góc
  3. Vue.js
  4. Ionic
  5. Ember.js

Các khung này giúp giải quyết vấn đề tương thích trình duyệt chéo cho JavaScript. Chúng cũng giúp các nhà phát triển tạo ra một ứng dụng một trang tương thích trên các trình duyệt khác nhau (Google Chrome, Mozilla Firefox, Safari, v.v.).

Hữu ích 6 Chia sẻ Viết bình luận 0
Đã xem 4155