jQuery – Bài 3: Khái niệm cơ bản

Trước khi bắt đầu tìm hiểu về Cú pháp jQuery, chúng ta hãy tìm hiểu nhanh về các khái niệm cơ bản của Javascript. Điều này là do, jQuery là một khung được xây dựng bằng các khả năng của JavaScript. Vì vậy, trong khi thực hiện trong jQuery, bạn có thể sử dụng tất cả các chức năng và khả năng khác có sẵn trong JavaScript. Vì vậy, hãy nhanh chóng xem xét các khái niệm cơ bản nhất nhưng được sử dụng thường xuyên nhất trong jQuery.

Chuỗi(String)

Chuỗi trong JavaScript (jQuery) là một đối tượng bất biến không chứa ký tự nào, một hoặc nhiều ký tự. Sau đây là các ví dụ hợp lệ của Chuỗi JavaScript –

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

Số(Number)

Các số trong JavaScript là các giá trị IEEE 754 định dạng 64 bit có độ chính xác kép. Chúng là bất biến, giống như các chuỗi. Sau đây là các ví dụ hợp lệ về Số JavaScript –

5350
120.27
0.26

Boolean

Một boolean trong JavaScript (jQuery) có thể là true hoặc false . Nếu một số bằng 0, nó sẽ mặc định là sai. Nếu một chuỗi rỗng mặc định là sai.

Sau đây là các ví dụ hợp lệ của JavaScript Boolean –

Các đối tượng (Objects)

JavaScript (jQuery) hỗ trợ rất tốt khái niệm Object. Bạn có thể tạo một đối tượng bằng cách sử dụng đối tượng theo nghĩa đen như sau –

Bạn có thể viết và đọc các thuộc tính của một đối tượng bằng cách sử dụng ký hiệu dấu chấm như sau –

Mảng (Array)

Bạn có thể định nghĩa mảng bằng cách sử dụng ký tự mảng như sau –

Một mảng có thuộc tính độ dài hữu ích cho phép lặp –

Chức năng (function – method)

Một hàm trong JavaScript (jQuery) có thể được đặt tên hoặc ẩn danh. Một hàm được đặt tên có thể được định nghĩa bằng cách sử dụng từ khóa hàm như sau –

Một hàm ẩn danh có thể được định nghĩa theo cách tương tự như một hàm bình thường nhưng nó sẽ không có bất kỳ tên nào.

Một hàm ẩn danh có thể được gán cho một biến hoặc được truyền cho một phương thức như hình bên dưới.

var handler = function (){
   // do some stuff here
}

JQuery sử dụng các hàm ẩn danh rất thường xuyên như sau :

$(document).ready(function(){
   // do some stuff here
});

Đối số

Đối số biến JavaScript (jQuery) là một loại mảng có thuộc tính độ dài . Ví dụ sau giải thích nó rất rõ ràng :

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

Đối tượng đối số cũng có thuộc tính callee , thuộc tính này đề cập đến chức năng mà bạn đang sử dụng. Ví dụ :

function func() {
   return arguments.callee;
}

func();                // ==> func

Context

JavaScript (jQuery) từ khóa nổi tiếng này luôn đề cập đến bối cảnh hiện tại. Trong một chức năng , bối cảnh này có thể thay đổi, tùy thuộc vào cách chức năng được gọi :

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

Bạn có thể chỉ định ngữ cảnh cho lệnh gọi hàm bằng cách sử dụng các phương thức call() và apply() tích hợp sẵn trong hàm .

Sự khác biệt giữa chúng là cách chúng truyền đối số. Cuộc gọi chuyển tất cả các đối số dưới dạng đối số cho hàm, trong khi áp dụng chấp nhận một mảng làm đối số.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

Phạm vi của biến

Phạm vi của một biến là vùng chương trình của bạn mà nó được xác định. Biến JavaScript (jQuery) sẽ chỉ có hai phạm vi.

• Biến toàn cục − Một biến toàn cục có phạm vi toàn cầu, nghĩa là nó được xác định ở mọi nơi trong mã JavaScript của bạn.
• Biến cục bộ − Một biến cục bộ sẽ chỉ hiển thị trong một hàm mà nó được xác định. Các tham số chức năng luôn là cục bộ của chức năng đó.

