模块化是一个很重要的编程思想,如果没有模块化,把代码写到一个文件里会造成代码很难阅读,并且文件体积也会变大,模块化就是把功能相似的代码放到一个文件中,然后通过模块导出让别人文件可以使用的代码,其他文件就可以通过导入进行使用模块中的导出的代码,这样就可以提高代码的复用性和封装性
导出模块 export
导出代码具体点叫导出模块 //es6原生支持模块化的加载 export 关键字 导出模块 export function formdata(){ console.log('我是菜菜') }
导入模块 import
//如果需要在别的文件中使用已经导出的模块,需要导入导出模块的文件 //如果是通过外部引入js文件的页面需要在script标签上加个type=‘module’这个属性 //为引入的这个js文件开启模块化,就不会和其他的js文件同名变量冲突 //这样才能使用import关键字,(因为type=“module”使得浏览器提供了一些支撑,所以type=“module”之后就可以使用es6的模块化,如果不设置则使用不了) <script src='./index.js' type='module'></script> //index.js import{formdata} from‘路径’; //使用 formdata() //vscode支持自动导入
导出多个条目
//命名方式的导出 export{formdata,dit} 导出的时候用的什么名字,导入的时候就使用什么名字
默认导出
导出 export default formdata; //使用default导出的话,导入就不用了指定导入的名字了 导入 import kk from‘路径’;
混合导入导出
导出 export default formdata; export {dit}; 导入 import formt,{dit}form ‘路径’;
别名导入 as 关键字
导出 export {dit}; 导入 import {dit as data}form ‘路径’;
全部导出和导入
可以把一个模块所有导出的条目一次性导入,给他一个名字,他会用这个名字创建一个对象,通过他可以 访问所有导出的条目 //所有导出的条目用星号表示,然后通过as关键字给他一个别名 import * as data form ‘路径’; //默认导出的条目没有名字 //默认条目导出 export default formdata; //调用默认导出条目需要用一个default属性来访问他,default就是那个函数 data.default(); 没有通过默认导出的条目直接通过对象点的方式调用即可 data.dit
javascript支持过程式,函数式,面向对象式这几种编程范式