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规范基本语法 定义暴露模块 ...
随机推荐
- c#基础学习(0625)之vs常用快捷键、基础数据类型、命名规范
vs常用快捷键 Ctrl+K+D:快速对齐代码 Ctrl+z:撤销 Ctrl+S:保存 Ctrl+J:快速弹出只能提示 Shift+End:从行首快速选中整行 Shift+Home:从行未快速选中整行 ...
- SpringBoot之前端文件管理
WebJars能使Maven的依赖管理支持OSS的JavaScript库/CSS库,比如jQuery.Bootstrap等. (1)添加js或者css库 pom.xml <dependency& ...
- 关于EF中出现FOREIGNKEY约束可能会导致循环或多重级联路径的问题
ef中,我们创建外键的时候需要注意,否则会出现标题所示问题. 例:有项目表,项目收藏表,用户表 项目表有如下字段:ProjectId,InputPersonId等 项目收藏表有如下字段:Project ...
- 月薪25K的90后程序员，他们都经历了什么？
如果说薪资是检验一家公司对程序员认可的标准,那么年纪轻轻就能达到月薪 25K,一定程度上说明了公司对他创造的价值的认可. 深访10+ 名月薪25K的程序员,发现他们最常见的三种成长途径是…… 在公司发 ...
- 4.2 explain 之 select_type
一.查询类型,主要用于区别 普通查询.联合查询.子查询等的复杂查询 二.常用常见的类型 1. simple : 简单的select查询,查询中不包含子查询或union 2. primary : 查询中 ...
- 【Java每日一题】20170228
20170227问题解析请点击今日问题下方的“[Java每日一题]20170228”查看(问题解析在公众号首发,公众号ID:weknow619) package Feb2017; import jav ...
- python面向对象学习（二）基本语法
目录 1. dir内置函数 2. 定义简单的类(只包含方法) 2.1 定义只包含方法的类 2.2 创建对象 2.3 编写第一个面向对象程序 3. 方法中的self参数 3.1 案例改造 -- 给对象添 ...
- 2015 Multi-University Training Contest 6 solutions BY ZJU（部分解题报告）
官方解题报告:http://bestcoder.hdu.edu.cn/blog/2015-multi-university-training-contest-6-solutions-by-zju/ 表 ...
- JDK动态代理简单使用（2）
JDK动态代理使用: 使用JDK动态代理步骤: ①创建被代理的接口和类: public interface IA { void f1(String param); } public class A i ...
- 查看linux 服务器还剩多少空间
df -hl 或者 df -m