Trong phần thân của một hàm, một biến cục bộ được ưu tiên hơn một biến toàn cục có cùng tên:

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

Callback (Gọi lại)

Gọi lại là một hàm JavaScript (jQuery) đơn giản được truyền cho một số phương thức dưới dạng đối số hoặc tùy chọn. Một số cuộc gọi lại chỉ là sự kiện, được gọi để cung cấp cho người dùng cơ hội phản ứng khi một trạng thái nhất định được kích hoạt.

Ví dụ, hệ thống sự kiện của jQuery sử dụng các cuộc gọi lại như vậy ở mọi nơi:

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

Hầu hết các cuộc gọi lại cung cấp đối số và bối cảnh. Trong ví dụ về trình xử lý sự kiện, lệnh gọi lại được gọi với một đối số, một Sự kiện.

Một số cuộc gọi lại được yêu cầu để trả lại một cái gì đó, một số khác làm cho giá trị trả lại đó là tùy chọn. Để ngăn việc gửi biểu mẫu, trình xử lý sự kiện gửi có thể trả về false như sau :

$("#myform").submit(function() {
   return false;
});

Closures

Các bao đóng JavaScript (jQuery) được tạo bất cứ khi nào một biến được xác định bên ngoài phạm vi hiện tại được truy cập từ bên trong một số phạm vi bên trong.

Ví dụ sau cho thấy cách bộ đếm biến có thể nhìn thấy bên trong các hàm tạo, tăng và in, nhưng không ở bên ngoài chúng:

function create() {
   var counter = 0;

   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

Mẫu này cho phép bạn tạo các đối tượng với các phương thức hoạt động trên dữ liệu không hiển thị với thế giới bên ngoài. Cần lưu ý rằng ẩn dữ liệu là cơ sở của lập trình hướng đối tượng.

Proxy Pattern

Proxy là một đối tượng có thể được sử dụng để kiểm soát quyền truy cập vào một đối tượng khác. Nó thực hiện cùng một giao diện với đối tượng khác này và chuyển bất kỳ lời gọi phương thức nào tới nó. Đối tượng khác này thường được gọi là chủ thể thực sự.

Một proxy có thể được khởi tạo thay cho chủ đề thực này và cho phép nó được truy cập từ xa. Chúng ta có thể lưu phương thức setArray của jQuery trong một bao đóng và ghi đè lên nó như sau:

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };

})();

Ở trên kết thúc mã của nó trong một hàm để ẩn biến được ủy quyền . Sau đó, proxy ghi lại tất cả các cuộc gọi đến phương thức và ủy quyền cuộc gọi cho phương thức ban đầu. Việc sử dụng apply(this, đối số) đảm bảo rằng người gọi sẽ không thể nhận thấy sự khác biệt giữa phương thức ban đầu và phương thức được ủy quyền.

Built-in Functions

JavaScript đi kèm với một bộ chức năng tích hợp hữu ích. Các phương thức này có thể được sử dụng để thao tác Chuỗi, Số và Ngày.

Sau đây là các hàm JavaScript quan trọng –

The Document Object Model

The Document Object Model là một cấu trúc cây gồm nhiều thành phần khác nhau của HTML như sau:

<html>
<head>
   <title>The DOM Example</title>
</head>
<body>
   <div>
      <p>This is a paragraph.</p>
      <p>This is second paragraph.</p>
      <p>This is third paragraph.</p>
   </div>
</body>
</html>

Sau đây là những điểm quan trọng về cấu trúc cây trên –

• <html> là tổ tiên của tất cả các phần tử khác; nói cách khác, tất cả các phần tử khác đều là hậu duệ của <html>.
• Các phần tử <head> và <body> không chỉ là phần tử con mà còn là phần tử con của <html>.
• Tương tự như vậy, ngoài việc là tổ tiên của <head> và <body>, <html> còn là cha của chúng.
• Các phần tử <p> là con (và hậu duệ) của <div>, hậu duệ của <body> và <html> và là anh chị em của các phần tử <p> khác.

Trong khi tìm hiểu các khái niệm jQuery, sẽ rất hữu ích nếu bạn hiểu về DOM