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. Linux学习笔记之基本指令

    1.ll 注:详细展示当前文件夹下的所有文件及目录  ,与 ls -al 有异曲同工的作用 2.free -m/-h 注:-m:显示当前的内存信息,-m表示以MB为单位显示:-h:以人类能读懂的形式显 ...

  2. WPF，强制捕获鼠标事件，鼠标移出控件外依然可以执行强制捕获的鼠标事件

    在WPF中,只有鼠标位置在某个控件上的时候才会触发该控件的鼠标事件.例如,有两个控件都注册了MouseDown和MouseUp事件,在控件1上按下鼠标,不要放开,移动到控件2上再放开.在这个过程中,控 ...

  3. [angularjs] angularjs系列笔记（四）过滤器

    过滤器可以使用一个管道字符(|)添加到表达式和指令中,这不就是模板函数吗 <body> <div ng-app="Home"> <div ng-con ...

  4. Netty实战十二之WebSocket

    如果你有跟进Web技术的最新进展,你很可能就遇到过“实时Web”这个短语,这里并不是指所谓的硬实时服务质量(QoS),硬实时服务质量是保证计算结果将在指定的时间间隔内被递交.仅HTTP的请求/响应模式 ...

  5. Redis学习一(基础入门).

    一.前言 Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.key-Value 的数据库.并提供多种语言的API. 通常,Redis 将数据存储于 ...

  6. Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/hadoop/fs/CanUnbuffer

    在执行spark on hive 的时候在  sql.show()处报错 : Exception in thread "main" java.lang.NoClassDefFoun ...

  7. javascript模块化编程-立即执行函数（IIFE）

    IIFE 全拼Imdiately Invoked Function Expression,立即执行的函数表达式. 语法 var module1 = (function(){ var _count = ...

  8. c3p0链接池配置使用

    c3p0链接池初步使用:直接上代码 c3p0是开源面粉的连接池,目前使用它的开源项目主要有:Spring,Hibernate等,使用时需要导入相关jar包及配置文件c3p0-config.xml文件 ...

  9. CSS笔记1：属性--定位

    相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块. 元素定位 属性 版本 继承 描述 position c ...

  10. Win7怎么录制电脑屏幕视频

    我们在看视频的时候,经常会看到自己特别喜爱的视频,想要把其中的某些片段给录制下来,那么Win7怎么录制电脑屏幕视频?其实步骤很简单,下面就来分享下具体的步骤. 使用工具: 电脑 操作方法: 第一步.首 ...