Modules divide the program into clusters code
It will help some people does not work with that code from begining can maintain it
literate programming is a way to program, we can easy to understand the code, but when program becomes bigger and bigger then, it is hard to change that code.
Structure make program costly. On the begginning of a project, the structure shoud be as simplest as possible. And it will be developed step by step
global and local: Almost language has the scope-level betwwen them. But Javascript does not!!
Math is an namespace, it is provide alot of function inside it, and everything inside it is local object. But everywhere in your program can use the Math.method().
An exmample of a namespace
var calculation = {
add: function(a,b){
return a + b;
},
minus: function(a,b){
return a - b;
},
multil: function(a,b){
return a * b;
},
devide: function(a,b){
return a / b;
}
}
var add = function(a,b,c){
return a + b + c;
}
console.log(calculation.add(5,6));
console.log(add(1,2,3));We can reuse a function in old project which is useful in new project. Such as, we had created a function to read configuaration file, and now, we need the same thing, we maybe just fix a small part
But it is not convenice, because, we have to copy and paste all the time. So we want to make a only file, and when we want to use a function, we just have to "download" this file. So [link] https://www.npmjs.com/ was borned to storage some package useful
The most importance thing of a module is it is isolating piece of code from each other.
Thus, when the modules fix bugs and add new function, it is not effect to another function
##Using function as namespaces
Functions are the only things in JavaScript that create a new scope. So if we want our modules to have their own scope, we will have to base them on functions.
We have a small module: Get the day of the week:
var names = ["sunday", "monday", "tuesday", "wednesday", "thusday", "friday", "staturday", "sunday"];
function dayName(number){
return names[number];
}
dayName(1);We want names is local. So we have:
var dayName = function(){
var names = ["sunday", "monday", "tuesday", "wednesday", "thusday", "friday", "staturday", "sunday"];
return function(number){
return names[number];
}
}();
dayName(1);We can use the similar pattern to isolate code, but we using anonymous function: (That means there are no variable to contains function)
(function(){
function square(x){
return x*x;
}
var number = 100;
console.log(square(number));
})();** Conclude: The namespace is the way to wrap all variable and function in a local scope(function) by a variable or nothing(anonymous function) **
##Object as interface
What is the interface? Interface is a way makes a guide for another one can using the code. Now, we want to add some function to dayName, so we just return an object contain a pair of key value
var dayName = function(){
var names = ["monday", "tuesday", "wednesday", "thusday", "friday", "staturday", "sunday"];
return {
name: function(number) {return names[number]},
number: function(name) {return names.indexOf(name)}
};
}();
console.log(dayName.name(2));
console.log(dayName.number("sunday"));But if the function is bigger then our module will become more and more complex. So, we using an exports to store anything we want to export:
(function(exports){
var names = ["monday", "tuesday", "wednesday", "thusday", "friday", "staturday", "sunday"];
exports.name = function(number){
return names[number];
};
exports.number = function(name){
return names.indexOf(name);
};
})(this.dayName = {});
console.log(dayName.name(2));##Detacting from the global scope
The module above is a global variable wrap its code in a function. But, if in the program has an other same name module, or we want to load 2 version of a module alongside each other?
We have to store the module in a file or in web. So we have to read string from file or from web.
Pretending that we have a tool to read string from file/web. Now our mission is exec this string in javascript code
Now, we have a string such as: "var x = 2;" and we want to exec it to code. Javascript provide for us an function is eval
function evalAndReturnX(code){
eval(code);
return x;
}
console.log(evalAndReturnX("var x = 2;"));In a webpage, if you want to script some library such as: jquery or angular, then the web will download all file you are sript, or load all from the local. But, it wastes a lot of time. Because, you do not use it imediately! What would happen if the file script is too big? Your website will be crash! To solve this problem, require.js was born. But, in this example, we will discover the simplest require that we make ourselves!
This is the require example:
function require(code) {
eval(code);
return plus(3,5);
}
console.log(require("function plus(a,b) {return a + b}"));Accept using eval, we can use anonymous function to load code.
function require(name) {
var code = new Function("a,b", "return a +b;");
return code(name);
}
console.log(require("4,5"));or
fakeFileSystem = {
"weekDay.js": " \
var days = [ \
'Sunday', \
'Monday', \
'Tuesday', \
'Wednesday', \
'Thursday', \
'Friday', \
'Saturday' \
]; \
function name(dayNo) { \
return days[dayNo]; \
} \
exports.name = name; \
"
};
function require(name) {
var code = new Function("exports", fakeFileSystem[name + ".js"]);
var exports = {};
code(exports);
return exports;
}
console.log(require("weekDay").name(1));#EXERCISEs
##Month names
This one is the same with the example dayWeek above.
The knowleadge releate: Object Interface
var month = function(){
var months =["january", "febuary", "march", "april", "may", "june",
"july", "august", "september", "october", "november", "december"];
return {
name: function(number){
return months[number];
},
number: function(name){
return months.indexOf(name);
}
}
}();
console.log(month.name(5));
console.log(month.number("march"));