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. With As 用法

    含义:WITH AS 短语,也叫做子查询部分(subquery factoring)也称公用表表达式(CTE), ,可以定义一个SQL片断,该SQL片断会被整个SQL语句用到.可以使SQL语句的可读性 ...

  2. dotnetcore-officeaddin-toolbox : Office 365 Add-in开发人员的工具箱

    在上一篇文章(.NET Core开源行动:一键创建Excel Add-in) 中我给大家展示了一套为Office 365 Add-in开发人员准备的模板库,你可以通过 dotnet new excel ...

  3. 6. CountDownLatch 闭锁

    package com.gf.demo05; import java.util.concurrent.CountDownLatch; /** * CountDownLatch : 闭锁,在完成某些操作 ...

  4. (一):C++分布式实时应用框架----整体介绍

    C++分布式实时应用框架 (Cpp Distributed Real-time Application Framework) 版权声明:本文版权及所用技术归属smartguys团队所有,对于抄袭,非经 ...

  5. hihoCoder编程练习赛70

    题目1 : 数位翻转 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个数 n,你可以进行若干次操作,每次操作可以翻转 n 的二进制表示下的某一位,即将 0 变成 ...

  6. springboot 集成 mybatis

    1,添加依赖 <!-- mybatis --> <dependency> <groupId>org.mybatis.spring.boot</groupId& ...

  7. WangleEditor3提交数据（servlet-jsp）

    用servlet提交 WangEditor3编辑的内容,找了很多资料没发现,大多用的框架,今天终于解决了,记录一下. WangEditor3不支持放在textarea中,servlet是无法直接获取到 ...

  8. 性能优化7--App瘦身

    1. 前言 如果你对App优化比较敏感,那么Apk安装包的大小就一定不会忽视.关于瘦身的原因,大概有以下几个方面: 对于用户来说,在功能差别不大的前提下,更小的Apk大小意味更少的流量消耗,也意味着更 ...

  9. NoHttp封装--07 自定义异步任务框架

    MainActivity: public class MainActivity extends Activity implements View.OnClickListener { .... @Ove ...

  10. Android string.xml 添加特殊字符

    解决项目中在string.xml 中显示特殊符号的问题,如@号冒号等.只能考虑使用ASCII码进行显示: @号 @ :号 : 空格   以下为常见的ASCII十进制交换编码: --> <- ...