js模块化规范—commonjs
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的更多相关文章
- JS模块化规范CommonJS，AMD，CMD
模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...
- JS 模块化 - 02 Common JS 模块化规范
1 Common JS 介绍 Common JS 是模块化规范之一.每个文件都是一个作用域,文件里面定义的变量/函数都是私有的,对其他模块不可见.Common JS 规范在 Node 端和浏览器端有不 ...
- [JavaScript] 后端js的模块化规范CommonJs
CommonJs概述 主要是单个文件定义的变量,函数,类都是私有的,其他文件不可见,单位的作用域 通过 exports(modules.exports)对外暴露接口,通过 require 加载模块 n ...
- JS模块化规范CMD之SeaJS
1. 在接触规范之前,我们用模块化来封装代码大多为如下: ;(function (形参模块名, 依赖项, 依赖项) { // 通过 形参模块名 修改模块 window.模块名 = 形参模块名 })(w ...
- js 模块化规范
模块规范 CommonJS module.exports, exports 导出模块 require 加载模块, CommonJS 同步,服务端.实践者: nodejs ES6 export, exp ...
- js模块化规范AMD、CMD、CommonJS...
1. AMD 1.1 什么是AMD? AMD 英文名 Asynchronous Module Definition ,中文名 异步模块定义 .这是一个浏览器模块化开发的规范. 由于浏览器环境执行环境的 ...
- js模块化规范
1. CommonJS 用于服务端模块化编程,比如nodejs就采用此规范: 一个文件就是一个模块,require方法用来加载模块,该方法读取一个文件并执行,最后返回文件内部的module.expor ...
- JS模块化：CommonJS和AMD（Require.js）
早期的JS中,是没有模块化的概念的,这一情况直到09年的Node.js横空出世时有了好转,Node.js将JS作为服务端的编程语言,使得JS不得不寻求模块化的解决方案. 模块化概念 在JS中的模块是针 ...
- js模块化规范—AMD规范
AMD规范说明 AMD全称是:Asynchronous Module Definition(异步模块定义),github地址 是专门用于浏览器端, 模块的加载是异步的 AMD规范基本语法 定义暴露模块 ...
随机推荐
- MyBatis学习总结（二）——MyBatis核心配置文件与输入输出映射
在上一章中我们学习了<MyBatis学习总结(一)——ORM概要与MyBatis快速起步>,这一章主要是介绍MyBatis核心配置文件.使用接口+XML实现完整数据访问.输入参数映射与输出 ...
- WebAPI参数传值string转bool，int转bool相关问题
今天在公司同事问了我一个问题,用postman传递json字符串给接口,接口获取到的值不正确. 我就看到下面的json数据: { "Mark":"1" } 接口 ...
- Maven（七）Eclipse使用Maven命令
由于没有mvn compile (其余命令类似) 可以点解上面框中选项手动输入compile
- 重装MacOS
从U盘启动 开启或重新启动您的 Mac 后，立即按住 Option 键。 当您看到“启动管理器”窗口时，松开 Option 键。 选择您的启动磁盘，然后点按箭头或按下 Return 键。 Mac 的启 ...
- Verification and validation
Verification Verification is the process to make sure the product satisfies the conditions imposed a ...
- Unix awk的流程控制BEGIN和END的讲解
你可能对Unix比较熟悉,但你可能对Unix awk很陌生,这一点也不奇怪,的确,与其优秀的功能相比,awk还远没达到它应有的知名度. 流程控制语句是任何程序设计语言都不能缺少的部分.任何好的语言都有 ...
- 持续集成 自动化构建、测试、部署您的Coding代码
持续集成(Continuous Integration)指的是,频繁地(一天多次)将代码集成到主干. 持续集成的目的,就是让产品可以快速迭代,同时还能保持高质量. 它的核心措施是,代码集成到主干之前, ...
- ES6之Spread Operater拷贝对象
译者按: 对象拷贝和合并使用展开运算符(Spread Operator)很方便! 原文: Master Javascript’s New, Cutting-Edge Object Spread Ope ...
- vue从入门到进阶：渲染函数 & JSX（八）
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- Testlink1.9.17使用方法(第十三章 使用中遇到的问题)
第十三章 使用中遇到的问题 一. 登录Testlink后,新建一个项目后,会出现如下提示: 解决办法:打开Testlink安装文件夹下的config.inc.php文件, 原来:$tlCfg-> ...