概述 require.js是各种网络APP中非常常见的JS依赖库，它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计，也就是JS模块化编程。...这样，如果大家都约定使用同样的模块化规范设计，从一个框架到另外一个框架就没有成本，并且可以互相加载引入。 这里通过一个计算幂运算的例子，详细论述require.js的使用。 2....详论 AMD模块规范听起来很高大上，但实际上并不是很复杂。模块化设计就是为了方便模块之间交互性，那么接口必然是统一而简约的，我们只要按照约定的规则来使用它即可。 2.1....定义 模块化设计当然应该先定义一个模块了，这里定义一个乘法函数模块(Multiply.js)： //自定义模块 define(function () { "use strict"; var...参考 【第67期】ES6 系列之模块加载方案 Javascript模块化编程（三）：require.js的用法 JavaScript的模块化编程
提示 由于CommonJS和AMD都十分流行，但似乎缺少一个统一的规范。于是，UMD(通用模块规范)出现了，它可以同时支持这两种风格。...虽然这个模式的写法比较难看，但是，它同时兼容了AMD和CommonJS，而且还支持老式的全局变量规范。 什么是JS模块化 先想一想，为什么模块很重要？...目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。本系列的第三部分，将通过介绍require.js，进一步讲解AMD的用法，以及如何将模块化编程投入实战。...参考：http://www.ruanyifeng.com/blog/2012/11/require_js.html ES6的模块化 import、</script...jquery.js，相当于默认配置了； 依赖非AMD规范的模块如果没用define(...)
模块化解决的问题： 命名冲突 文件依赖 commonJS 1、模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。...适用场景：服务器环境，nodejs的模块规范是参照commonJS实现的。.../a.js'], function (moduleA){ console.log(moduleA.a); // 打印出：hello world }); CMD 1、CMD是在AMD基础上改进的一种规范...适用场景：浏览器环境，seajs是参照CMD规范实现的，requireJS的最新的几个版本也是部分参照了CMD规范的实现。.../module1.js'), import('./module2.js'), import('.
为什么有模块化规范 上一篇文章，实现了模块化。但是最后还是存在如下的缺点 请求过多 依赖模糊 难以维护 因此就需要模块化规范。...模块化规范分类 CommonJs AMD CMD： 阿里开发的，只需要了解。 ES6 CommonJS规范 说明 每个文件都被当做一个模块 在服务器端：模块的加载是同步的。...在浏览器端：浏览器引擎不认识require语法，在浏览器端想要使用commonJs规范，模块需要提前编译打包处理。...modules的同级创建一个app.js它去使用其他子模块。...的层级运行node app.js 使用第三方模块 uniq 为什么需要加 --save ？
为什么需要模块化和模块化规范 模块化可以解决代码之间的变量、函数、对象等命名的冲突/污染问题，良好的模块化设计可以降低代码之间的耦合关系，提高代码的可维护性、可扩展性以及复用性。...模块化规范的作用是为了规范 JavaScript 模块的定义和加载机制，以统一的方式导出和加载模块，降低学习使用成本，提高开发效率。 2....各种模块化规范的细节 2.1 CommonJS CommonJS 主要是 Node.js 使用，通过 require 同步加载模块，exports 导出内容。...官方模块化规范，现代浏览器原生支持，通过 import 加载模块，export 导出内容。...模块化与工程化：webpack webpack 同时支持 CommonJS、AMD 和 ESM 三种模块化规范的打包。根据不同规范 webpack 会将模块处理成不同的产物。
先说说什么是模块化，就是将独立的功能代码封装成一个独立的文件，其他模块需要使用，在进行引用。 模块化有利于代码的拆分和架构上的解耦，模块化在服务端领域已经早已成熟，nodejs 也已经支持模块化。...（引用阮一峰老师的描述） 举个栗子看看模块化后的文件该怎么写 // util\index.js let name = 'now'; let age = 18; let fun = () => {...AMD-require.js 和 CMD-sea.js 聊到 AMD 和 CMD 这两个规范都离不开 require.js 和 sea.js，这是早些年，为了解决浏览器异步加载模块而诞生的方案。...AMD规范的模块化：用 require.config()指定引用路径等，用define()定义模块，用require()加载模块。...CMD规范的模块化：用define()定义模块， seajs.use 引用模块。
该规范和核心部分是一个框架 ，其中定义了应用程序的生命周期模式和服务注册。...OSGi的主要职责就是为了让开发者能够建动态化、模块化的Java系统。...因为企业应用的模块化程度不高，即Java EE的模块化更多地是停留在逻辑概念层面。通常，我们会将企业应用以单个WAR包形式存在，其中内置了当前应用所有的内容，包括.class、.jsp、.js等资源。...5、开发不具备模块化的特性，一般企业中项目往往是放到一个工程中，这样造成的后果是模块化能力不强，难于维护，越大越不容易维护。...2、OSGi服务平台Residential规范。这类似于Java ME平台。 3、OSGi服务平台Enterprise规范。这类似于Java EE平台。
---- 「这是我参与2022首次更文挑战的第27天，活动详情查看：2022首次更文挑战」 理解 什么是模块/模块化 将一个复杂的程序按照一定的规范，封装成几个块(文件)，并进行组合在一起。...模块化的进化史 最早 最早，我们的js是写到一个文件中，想怎么写怎么写。...比如不需要轮播图的模块，我们不需要引入 模块化的好处 避免命名冲突(减少命名空间污染) 更好的分离，按需加载 更高复用性 高可维护性 页面引入script 当我们需要引入多个js...如下，如果1.js中用到jquery.js中的内容，这个加载顺序是不可以换的。...依赖模糊 难以维护 因此也就需要模块化规范
x + y; } }); 代码示例4：定义一个兼容Modules/Wrappings模块化规范的匿名模块...AMD规范兼容Modules/Wrappings。...verb(); } }); 模块加载 require([module], callback) AMD模块化规范中使用全局或局部的
/b.js' console.log(a) // 1 console.log(b); // 2 // b.js let a = 1; let b = 2; export { a, b } <!...模块变量类型检查：js是动态语言，不会在代码执行前检查类型错误。...bundle）: 解决模块间的依赖 使其打包后能在浏览器上正常运行 比较出名的: webpack rollup parcel等 AMD 在ES6模块出现之前，AMD(异步模块定义)是一种很热门地浏览器模块化方案...CMD CMD（common module definition，通用模块定义），它是基于浏览器环境制定的模块规范。...UMD universal module definition 统一模块标准，它不是模块管理规范，而是带有前后端同构思想的模块封装工具。通过UMD可以在不同环境选择对应的模块规范。
一、 常见的JavaScript 模块化规范有3种，CommonJS、AMD（异步模块定义）、CMD（公共模块定义） 服务端 ：NodeJS 服务：CommonJS规范，新版本的Node也可以启用ES6...Module功能 浏览器端：主要使用的是AMD规范和CMD规范，现在已经逐步被ES6 Module取代 二、 模块化规范使用 1....CommonJS规范 (1) 每一个文件都是一个模块，每一个模块都有一个独立的作用域，文件内的变量,函数都是私有的，其他文件不可使用（除非赋值到 global上） (2)每个模块内部，module变量代表当前模块...AMD（Asynchromous Module Definition - 异步模块定义） AMD 是 RequireJS 在推广过程中对模块定义的规范化产出 使用 定义模块 define(id?...UMD（AMD和CommonJS的糅合） UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式。
"license": "ISC" } 2.安装在本地和全局的区别 [安装在全局的特点] 1.所有的项目都可以使用这个模块 ->容易导致版本冲突 ->安装在全局的模块，不能基于CommonJS模块规范调取使用...找到把后面对应的属性值（执行脚本）执行 ->执行脚本的时候，会到本地node_modules中的bin文件加查找，没有的话，在向NPM安装的全局目录下查找 3.NODE入门 NODE本身是基于CommonJS模块规范设计的...，所以模块是NODE的组成 内置模块：NODE天生提供给JS调取使用的 第三方模块：别人写好的，我们可以基于NPM安装使用 自定义模块：自己创建一些模块 CommonJS模块化设计的思想（AMD/CMD.../ES6 MODULE都是模块设计思想） 1.CommonJS规定，每一个JS都是一个单独的模块（模块是私有的：里面涉及的值和变量以及函数等都是私有的，和其它JS文件中的内容是不冲突的） 2....CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。
传统模块化阶段 这一阶段，WEB 开发人员主要是利用 JS 语言的闭包、原型、函数作用域等特性，减少对全局命名空间的污染；方式方法各有不同，但结果都差不多，比较混乱... 3.1....CommonJS Node.js的诞生，使JavaScript扩展到了服务器端， 为了让JavaScript在服务器端能跟Java、Phyton一样编写大型程序，于是有了CommonJS模块化规范；...CommonJS是针对服务器端（非浏览器环境）的JavaScript开发，是Node.js的默认模块化规范； (2)....CommonJS是一种只适用于JavaScript的静态模块化规范； 注：只适用于JavaScript，意味着它无法把CSS等前端资源纳入模块化管理范围，但显然CSS也是组成前端模块的重要部分； 注：静态模块化规范...：Node.js让JavaScript延伸到“服务端”领域，促使针对“服务端”的JavaScript静态模块化规范CommonJS诞生，但此规范的“同步阻塞式”模块加载策略不适用于浏览器端环境； AMD
1 引言 如今，Javascript 模块化规范非常方便、自然，但这个新规范仅执行了2年，就在 4 年前，js 的模块化还停留在运行时支持，10 年前，通过后端模版定义、注释定义模块依赖。...原生支持的模块化，解决 html 与 css 模块化问题正是以后的方向。 再回到 JS 模块化这个主题，开头也说到是为了构建 scope，实则提供了业务规范标准的输入输出的方式。...Http 2.0 对 js 模块化的推动 js 模块化定义的再美好，浏览器端的支持粒度永远是瓶颈，http 2.0 正是考虑到了这个因素，大力支持了 ES 2015 模块化规范。...模块化是大型项目的银弹吗？ 只要遵循了最新模块化规范，就可以使项目具有最好的可维护性吗？ Js 模块化的目的是支持前端日益上升的复杂度，但绝不是唯一的解决方案。...目前 html 有自立门户的苗头（htmlModules），而 css 迟迟没有改变，社区出现的 styled-component 已经用 js 将 css 模块化得很好了，最新 css 规范也支持了与
这个系列的第一部分介绍了Javascript模块的基本写法，今天介绍如何规范地使用模块。 （接上文） 七、模块的规范 先想一想，为什么模块很重要？...八、CommonJS 2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。 这标志"Javascript模块化编程"正式诞生。...node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。 ...目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。...本系列的第三部分，将通过介绍require.js，进一步讲解AMD的用法，以及如何将模块化编程投入实战。 （完）
这个系列的第一部分介绍了Javascript模块的基本写法，今天介绍如何规范地使用模块。 （接上文） 七、模块的规范 先想一想，为什么模块很重要？...考虑到Javascript模块现在还没有官方规范，这一点就更重要了。 目前，通行的Javascript模块规范共有两种：CommonJS和AMD。我主要介绍AMD，但是要先从CommonJS讲起。...八、CommonJS 2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。 这标志"Javascript模块化编程"正式诞生。...node.js的模块系统，就是参照CommonJS规范实现的。在CommonJS中，有一个全局性方法require()，用于加载模块。假定有一个数学模块math.js，就可以像下面这样加载。 ...目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。本系列的第三部分，将通过介绍require.js，进一步讲解AMD的用法，以及如何将模块化编程投入实战。
撇开缓存无效不谈，这确实很困难，每当俺找不到正确的名称时，这个臭名昭著的引用就会在俺的脑海中萦绕。
最近在看一本书，里面提到js的模块化，觉得很有必要，所以记录下来 Game.js /** * This is the main class that handles the game life cycle..._canvas.height); }; ---- boardRenderer.js /** * 这个类负责绘制，棋盘，球 * @param context the 2d context to draw..._rows; }; ---- boardModel.js /** * 这个类是负责保存/验证/返回当前游戏的状态 * 如当前的玩家是谁、每个单元格放的是什么球、 * 是不是谁赢了 * @param...this.reset(); } /** * 0代表单元格为空，1代表单元格有红色球，2代表单元格有绿色球 * 因为怕以后忘记这些数字代表什么，干脆把数字存到常量里，代码看起来易懂， * 但是这么多字，前端的js...* ps.变量名全大写表示这是常量，这是一个js程序员之间的约定，表达为 CAPITAL_CASED。
方法（Function） 6.1、使用命名函数表达式而不是函数声明：这样更利于进行模块化开发 // bad function foo() { // ... } // bad const foo...js类与构造函数参考原文献 9..../AirbnbStyleGuide'; // good // filename es6.js import { es6 } from '....= b = c = 1; // good let a = 1; let b = a; let c = a; 11.6、避免使用 ++ 或 –，使用 += 或 -= 代替（eslint规范...空格（具体遵循eslint规范） 14.1、始终使用 2 个空格作为块之间的间距 14.2、在前括号【{ }, ( )】之前放置1个空格 // bad function test(){ console.log
前言 在js的代码开发中，我简单的总结出了以下规则，后面会陆续补充并且对规范进行分类。...js代码建议保存到后缀名.js的文件中 js代码不建议放在html中，原因有：不能被缓存，会增大网页文件的大小，可维护性不高，会影响页面的加载。...js吧任何表达式都当一条简单语句，会导致一些隐性的错误。如果自己没加分号，那么js解释器会自动添加分号，按照自己能读懂的断句。 9.2 复合语句 也称为语句块，被包在大括号内部。...变量作用域 js没有有块级作用域，只有函数作用域。 [] {} 的用法 使用直接量发来声明对象和数组。...比如对象 var obj={} ;var arr=[] eval eval是最容易混乱使用的js函数，他可以执行内部入参的js函数或者表达式，可以直接解析变量。不建议使用 。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
实时音视频
