RequireJS导入CMD模块

简介: RequireJS导入CMD模块

搞了一段时间的JAVA,又要再一次回归前端技术了,其实这么说也不准确,因为现在的前端技术已经囊括了太多~

这次回来,是为了征服移动端,也很可能最后一次为目前的公司征战沙场了(有种说不出道不明预感~)!我一直坚信,应用级别的APP开发套件迟早一定是H5的天下,跨平台永远是人类追求的目标,这个应该是毋庸置疑的!谁能做到真的“跨平台”,谁就能笼络更多的人心。

目前我看到的发展史是:

Native --> Hybrid --> H5

虽然这路程并不平坦,反反复复坎坎坷坷,但大方向还是非常明确的~

扯了那么多,今次的主题是AMD和CMD,之所以纠结这两个概念,是因为目前项目中计划开发一些用于封装逻辑的SDK,那么,就需要我们提供各种语言和平台下的SDK,当然这个范围一开始并不会太大,毕竟能力有限。

前端,移动端,Node端我打算实现基于JS的SDK,这就要求在项目模块化组织时选择一个通用性更强的标准,一开始打算使用RequireJS,因为目前公司的项目中使用的就是它,不过,它是基于AMD概念的,也就是说更偏重于前端,不过,还好,RequireJS可以兼容基于CMD概念实现的模块,下面我看一个例子:

Project
    |-index.html
    |-main.js
    |-scripts
    |    |-require.js
    |-lib
        |-foo
        |    |-main.js
        |-bar
            |-main.js

index.html

<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
<script data-main="./main" src="scripts/require.js"></script>
</body>
</html>

main.js

require.config({
    baseUrl: "./lib", //所有模块的base URL,注意,以.js结尾的文件加载时不会使用该baseUrl
    packages:["foo","bar"],    //需要把所有CMD的模块都声明在这里
    waitSeconds: 10   //waitSeconds是指定最多花多长等待时间来加载一个JavaScript文件,用户不指定的情况下默认为7秒
});

require(["foo"],function(foo){
    console.log("test");
    foo.log();
});

lib/foo/main.js

define(function(require, exports, module){
    exports.name = "foo";
    exports.log = function(){
        console.log(this.name);
    }

    var bar = require("bar");
    bar.log();

});

lib/bar/main.js

define(function(require, exports, module){
    exports.name = "bar";
    exports.log = function(){
        console.log(this.name);
    }
});

代码很简单,直接放在web目录下测试即可,运行看一下控制台的输出:

bar
test
foo

留意一下输出的顺序,“bar”甚至再“test”之前,这是为什么呢?理由很简单,因为foo模块被main.js依赖,所以requireJS会先加载并执行它,这个时候发现foo模块又依赖bar模块,所以会先去加载bar模块,加载完毕后执行foo模块中写的逻辑,这个时候会打印出“bar”,接下来,main.js的回调逻辑会执行,打印“test”,然后再调用“foo.log()”打印最后的“foo”。

这样,我们就可以把SDK以CMD规范来编写,将来用于多种场景~

参考:

RequireJS 中文网

相关文章
|
9月前
|
JavaScript
.ts 文件编译成 .js 文件,以及 VSCode 自动编译配置
.ts 文件编译成 .js 文件,以及 VSCode 自动编译配置
339 0
|
11月前
|
前端开发 JavaScript
模块打包中CommonJS与ES6 Module的导入与导出问题详解
文章全面解析了CommonJS模块系统的模块定义、导出、导入的操作和注意事项。同时,它也简要地提到了ES6 Module的相关概念,包括命名导出、默认导出、命名导入、默认导入、混合导入和复合写法。
407 0
|
JavaScript 前端开发
js 模块化基础和模块规范AMD、CMD、ES6模块
js 模块化基础和模块规范AMD、CMD、ES6模块
88 0
|
Linux Shell
pkg-config 自动补全 C 编译库依赖
pkg-config 是一个在源代码编译时查询已安装的库的使用接口的计算机工具软件。
81 0
|
算法 区块链 数据安全/隐私保护
【Python零基础入门篇 · 26】:内置模块的使用:sys模块、time模块、pyinstall模块(打包py文件以及更换图标)、hashlib模块(加密)
【Python零基础入门篇 · 26】:内置模块的使用:sys模块、time模块、pyinstall模块(打包py文件以及更换图标)、hashlib模块(加密)
565 0
【Python零基础入门篇 · 26】:内置模块的使用:sys模块、time模块、pyinstall模块(打包py文件以及更换图标)、hashlib模块(加密)
|
缓存 JSON JavaScript
require 加载模块时的注意点|学习笔记
快速学习 require 加载模块时的注意点
91 0
|
JSON 数据格式 Python
Python基础 模块化编程(模块的导入) 模块化编程 模块以主程序的方式运行 包和目录 第三方库的安装和导入方法
python基础知识模块,模块化编程,模块的创建和导入 python基础,模块的创建和导入,让模块以主程序的方式运行,python中的包和目录的区别和创建。模块导入另一个包的模块的方法,导入带有包的模块时的注意事项,常见的内置模块。 第三方模块的安装和导入的方法
Python基础 模块化编程(模块的导入)   模块化编程 模块以主程序的方式运行 包和目录 第三方库的安装和导入方法
|
JavaScript
ES6中模块导入遇到的问题及其解决办法
今天遇到了一个小的问题,我们来看一下,情况是这样的:在没遇到过这个坑之前,如果需要引入一个模块,我通常的做法都是在HTML文件中内嵌一个script标签,并通过指定 type="module" 来实现;然而今天我却没有按照往常这样做,而是指定两个js文件,其中一个文件通过 export 暴露出需要的变量和函数,在另一个文件中通过 import 导入,结果就遇到了报错,来给各位看下报错信息:
ES6中模块导入遇到的问题及其解决办法
封装dotenv库实现类似Vite加载环境变量的行为
封装dotenv库实现类似Vite加载环境变量的行为
|
JavaScript 前端开发 API
一文搞懂JS模块、模块格式、模块加载器和模块打包器(上)
接下来我们就来一起学习下js模块、模块化解决方案、模块加载器和模块打包器的区别。 本文的主要意图是帮大家快速理解现代前端JS开发的概念,并不会深入去探讨每种工具和模式。