前端模块化详解(完整版)

2401_84093054 2024-06-12 15:03:02 阅读 76

④定义模块代码

//module1.js

module.exports = {

msg: ‘module1’,

foo() {

console.log(this.msg)

}

}

//module2.js

module.exports = function() {

console.log(‘module2’)

}

//module3.js

exports.foo = function() {

console.log(‘foo() module3’)

}

exports.arr = [1, 2, 3, 3, 2]

// app.js文件

// 引入第三方库,应该放置在最前面

let uniq = require(‘uniq’)

let module1 = require(‘./modules/module1’)

let module2 = require(‘./modules/module2’)

let module3 = require(‘./modules/module3’)

module1.foo() //module1

module2() //module2

module3.foo() //foo() module3

console.log(uniq(module3.arr)) //[ 1, 2, 3 ]

⑤通过node运行app.js

命令行输入 node app.js,运行JS文件

(6)浏览器端实现(借助Browserify)
①创建项目结构

|-js|-dist//打包生成文件的目录|-src//源码所在的目录|-module1.js|-module2.js|-module3.js|-app.js//应用主源文件|-index.html//运行于浏览器上|-package.json{"name":"browserify-test","version":"1.0.0"}

②下载browserify

全局: npm install browserify -g

局部: npm install browserify --save-dev

③定义模块代码(同服务器端)

注意:index.html文件要运行在浏览器上,需要借助browserify将 app.js文件打包编译,如果直接在 index.html引入 app.js就会报错!

④打包处理js

根目录下运行 browserify js/src/app.js-o js/dist/bundle.js

⑤页面使用引入

在index.html文件中引入 <scripttype="text/javascript"src="js/dist/bundle.js"></script>

2.AMD

CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。AMD规范则是非同步加载模块,允许指定回调函数。由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式,所以CommonJS规范比较适用。但是,如果是浏览器环境,要从服务器端加载模块,这时就必须采用非同步模式,因此浏览器端一般采用AMD规范。此外AMD规范比CommonJS规范在浏览器端实现要来着早。

(1)AMD规范基本语法

定义暴露模块:

//定义没有依赖的模块

define(function(){

return 模块

})

//定义有依赖的模块

define([‘module1’, ‘module2’], function(m1, m2){

return 模块

})

引入使用模块:

require([‘module1’, ‘module2’], function(m1, m2){

使用m1/m2

})

(2)未使用AMD规范与使用require.js

通过比较两者的实现方法,来说明使用AMD规范的好处。

未使用AMD规范

// dataService.js文件

(function (window) {

let msg = ‘www.baidu.com’

function getMsg() {

return msg.toUpperCase()

}

window.dataService = {getMsg}

})(window)

// alerter.js文件

(function (window, dataService) {

let name = ‘Tom’

function showMsg() {

alert(dataService.getMsg() + ', ’ + name)

}

window.alerter = {showMsg}

})(window, dataService)

// main.js文件

(function (alerter) {

alerter.showMsg()

})(alerter)

// index.html文件

Modular Demo



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。