模块化开发的核心_CSS学习

当前位置：网站建设 > 技术支持

模块化开发的核心_CSS学习

资料来源：网络整理时间：2023/3/4 3:11:18 共计：3591 浏览

模块化开发的核心？

核心：导出和导入；

1、普通模块化：

同级新建文件index.html,a.js.b.js三个文件；

index.html中引入a.js和b.js。（a.js在前）

a.js中导出：

var modules=(function(){

var name='jack';

var flag=true;

function num(a,b){

return a+b;

}

var obj={};

obj.flag=flag;

obj.num=num;

obj.name=name;

return obj;

})()

b.js中导入：

console.log(modules.name)//jack

console.log(modules.num(1,6))//7

console.log(modules.flag)//true

在b.js可以取出a.js中obj的值。

2、commonJs模块化：export

a.js导出：

var name='jack';

var flag=true;

function num(a,b){

return a+b;

}

export.module({

name,

flag,

num

)}

b.js导入：

var {name,flag,num}=require('a.js的路径');//name,flag,num可以直接用

var obj=require('a.js的路径');//obj.name='jack',obj.flag=true,obj.num(1,6)=7

3、es6模块化：export导出,import导入

export的基本使用：

a.js:

导出方式一：

export var name="jack";

export var height=1.88;

导出方式二：

var name="jack";

var height=1.88;

export {name,height};

b.js

import {name,height} from 'a.js';

console.log(name);//jack

console.log(height);//1.88

4、导出函数或类：

//直接导出

//export const num1=123;

//导出函数：

export function add(num1,num2){

return num1+num2

}

//导出类

export class Person{

run(){console.log('this.a')}

}

//导入函数和类

import {add,Person} from './export.js'

console.log(add(1,2));

const p=new Person();

p.run()

5、export default:导入者自己命名。(同一个模块中只能有一个default)

//导出

export default function(){

console.log('this.default');

}

//导入

import de from './export.js';

de();

6、普通html中引入export的两个js文件，需要给script的type设为module;

7、全部统一导出：*可以导入模块中所有的export变量，

import * as all from './export.js';//all，为*的别名，方便后续使用。

console.log(all.num1,'aaa')

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：方鼎和圆鼎在象征上的区别_CSS学习 | ·下一条：web开发需要学什么_CSS学习