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. ASP.NET Core入门

    一.搭建开发环境 在Windows平台下,开发.NET Core 程序需要安装如下内容: 1. .NET Core runtime 2. Visual Studio 2015 with Update ...

  2. SQL 注入漏洞

    首先要知道sql注入形成的原因:用户输入的数据被sql解释器执行 sql注入又分:数字型,字符型,cookie 注入,post注入,延时注入,搜索注入,base64注入 如何甄别一个模块是否有sql注 ...

  3. [PDOException] PDO::__construct(): php_network_getaddresses: getaddrinfo failed:

    执行数据迁移 php artisan migrate 报错: 网上很多资料说开启allow_open_url等其实没卵用...貌似问题出在dns上....原来数据库的配置是这样的 DB_CONNECT ...

  4. 2.QT-窗口组件(QWidget),QT坐标系统,初探消息处理(信号与槽)

    本章主要内容如下: 1) 窗口组件(QWidget) 2) QT坐标系统 3) 消息处理(信号与槽) 窗口组件(QWidget) 介绍 Qt以组件对象的方式构建图形用户界面 Qt中没有父组件的顶级组件 ...

  5. mybatis整合springboot 以及需要注意的细节

    具体怎么整合的网上有很多优秀的博客介绍,这里就直接引用一篇个人觉得非常详细的教程: https://blog.csdn.net/winter_chen001/article/details/77249 ...

  6. regression and anova

    regression一般是统计学的回归回归,研究一个随机变量Y对另一个(X)或一组(X1,X2,-,Xk)变量的相依关系的统计分析方法.研究一 个或多个随机变量Y1 ,Y2 ,-,Yi与另一些变量X1 ...

  7. 汇编语言--微机CPU的指令系统（五）（标志位操作指令）

    (2)标志位操作指令 标志位操作指令是一组对标志位置位.复位.保存和恢复等操作的指令. 1.进位CF操作指令 Ø 清进位指令CLC(Clear Carry Flag):CF←0 Ø 置进位指令STC( ...

  8. 开源前端脚本错误监控及跟踪解决项目-BadJS 试用

    BadJS 是 一个web 前端脚本错误监控及跟踪项目.此项目为鹅厂 imweb(qq群:179045421) 团队的开源项目.此项目支持单机,集群,docker.存储支持mongodb等. 官网文档 ...

  9. 减少页面加载时间的n种方法

    减少HTTP请求 1:减少调用其他页面.文件的数量 2:使用css spirit , 减少图片加载次数 压缩js,css代码 1:一般js.css文件中存在大量的空格.换行.注释,这些利于阅读,如果能 ...

  10. git参考, 小结

    git官网: https://git-scm.com 菜鸟教程: http://www.runoob.com/git/git-tutorial.html 廖雪峰: https://www.liaoxu ...