Sơ lược lịch sử module javascript (Phần 1)
Nếu các bạn là người mới tập tành vào nghề phát triển website. Các bạn có bao giờ cảm thấy khó hiểu ngôn ngữ javascript này không, những thuật ngữ vô cùng khó hiểu như là: module, module loader, module bundler, CommonJS, AMD, Browserify, SystemJS, Webpack, JSPM... Hôm nay mình viết bài này, sẽ giải ...
Nếu các bạn là người mới tập tành vào nghề phát triển website. Các bạn có bao giờ cảm thấy khó hiểu ngôn ngữ javascript này không, những thuật ngữ vô cùng khó hiểu như là: module, module loader, module bundler, CommonJS, AMD, Browserify, SystemJS, Webpack, JSPM... Hôm nay mình viết bài này, sẽ giải thích tường tận về chúng, đặc biệt bài viết này sẽ rất hữu ích cho người mới. Let's go!
Trong bài post này mình sẽ sử dụng ứng dụng đơn giản để giải thích những ngữ cảnh của module. Ứng dụng vô cùng đơn giản là tính tổng của các phần tử trong mảng. Mình đưa kịch bản là ứng dụng này sẽ có 4 function và 1 file index.html (để hiển thị kết quả thông qua thể span).
Function main sẽ tính tổng của các phần tử trong mảng, sẽ hiển thị kết quảspan#answer. Function main sẽ có 2 dependency là add và reduce. Hàm add là callback của hàm reduce và tính tổng của 2 số, hàm reduce duyệt sẽ từng phần tử của array. Bạn sẽ dễ hình dung hơn khi xem 2 bức ảnh bên dưới.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS Modules</title>
</head>
<body>
<h1>
The Answer is
<span id="answer"></span>
</h1>
</body>
</html>
// 0-index.html
var values = [ 1, 2, 4, 5, 6, 7, 8, 9 ];
var answer = sum(values)
document.getElementById("answer").innerHTML = answer;
// main.js
function sum(arr){
return reduce(arr, add);
}
// sum.js
function add(a, b) {
return a + b;
}
// add.js
function reduce(arr, iteratee) {
var index = 0,
length = arr.length,
memo = arr[index];
for(index += 1; index < length; index += 1) {
memo = iteratee(memo, arr[index]);
}
return memo;
}
Các bạn nên đọc kĩ kịch bản mình đưa ra rồi mới tiếp tục nhé
