1.简单叙述前端模块化系统演进历史
(1)函数式编程,将一系列功能性代码封装成一系列函数。但是容易出现命名冲突。
(2)对象封装 将一系列有联系的函数封装到一个对象里,只对外提供一个对象名。但是其属性值在外部代码里是可以修改的。
(3)闭包 将模块放到一个匿名函数里,外部访问不到。
(4)require.js(AMD)
require.js是AMD规范的实践,
分为define(定义模块)和require(调用模块)两个函数
(5)sea.js(CMD)
sea.js是CMD规范的实践,
分为define(定义模块)和seajs(加载、配置模块)两个函数
(6)模块打包器——webpack
webpack的主要组成部分有loader、plugin。
loader负责所有资源的转换整合(全面),
plugin可以拓展webpack的功能(自由)。
(7)ES6模块化标准
2.在ES6中使用什么语句实现模块的导入导出?
使用export导出,用import导入。
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} "./moudle5.js"
let p=new Point(2,3);
console.log(p.toString());
4.在下滑线处补充完下面moudle6.js模块的程序
//moudle6.js
_______function (x, y) {//export default
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
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');//a.js
console.log(bar);//bar
export let foo = 'foo';
// b.js
import {foo} from './a';
console.log('b.js');//b.js
console.log(foo); //undefined
export let bar = 'bar';
执行node a.js运行结果为
9、完善格式化日期模块 年-月-日 时:分:秒
//a.js
function Timer(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var d=date.getDate();
var h=date.getHours();
var min=date.getMinutes();
var s=date.getSeconds();
console.log( `${year}年${month}月${d}日${h}点${min}分${s} `)
}
export {Timer}
//main.js
import {Timer} from "./a.js";
Timer();
10、封装一个模块实现 加减乘除
class Comput{
add(){
let sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
console.log(sum)
}
sub(){//计算两位数字
let sum=0;
for(var i=0;i<arguments.length;i++){
for(var j=1;j<arguments.length;j++){
sum=arguments[0];
sum-=arguments[j];
}
}
console.log(sum)
}
multi(){
let sum=1;
for(var i=0;i<arguments.length;i++){
sum*=arguments[i];
}
console.log(sum)
}
divide(){//只能计算两位数字
let sum=0;
for(var i=0;i<arguments.length;i++){
for(var j=1;j<arguments.length;j++){
sum=arguments[0];
sum/=arguments[j];
}
}
console.log(sum)
}
}
//a.js
var formatdate=require('formatDate');
// console.log(formatdate(new Date()));
var comput=new formatdate();
comput.add(1,2,3,4,5);
comput.sub(1,2,3,4,5);
comput.multi(1,2,3,4,5);
comput.divide(1,2,3,4,5);