前端模块化CMD规范seajs的使用

前端模块规范有三种:CommonJs,AMD和CMD。

CommonJs用在服务器端,AMD和CMD用在浏览器环境

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD:提前执行(异步加载:依赖先执行)+ 延迟执行

CMD:延迟执行(运行到需加载,根据顺序执行)

这篇讲的是CMD规范。

CMD 即通用模块定义,CMD规范是国内发展出来的,就像AMD有个,CMD有个浏览器的实现,要解决的问题和一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同。接下来进入主题,如何使用SeaJs。

首先展示一下项目的目录结构:

接下来就是使用:

1.

在index.html中引入sea.js模块

2.

使用seajs.use()方法执行模块

seajs.use("./static/main.js")

其中main.js中定义模块:

define(function(require,exports,module){

letapp=document.getElementById("app")

app.innerHTML = "main app"

})

你可能不知道define是什么鬼,还有里面函数里三个参数是什么,先别急,这里我们先这么写,然后打开index.html后,页面上展示的就是"main app"了,当然我们的代码不可能全部写在这里,既然是模块化,就需要引入我们写好的模块。

3.

引入模块文件

这里我们写入一个叫module1.js的文件,内容如下:

define(function(require,exports,module){

letapp="module1-app"

exports.app=app

})

在打开main.js,在其中添加引入,内容如下:

define(function(require,exports,module){

letapp=document.getElementById("app")

// 不使用别名

letmodule1=require("./module1.js")

app.innerHTML=module1.app

})

保存退出,再一次打开index.html,这时你会发现页面上出现的就是“module1-app”了,现在我们就完成了模块化。

现在回过头来看一下遗留的问题,define函数:

define是seajs提供的一个函数,用来定义一个模块,其中可以传一个字符串,也可以是一个函数,我们这里就传了一个函数,其中require用来引入我们需要的其他模块,exports和module都是用来导出对象。

当然这只是最简单的使用实例,现在我们在丰富一下它,更贴近我们在项目中的开发,talk is cheap ,show me your code

在index.html中:

seajs-demo

// // 不使用别名

// seajs.use("./static/main.js")

// 使用别名

seajs.config({

alias:{

'module1':'../static/module1.js',

'module2':'../static/module2.js',

'main':'./static/main',

'jquery':'jquery-1.11.0.min.js'

}

})

console.log(seajs)

seajs.use("main")

// 使用多个模块,加载完后执行回调

// seajs.use(["main","jquery"],function(m, $){

// console.log(m)

// console.log($)

// })

seajs-demo

main.js中改造成这样:

define(function(require,exports,module){

letapp=document.getElementById("app")

// 不使用别名

// let module1 = require("./module1.js")

// let module2 = require("./module2.js")

// 使用别名

letmodule1=require("module1")

letmodule2=require("module2")

let$=require('jquery')

console.log(module1)

console.log(module2)

console.log($)

$("#app").css("color","red")

app.innerHTML=module2.app

})

引入的模块module1.js

define(function(require,exports,module){

letapp="module1-app"

// 使用别名引入模块

letmodule2=require("module2")

console.log(module2)//module2-app

exports.app=app

})

引入的模块module2.js

define(function(require,exports,module){

letapp="module2-app"

module.exports={

app

}

})

这里我们还引入了jquery,因为jquery是AMD规范的,所以我们需要对jquery进行一下改造:

define(function(require,exports,module){

//直接复制jquery的源码过来就ok了

})

这样我们就可以引入jquery模块了

现在来解释一下使用到的方法:

seajs.config(}),使用别名,我们要引入的模块如果url过长肯定特别烦,而且要引入的地方特别多,所以别名出现了,使用别名的地方主要有两个方法,一个是require(),另一个是seajs.use(),我们看一下控制台打印seajs对象就会一清二楚了

加载的模块都是相对于base:"http://localhost:63342/seajs/sea-module/"来获取的

a: ../ 表示上一目录

b: ./ 表示当前目录

c: 直接跟文件名 表示在base下追随

这样别名的使用就变得简单多了吧

seajs.use(),可以使用多个模块,传递一个数组,另一个参数可以传一个callback,最后执行callback,callback里的参数对应前面导出的模块对象,这里main没有导出对象,所以m={},$就是我们所熟知的jquery对象$。

exports其实就是module.exports的一个引用,我们用的多的就是module.exports了。

这就是国人开发的seajs,CMD规范的简单使用,有了这个,我们就可以告别使用来引入脚本带来的一系列问题了。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180605G1I69G00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券