commonjs规范说明

每个js文件都可当作一个模块

在服务器端: 模块的加载是运行时同步加载的（不会阻塞，等待时间回比较长）。在浏览器端: 模块需要提前编译打包处理

commonjs规范基本语法

暴露模块：暴露的模块本质上就是exports，exports本来就是一个空的对象，将value赋给它

module.exports = value

exports.xxx = value

引入模块：第三方模块:xxx为模块名。自定义模块: xxx为模块文件路径

require(xxx)

commonjs基于服务器端(node)应用

/**

 * 使用module.exports = value向外暴露一个对象

 */

"use strict"

module.exports = {

  foo() {

    console.log('moudle1 foo()')

  }

}
/**

 * 使用module.exports = value向外暴露一个函数

 */

"use strict"

module.exports = function () {

  console.log('module2()')

}
/**

 * 使用exports.xxx = value向外暴露一个对象

 */

"use strict"

exports.foo = function () {

  console.log('module3 foo()')

}

exports.bar = function () {

  console.log('module3 bar()')

}
"use strict"

//引用模块

let module1 = require('./modules/module1')

let module2 = require('./modules/module2')

let module3 = require('./modules/module3')

let uniq = require('uniq') // 安装的一个npm包

let fs = require('fs')

//使用模块

module1.foo()

module2()

module3.foo()

module3.bar()

console.log(uniq([1, 3, 1, 4, 3]))

fs.readFile('app.js', function (error, data) {

  console.log(data.toString())

})

commonjs基于浏览器端应用

创建项目结构

|-js

  |-dist //打包生成文件的目录

  |-src //源码所在的目录

    |-module1.js

    |-module2.js

    |-module3.js

    |-app.js //应用主源文件

|-index.html

|-package.json

  {

    "name": "browserify-test",

    "version": "1.0.0"

  }

下载browserify

Browserify：也称为CommonJS的浏览器端的打包工具

全局: npm install browserify -g，局部: npm install browserify --save-dev

定义模块1

/**

 * 使用module.exports = value向外暴露一个对象

 */

module.exports = {

  foo() {

    console.log('moudle1 foo()')

  }

}

定义模块2

/**

 * 使用module.exports = value向外暴露一个函数

 */

module.exports = function () {

  console.log('module2()')

}

定义模块3

/**

 * 使用exports.xxx = value向外暴露一个对象

 */

exports.foo = function () {

  console.log('module3 foo()')

}

exports.bar = function () {

  console.log('module3 bar()')

}

app.js (应用的主js)

//引用模块

let module1 = require('./module1')

let module2 = require('./module2')

let module3 = require('./module3')

let uniq = require('uniq')

//使用模块

module1.foo()

module2()

module3.foo()

module3.bar()

console.log(uniq([1, 3, 1, 4, 3]))

打包处理js

browserify js/src/app.js -o js/dist/bundle.js

页面使用引入

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--<script type="text/javascript" src="js/src/app.js"></script>-->

    <script type="text/javascript" src="js/dist/bundle.js"></script>

</body>

</html>

js模块化规范—commonjs的更多相关文章

  1. JS模块化规范CommonJS，AMD，CMD

    模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...

  2. JS 模块化 - 02 Common JS 模块化规范

    1 Common JS 介绍 Common JS 是模块化规范之一.每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见.Common JS 规范在 Node 端和浏览器端有不 ...

  3. [JavaScript] 后端js的模块化规范CommonJs

    CommonJs概述 主要是单个文件定义的变量,函数,类都是私有的,其他文件不可见,单位的作用域 通过 exports(modules.exports)对外暴露接口,通过 require 加载模块 n ...

  4. JS模块化规范CMD之SeaJS

    1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...

  5. js 模块化规范

    模块规范 CommonJS module.exports, exports 导出模块 require 加载模块, CommonJS 同步,服务端.实践者: nodejs ES6 export, exp ...

  6. js模块化规范AMD、CMD、CommonJS...

    1. AMD 1.1 什么是AMD? AMD 英文名 Asynchronous Module Definition ,中文名 异步模块定义 .这是一个浏览器模块化开发的规范. 由于浏览器环境执行环境的 ...

  7. js模块化规范

    1. CommonJS 用于服务端模块化编程,比如nodejs就采用此规范: 一个文件就是一个模块,require方法用来加载模块,该方法读取一个文件并执行,最后返回文件内部的module.expor ...

  8. JS模块化：CommonJS和AMD（Require.js）

    早期的JS中,是没有模块化的概念的,这一情况直到09年的Node.js横空出世时有了好转,Node.js将JS作为服务端的编程语言,使得JS不得不寻求模块化的解决方案. 模块化概念 在JS中的模块是针 ...

  9. js模块化规范—AMD规范

    AMD规范说明 AMD全称是:Asynchronous Module Definition(异步模块定义),github地址 是专门用于浏览器端, 模块的加载是异步的 AMD规范基本语法 定义暴露模块 ...

随机推荐

  1. JAVA & .NET创建对象构造函数调用顺序

    JAVA 定义Person类 package models; ​ public class Person { public Person() { System.out.println("pe ...

  2. [linux] tcpdump抓包案例

    1.常见参数 tcpdump -i eth0 -nn -s0 -v port 80 -i 选择监控的网卡 -nn 不解析主机名和端口号,捕获大量数据,名称解析会降低解析速度 -s0 捕获长度无限制 - ...

  3. Netty实战六之ChannelHandler和ChannelPipeline

    1.Channel的生命周期 Interface Channel定义了一组和ChannelInboundHandler API密切相关的简单但功能强大的状态模型,以下列出Channel的4个状态. C ...

  4. SSH整合jar包分享及登陆实例详解

    相关jar包分享:struts2+hibernate3+spring3 以及aop ,mysql,以及整合必须包. 链接:https://pan.baidu.com/s/1nCHmSsKU0hiV8D ...

  5. js对象工厂函数与构造函数

    转自:http://www.cnblogs.com/Jener/p/5920963.html ★概述:         使用对象字面量,或者向空对象中动态地添加新成员,是最简单易用的对象创建方法.然而 ...

  6. NPM测试模块之rewire教程

    摘要:有了rewire模块,再也不用担心测试私有函数了. 在玩转Node.js单元测试,我介绍了3个用于编写测试代码的NPM模块:Mocha, Should以及SuperTest.为了怂恿大家写单元测 ...

  7. JavaScript有这几种测试分类

    译者按: 也许你讨厌测试,但是你不得不面对它,所以至少区分一下单元测试.集成测试与功能测试?对吧… 原文: What are Unit Testing, Integration Testing and ...

  8. RBAC 几种常见的控制权限模型

    1. 几种常见的权限模型 2. ACL 和 RBAC 对比 3. RBAC 权限模型的优势 (1)简化了用户和权限的关系 (2).易于扩展 易于维护 4.优势(给权限和收回权限) 5.架构

  9. es6 语法 （类与对象）

    { // 基本定义和生成实例 class Parent{ constructor(name='mukewang'){ this.name=name; } } let v_parent1=new Par ...

  10. 用js实现超链接导航菜单点击切换选中时的状态

    项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了 ...