Fix lỗi không nhân giá trị trong jquery năm 2024
Trong bài viết dưới đây, chúng tôi sẽ giới thiệu và hướng dẫn các bạn một vài bước cơ bản để tạo plugin bằng jQuery. Cho dù bạn là người mới bắt đầu tìm hiểu về lĩnh vực phát triển web hoặc đã có thời gian dài tiếp xúc với JavaScript thì quả thực jQuery là 1 nền tảng framework tuyệt vời và không thể bỏ qua, đặc biệt là những người đến với jQuery từ nền tảng Javascript có sẵn. Chúng ta gần như không thể hiểu được jQuery nếu không nắm rõ CSS Selectors: Trong jQuery thì phần mã CSS selector được bắt đầu bởi đối tượng jQuery $ chính, đây chỉ là tên của function, và nó có đi kèm với tham số – chính là CSS Selector của chúng ta. Và về bản chất thì Selector hoạt động tương tự như các CSS selector thường gặp trong các file style.css. Nhiều người chỉ biết đến ID selector (#) và class selector (.) nhưng chúng chỉ là những đối tượng nhất định thuộc về bộ Selectors: Nếu bạn có thể hiểu được các chi tiết trong biểu đồ trên thì những phần còn lại của jQuery cũng không có gì khó khăn để nắm bắt. Và một khi đã biết được những nguyên tắc cơ bản nhất của quy trình viết plugin jQuery thì hầu như không có ai muốn quay trở về với Javascript. Dưới đây là một số câu hỏi thường gặp khi chúng ta bắt tay vào quá trình viết plugin jQuery:
Đối tượng trong JavaScript: Như tất cả chúng ta đã biết rằng, JavaScript là 1 ngôn ngữ lập trình hướng đối tượng, và nó không phù hợp để mô tả hoặc trình diễn những tính năng của jQuery với những người nào đó chưa từng nghiên cứu về khái niệm đối tượng trong JavaScript. Đặc điểm cơ bản về thiết kế đối tượng trong JavaScript là khi người sử dụng khai báo hoặc khởi tạo 1 function, thì function đó sẽ là 1 class ở chế độ mặc định, và sau đó sẽ được dùng như 1 đối tượng. Bên cạnh đó, chúng ta có thể sử dụng toán tử new để tạo bản copy của cùng class. Và nó chỉ xảy ra khi người dùng thay thế bằng từ khóa class quen thuộc, JavaScript sẽ ưu tiên từ khóa function hơn. Lưu ý rằng class trong JavaScript có thể được sử dụng dưới dạng 1 class đã được kế thừa – inhertited từ class khác (bằng cách thực hiện các prototype inheritance) hoặc được xây dựng chính xác như 1 function từ trong mã nguồn. Nói theo cách ngắn gọn thì trong JavaScript, tất cả đều là đối tượng. Mặt khác, function closures thường được sử dụng với các event trong jQuery. 1 function closure điển hình chính là 1 loại function không có tùy biến hoặc tên bất kỳ, mà đơn giản chỉ là 1 đối tượng của function đó. Các đối tượng chính trong jQuery: Về mặt bản chất, thì các đối tượng chính của jQuery đều được định nghĩa với từ khóa function như 1 đối tượng với tên định danh là $, và chúng còn tương đương với global function, chẳng hạn như window.$. Ví dụ, trong JavaScript khi chúng ta mở rộng một đối tượng window nào đó (phải có sẵn trong trình duyệt từ khâu thiết kế), hoặc nói theo cách khác là gán thêm function member với (.) tới đối tượng window, và cũng có nghĩa rằng chúng ta có thể gọi đối tượng đó bằng window.myobj(); hoặc đơn giản là myobj();. Bởi vì với mỗi function được gắn với object window đều có thể được gọi từ global scope trong toàn bộ script. Còn từ bên trong, các đối tượng của jQuery sẽ được tạo như sau: var jQuery = window.jQuery = window.$ = function(selector, context) { // … // other internal initialization code goes here }; Thuật toán khai báo chính xác này cho phép người dùng dễ dàng chuyển đến các đối tượng jQuery chính qua tên jQuery hoặc ký hiệu $. Các bạn cần biết rằng jQuery, window.jQuery, window.$ hoặc đơn giản chỉ là $ đều có thể được sử dụng thay thế cho nhau, bởi vì quá trình khai báo ở phần đầu của bộ mã, và nó có liên quan đến toàn bộ đối tượng. 1 điểm nữa cần lưu ý là tham số selector và context của jQuery có chức năng hoạt động như 1 object bình thường. Selector thường là chuỗi – string có chức năng lựa chọn 1 số lượng nhất định các element từ DOM – Document Object Model. Hoặc cũng có thể là đối tượng this (self reference). Tham số jQuery selector có thể chấp nhận nhiều giá trị giống nhau trong trường hợp người dùng muốn sử dụng trong quá trình khởi tạo style của CSS. Ví dụ, các bạn hãy tham khảo quá trình gọi đối tượng trong jQuery như sau: // Select an element with id: someId and insert dynamic html into it jQuery(" someId").html("So Bold!");`// Exactly the same as above, but using $ $(" someId").html("So Bold!");`Rất ngắn gọn và đơn giản, các bạn không còn phải tự viết function document.getElementById vốn rất dễ gây nhầm lẫn. Chỉ với 1 dòng lệnh, jQuery sẽ chọn tất cả các thành phần theo yêu cầu bằng các rà soát toàn bộ DOM và áp dụng “hiệu lực”. Một điểm rất đáng chú ý nữa của jQuery là chế độ tương thích với tất cả các trình duyệt hiện nay. Điểm mấu chốt của plugin jQuery: Tại đây, chúng ta sẽ bắt đầu với ví dụ đơn giản về plugin jQuery khá phổ biến. Cụ thể, khi mới bắt đầu tìm hiểu về 1 ngôn ngữ lập trình hoặc nền tảng framework nào đó thì chúng ta đều phải biết được điểm mấu chốt của vấn đề. Trong thời điểm jQuery chưa xuất hiện, những lập trình viên JavaScript thường có thói quen thực thi các đoạn mã, chức năng quan trọng trong function window.onload như minh họa dưới đây: window.onload = function()
{ }`Thực chất, đoạn mã trên chỉ thực hiện nhiệm vụ ghi đè lên event onload của thẻ trong HTML, hoặc hiểu nôm na rằng đoạn mã của chúng ta chỉ được thực thi khi trang web hoàn tất quá trình tải. Trong nhiều trường hợp thì việc này lại rất khó khăn vì có những trang cần nhiều thời gian để tải hết nội dung, hoặc quá trình tải bị gián đoạn do cấu trúc duyệt dữ liệu khác nhau.Tại đây, chúng ta không muốn compile và thực thi bất kỳ đoạn mã JavaScript nào trên trang đang được tải. Kiến trúc bên trong của jQuery tận dụng tối đa ưu điểm của event window.onload, nhưng trước đó cũng thực hiện việc kiểm tra toàn bộ DOM đã được tải hay chưa, vì quy trình này rất quan trọng. Tuy nhiên, những yếu tố trên lại chưa đủ để jQuery “biết” trang web đã được tải hoàn tất hay chưa, mà chúng ta phải chắc chắn rằng DOM đã được “xây dựng” đầy đủ – thực hiện bằng cách “lắng nghe” tín hiệu DOMContentLoaded trên hầu hết tất cả các trình duyệt. Nhưng thật là may mắn vì chúng ta không cần phải thực hiện công đoạn kiểm tra như trên, jQuery đã đảm nhận toàn bộ việc này. Để hỗ trợ người sử dụng, jQuery đã cung cấp 1 method mới với tên gọi ready mà chúng ta có thể gọi ra từ chính đối tượng chính của jQuery. Cụ thể, khi viết plugin jQuery, các bạn sử dụng function ready này để kiểm tra xem hệ thống đã sẵn sàng để thực thi đoạn mã đó hay chưa. Lưu ý rằng đây không phải mã plugin chính mà là điểm mấu chốt của plugin. Hoặc hiểu nôm na rằng đây là phiên bản jQuery của function window.onload:
|