Từ ý tưởng đến thực hiện - Những gì họ không dạy bạn trực tuyến


Tạ Tấn Tài
3 năm trước
Hữu ích 5 Chia sẻ Viết bình luận 0
Đã xem 6741

Có lẽ tiêu đề hơi quá đáng, nhưng nó thể hiện cảm nhận của tôi về chủ đề đặc biệt này. Tôi không phải là người trực tiếp của Cameron, bất kể đó là gì và cảm thấy thoải mái hơn nhiều sau một API mà bạn không phải lo lắng về thiết kế, đánh dấu, logic, kiểu dáng cũng như cách kết hợp tất cả chúng lại với nhau. Điều đó đã được nói, tôi cảm thấy đó là một lĩnh vực mà tôi phải đối mặt với nỗi sợ hãi của mình, và vì vậy tôi đang thực hiện một số dự án phụ nhỏ trên web.

Một điều mà tôi nhận ra rằng tôi không có ý tưởng nào, đó là cách bạn thực sự có được một ứng dụng web đang chạy . Tôi không có nghĩa là bắt đầu một máy chủ, hoặc truy xuất một trang web, hoặc thậm chí dòng javascript nào được thực thi đầu tiên. Tôi đang nói về cách bạn đặt tất cả các tập lệnh và bit mã vào đúng vị trí mà trình duyệt biết khi nào nên chạy chúng và bạn không tạo ra một mớ hỗn độn khủng khiếp trong quy trình.

Điều này chỉ có thể được hiển thị bằng ví dụ, vì vậy đây là những gì tôi chắc chắn bắt đầu với:

<html>
  <head>
    <script src="//code.jquery.com/jquery-3.1.1.min.js" />
  </head>
  <body>
    <div id="data" />
    <script type="text/javascript">
      $.ajax("/get_data",
        success: function(data) {
          $("data").text = data
        }
      );
    </script>
  </body>
</html>

Có, tôi đang sử dụng jQuery và không có ví dụ mã nào có lẽ không hoàn toàn chính xác. Tôi vẫn thấy có một khoảng thời gian thử nghiệm hợp lý có liên quan trước cả những điều đơn giản như cuộc gọi AJAX để nhận một số dữ liệu từ API đang hoạt động. Trong mọi trường hợp, ở đây chúng tôi có một số Javascript nội tuyến và mọi thứ thường hoạt động như mong đợi. Nhưng tất nhiên, chúng ta biết rằng Javascript nội tuyến không phải là cách để một ứng dụng hoạt động, có thể bảo trì, vì vậy ngay khi chúng ta có một cái gì đó hoạt động, chúng ta nên kéo nó vào tập lệnh bên ngoài của chính nó.

<html>
  <head>
    <script src="//code.jquery.com/jquery-3.1.1.min.js" />
    <script src="/javascripts/main.js" />
  </head>
  <body>
    <div id="data" />
  </body>
</html>

Uh-oh, nó ngừng hoạt động. Mã trong main.js giống hệt như những gì chúng ta đã có trong tài liệu trước đây nhưng nó không còn hoạt động. Đã, chúng tôi vượt xa những gì tôi đã thấy trong hầu hết các khóa học trực tuyến Javascript mới bắt đầu, tuy nhiên điều này có vẻ như là một vấn đề khá cơ bản. Tất nhiên, lý do là tập lệnh đã được tải và thực thi theo thứ tự như các thẻ tập lệnh và trước các phần tử HTML (bao gồm cả div chúng tôi đang thêm dữ liệu vào) đã có trong DOM.

Vì vậy, tự nhiên chúng tôi thực hiện jQuery và khắc phục sự cố, bằng cách chỉ thực thi mã khi tài liệu đã sẵn sàng và trình xử lý sự kiện có liên quan được kích hoạt:

$(
  $.ajax("/get_data",
    success: function(data) {
      $("data").text = data
    }
  );
);

Nhưng bây giờ chúng tôi có một vấn đề khác. Chúng tôi đã nghe từ các nhà phát triển có kinh nghiệm hơn rằng sử dụng jQuery được tán thành và mặc dù việc tìm ra khi tài liệu được tải có vẻ đơn giản để làm mà không cần sử dụng thư viện, chúng tôi không chắc chắn rằng có một cách làm trình duyệt chéo duy nhất nó đáng tin cậy Vì vậy, nó là jQuery.

Trên thực tế có một cách khác, được giải thích tốt ở đây và dường như được hỗ trợ tốt mà không cần dựa vào các chức năng Javascript. Bạn chỉ cần thả từ khóa của deferter vào thẻ script mà bạn muốn thực thi sau khi phân tích cú pháp trang và bây giờ nó sẽ chỉ chạy vào đúng thời điểm cho các mục đích của chúng tôi:

<html>
  <head>
    <script src="/javascripts/main.js" defer/>
  </head>
...

Tôi chưa bao giờ thấy điều đó trước đây, nhưng nó rất đơn giản. Rất cám ơn đồng nghiệp Maria và Thomas đã làm sáng tỏ một chút về góc này của thế giới trình duyệt cho tôi. Tất nhiên, họ cũng đề cập chính xác rằng sử dụng jQuery không phải là một tội lỗi không thể tha thứ, cũng không phải là một số trường hợp đoạn mã Javascript nội tuyến (nhìn vào một số trang web yêu thích của bạn, ngay cả những người từ những người khổng lồ công nghệ đáng kính và bạn chắc chắn sẽ thấy một số). Nhưng đối với một người mới phát triển web, đôi khi rất khó để nhìn xa hơn Hackernews và tìm ra những gì bạn đang làm.

Bước sang thử thách web tiếp theo - thành thạo D3!

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