Commonjs Là Gì

     

Bài viết này là phần 2 của loạt bài dịch bí quyết viết JavaScript hiện nay đại.

Bạn đang xem: Commonjs là gì

Những người ao ước theo dõi trường đoản cú đầu rất có thể xem phần 1 ngơi nghỉ đây:

Cách viết JavaScript hiện đại: Phần 1: Tổng hợp những điểm mới có thể thực hành ngay

Chuỗi nội dung bài viết này sử dụng cho những browser thỏa mãn nhu cầu tiêu chuẩn ECMAScript5 buộc phải không sử dụng được mang đến IE8 trở xuống.

Bài viết vẫn trung thành với chủ với quan tiền điểm lý giải một cách dễ hiểu nhất.

Mục lục

Phần 1: Tổng hợp những điểm mới hoàn toàn có thể thực hành ngay

Phần 2: có tác dụng quen cùng với CommonJS module

Phần 3: Master Browserify

Phần 4: auto hóa xử trí dùng Gulp

Phần 5: lưu giữ cú pháp của ES2015

Lời mở đầu

Trong bài xích viết, cụm từ CommonJS module được dùng làm chỉ module specs cùng interface (require/exports.○○/module.exports) dùng Node.js hòa bình mở rộng CommonJS từ cơ sở là specs của Modules 1.0 của CommonJS.

Nó không có nghĩa là CommonJS của dự án về điểm lưu ý kỹ thuật tiêu chuẩn phát triển tuyệt specs của CommonJS Modules 1.0.

Khi chúng ta nhìn vào code của đa số website, các bạn có kinh ngạc khi thấy những đoạn code sau không?

require…var hoge = require("hoge");var piyo = hoge.fuga();// ...(Xử lý bất kỳ)module.exports…function Hoge() // ...(Xử lý bất kỳ)module.exports = Hoge;Có thể các bạn sẽ ngay nhanh chóng phản ứng như sau:

"Theo tôi biết thì JavaScript không có require với module mà?"

"Tôi đã từng copy paste cùng quả nhiên là không hoạt động trên trình duyệt."

Xin hãy im tâm, đoạn code này hoàn toàn có thể chạy bên trên trình duyệt.Tuy nhiên, nhằm chạy được thì bạn cần biết vài điều.

Phần trình bày sau đây sẽ giải thích cụ thể về khái niệm, bắt đầu và cách để đưa các module này vào trình duyệt.

1. Câu hỏi phân phân thành các module

Khi một script lớn đến một mức như thế nào đó, chúng ta có thể tổng hợp các chức năng hay sử dụng thành những module.

Đến nay, bọn họ vẫn thường triển khai việc này bên trên trình duyệt bằng cách tạo tệp tin .js, trải qua HTML hoàn toàn có thể load các lần.

Ví dụ, lúc mọi người dùng jQuery (không dùng CDN), chắc chắn rằng mọi fan đã call jQuery file bởi script tag.

Ví dụ sử dụng jQuery module

myjquery.js!function() window.jQuery = jQuery; window.$ = jQuery; // Module để đưa 1 string tiếng Nhật thanh lịch query string function jQuery(obj) var keys = Object.keys(obj); if(!keys.length) return ""; return "?" + keys.map(function(key) return encodeURIComponent(key) + "=" + encodeURIComponent(obj); ).join("&"); ();/*var text = jQuery( name: "がお", age: 18,);console.log(text); // ?name=%E3%81%8C%E3%81%8A&age=18*/Bây giờ thuộc lúc gọi module này và jQuery mọi fan vẫn thường dùng thì sẽ xẩy ra vấn đề.

Ở năm năm nhâm thìn này, không mong muốn là CommonJS module vẫn còn có lợi và vẫn được dùng liên tiếp nên vẫn cần biết về bí quyết xử lý những module này.

2. CommonJS module là gì

Về vấn đề này còn không ít tranh cãi, bài bác này đã chỉ ra đa số điểm thông thường nhất.

CommonJS module là các module vừa lòng các điều kiện sau:

2.1. Khi tạo ra module thì cần sử dụng module.exports hoặc exports.○○

Thực hiện CommonJS của myjquery.js

/* bỏ biện pháp gán trực tiếp mang lại window objectwindow.jQuery = jQuery;window.$ = jQuery;*/// gắng vào đó dùng module.exportsmodule.exports = jQuery;// Module để chuyển 1 string giờ Nhật quý phái query stringfunction jQuery(obj) var keys = Object.keys(obj); if(!keys.length) return ""; return "?" + keys.map(function(key) return encodeURIComponent(key) + "=" + encodeURIComponent(obj); ).join("&");2.2. Khi hotline CommonJS module, thực hiện hàm requireGọi module dùng require

