Đầu tiên, chúng ta sẽ bắt đầu bằng cách xem xét các API từ cấp độ cao — chúng là gì, chúng hoạt động như thế nào, cách sử dụng chúng trong mã của bạn và chúng có cấu trúc như thế nào?
điều kiện tiên quyết. Trình độ máy tính cơ bản, hiểu biết cơ bản về HTML và CSS, kiến thức cơ bản về JavaScript [xem các bước đầu tiên, khối xây dựng, đối tượng JavaScript]. Khách quan. Để làm quen với API, những gì chúng có thể làm và cách bạn có thể sử dụng chúng trong mã của mìnhAPI là gì?
Giao diện lập trình ứng dụng [API] là các cấu trúc có sẵn bằng ngôn ngữ lập trình để cho phép nhà phát triển tạo chức năng phức tạp dễ dàng hơn. Chúng trừu tượng hóa mã phức tạp hơn khỏi bạn, cung cấp một số cú pháp dễ sử dụng hơn ở vị trí của nó
Lấy ví dụ thực tế, hãy nghĩ về việc cung cấp điện trong nhà, căn hộ hoặc những nơi ở khác của bạn. Nếu bạn muốn sử dụng một thiết bị trong nhà, bạn cắm nó vào ổ cắm và nó hoạt động. Bạn không cố gắng đấu dây trực tiếp vào nguồn điện — làm như vậy sẽ thực sự kém hiệu quả và nếu bạn không phải là thợ điện thì sẽ rất khó và nguy hiểm khi thử
nguồn hình ảnh. Ổ cắm bị quá tải bởi The Clear Communication People, trên Flickr
Theo cách tương tự, nếu bạn muốn lập trình một số đồ họa 3D, việc sử dụng API được viết bằng ngôn ngữ cấp cao hơn như JavaScript hoặc Python sẽ dễ dàng hơn nhiều thay vì cố gắng viết trực tiếp mã cấp thấp.
Ghi chú. Xem thêm mục thuật ngữ API để biết thêm mô tả
API trong JavaScript phía máy khách
Đặc biệt, JavaScript phía máy khách có sẵn nhiều API — bản thân những API này không phải là một phần của ngôn ngữ JavaScript, thay vào đó chúng được xây dựng dựa trên ngôn ngữ JavaScript cốt lõi, cung cấp cho bạn thêm siêu năng lực để sử dụng trong mã JavaScript của mình. Họ thường rơi vào hai loại
- API trình duyệt được tích hợp vào trình duyệt web của bạn và có thể hiển thị dữ liệu từ trình duyệt và môi trường máy tính xung quanh, đồng thời thực hiện những việc phức tạp hữu ích với nó. Ví dụ: API âm thanh trên web cung cấp các cấu trúc JavaScript để thao tác với âm thanh trong trình duyệt — lấy một bản âm thanh, thay đổi âm lượng, áp dụng các hiệu ứng cho bản âm thanh đó, v.v. Ở chế độ nền, trình duyệt đang thực sự sử dụng một số mã cấp thấp hơn phức tạp [e. g. C++ hoặc Rust] để xử lý âm thanh thực tế. Nhưng một lần nữa, sự phức tạp này được API trừu tượng hóa khỏi bạn
- API của bên thứ ba không được tích hợp vào trình duyệt theo mặc định và bạn thường phải truy xuất mã và thông tin của họ từ một nơi nào đó trên Web. Ví dụ: API Twitter cho phép bạn thực hiện những việc như hiển thị các tweet mới nhất trên trang web của mình. Nó cung cấp một bộ cấu trúc đặc biệt mà bạn có thể sử dụng để truy vấn dịch vụ Twitter và trả về thông tin cụ thể
Mối quan hệ giữa JavaScript, API và các công cụ JavaScript khác
Ở trên, chúng ta đã nói về API JavaScript phía máy khách là gì và chúng liên quan như thế nào đến ngôn ngữ JavaScript. Hãy tóm tắt lại điều này để làm cho nó rõ ràng hơn và cũng đề cập đến vị trí phù hợp của các công cụ JavaScript khác
- JavaScript — Ngôn ngữ kịch bản cấp cao được tích hợp trong trình duyệt cho phép bạn triển khai chức năng trên các trang web/ứng dụng. Lưu ý rằng JavaScript cũng có sẵn trong các môi trường lập trình khác, chẳng hạn như Node
- API trình duyệt — cấu trúc được tích hợp trong trình duyệt dựa trên ngôn ngữ JavaScript và cho phép bạn triển khai chức năng dễ dàng hơn
- API của bên thứ ba — cấu trúc được tích hợp vào nền tảng của bên thứ ba [e. g. Twitter, Facebook] cho phép bạn sử dụng một số chức năng của nền tảng đó trong các trang web của riêng bạn [ví dụ: hiển thị các Tweet mới nhất trên trang web của bạn]
- Thư viện JavaScript — Thường là một hoặc nhiều tệp JavaScript chứa các chức năng tùy chỉnh mà bạn có thể đính kèm vào trang web của mình để tăng tốc hoặc cho phép viết các chức năng phổ biến. Các ví dụ bao gồm jQuery, Mootools và React
- Các khung JavaScript — Bước tiếp theo từ các thư viện, các khung JavaScript [e. g. Angular và Ember] có xu hướng là các gói HTML, CSS, JavaScript và các công nghệ khác mà bạn cài đặt và sau đó sử dụng để viết toàn bộ ứng dụng web từ đầu. Sự khác biệt chính giữa thư viện và khung là "Đảo ngược điều khiển". Khi gọi một phương thức từ thư viện, nhà phát triển sẽ kiểm soát. Với một khung, điều khiển được đảo ngược. khung gọi mã của nhà phát triển
API có thể làm gì?
Có một số lượng lớn API có sẵn trong các trình duyệt hiện đại cho phép bạn thực hiện nhiều thứ khác nhau trong mã của mình. Bạn có thể thấy điều này bằng cách xem trang chỉ mục API MDN
API trình duyệt phổ biến
Cụ thể, các loại API trình duyệt phổ biến nhất mà bạn sẽ sử dụng [và chúng tôi sẽ đề cập chi tiết hơn trong mô-đun này] là
- API để thao tác tài liệu được tải vào trình duyệt. Ví dụ rõ ràng nhất là API DOM [Mô hình đối tượng tài liệu], cho phép bạn thao tác với HTML và CSS — tạo, xóa và thay đổi HTML, tự động áp dụng các kiểu mới cho trang của bạn, v.v. Ví dụ, mỗi khi bạn thấy một cửa sổ bật lên xuất hiện trên một trang hoặc một số nội dung mới được hiển thị, đó là DOM đang hoạt động. Tìm hiểu thêm về các loại API này trong tài liệu Thao tác
- API lấy dữ liệu từ máy chủ để tự cập nhật các phần nhỏ của trang web được sử dụng rất phổ biến. Chi tiết có vẻ nhỏ này lại có tác động rất lớn đến hiệu suất và hành vi của các trang web — nếu bạn chỉ cần cập nhật danh sách chứng khoán hoặc danh sách các câu chuyện mới có sẵn, thì việc thực hiện ngay lập tức mà không phải tải lại toàn bộ trang từ máy chủ có thể khiến . API chính được sử dụng cho việc này là API Tìm nạp, mặc dù mã cũ hơn vẫn có thể sử dụng API
0. Bạn cũng có thể bắt gặp thuật ngữ Ajax, mô tả kỹ thuật này. Tìm hiểu thêm về các API như vậy trong Tìm nạp dữ liệu từ máy chủconst AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext[];
- API để vẽ và thao tác đồ họa được hỗ trợ rộng rãi trong các trình duyệt — những API phổ biến nhất là Canvas và WebGL, cho phép bạn cập nhật dữ liệu pixel có trong phần tử HTML
1 theo chương trình để tạo cảnh 2D và 3D. Ví dụ: bạn có thể vẽ các hình dạng như hình chữ nhật hoặc hình tròn, nhập hình ảnh vào canvas và áp dụng bộ lọc cho hình ảnh đó chẳng hạn như màu nâu đỏ hoặc thang độ xám bằng API Canvas hoặc tạo cảnh 3D phức tạp với ánh sáng và họa tiết bằng WebGL. Các API như vậy thường được kết hợp với các API để tạo vòng lặp hoạt hình [chẳng hạn nhưconst AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext[];
2] và các API khác để tạo các cảnh cập nhật liên tục như phim hoạt hình và trò chơiconst AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext[];
- Các API âm thanh và video như
3, API âm thanh trên web và WebRTC cho phép bạn thực hiện những điều thực sự thú vị với đa phương tiện, chẳng hạn như tạo các điều khiển giao diện người dùng tùy chỉnh để phát âm thanh và video, hiển thị các bản nhạc văn bản như chú thích và phụ đề cùng với video của bạn, lấy video từ . ]const AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext[];
- API thiết bị cho phép bạn tương tác với phần cứng thiết bị. ví dụ: truy cập GPS của thiết bị để tìm vị trí của người dùng bằng API Định vị địa lý
- API lưu trữ phía máy khách cho phép bạn lưu trữ dữ liệu ở phía máy khách, vì vậy bạn có thể tạo một ứng dụng sẽ lưu trạng thái của ứng dụng giữa các lần tải trang và thậm chí có thể hoạt động khi thiết bị ngoại tuyến. Có một số tùy chọn có sẵn, e. g. lưu trữ tên/giá trị đơn giản với API lưu trữ web và lưu trữ cơ sở dữ liệu phức tạp hơn với API IndexedDB
Các API phổ biến của bên thứ ba
API của bên thứ ba có rất nhiều loại;
- API Twitter, cho phép bạn thực hiện những việc như hiển thị các tweet mới nhất trên trang web của mình
- API bản đồ, như Mapquest và API Google Maps, cho phép bạn thực hiện mọi thứ với bản đồ trên trang web của mình
- Bộ API của Facebook, cho phép bạn sử dụng các phần khác nhau của hệ sinh thái Facebook để mang lại lợi ích cho ứng dụng của bạn, chẳng hạn như bằng cách cung cấp thông tin đăng nhập ứng dụng bằng thông tin đăng nhập Facebook, chấp nhận thanh toán trong ứng dụng, triển khai các chiến dịch quảng cáo được nhắm mục tiêu, v.v.
- API Telegram, cho phép bạn nhúng nội dung từ các kênh Telegram trên trang web của mình, ngoài việc cung cấp hỗ trợ cho bot
- API YouTube, cho phép bạn nhúng video YouTube vào trang web của mình, tìm kiếm trên YouTube, tạo danh sách phát, v.v.
- API Pinterest, cung cấp các công cụ để quản lý bảng và ghim Pinterest để đưa chúng vào trang web của bạn
- API Twilio, cung cấp khung để xây dựng chức năng cuộc gọi thoại và video vào ứng dụng của bạn, gửi SMS/MMS từ ứng dụng của bạn, v.v.
- API Mastodon, cho phép bạn thao tác các tính năng của mạng xã hội Mastodon theo chương trình
Ghi chú. Bạn có thể tìm thông tin về nhiều API của bên thứ 3 hơn trong thư mục API Web có thể lập trình
Các API hoạt động như thế nào?
Các API JavaScript khác nhau hoạt động theo những cách hơi khác nhau, nhưng nhìn chung, chúng có các tính năng chung và chủ đề tương tự như cách chúng hoạt động
Chúng dựa trên các đối tượng
Mã của bạn tương tác với API bằng cách sử dụng một hoặc nhiều đối tượng JavaScript, đóng vai trò là bộ chứa dữ liệu mà API sử dụng [có trong thuộc tính đối tượng] và chức năng mà API cung cấp [có trong phương thức đối tượng]
Ghi chú. Nếu bạn chưa quen với cách các đối tượng hoạt động, bạn nên quay lại và làm việc với mô-đun đối tượng JavaScript của chúng tôi trước khi tiếp tục
Hãy quay lại ví dụ về Web Audio API — đây là một API khá phức tạp, bao gồm một số đối tượng. Những cái rõ ràng nhất là
4, đại diện cho biểu đồ âm thanh có thể được sử dụng để điều khiển âm thanh phát bên trong trình duyệt và có sẵn một số phương thức và thuộc tính để điều khiển âm thanh đóconst AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext[];
5, đại diện cho phần tửconst AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext[];
6 chứa âm thanh bạn muốn phát và thao tác bên trong ngữ cảnh âm thanhconst AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext[];
7, đại diện cho đích của âm thanh, tôi. e. thiết bị trên máy tính của bạn sẽ thực sự xuất nó — thường là loa hoặc tai nghe của bạnconst AudioContext = window.AudioContext || window.webkitAudioContext; const audioCtx = new AudioContext[];
Vậy các đối tượng này tương tác với nhau như thế nào?
________số 8
Trước hết, chúng tôi bao gồm một yếu tố
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
6 mà chúng tôi nhúng MP3 vào trang. Chúng tôi không bao gồm bất kỳ điều khiển trình duyệt mặc định nào. Tiếp theo, chúng tôi bao gồm một const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
9 mà chúng tôi sẽ sử dụng để phát và dừng nhạc và một phần tử const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
10 thuộc phạm vi loại mà chúng tôi sẽ sử dụng để điều chỉnh âm lượng của bản nhạc khi đang phátTiếp theo, hãy xem JavaScript cho ví dụ này
Chúng tôi bắt đầu bằng cách tạo một phiên bản
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
4 bên trong để thao tác theo dõi của chúng tôiconst AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
Tiếp theo, chúng tôi tạo các hằng số lưu trữ các tham chiếu đến các phần tử
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
6, const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
9 và const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
10 của chúng tôi và sử dụng phương pháp const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
15 để tạo một const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
5 đại diện cho nguồn âm thanh của chúng tôi — phần tử const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
6 sẽ được phát từconst AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
1Tiếp theo, chúng tôi bao gồm một số trình xử lý sự kiện dùng để chuyển đổi giữa phát và tạm dừng khi nhấn nút và đặt lại màn hình về đầu khi bài hát phát xong
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
1Ghi chú. Một số bạn có thể nhận thấy rằng các phương pháp
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
18 và const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
19 đang được sử dụng để phát và tạm dừng bản nhạc không phải là một phần của Web Audio API; Tiếp theo, chúng tôi tạo một đối tượng
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
11 bằng cách sử dụng phương pháp const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
12, có thể được sử dụng để điều chỉnh âm lượng của âm thanh được truyền qua đối tượng đó và tạo một trình xử lý sự kiện khác thay đổi giá trị khuếch đại [âm lượng] của biểu đồ âm thanh bất cứ khi nào giá trị thanh trượt thay đổiconst AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
7Điều cuối cùng cần làm để làm cho điều này hoạt động là kết nối các nút khác nhau trong biểu đồ âm thanh, được thực hiện bằng phương pháp
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
13 có sẵn trên mọi loại nútconst AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
9Âm thanh bắt đầu trong nguồn, sau đó được kết nối với nút khuếch đại để có thể điều chỉnh âm lượng của âm thanh. Sau đó, nút khuếch đại được kết nối với nút đích để âm thanh có thể được phát trên máy tính của bạn [thuộc tính
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
14 đại diện cho bất kỳ giá trị mặc định nào của const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
7 có sẵn trên phần cứng máy tính của bạn, chẳng hạn như. g. loa của bạn]Họ có điểm vào dễ nhận biết
Khi sử dụng API, bạn nên đảm bảo rằng bạn biết điểm vào của API. Trong API âm thanh trên web, điều này khá đơn giản - đó là đối tượng
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
4, cần được sử dụng để thực hiện bất kỳ thao tác âm thanh nàoAPI Mô hình đối tượng tài liệu [DOM] cũng có một điểm đầu vào đơn giản — các tính năng của nó có xu hướng bị treo ngoài đối tượng
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
17 hoặc một phiên bản của phần tử HTML mà bạn muốn tác động theo một cách nào đó, chẳng hạnconst AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
4API Canvas cũng dựa vào việc sử dụng đối tượng ngữ cảnh để thao tác mọi thứ, mặc dù trong trường hợp này, đó là ngữ cảnh đồ họa chứ không phải ngữ cảnh âm thanh. Đối tượng ngữ cảnh của nó được tạo bằng cách tham chiếu đến phần tử
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
1 mà bạn muốn vẽ trên đó, sau đó gọi phương thức const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
19 của nóconst AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
7Sau đó, bất cứ điều gì chúng ta muốn làm với khung vẽ đều đạt được bằng cách gọi các thuộc tính và phương thức của đối tượng bối cảnh [ví dụ: một thể hiện của
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
70]const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
9Ghi chú. Bạn có thể thấy mã này hoạt động trong bản trình diễn quả bóng nảy của chúng tôi [cũng có thể xem mã này đang chạy trực tiếp]
Họ thường sử dụng các sự kiện để xử lý các thay đổi trong trạng thái
Chúng ta đã thảo luận về các sự kiện trước đó trong khóa học trong bài viết Giới thiệu về sự kiện, bài viết này xem xét chi tiết các sự kiện web phía máy khách là gì và cách chúng được sử dụng trong mã của bạn. Nếu bạn chưa quen với cách hoạt động của các sự kiện API web phía máy khách, bạn nên đọc bài viết này trước khi tiếp tục
Một số API web không chứa sự kiện, nhưng hầu hết đều chứa ít nhất một số. Các thuộc tính trình xử lý cho phép chúng tôi chạy các chức năng khi sự kiện kích hoạt thường được liệt kê trong tài liệu tham khảo của chúng tôi trong các phần "Trình xử lý sự kiện" riêng biệt
Chúng tôi đã thấy một số trình xử lý sự kiện được sử dụng trong ví dụ về Web Audio API của chúng tôi ở trên
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
1Họ có các cơ chế bảo mật bổ sung khi thích hợp
Các tính năng WebAPI phải tuân theo các cân nhắc về bảo mật giống như JavaScript và các công nghệ web khác [ví dụ: chính sách cùng nguồn gốc], nhưng đôi khi chúng có các cơ chế bảo mật bổ sung tại chỗ. Ví dụ: một số WebAPI hiện đại hơn sẽ chỉ hoạt động trên các trang được cung cấp qua HTTPS do chúng truyền dữ liệu có thể nhạy cảm [ví dụ bao gồm Service Worker và Push]
Ngoài ra, một số WebAPI yêu cầu quyền được bật từ người dùng sau khi lệnh gọi chúng được thực hiện trong mã của bạn. Ví dụ: API thông báo yêu cầu quyền sử dụng hộp thoại bật lên
API Web Audio và
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioCtx = new AudioContext[];
3 tuân theo cơ chế bảo mật có tên là chính sách tự động phát — điều này về cơ bản có nghĩa là bạn không thể tự động phát âm thanh khi tải trang — bạn phải cho phép người dùng của mình bắt đầu phát âm thanh thông qua một điều khiển như nút. Điều này được thực hiện bởi vì âm thanh tự động phát thường thực sự gây phiền nhiễu và chúng tôi thực sự không nên bắt người dùng phải tuân theo điều đóGhi chú. Tùy thuộc vào mức độ nghiêm ngặt của trình duyệt, các cơ chế bảo mật như vậy thậm chí có thể ngăn ví dụ hoạt động cục bộ, tôi. e. nếu bạn tải tệp ví dụ cục bộ trong trình duyệt của mình thay vì chạy nó từ máy chủ web. Tại thời điểm viết bài này, ví dụ về Web Audio API của chúng tôi không hoạt động cục bộ trên Google Chrome — chúng tôi phải tải nó lên GitHub trước khi nó hoạt động
Bản tóm tắt
Tại thời điểm này, bạn nên hiểu rõ về API là gì, cách chúng hoạt động và bạn có thể làm gì với chúng trong mã JavaScript của mình. Bạn có thể rất hào hứng khi bắt đầu thực sự làm một số điều thú vị với các API cụ thể, vì vậy hãy bắt đầu. Tiếp theo, chúng ta sẽ xem xét thao tác tài liệu với Mô hình đối tượng tài liệu [DOM]