ContailJS

JavaScript 模块加载器
授权协议 未知
开发语言 JavaScript
所属分类 Web应用开发、 常用JavaScript包
软件类型 开源软件
地区 国产
投 递 者 贾俊喆
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ContainJS 是什么?

ContainJS 是一个基于 Commonjs 模块管理规范的浏览器端的 JavaScript 模块加载器(目前为非标准的,代码会持续迭代,现阶段主要提供思路,想集结各路 js 大神一同完善)

使用

获取 Containjs

下载页面下载文件。

目录结构

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 为默认入口文件,暂时未支持修改

Containjs 模块使用教程,像写 node 一样写浏览器端代码即可

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 常见问题解答

为什么 index.html 页面必须使用服务器环境打开,例如:127.0.0.1/index.html 打开

答:原因是 containjs 所以的文件均有 ajax 异步加载

为什么 require(url) 中的 url 不可以是变量或者表达式。只能是单纯字符串

答:原因是 Containjs 模块中所依赖文件均是使用异步提前加载,同步 require 时调用执行,而异步提前加载的原理是,使用正则表达式去匹配出需要调用的模块的,如果使用表达式则会导致无法正确匹配结果导致程序错误 Ps:需要注意的是,在目前的版本中,请不要在注释中出现,require(url),因为这样也会对此模块进行加载,如果本模块这本应用中不需要使用则会导致,浪费的加载

如果我在本应用中多次 require 某个模块会不会导致请求数太多?

答:在 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