var jQuery = require("jQuery"); // jQuery mọi bạn thường dùngvar myJQuery = require("https://tambour.vn/myjquery.js"); // jQuery của phiên bản thân// mỗi module được đưa vào 1 hàmconsole.log(typeof(jQuery)); // "function"console.log(typeof(myJQuery)); // "function"https:// Theo cách thức của CommonJS, không gán xuống window object đề xuất không bị hình ảnh hưởng.console.log(typeof(window.jQuery)); // "undefined"https:// jQuery được dùng ở đó là jQuery chúng ta vẫn quen thuộc biết!jQuery(function($) // Viết xử lý ở đây);//Cùng lúc đó bạn cũng có thể dùng jQuery của phiên bản thân mìnhvar text = myJQuery( name: "がお", age: 18,);console.log(text); // ?name=%E3%81%8C%E3%81%8A&age=18Ở đây tác giả đưa ra việc tiến hành CommonJS module jQuery mà phần nhiều người hay được sử dụng nhưng đừng lưu ý gì cả.(Module danh tiếng như jQuery thì đã có các kỹ sư tài ba tạo ra).

Xem thêm: Tri Thức Khoa Học Là Gì Ví Dụ Về Tri Thức Khoa Học Là Gì, Tri Thức Là Gì

Đến trên đây thì việc đổi một module đã bao gồm sẵn thành CommonJS module kết thúc.Tuy nhiên, nếu chỉ đổi thôi thì nó vẫn chưa vận động trên trình duyệt.

Đã tất cả Node.js

"Nhưng vì sao lại nói đến Node.js khi đang nói về Web?"

Hãy yên tâm. Mặc dù hơi mơ hồ cơ mà thực sự có mối quan hệ ở đây.

Thực ra Node.js đang được biết đến trong 5 năm gần đây và dần dần trở nên phổ cập nên tại đây chỉ lý giải sơ lược.

Node.js là môi trường xung quanh JavaScript hướng server side chuyển động trong V8 engine.

Node.js

Node.js vâng lệnh ECMAScript nên tất nhiên không tất cả DOM API và hoạt động trên console chứ chưa hẳn trên trình duyệt. Vì chưng đó, rất có thể nó ko rất gần gũi với những người dân chuyên viết code phía browser.

Điều tôi thực sự ý muốn nói ngơi nghỉ đây chưa hẳn là về Node.js mà lại chỉ muốn nhấp vào 2 điểm:

Node.js đang ngày dần thịnh hành

Node.js rất có thể dùng CommonJS module

Tức là Node.js làm cho CommonJS module trở đề xuất phổ biến.

3. Áp dụng CommonJS module vào Web

Đến đây những người dân tinh ý hoàn toàn có thể đã nghĩ về ra để dùng CommonJS module trên Web browser thì hoàn toàn có thể sử dụng Node.js.Và quả và đúng là như vậy.

Về lý thuyết cũng đều có cách không yêu cầu dùng đến Node.js nhưng không rất gần gũi với những lập trình viên JS đề xuất không kể ở đây.

Thực ra có một trong những module dùng để đổi lịch sự Web browser nhưng nổi tiếng nhất là Browserify (sẽ phân tích và lý giải thêm ở chỗ sau).

Việc áp dụng CommonJS module trên Web browser được tổng đúng theo trong sơ đồ dùng dưới đây:

*

Điểm cần chăm chú ở đó là dù dùng cho Node.js hay Web browser thì phần nhiều dùng chung việc require. Chỉ có điều khi sử dụng trên web browser thì bao gồm thêm cách xử lý gửi đổi.

4. Browserify là gì?

Từ phần trên ta rất có thể hiểu tí chút về Browserify rồi. Đó là công cụ thay đổi để code được viết bằng CommonJS module có thể chạy được trên trình duyệt.(Tuy nhiên, ở bài viết này sẽ không còn nói về kiểu cách dùng Node.js và Browserify để xử lý)

Ví dụ sau đây minh hoạ phương pháp tạo file input.js gồm require myjquery.js

input.jsvar jQuery = require("https://tambour.vn/myjquery.js");var text = jQuery( name: "がお", age: 18,);console.log(text); // ?name=%E3%81%8C%E3%81%8A&age=18Sử dụng Browserify để chuyển đổi phần code này, ta sẽ có được đoạn code sau:

output.js(function e(t,n,r)function s(o,u)if(!n)if(!t)var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module ""+o+""");throw f.code="MODULE_NOT_FOUND",fvar l=n=exports:;t<0>.call(l.exports,function(e)var n=t<1>;return s(n?n:e),l,l.exports,e,t,n,r)return n.exportsvar i=typeof require=="function"&&require;for(var o=0;or.length;o++)s(r);return s)(1:,2:,,<1>);Đoạn code sẽ được đưa sang dạng khá dễ hiểu.Đến đây, như đang nói ở chỗ 1, hãy thử dấn F12, mở tool của developer, copy paste đoạn code của output.js vào console window với chạy thử.Đoạn code đã chạy ko lỗi bên trên trình phê chuẩn và string "?name=%E3%81%8C%E3%81%8A&age=18" sẽ tiến hành xuất ra ở console window.

Và như vậy, nếu cần sử dụng Browserify để cách xử trí chuyển đổi tự động CommonJS module thì nó hoàn toàn có thể dùng được trên trình duyệt.

Phần 2 đến đó là kết thúc.

Xem thêm: Danh Mục Tủ Thuốc Y Tế Trường Học Gom Nhung Gi, Tủ Thuốc Y Tế Trong Trường Học Gồm Những Gì

Mặc dù cách chuyển đổi chưa được reviews nhưng qua phần này các chúng ta cũng có thể hiểu được định nghĩa cơ bạn dạng của giải pháp dùng module kha khá hiện đại.