1.简单叙述前端模块化系统演进历史
1.文件划分方式
最早我们会基于文件划分的方式实现模块化,也就是 Web 最原始的模块系统。具体做法是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中,约定每个文件是一个独立的模块。使用某个模块将这个模块引入到页面中,一个 script 标签对应一个模块,然后直接调用模块中的成员(变量 / 函数)。
缺点:
模块直接在全局工作,大量模块成员污染全局作用域;
没有私有空间,所有模块内的成员都可以在模块外部被访问或者修改;
一旦模块增多,容易产生命名冲突;
无法管理模块与模块之间的依赖关系;
在维护的过程中也很难分辨每个成员所属的模块
2.命名空间方式
后来,我们约定每个模块只暴露一个全局对象,所有模块成员都挂载到这个全局对象中,通过将每个模块“包裹”为一个全局对象的形式实现,这种方式就好像是为模块内的成员添加了“命名空间”,所以我们又称之为命名空间方式,这种命名空间的方式只是解决了命名冲突的问题,但是其它问题依旧存在
3.使用立即执行函数表达式为模块提供私有空间。具体做法是将每个模块成员都放在一个立即执行函数所形成的私有作用域中,对于需要暴露给外部的成员,通过挂到全局对象上的方式实现,私有成员只能在模块成员内通过闭包的形式访问,这就解决了前面所提到的全局作用域污染和命名冲突的问题
4.IIFE依赖参数
在 立即执行函数 的基础之上,我们还可以利用 IIFE 参数作为依赖声明使用,这使得每一个模块之间的依赖关系变得更加明显
;(function ($) { // 通过参数明显表明这个模块的依赖
var name = 'module-a'
function method1 () {
console.log(name + '#method1')
$('body').animate({ margin: '200px' })
}
window.moduleA = {
method1: method1
}
})(jQuery)
5. CommonJS 规范
该规范约定以同步的方式加载模块,一个文件就是一个模块,每个模块都有单独的作用域,通过 module.exports 导出成员,再通过 require 函数载入模块
6.ES Modules 规范
ES Modules 是 ECMAScript 2015(ES6)中才定义的模块系统,使用export/export default导出 import 导入
2.在ES6中使用什么语句实现模块的导入导出?
export default/export 变量名 导出
import 变量名 from 地址 导入
3.补充下面代码
//moudle5.js
export class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return this.x + '\t' + this.y;
}
}
//index.js
import Point from './moudle5.js'
let p=new Point(2,3);
console.log(p.toString());//2 3
4.在下滑线处补充完下面moudle6.js模块的程序
//moudle6.js
__export default_____function (x, y) {
return x * y;
}
//index.js
import myMethod from './moudle6'
console.log(myMethod(2,2))
5下面程序打印的结果为?
//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";
//main.js文件
import {foo, bar} from "./lib";
console.log(foo());//fnFoo foo
console.log(bar);//stringBar
6//add.js
export let add=(a, b) => {
if (typeof a == 'number' && typeof b == 'number') {
return a + b
} else {
return 0
}
}
//main.js文件
import {add} from "./add";
console.log(add(10,'a'));//0
7下面程序执行结果为?
// a.js
import {bar} from './b';
console.log('a.js');
console.log(bar);
export let foo = 'foo';
// b.js
import {foo} from './a';
console.log('b.js');
console.log(foo);
export let bar = 'bar';
执行node a.js运行结果为
// b.js
// undefined
// a.js
// bar
8、node和java 和php有何区别?
1、Java和php是一种编程语言,而Node是用C,C ++编写的基于Chrome V8引擎的JavaScript运行环境。
2.node采用了遵循事件驱动的非阻塞I/O模型,有了node平台使得JavaScript可以在服务端运行
且运行速度比java和php运行的速度快
9、完善格式化日期模块 年-月-日 时:分:秒
// 导出格式化日期函数 node_modules/formatDate/index.js
module.exports=function(date){
let year=date.getFullYear();
let month=date.getMonth()+1;
let day=date.getDate();
let hour=date.getHours();
let min=date.getMinutes();
let sec=date.getSeconds();
return `${year}年${month}月${day}日${hour}:${min}:${sec}`
}
// date.js
const format=require('formatDate');
let date=new Date();
console.log(format(date))
10、封装一个计算器模块 加减乘除
// node_modules/Comput/index.js
class Comput{
constructor(a,b){
this.a=a;
this.b=b;
}
add(){
return this.a+this.b
}
divede(){
return this.a/this.b
}
Multiply(){
return this.a*this.b
}
subtract(){
return this.a-this.b
}
}
module.exports=Comput
//main.js
const Comput=require('Comput')
let com=new Comput(1,2);
let res=com.divede(1,2);
console.log(res)