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. Netty 系列二（传输）.

    一.前言 上一篇文章我们提到 Netty 的核心组件是 Channel.回调.Future.ChannelHandler.EventLoop,这篇文章主要是对 Channel (Netty传入和传出数 ...

  2. java多线程高并发

    旭日Follow_24 的CSDN 博客 ,全文地址请点击: https://blog.csdn.net/xuri24/article/details/81293321 “高并发和多线程”总是被一起提 ...

  3. 将Hexo博客部署到云主机

    摘要: 在云主机上搭建一个git裸仓库,然后使用nginx作为网页服务器,就可以轻松将Hexo博客通过git部署到云主机上. 这是一个忧伤的故事 我的博客KiwenLau之前部署在Coding Pag ...

  4. Java中重写与重载

    重写(覆盖):发生在子类与父类之间:方法名相同方法的个数.类型相同返回值类型小于等于父类的返回值类型 重载:发生在一个类中:方法名相同方法的个数.类型不同返回值类型可以相同也可以不相同

  5. html/css的学习之路(2)

    今天我跟大家说一下html,html里面其实什么东西都可以放进去的.首先创建一个文本,改变他的后缀名为html.这时有个最重要的一点不管是html还是css都不可以用中文和符号命名. 这是html中的 ...

  6. pycharm最新code码，分享给大家

    最新的pycharm激活码,到明年11月份,一名努力的Python程序员 这俩天,在忙学校布置的小项目,给大家更新少了,我会慢慢补上的,努力学pycharm,有什么问题可以问我哦,我竭尽所能帮大家解答 ...

  7. 归并排序（MergeSort）和快速排序(QuickSort)的一些总结问题

    归并排序(MergeSort)和快速排序(QuickSort)都是用了分治算法思想. 所谓分治算法,顾名思义,就是分而治之,就是将原问题分割成同等结构的子问题,之后将子问题逐一解决后,原问题也就得到了 ...

  8. 通俗的理解java设计模式的准则

    本文部分内容摘抄自https://www.cnblogs.com/dolphin0520/p/3919839.html,加入了自己的理解: 一.单一职责原则 原文链接:http://blog.csdn ...

  9. mongodb数据分组按字符串split

    db.getCollection('users').aggregate([ {$match:{ZWBH:11}}, {$unwind:'$UUID'}, {$project : { PM : { $s ...

  10. Android RecycleView多种布局实现（工厂模式）

    RecycleView是个很常用的控件,很多APP中都可以看到它的身影,同时它也是个很难用的控件,主要就难在多种布局的实现. 在<第一行代码—Android>这本书里边有个RecycleV ...