Những điều cơ bản
JavaScript dành cho người mới. Hiện JavaScript đang chạy trên trang này. Hãy chơi xung quanh nó một chút. Vì đơn giản, tôi sẽ cho rằng bạn đang sử dụng Google Chrome để đọc trang này (nếu bạn không làm vậy, có lẽ cả hai chúng tôi sẽ dễ dàng hơn nếu bạn theo dõi cùng với Chrome).
Đầu tiên, nhấp chuột phải vào bất kỳ đâu trên màn hình và nhấn Kiểm tra phần tử , sau đó nhấp vào tab Bảng điều khiển . Bạn sẽ thấy một thứ trông như thế này:
Đây là một giao diện điều khiển, còn được gọi là “dòng lệnh” hoặc “thiết bị đầu cuối”. Về cơ bản, đó là một cách để gõ từng thứ một vào máy tính và ngay lập tức máy tính trả lời. Chúng siêu hữu ích như một công cụ học tập (tôi vẫn sử dụng bảng điều khiển gần như hàng ngày mà tôi đang viết mã).
Giao diện điều khiển thực hiện một số thứ khá thú vị. Ở đây tôi đã bắt đầu nhập một cái gì đó và bảng điều khiển đang giúp tôi bằng cách cung cấp cho tôi danh sách tất cả những thứ có thể mà tôi có thể tiếp tục nhập! Một điều khác bạn có thể làm là gõ 1 + 1vào bảng điều khiển, sau đó nhấn Enterphím và xem điều gì sẽ xảy ra.
Sử dụng bảng điều khiển là một phần rất quan trọng trong việc học JavaScript. Nếu bạn không biết liệu điều gì đó có hoạt động hay không hoặc lệnh dành cho thứ gì đó, hãy truy cập bảng điều khiển và tìm ra nó! Đây là một ví dụ:
Chuỗi
Vì tôi là một con mèo nên tôi muốn thay thế mọi trường hợp của từ dogtrên Internet bằng those blasted dogs. Đầu tiên, hãy vào bảng điều khiển của bạn và nhập một vài câu có chứa từ đó dogít nhất một lần. Trong JavaScript, một loạt các chữ cái, số, từ hoặc bất cứ thứ gì khác được gọi là Chuỗi (như trong một chuỗi ký tự). Các chuỗi phải bắt đầu VÀ kết thúc bằng dấu ngoặc kép. Đơn 'hay đôi "đều được, chỉ cần đảm bảo rằng bạn sử dụng giống nhau ở phần đầu và phần cuối của bạn.
Nhìn thấy thông báo lỗi khó chịu? Đừng lo lắng – bạn đã không vi phạm bất kỳ luật nào. SyntaxError ILLEGAL chỉ là cách phát ra âm thanh khi rô bốt báo cho bạn biết rằng chương trình của bạn có vấn đề. Hai câu đầu tiên có dấu ngoặc kép ở đầu và cuối, nhưng khi tôi kết hợp dấu ngoặc kép đơn và kép, điều đó khiến tôi cảm thấy khó chịu.
Được rồi, để sửa một trong những câu này (bằng cách thay thế dogbằng phiên bản nâng cao của chúng ta), trước tiên chúng ta phải lưu câu gốc để có thể gọi nó lên sau khi thực hiện phép thuật thay thế. Chú ý làm thế nào mà chuỗi được lặp lại bằng màu đỏ khi chúng ta nhập nó vào bảng điều khiển? Điều này là do chúng tôi đã không yêu cầu nó lưu câu ở bất kỳ đâu nên nó chỉ trả lại ngay cho nó (hoặc nó trả lại cho chúng tôi Lỗi nếu chúng tôi làm sai điều gì đó).
Giá trị và biến
Giá trị là thành phần đơn giản nhất trong JavaScript. 1là một giá trị, truelà một giá trị, "hello"là một giá trị, function() {}là một giá trị, danh sách tiếp tục! Có một số loại giá trị khác nhau trong JavaScript nhưng chúng ta không cần phải xem qua tất cả chúng ngay lập tức – bạn sẽ học chúng một cách tự nhiên khi bạn viết mã nhiều hơn!
Để lưu trữ các giá trị, chúng tôi sử dụng những thứ gọi là biến . Từ ‘biến’ có nghĩa là ‘có thể thay đổi’ và được sử dụng vì các biến có thể lưu trữ nhiều loại giá trị khác nhau và có thể thay đổi giá trị của chúng nhiều lần. Chúng khá giống hộp thư. Chúng tôi đặt một cái gì đó vào một biến, như câu của chúng tôi, và sau đó cung cấp cho biến một địa chỉ mà chúng tôi có thể sử dụng để tra cứu câu sau này. Trong thực tế, các hộp thư phải có số PO Box nhưng trong JavaScript, bạn thường chỉ sử dụng chữ thường hoặc số mà không có bất kỳ khoảng trắng nào.
varlà viết tắt của biến và =phương tiện lưu trữ thứ ở bên phải trong thứ ở bên trái . Ngoài ra, như bạn có thể thấy, bây giờ chúng ta đang lưu trữ câu của mình trong một biến, bảng điều khiển không chỉ trả lại câu của chúng ta ngay lập tức, mà thay vào đó cung cấp cho chúng ta undefinedđiều đó có nghĩa là không có gì để trả lại .
Nếu bạn chỉ cần nhập một tên biến vào bảng điều khiển, nó sẽ in ra giá trị được lưu trữ trong biến đó. Một lưu ý về các biến là theo mặc định, chúng sẽ biến mất khi bạn chuyển sang một trang khác. Ví dụ: nếu tôi nhấn nút Làm mới trong Chrome, dogSentencebiến của tôi sẽ bị xóa và giống như nó chưa từng tồn tại. Nhưng đừng lo lắng về điều này quá nhiều vào lúc này – bạn có thể chỉ cần nhấn vào mũi tên lên hoặc xuống trên bàn phím của mình khi ở trong bảng điều khiển để xem qua mọi thứ bạn đã nhập gần đây.
Chức năng
Bây giờ chúng ta có câu của chúng ta được lưu trữ trong một biến, hãy thay đổi một từ được lưu trữ trong đó! Chúng ta có thể làm điều này bằng cách thực hiện một chức năng . Chức năng là một loại giá trị phục vụ một chức năng cụ thể (mục đích hoặc hành động của AKA) cho chúng ta. Gọi họ là “hành động” nghe có vẻ kỳ lạ, tôi đoán vì vậy họ đã sử dụng từ “chức năng” để thay thế.
JavaScript có một chức năng được gọi là replacethực hiện chính xác những gì chúng ta muốn! Các hàm nhận vào bất kỳ số lượng giá trị nào trong dấu ngoặc của chúng (không, một hoặc nhiều) và trả về không có gì ( undefined) hoặc chuỗi đã thay đổi. Các replacechức năng có sẵn để sử dụng trên bất kỳ chuỗi và mất trong hai giá trị:. Các nhân vật để đưa ra và các nhân vật để trao đổi trong Nó được gây nhầm lẫn để mô tả những điều này vì vậy đây là một ví dụ trực quan:
Để ý xem giá trị của dogSentencecó giống nhau ngay cả sau khi chúng ta chạy replacetrên nó không? Điều này là do replacehàm, (và hầu hết các hàm JavaScript cho vấn đề đó) nhận giá trị mà chúng tôi cung cấp cho nó và trả về một giá trị mới , mà không sửa đổi giá trị mà chúng tôi đã chuyển vào. Vì chúng tôi không lưu trữ kết quả (không có =ở bên trái bên của hàm thay thế) nó chỉ in ra giá trị trả về trong bảng điều khiển của chúng tôi.
“Thư viện chuẩn”
Bạn có thể tự hỏi những chức năng nào khác có sẵn trong JavaScript. Câu trả lời: MỘT TẤN. Có rất nhiều thư viện tiêu chuẩn được tích hợp sẵn mà bạn có thể tìm hiểu tại MDN (Một trang web do Mozilla điều hành có rất nhiều thông tin tiện lợi về công nghệ web). Ví dụ ở đây là trang MDN trên đối tượng Math của JavaScript .
JavaScript của bên thứ ba
Ngoài ra còn có rất nhiều mã JavaScript có sẵn mà không được tích hợp sẵn . JavaScript từ các bên thứ ba thường được gọi là “thư viện” hoặc “plugin”. Một trong những mục yêu thích của tôi có tên là Underscore.js . Hãy đi lấy nó và tải nó vào trang của chúng tôi! Đầu tiên, hãy truy cập vào trang Underscore, http://underscorejs.org/ , nhấp vào liên kết tải xuống (Tôi thường sử dụng các phiên bản phát triển vì chúng dễ đọc hơn nhưng cả hai sẽ cung cấp cho bạn chức năng cơ bản giống nhau), và sau đó sao chép tất cả mã vào khay nhớ tạm của bạn (bạn có thể sử dụng Chọn Tất cả từ menu Chỉnh sửa để chọn mọi thứ). Sau đó, dán nó vào bảng điều khiển của bạn và nhấn enter. Bây giờ trình duyệt của bạn có một biến mới trong đó:_. Dấu gạch dưới cung cấp cho bạn rất nhiều chức năng hữu ích để chơi cùng. Chúng ta sẽ tìm hiểu thêm về cách sử dụng chúng sau.
Tạo các chức năng mới
Bạn không bị giới hạn trong việc sử dụng các chức năng của người khác – bạn cũng có thể tự viết chúng. Nó khá dễ dàng! Hãy tạo một hàm có tên là makeMoreExcitingthêm một loạt các dấu chấm than vào cuối một chuỗi.
function makeMoreExciting(string) {
return string + '!!!!'
}Trong đầu tôi đọc nó thành tiếng như sau: “có một chức năng gọi là ‘làm cho thú vị hơn’ nhận vào một chuỗi và trả về một bản sao mới của chuỗi đó có một loạt dấu chấm than ở cuối”. Đây là cách chúng tôi viết điều này trong bảng điều khiển theo cách thủ công nếu chúng tôi không sử dụng một hàm:
Biểu thức string + '!!!!'trả về một chuỗi mới và biến được gọi của chúng tôi stringvẫn giống như trước (vì chúng tôi chưa bao giờ cập nhật nó thành bất kỳ thứ gì khác với =).
Hãy sử dụng chức năng của chúng tôi thay vì làm thủ công. Đầu tiên, dán hàm vào bảng điều khiển và sau đó gọi hàm bằng cách chuyển vào một chuỗi:
Bạn cũng có thể gọi hàm tương tự bằng cách chuyển vào một biến trỏ đến một chuỗi (trong ví dụ trên, chúng tôi chỉ nhập chuỗi thẳng vào đó dưới dạng một giá trị thay vì lưu nó vào một biến trước):
Dòng makeMoreExciting(sentence)tương đương với câu nói sentence + '!!!!'. Điều gì sẽ xảy ra nếu chúng ta muốn sửa đổi tại chỗ (hay còn gọi là cập nhật) giá trị của câu? Chỉ cần lưu giá trị trả về của hàm vào sentencebiến của chúng ta :
var sentence = "time for a nap"
sentence = makeMoreExciting(sentence)Bây giờ sentencesẽ có dấu chấm than trong đó! Lưu ý rằng bạn chỉ phải sử dụng varkhi bạn đang khởi tạo một biến – lần đầu tiên bạn sử dụng nó. Sau đó, bạn không nên sử dụng vartrừ khi bạn muốn khởi tạo lại (đặt lại / xóa / trống) biến.
Điều gì sẽ xảy ra nếu chúng ta lấy ra returncâu lệnh trong hàm của mình?
Tại sao sentencetrống rỗng? Bởi vì các hàm trả về undefinedtheo mặc định! Bạn có thể chọn trả về một giá trị bằng cách nhập returnmột thứ gì đó. Các hàm phải nhận một giá trị và, nếu chúng thay đổi giá trị hoặc tạo ra một giá trị mới được cho là sẽ được sử dụng sau này, returnmột giá trị (thực tế thú vị: một thuật ngữ ưa thích cho kiểu này là lập trình hàm ). Đây là một hàm khác không trả về bất kỳ thứ gì mà thay vào đó sử dụng một phương thức khác để hiển thị cho chúng ta kết quả:
function yellIt(string) {
string = string.toUpperCase()
string = makeMoreExciting(string)
console.log(string)
}Hàm này yellIt, sử dụng hàm trước đây của chúng ta makeMoreExcitingcũng như phương thức String tích hợp sẵn của toUpperCase . Các phương thức chỉ là tên của một hàm khi nó thuộc về một cái gì đó – trong trường hợp toUpperCasenày là một hàm thuộc về Stringvì vậy chúng ta có thể gọi nó là một phương thức hoặc một hàm. makeMoreExcitingmặt khác không thuộc về bất kỳ ai nên sẽ không chính xác về mặt kỹ thuật nếu coi nó như một phương pháp (tôi biết là khó hiểu).
Dòng cuối cùng của hàm là một chức năng tích hợp khác chỉ đơn giản là lấy bất kỳ giá trị nào bạn cung cấp và in chúng ra bảng điều khiển.
Vậy là có gì đó không ổn với yellItchức năng trên ? Nó phụ thuộc! Đây là hai loại chức năng chính:
- các hàm sửa đổi hoặc tạo giá trị và trả về
- các hàm nhận giá trị và thực hiện một số hành động không thể trả về
console.loglà một ví dụ về loại hàm thứ hai: nó in mọi thứ ra bảng điều khiển của bạn – một hành động mà bạn có thể nhìn thấy bằng mắt nhưng không thể được biểu thị dưới dạng giá trị JavaScript. Quy tắc chung của riêng tôi là cố gắng giữ hai loại hàm tách biệt với nhau, vì vậy đây là cách tôi viết lại yellIthàm:
function yellIt(string) {
string = string.toUpperCase()
return makeMoreExciting(string)
}
console.log(yellIt("i fear no human"))Cách này yellIttrở nên chung chung hơn , có nghĩa là nó chỉ thực hiện một hoặc hai việc nhỏ đơn giản và không biết gì về việc tự in ra bảng điều khiển – phần đó luôn có thể được lập trình sau đó, bên ngoài định nghĩa hàm.
JavaScript dành cho người mới
Vòng lặp
Bây giờ chúng ta đã có một số kỹ năng cơ bản dưới thắt lưng của mình ( Ghi chú của tác giả: mèo có đeo thắt lưng không? ), Chúng ta có thể bắt đầu lười biếng. Gì?! Vâng, đúng vậy: lập trình là lười biếng. Larry Wall, người phát minh ra ngôn ngữ lập trình Perl, gọi sự lười biếng là đức tính quan trọng nhất của một lập trình viên giỏi. Nếu máy tính không tồn tại, bạn sẽ phải làm tất cả các công việc tẻ nhạt bằng tay, nhưng nếu bạn học lập trình, bạn có thể nằm phơi nắng cả ngày trong khi máy tính ở đâu đó chạy chương trình cho bạn. Đó là một lối sống vinh quang đầy thư giãn!
function logANumber(someNumber) {
console.log(someNumber)
}
_.times(10, logANumber)Vòng lặp là một trong những cách quan trọng nhất để khai thác sức mạnh của máy tính. Nhớ Underscore.jstừ trước? Đảm bảo rằng bạn đã tải nó vào trang (hãy nhớ: bạn có thể chỉ cần nhấn vào mũi tên lên trên bàn phím vài lần rồi nhấn Enterđể tải lại nếu cần) và thử sao chép / dán nó vào bảng điều khiển của bạn:
Mã này sử dụng lần phương pháp gạch mà mất trong 1 số và 1 chức năng và sau đó bắt đầu từ 0 và 10 bước đếm lên 1, gọi hàm với số lượng mỗi bước của con đường.
Nếu chúng ta viết thủ công những gì timesđang làm trong đoạn mã trên, nó sẽ trông như thế này:
logANumber(0)
logANumber(1)
logANumber(2)
logANumber(3)
logANumber(4)
logANumber(5)
logANumber(6)
logANumber(7)
logANumber(8)
logANumber(9)Nhưng mèo từ chối làm những công việc chân tay không cần thiết như thế này nên chúng ta phải luôn tự hỏi mình, “mình đang làm việc này theo cách lười biếng nhất có thể sao?” .
Vì vậy, tại sao điều này được gọi là lặp lại? Hãy nghĩ về nó như thế này: Nếu chúng ta viết ra một danh sách 10 số (từ 0 đến 9) bằng cách sử dụng Mảng JavaScript, nó sẽ trông như thế này:
var zeroThroughTen = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]Những gì timesthực sự làm là truy cập từng số và lặp lại một nhiệm vụ: trong ví dụ trên, nhiệm vụ là gọi logANumberhàm với số hiện tại. Việc lặp lại các tác vụ theo cách này được gọi là lặp qua Mảng.
Mảng
Tôi đã đề cập đến những điều này một vài lần nhưng chúng ta hãy dành một phút để tìm hiểu về chúng. Hãy tưởng tượng bạn cần theo dõi tất cả bạn bè của mình. Chà, một Mảng sẽ hoạt động tốt. Hãy nghĩ về một Mảng giống như một danh sách được sắp xếp mà bạn có thể chứa hàng tấn nội dung.
Đây là cách bạn tạo một:
var myCatFriends = ["bill", "tabby", "ceiling"]Ngọt! Bây giờ bạn đã có một danh sách những người bạn mèo của mình.
Các phần tử (đó là những gì bạn gọi là một mục trong một mảng) được lưu trữ trong mảng bắt đầu từ 0 và được đếm từ đó. Vì vậy, myCatFriends[0]trả lại billvà myCatFriends[1]trả lại tabby… vv vv
Để đưa bạn bè ra khỏi Mảng hoàn toàn mới của bạn, bạn chỉ có thể truy cập trực tiếp vào một phần tử như sau:
console.log(myCatFriends[0])
Nếu bạn đã thực hiện một thương hiệu mới bạn mèo ở câu lạc bộ mèo hippest đêm khác và bạn muốn thêm chúng vào danh sách của bạn nó là siêu đơn giản: myCatFriends.push("super hip cat").
Để kiểm tra xem con mèo mới có lọt vào mảng của bạn hay không, bạn có thể sử dụng .length:
Chú ý pushchiều dài đã trả về như thế nào ? Tiện dụng! Cũng lưu ý rằng các mảng sẽ luôn duy trì thứ tự , có nghĩa là chúng sẽ nhớ thứ tự mà bạn đã thêm hoặc xác định những thứ. Không phải mọi thứ trong JavaScript đều duy trì thứ tự, vì vậy hãy nhớ thuộc tính đặc biệt này của Mảng!
JavaScript dành cho người mới
Đối tượng
Mảng tốt cho danh sách, nhưng đối với các tác vụ khác, chúng có thể khó làm việc. Hãy xem xét dàn bạn mèo của chúng ta. Điều gì xảy ra nếu bạn cũng muốn lưu trữ nhiều hơn chỉ tên?
var myCatFriends = ["bill", "tabby", "ceiling"]
var lastNames = ["the cat", "cat", "cat"]
var addresses = ["The Alley", "Grandmas House", "Attic"]
Đôi khi, thật tuyệt khi có tất cả các địa chỉ hoặc tên trong một biến. Nhưng đôi khi bạn nghĩ đến một con mèo, giả sử Bill, và bạn chỉ muốn tra cứu địa chỉ của con mèo đó. Với mảng, bạn phải mất rất nhiều công sức vì bạn không thể chỉ nói ‘này mảng, cho tôi địa chỉ của Bill’ vì ‘Bill’ nằm trong một mảng và địa chỉ của anh ấy nằm trong một mảng hoàn toàn khác.
Điều này có thể khó vì nếu mảng của chúng ta thay đổi và chúng ta thêm một con mèo mới vào đầu, chúng ta cũng sẽ phải cập nhật billsPositionbiến của mình để trỏ đến vị trí mới của thông tin Bill trong mảng! Đây là một cách dễ duy trì hơn để lưu trữ thông tin như thế này bằng cách sử dụng các đối tượng:
var firstCat = { name: "bill", lastName: "the cat", address: "The Alley" }
var secondCat = { name: "tabby", lastName: "cat", address: "Grandmas House" }
var thirdCat = { name: "ceiling", lastName: "cat", address: "Attic" }
Tại sao chúng ta làm theo cách này? Bởi vì bây giờ chúng ta có một biến cho mỗi con mèo mà chúng ta có thể sử dụng để lấy các giá trị của con mèo đó theo cách thuận tiện và dễ đọc hơn.
Bạn có thể nghĩ về các Đối tượng giống như các phím trên một chùm chìa khóa. Mỗi cái dành cho một cánh cửa cụ thể và nếu bạn có nhãn đẹp trên chìa khóa của mình, bạn có thể mở cửa rất nhanh. Trên thực tế, những thứ ở bên trái :được gọi là khóa (còn được gọi là thuộc tính ) và những thứ ở bên phải là giá trị .
// an object with a single key 'name' and single value 'bill'
{ name: 'bill' }
Vậy tại sao bạn lại sử dụng mảng nếu bạn chỉ có thể đưa dữ liệu của mình vào các đối tượng? Bởi vì các đối tượng không nhớ thứ tự của các phím mà bạn đặt. Bạn có thể nhập một đối tượng như thế này:
{ date: "10/20/2012", diary: "slept a bit today", name: "Charles" }
Nhưng máy tính có thể trả lại nó cho bạn như thế này:
{ diary: "slept a bit today", name: "Charles", date: "10/20/2012" }
Hay như thế này!
{ name: "Charles", diary: "slept a bit today", date: "10/20/2012" }
Vì vậy, bạn không bao giờ có thể tin tưởng vào thứ tự của các khóa trong các đối tượng. Nếu bạn muốn THỰC SỰ ưa thích, bạn có thể tạo một mảng chứa đầy các đối tượng hoặc một đối tượng chứa đầy mảng!
var moodLog = [
{
date: "10/20/2012",
mood: "catnipped"
},
{
date: "10/21/2012",
mood: "nonplussed"
},
{
date: "10/22/2012",
mood: "purring"
}
]
// ordered from least to most favorite
var favorites = {
treats: ["bird sighting", "belly rub", "catnip"],
napSpots: ["couch", "planter box", "human face"]
}
Khi bạn kết hợp những thứ khác nhau như vậy, bạn đang tạo cấu trúc dữ liệu , giống như Legos!
JavaScript dành cho người mới
Cuộc gọi lại
Gọi lại không thực sự là một tính năng của JavaScript giống như Objecthoặc Array, mà thay vào đó chỉ là một cách nhất định để sử dụng các hàm. Để hiểu tại sao các lệnh gọi lại hữu ích, trước tiên bạn phải tìm hiểu về lập trình không đồng bộ (thường được viết tắt là không đồng bộ). Mã không đồng bộ theo định nghĩa là mã được viết theo cách không đồng bộ. Mã đồng bộ dễ hiểu và dễ viết. Đây là một ví dụ để minh họa:
var photo = download('http://foo-chan.com/images/sp.jpg')
uploadPhotoTweet(photo, '@maxogden')
Mã giả đồng bộ này tải xuống một bức ảnh mèo đáng yêu và sau đó tải ảnh lên twitter và tweet ảnh tại @maxogden. Khá đơn giản!
( Ghi chú của tác giả: Tôi @maxogden vui vẻ chấp nhận các tweet ảnh mèo ngẫu nhiên )
Mã này là đồng bộ vì để ảnh được tải lên tweet, quá trình tải ảnh phải được hoàn tất. Điều này có nghĩa là dòng 2 không thể chạy cho đến khi nhiệm vụ trên dòng 1 hoàn thành. Nếu chúng tôi thực sự triển khai mã giả này, chúng tôi muốn đảm bảo rằng quá trình downloadthực thi ‘bị chặn’ cho đến khi quá trình tải xuống hoàn tất, có nghĩa là nó sẽ ngăn bất kỳ JavaScript nào khác được thực thi cho đến khi hoàn tất và sau đó khi quá trình tải xuống hoàn tất, nó sẽ bị hủy -chặn thực thi JavaScript và dòng 2 sẽ thực thi.
Mã đồng bộ là tốt cho những thứ diễn ra nhanh chóng, nhưng thật kinh khủng đối với những thứ yêu cầu lưu, tải, tải xuống hoặc tải lên. Điều gì sẽ xảy ra nếu máy chủ bạn đang tải ảnh xuống chậm, hoặc kết nối internet bạn đang sử dụng chậm hoặc máy tính bạn đang chạy mã có quá nhiều tab video mèo youtube đang mở và chạy chậm? Điều đó có nghĩa là có thể mất vài phút chờ đợi trước khi dòng 2 chạy được. Trong khi đó, vì tất cả JavaScript trên trang đang bị chặn chạy trong khi quá trình tải xuống đang diễn ra, trang web sẽ hoàn toàn đóng băng và không phản hồi cho đến khi quá trình tải xuống hoàn tất.
Việc chặn thực thi phải được tránh bằng mọi giá, đặc biệt khi làm như vậy khiến chương trình của bạn bị đóng băng hoặc không phản hồi. Giả sử bức ảnh trên mất một giây để tải xuống. Để minh họa thời gian một giây đối với máy tính hiện đại, đây là một chương trình kiểm tra xem JavaScript có thể xử lý bao nhiêu tác vụ trong một giây.
function measureLoopSpeed() {
var count = 0
function addOne() { count = count + 1 }
// Date.now() returns a big number representing the number of
// milliseconds that have elapsed since Jan 01 1970
var now = Date.now()
// Loop until Date.now() is 1000 milliseconds (1 second) or more into
// the future from when we started looping. On each loop, call addOne
while (Date.now() - now < 1000) addOne()
// Finally it has been >= 1000ms, so let's print out our total count
console.log(count)
}
measureLoopSpeed()
Sao chép-dán mã trên vào bảng điều khiển JavaScript của bạn và sau một giây, nó sẽ in ra một số. Trên máy tính của tôi, tôi nhận được 8527360khoảng 8,5 triệu . Trong một giây JavaScript có thể gọi addOnehàm 8,5 triệu lần! Vì vậy, nếu bạn có mã đồng bộ để tải ảnh xuống và quá trình tải ảnh mất một giây, điều đó có nghĩa là bạn có khả năng ngăn chặn 8,5 triệu thao tác xảy ra trong khi quá trình thực thi JavaScript bị chặn.
Một số ngôn ngữ có một chức năng được gọi là sleepchặn thực thi trong một số giây. Ví dụ ở đây là một số bashmã chạy Terminal.apptrên Mac OS sử dụng sleep. Khi bạn chạy lệnh, sleep 3 && echo 'done sleeping now'nó sẽ chặn trong 3 giây trước khi in ra done sleeping now.
JavaScript không có sleepchức năng. Vì bạn là một con mèo, bạn có thể đang tự hỏi mình, “Tại sao tôi lại học một ngôn ngữ lập trình không liên quan đến việc ngủ?”. Nhưng hãy ở lại với tôi. Thay vì dựa vào sleepviệc chờ đợi mọi thứ xảy ra, thiết kế của JavaScript khuyến khích sử dụng các hàm thay thế. Nếu bạn phải đợi nhiệm vụ A hoàn thành trước khi thực hiện nhiệm vụ B, bạn đặt tất cả mã cho nhiệm vụ B vào một hàm và bạn chỉ gọi hàm đó khi A đã hoàn thành.
Ví dụ: đây là mã kiểu chặn:
a()
b()
Và đây là một phong cách không chặn:
a(b)
Trong phiên bản không chặn blà một cuộc gọi lại a. Trong phiên bản chặn avà bcả hai đều được gọi / gọi (cả hai đều có ()sau chúng thực thi các chức năng ngay lập tức). Trong phiên bản không chặn, bạn sẽ nhận thấy rằng chỉ ađược gọi và bchỉ đơn giản là được chuyển vào anhư một đối số.
Trong phiên bản chặn, không có mối quan hệ rõ ràng giữa avà b. Trong phiên bản không chặn a, công việc của nó là làm những gì nó cần làm và sau đó gọi bkhi nó hoàn thành. Việc sử dụng các hàm theo cách này được gọi là hàm gọi lại vì hàm gọi lại của bạn, trong trường hợp này b, được gọi sau khi ahoàn tất.
Đây là một triển khai mã giả acó thể trông như thế nào:
function a(done) {
download('https://pbs.twimg.com/media/B4DDWBrCEAA8u4O.jpg:large', function doneDownloading(error, png) {
// handle error if there was one
if (err) console.log('uh-oh!', error)
// call done when you are all done
done()
})
}
Hãy nghĩ lại về ví dụ không chặn của chúng tôi a(b), nơi chúng tôi gọi avà chuyển vào blàm đối số đầu tiên. Trong định nghĩa hàm cho aở trên, doneđối số làb hàm của chúng ta mà chúng ta truyền vào. Hành vi này là điều mà bạn khó có thể hiểu được lúc đầu. Khi bạn gọi một hàm, các đối số bạn truyền vào sẽ không có cùng tên biến khi chúng ở trong hàm. Trong trường hợp này, những gì chúng ta gọi bđược gọi là donebên trong hàm. Nhưng bvà donechỉ là các tên biến trỏ đến cùng một hàm cơ bản. Thông thường, các hàm gọi lại được gắn nhãn như donehoặccallback để làm rõ rằng chúng là các hàm nên được gọi khi hàm hiện tại được thực hiện.
Vì vậy, miễn là anó hoạt động và được gọi bkhi hoàn thành, cả hai avà bđược gọi trong cả phiên bản không chặn và chặn. Sự khác biệt là trong phiên bản không chặn, chúng tôi không phải tạm dừng thực thi JavaScript. Nói chung, phong cách không chặn là nơi bạn viết mọi hàm để nó có thể trở lại càng sớm càng tốt, mà không bao giờ bị chặn.
Để đưa điểm về nhà xa hơn nữa: Nếu amất một giây để hoàn thành và bạn sử dụng phiên bản chặn, điều đó có nghĩa là bạn chỉ có thể làm một việc. Nếu bạn sử dụng phiên bản không chặn (hay còn gọi là sử dụng lệnh gọi lại), bạn có thể thực hiện hàng triệu việc khác trong cùng một giây đó, có nghĩa là bạn có thể hoàn thành công việc của mình nhanh hơn hàng triệu lần và ngủ phần còn lại trong ngày.
Hãy nhớ rằng: lập trình là tất cả về sự lười biếng và bạn phải là người ngủ, không phải máy tính của bạn.
Hy vọng rằng bây giờ bạn có thể thấy rằng các lệnh gọi lại chỉ là các hàm gọi các hàm khác sau một số tác vụ không đồng bộ. Các ví dụ phổ biến về tác vụ không đồng bộ là những thứ như đọc ảnh, tải xuống bài hát, tải ảnh lên, nói chuyện với cơ sở dữ liệu, chờ người dùng nhấn phím hoặc nhấp vào ai đó, v.v. Bất cứ điều gì mất thời gian. JavaScript thực sự tuyệt vời trong việc xử lý các tác vụ không đồng bộ như thế này, miễn là bạn dành thời gian để tìm hiểu cách sử dụng các lệnh gọi lại và giữ cho JavaScript của bạn không bị chặn.
JavaScript dành cho người mới
Kết thúc!
Đây chỉ là sự khởi đầu của mối quan hệ của bạn với JavaScript! Bạn không thể học tất cả cùng một lúc, nhưng bạn nên tìm những gì phù hợp với mình và cố gắng học tất cả các khái niệm ở đây.
Tôi khuyên bạn nên quay lại vào ngày mai và xem lại toàn bộ sự việc từ đầu! Có thể mất một vài lần trước khi bạn nhận được mọi thứ (lập trình rất khó). Chỉ cần cố gắng tránh đọc trang này trong bất kỳ phòng nào có đồ vật sáng bóng. . . chúng có thể vô cùng mất tập trung.
JavaScript dành cho người mới
