ContainJS 是一个基于 Commonjs 模块管理规范的浏览器端的 JavaScript 模块加载器(目前为非标准的,代码会持续迭代,现阶段主要提供思路,想集结各路 js 大神一同完善)
下载页面下载文件。
Containjs 目前的目录结构非常简单,项目中 JavaScript 都放在一个 "js" 目录。 例如, 你的项目中有一个 index.html 页面和一些 js 文件
├─index.html 项目html所在目录为主目录 ├─js/ 项目js目录 ├─├─lib/ 项目类库目录 // 非必须 ├─├─└─contain.js contain.js框架文件 // 也可以放在其他目录,只需引入即可 ├─├─a.js ├─├─b.js ├─└─app.js 项目的入口文件
在你的应用中包含 Contain.js 文件,并且使用服务器环境打开(本地服务器即可)
// index.html <script src="js/lib/Contain.js"></script>
然后在 js/app.js 入口文件中开始编写你的应用代码
Ps:需要注意的是,js/app.js 为默认入口文件,暂时未支持修改
Ps:如果您已经对于,Commonjs 规范有所了解,则不需要看此教程
Containjs 的模块依赖非常简单,使用 require(url) 函数直接引入即可
var a = require('a.js')
Ps:需要注意的是,在 Containjs 中,url 需要纯静态的字符串,不支持使用表达式或者变量
Containjs 的模块定义非常简单,满足 commonjs 模仿,以一个文件一个模块的形式,暴露接口的方式也符合 commonjs 规定
//a.js var name = 'a.js' var getName = function() { console.log(name) } // 使用模块中的全局变量 exports 提供对外接口 exports.getName = getName // 或者也可以这样 module.exports.getName = getName
答:原因是 containjs 所以的文件均有 ajax 异步加载
答:原因是 Containjs 模块中所依赖文件均是使用异步提前加载,同步 require 时调用执行,而异步提前加载的原理是,使用正则表达式去匹配出需要调用的模块的,如果使用表达式则会导致无法正确匹配结果导致程序错误 Ps:需要注意的是,在目前的版本中,请不要在注释中出现,require(url),因为这样也会对此模块进行加载,如果本模块这本应用中不需要使用则会导致,浪费的加载
答:在 containjs 中,任何模块,只要路径相同只会进行加载一次,加载完成后进行执行上下文的生产(context 但是不会执行),然后存在模块的 module.context 中
且在 containjs 中,require 在多次调用过某一模块过程中,只会进行一次生产模块接口,之后会缓存在 moudule.exports 中,与 node 中不同的是,node 直接返回 module.exports 的引用,而 containjs 则是使用 module.exports 的继承的引用,且每一次调用生产一个新的继承对象,这样带来的好处是,一个应用中只会生产一次本模块的接口,也不必担心被别处修改接口内容
模块是存在远程服务器上的,因此需要一个特殊的加载器来加载这些已经定义好的模块。 目前,根据模块化规范,对应的模块加载器有: CMD 直接执行:coolie.js 直接执行:Sea.js 链接: 如何实现一个 CMD 模块加载器 sea.js 与 RequireJS 的异同 AMD 直接执行:RequireJS。 链接: Javascript模块化编程(一):模块的写法 Javascript模块化编
模块加载和依赖管理 综合学习: 用 Browserify 创建 JavaScript 模块 [watch][$] Webpack 基本原理 [watch] browserify-handbook [read] ES6 模块 [read] 参考/文档: browserify system.js webpack 译者补充: React Webpack cookbook 详解前端模块化工具-Webpac
为了显示这种关系,让我们开始定义一个简单的模块,作为我们的示例应用程序的根模块。 app/app.module.ts 到目前为止,这是一个非常常见的模块,依赖于,有一个路由机制和两个组件:AppComponent和EagerComponent。 现在,让我们专注于定义导航的应用程序(AppComponent)的根组件。 app/app.component.ts import { Component
不管是用import还是用from mmmm import *的方式导入模块,当程序运行之后,回头在看那个存储着mmmm.py文件的目录中(关于mmmm.py文件可以看上一讲),多了一个文件: qw@qw-Latitude-E4300:~/Documents/ITArticles/BasicPython/codes$ ls mmm* mmmm.py mmmm.pyc 在这个目录下面,除了原来的
模块/包加载工具 SystemJS webpack Broeserify rollup.js
模块加载器指的是coolie.js,在浏览器中使用。 coolie.config() 配置模块加载器的各项参数,详细文档点这里。 coolie.use([moduleId]) 执行模块加载器。其中入口模块 id 可以省略,由 html 里的data-main属性指定,指定入口模块常用于单元测试。 coolie.use('path/to/app.js'); 通常,一个模块加载的配置文件如下: co
使用 ➜ coolie init -j ╔══════════════════════════════════════════════════════╗ ║ coolie@1.0.22 ║ ║ The front-end development builder. ║ ╚══════
我对RequireJS非常陌生,在编写QUnit到源代码时遇到了困难,源代码具有使用RequireJS动态加载模块的逻辑。 下面是源代码:factory/Factory.js * 运行 QUnit 时,模块“page/something”永远不会加载,并且永远不会调用回调。我在这里错过了什么吗?感谢您的回复。 **QUnit工厂/FactoryTests.js* *test-require-con