黑马程序员技术交流社区

标题: 【广州前端】-javascript中的模块化 [打印本页]

---

作者: 李盼盼老师    时间: 2018-5-24 15:32
标题: 【广州前端】-javascript中的模块化

【简介】

所谓的模块也叫元件或者组件，可以理解为可以服用的功能代码。比如说a页面用功能了，b页面用到了这功能了，所以我们可以把这个功能抽为组件，便于使用。

【css模块化】

@import方法

使用@import将不同功能的css文件引入main.css中以此实现模块化

【如遵循CMD规范的sea.js】

组件的定义：
在js文件中，使用define方法可定义组件。这个方法的参数是一个函数，里面有三个参数，依次分别是require，exports，medule。
require:是在js文件中引模块的。
如

[JavaScript] 纯文本查看 复制代码

var a= require（“./a.js”）

exports:输出的变量都挂载这exports上，这样做的好处是减少对外暴露的变量。

如

  

[JavaScript] 纯文本查看 复制代码

 exports.mun=1;

   exports.name="lee;  

   exports.show = function(){

        renturn a+b;

}

module：可以把返回的所以变量都写在module里。可返回一组。
如

[JavaScript] 纯文本查看 复制代码

module.exports={



    a:12,



    b:5,



    show:function(){



    }



    //当然了在es6中，json里的函数可以把“：函数名”去掉，简写为



   // show（）{



   // }



}

组件的使用：
在html中，当然先是引用sea.js了，在使用，在script中通过seajs.use()使用。

[JavaScript] 纯文本查看 复制代码

<script src=" sea.js"></script>



    <script> 



    seajs.use('./index.js',function(module){



        console.log(module.add())



    }) 



</script> 

如果引用一个以上的组件，就可以用把这一组组件放在数组中就可以了，如下：

[JavaScript] 纯文本查看 复制代码

seajs.use(['./index1.js'，'./index2.js',.....],function(index1，index，....){

        console.log(module.add())

})

【node中的模块化】

1，没有define；

2，有exports，require，module

module.exports={a，b，c} 批量导出

3，引用自定义模块，为了不和系统模块冲突，

自定义模块放在node_modules里，

或者前面加./强制指导加载的目录。

定义模块：

可以一个一个定义:

[JavaScript] 纯文本查看 复制代码

exports.a=12;



exports.b=5;

可以定义一组:

[JavaScript] 纯文本查看 复制代码

let a=12；



let b=5；



module.exports = {a,b}

引用模块：
node.js 也是js，遵循cmd规范，使用require引用模块。

[JavaScript] 纯文本查看 复制代码

let mod=require('./aaa.js'); 后缀.js可简写不写。前面的./如果不写，就需要把这个模块放在node_modules文件夹里，不然会以node里的系统模块有影响。

【ES6模块化方法】

被导入文件a.js

[JavaScript] 纯文本查看 复制代码

export function bbb(){



    alert('bbb');



}



export function ccc(){



    alert('ccc');



}



export function ddd(){



    alert('ddd');



}

主文件main.js

[JavaScript] 纯文本查看 复制代码

import * as b from './b.js';//导入所有内容



import {bbb,ccc} from './b.js';//只导入需要的函数

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2