注:该文章属于js基础篇，不属于入门篇，默认你对js已经有了一定的了解。
什么是模块？
模块做为js中最基础的东西，应该是每个javascripter都了解的东西，这对于刚入门的前端开发者打好基础非常的重要，甚至可以影响到找工作的成功率，那么什么是模块？
模块就是将一个复杂的程序给分为几个块，放在一个内部作用域内，所有变量都是私有的，通过暴露接口来让其他模块调用模块内的函数(通常被称为模块暴露)。
举个栗子，做为已经入门的前端工程师，jquery应该都用过，它就是一个典型的js模块的例子，光说不练假把式，还是写个简单的例子来说明一下吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>componentsDemo</title>
</head>
<button id="btn" class="btn">click</button>
<body>
<script>
function api(id){
var iden = id[0];
var elemt = id.split(iden);
var arr = ['#', '.'];
var dom;
if(arr.includes(iden)){
if(iden === '#'){
dom = document.getElementById(elemt[1]);
}else{
dom = document.getElementsByClassName(elemt[1])[0];
}
}else{
dom = document.getElementsByTagName(id)[0];
}
function onClick(fn){
dom.onclick = function(){
fn();
}
}
// return里的为暴露给外界调用的接口
return {
click:onClick
}
}
var $ = api;
$('#btn').click(function(){
console.log('components');
});
</script>
</body>
</html>
这段代码就高仿了jquery的click函数，所有的函数和变量都是api里的私有变量，在外界访问不到，但是可以通过提供给外界的接口去调用api函数内的私有变量和函数，这个过程也称之为闭包。
对应的，在原有代码的基础上改进一下，可以高仿出jquery的其他函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>componentsDemo</title>
</head>
<button id="btn" class="btn">click</button>
<body>
<script>
function api(id){
var iden = id[0];
var elemt = id.split(iden);
var arr = ['#', '.'];
var dom;
if(arr.includes(iden)){
if(iden === '#'){
dom = document.getElementById(elemt[1]);
}else{
dom = document.getElementsByClassName(elemt[1])[0];
}
}else{
dom = document.getElementsByTagName(id)[0];
}
function onClick(fn){
dom.onclick = function(){
fn();
}
}
function text(val){
if(val){
dom.innerText = val;
}else{
return dom.innerText;
}
}
// return里的为暴露给外界调用的接口
return {
click:onClick,
text:text
}
}
var $ = api;
$('#btn').click(function(){
$('.text').text('this is test');
});
</script>
</body>
</html>
OK！ 众所周知，这就是js的模块，如果你理解了js的模块，那么恭喜你，可以正式的成为一名初级前端了。
网友评论