专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

前端模块化(CMD) 前端模块化开发是什么意思

ins518 2024-10-04 02:09:47 技术文章 25 ℃ 0 评论

seajs的作者是国内大牛淘宝前端步道者玉伯。seajs全面拥抱Modules/Wrappings规范,不用requirejs那样回调的方式来编写模块。而它也不是完全按照Modules/Wrappings规范,seajs并没有使用declare来定义模块,而是使用和requirejs一样的define,用seajs定义模块的写法如下:

定义模块时无需罗列依赖数组,在factory函数中需传入形参require,exports,module,然后它会调用factory函数的toString方法,对函数的内容进行正则匹配,通过匹配到的require语句来分析依赖,这样就真正实现了commonjs风格的代码。

上面的main.js执行会输出如下:

main.js执行

a.js执行

hello, a.js

a.js和b.js都会预先下载,但是b.js中的代码却没有执行,因为还没有点击按钮。当点击按钮的时候,会输出如下:

b.js执行

hello, b.js

可以看到b.js中的代码此时才执行。这样就真正实现了“就近书写,延迟执行“,不可谓不优雅。

如果你一定要挑出一点不爽的话,那就是b.js的预先下载了。你可能不太想一开始就下载好所有的资源,希望像requirejs那样,等点击按钮的时候再开始下载b.js。本着兼容并包的思想,seajs也实现了这一功能,提供require.async API,在点击按钮的时候,只需这样写:

b.js就不会在一开始的时候就加载了。这个API可以说是简单漂亮。

关于模块对外暴漏API的方式,seajs也是融合了各家之长,支持commonjs的exports.xxx = xxx和module.exports = xxx的写法,也支持AMD的return写法,暴露的API可以是任意类型。

官方的ECMA面向未来的ES6模块标准

使用模块的时候用import关键字,如:

在花括号中指明需使用的API,并且可以用as指定别名。

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表