如果你对模块化已经了解,可以直接从第三点开始阅读。
一、模块化的概念:
在进行项目分析或者编码时,先把项目进行拆分,拆分成很多的类,对象,很多的函数等等。能够提高代码的复用性。这些被拆分出来的类型,对象,函数就是模块。就像一辆汽车是由很多的零部件组成,每个零部件就是一个小模块,而由很多零件组成的发动机之于一辆汽车可以认为是一个大模块;或者说,一台计算机,由主板,cpu,内存,硬盘,显示器,键盘等大模块组成。而一个内存或者cpu又分别由很多的小模块组成。以模块为单位管理代码,会更加独立,调试方便,维护也很方便。
二、模块化经历的阶段:
1. 函数封装
这种做法的缺点很明显:污染了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系。不同js文件里有相同的全局变量,如果被引入到同一个html文件中,全局变量就会互相影响。
2. 对象
这样避免了变量污染,只要保证模块名唯一即可,同时同一模块内的成员也有了关系,看似不错的解决方案,但是也有缺陷,外部(对象之外)可以随意修改内部成员(属性)
对象的属性就是对象中每个方法的全局变量。
var p = {
id:"007",
name :"芙蓉",
age:25,
eat:function(str){
alert(this.name+"在吃"+str);
},
work:function(str){
alert(this.name+“在干"+str);
}
}
//存在问题:
//如:对于p对象的年龄,有效取值应该是在0-150之间的整数。
// 而以下代码的执行,
p.age = 151;
都会使得项目内部出现了不合法的数据。这是程序的健壮性不好。
所以,对于对象的成员变量(属性),应该不能被外部访问才对。
3. 立即执行函数
可以通过立即执行函数,来达到隐藏细节的目的
var p = (function (){
var name="芙蓉";
var age=25;
function eat(str){
alert(this.name+"在吃"+str);
}
function setAge(age){
if(age<0 || age>150){
alert("亲,年龄超出有效值(0-150)的范围");
return;
}
age = age;
}
function getAge(){
return age;
}
return {
eat:eat,
setAge:setAge,
getAge:getAge
}
})();
var p = (function (){
var name="芙蓉";
var age=25;
function eat(str){
alert(this.name+"在吃"+str);
}
function setAge(age){
if(age<0 || age>150){
alert("亲,年龄超出有效值(0-150)的范围");
return;
}
age = age;
}
function getAge(){
return age;
}
return {
eat:eat,
setAge:setAge,
getAge:getAge
}
})();
4. 模块化的解决方案。
- 以上模块化存在的问题:
不管是以上哪种方式(函数,对象,立即执行函数),都存在同样的问题:
1)、html不但要引入自己需要的js文件,还需要引入js文件需要的js文件。如:a.html需要使用 b.js的代码,而由于b.js中使用了c.js里的代码。所以,在a.html中必须引入b.js和c.js。这是JavaScript语言先天性的缺陷----js文件没法引入js文件。其它编程语言(java,c#,c/c++)就不存在这个问题。
2)、引入js文件的顺序问题以及异步加载问题。
- 为此出现了一些解决方案:
1)、前端模块化
在前端里出现了第三方的解决方案 AMD和CMD
2)、后端模块化
在后端里(nodeJS)出现了commonJS规范。
三、ES6的模块化:
1、原生支持模块化了
ES6中新增的模块化,即从ES6开始,原生js支持模块化了,现在很多浏览器也支持模块化了。
2、模块化的两个概念
1)、导出(export关键字):导出就是对外开放的,可以导出变量,常量,函数,对象等等。使用export关键字。放在export关键字后面的(即对外导出的)变量,常量,函数和对象,在其它js文件中可以使用,否则,其它js文件中是不能使用的。即只能内部使用的。
在用export导出时,可以导出多个
如:person.js文件(模块)里,如下:
//导出字符串
export var str = "hello";
//导出函数
export var fun = function(){
alert("我是函数");
}
//导出对象
export const p = {
"id":"007",
"name":"张三疯",
"eat":function(){
alert("吃");
ff();
}
}
//此函数没有使用export关键字导出,所以,只能在当前js文件内部使用
function ff(){
alert("我只能在当前js被使用");
}
2)、导入(import):导入就是把其它js文件引入到当前js文件里。使用关键字import。
在使用import导入(export导出的)时,要使用花括号,
如:import {str,fun,p} from './person.js';
在index.js文件中,引入模块person.js;
//导入时,需要使用{},这是解构赋值。
import {str,fun,p} from './person.js';
window.onload = function(){
document.getElementById("btn01").onclick = function(){
console.log(str);
fun();
console.log(p.id);
p.eat();
}
}
3)、在html文件中引入index.js(注意: type="module")
注意:js中使用了模块化的关键字import,在引入时,script标签的type属性的值必须写成module。即:<script type="module" src="js/index.js"></script>
<body>
<input id="btn01" type="button" value="测试" />
</body>
<script type="module" src="js/index.js"></script>
注意:测试以上代码时,google浏览器要求放在服务器上进行 ,否则,就会有跨域问题。
4)、export default和export 有什么区别:
- 、export与export default均可用于导出常量、函数、文件、模块等
- 、在一个文件或模块中,export可以有多个,export default仅有一个,而且export default在导出是不需要变量名,相当于匿名的。
- 、通过export方式导出,在导入时要加{ },export default则不需要。
代码示例:
模块定义:dog.js
export default {
"name":"大黄",
"eat":function(){
alert("吃");
}
}
导入模块:
import d from './dog.js';
window.onload = function(){
document.getElementById("btn01").onclick = function(){
console.log(d);
d.eat();
}
}
原文地址:https://blog.csdn.net/jiang7701037/article/details/101215999
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。