模块化的进化史 最早 最早，我们的js是写到一个文件中，想怎么写怎么写。...比如不需要轮播图的模块，我们不需要引入 模块化的好处 避免命名冲突(减少命名空间污染) 更好的分离，按需加载 更高复用性 高可维护性 页面引入script 当我们需要引入多个js...如下，如果1.js中用到jquery.js中的内容，这个加载顺序是不可以换的。...src='2.js'> 所以就带来了如下的问题 请求过多...依赖模糊 难以维护 因此也就需要模块化规范
使用require加载的模块会被缓存，只会被加载一次，module对象会存放模块的信息，其中有一个属性 loaded 来判断是否被加载过，如果为true则是被加载过 使用动态加载模块，require支持使用表达式导入模块.../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(异步模块定义)是一种很热门地浏览器模块化方案...它的实现原理： 判断是否支持AMD（即define是否存在），存在则使用AMD方式加载模块 判断是否支持nodejs模块格式（即exports是否存在），存在则使用commonjs加载模块 如果前两个都不存在
1.node模块化的实现 node中是自带模块化机制的，每个文件就是一个单独的模块，并且它遵循的是CommonJS规范，也就是使用require的方式导入模块，通过module.export的方式导出模块..._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js...我在之前的《前端模块化发展历程》一文中介绍过。...自执行函数也是前端模块化的实现方案之一，在早期前端没有模块化系统的时代，自执行函数可以很好的解决命名空间的问题，并且模块依赖的其他模块都可以通过参数传递进来。...不过在node中并没有选用他们来实现模块化，原因也很简单因为他们都有一个致命的问题，就是都容易被不属于他们的变量所影响。
由于网页的执行都是单线程的，在JS执行的过程中，页面会呈现阻塞状态。因此，如果JS处理的数据量过大，过程复杂，可能会造成页面的卡顿。...原理图 实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。 因此，可能会出现两种情况： 1 当页面的内容很少，没有出现滚动条。...实现的思路： 1 如果真实的内容比视窗高度小，则一直加载到超过视窗 2 如果超过了视窗，则判断下面隐藏的部分的距离是否小于一定的值，如果是，则触发加载。...上面隐藏的高度 < 20，作为加载的触发条件 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.<em>js</em>
模版依赖定义 (2006): 这时候开始流行后端模版语法，通过后端语法聚合 js 文件，从而实现依赖加载，说实话，现在 go 语言等模版语法也很流行这种方式，写后端代码的时候不觉得，回头看看，还是挂在可维护性上...注释依赖定义 (2006): 几乎和模版依赖定义同时出现，与 1999 年方案不同的，不仅仅是模块定义方式，而是终于以文件为单位定义模块了，通过 lazyjs 加载文件，同时读取文件注释，继续递归加载剩下的文件...Amd (2009): 都是同一时期的产物，这个方案主要解决前端动态加载依赖，相比 commonJs，体积更小，按需加载。...一句话，模块化仍在路上。js 模块化的矛头已经对准了 css 与 html，这两位元老也该向前卫的 js 学习学习了。...未来 css、html 的模块化会自立门户，还是赋予 js 更强的能力，让两者的模块化依附于 js 的能力呢？
便于依赖管理（无须手动组织JS文件顺序）； c. 利于性能优化（异步模块加载）； e. 提高可维护性； f. 利于代码复用； 2....传统模块化阶段 这一阶段，WEB 开发人员主要是利用 JS 语言的闭包、原型、函数作用域等特性，减少对全局命名空间的污染；方式方法各有不同，但结果都差不多，比较混乱... 3.1....CommonJS Node.js的诞生，使JavaScript扩展到了服务器端， 为了让JavaScript在服务器端能跟Java、Phyton一样编写大型程序，于是有了CommonJS模块化规范；...CommonJS是针对服务器端（非浏览器环境）的JavaScript开发，是Node.js的默认模块化规范； (2)....）： 总结一下 传统模块化手段：通过JS的闭包、对象、自执行函数等语言特性，避免模块间的命名冲突，提高模块的内聚性，但无统一编程标准，也无法把模块间的依赖关系描述清晰； CommonJS：Node.js
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS，CMD，AMD等规范后文会提到，这里主要先了解如何在代码中使用。 如果你有使用过nodejs ，那么理解起来就容易多了。...我们通过sea.js来加载我们定义的模块（这会儿遵循CMD规范）并使用相应的数据。...首先，当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downloads 直接下载代码包，解压后 在 /dist/目录下可以 找到 sea.js CMD规范是懒加载，...按需加载，也就是在require的时候相应的模块才会被加载进来。.../sea.js"> //加载入口文件main.js，默认后缀js自动匹配 seajs.use('.
最近在看一本书，里面提到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。
RequireJS 是一个遵循 AMD 规范的模块化加载框架 与上文seajs一样，这里简单介绍其相关用法 同样的，首先是下载好 require.js --> http://requirejs.org/...docs/download.html#requirejs AMD规范是预加载，也就是说会马上将所有模块全加载。...index.html: 注意到这里script标签多了一个data-main属性(加不加后缀js都可以），它标识了引用主模块入口 main.js （也可以不使用这种引用入口方式，下边会介绍另一种方式，注意啦...顺序乱了是不是 其实这就是因为AMD规范预先加载的规则，预先把所有依赖都执行了（虽然我们还没用到） 而且这加载是并行的，（默认情况下）main1和main2不分先后。...假设 main.js文件因网络问题加载延迟后，就有可能出现以下结果 module of main2: module of main1: module of main: ...
对于 JavaScript 来说，模块化是一个相对现代的概念，这篇文章会带你在 JavaScript 的世界里快速浏览模块化的历史进程~ Script 标签和闭包 在早些年间，JavaScript 就是直接写在...当然 IIFE 也有缺点，它并没有一个明确的依赖树，这使得开发者只能自己确保 JS 文件的加载顺序。...得力于 Node.js 可以直接访问文件系统，CommonJS 规范更贴近的是传统的模块加载方式。在 CommonJS 中，每个文件都是一个模块，并具有自己独立的作用域。...与之相反的是，CommonJS 只有一种模块加载方式，一个 JS 文件就是一个模块，加载依赖只需要用 require，导出模块只需要将要导出的值赋给 module.exports。...诚然，npm 主要服务于 CommonJS 模块和 JavaScript 包，由于简单的模块化语法和可复用性，大量 Node.js 和 web 浏览器的包出现在 npm 上，npm 也成为世界上最大的包管理器
Js模块化导入导出 CommonJs、AMD、CMD、ES6都是用于模块化定义中使用的规范，其为了规范化模块的引入与处理模块之间的依赖关系以及解决命名冲突问题，并使用模块化方案来使复杂系统分解为代码结构更合理...Module Definition规范，是浏览器端的模块化解决方案，CommonJS规范引入模块是同步加载的，这对服务端不是问题，因为其模块都存储在硬盘上，可以等待同步加载完成，但在浏览器中模块是通过网络加载的...，若是同步阻塞等待模块加载完成，则可能会出现浏览器页面假死的情况，AMD采用异步方式加载模块，模块的加载不影响它后面语句的运行。...--> CMD CMD通用模块定义，是SeaJS在推广过程中对模块定义的规范化产出，也是浏览器端的模块化异步解决方案，CMD和AMD的区别主要在于： 对于依赖的模块，AMD是提前执行（相对定义的回调函数..., AMD加载器是提前将所有依赖加载并调用执行后再执行回调函数），CMD是延迟执行（相对定义的回调函数, CMD加载器是将所有依赖加载后执行回调函数，当执行到需要依赖模块的时候再执行调用加载的依赖项并返回到回调函数中
JS模块化和使用 很久以前就知道js模块化开发可以使用require.js和sea.js，就一直没去看看。...什么是模块化 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。...这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。...RequireJS 和 Sea.js 都是模块加载器，倡导模块化开发理念，核心价值是让 JavaScript 的模块化开发变得简单自然。...回调函数的参数(math)对应的是引入模块(js/1_math.js)的别名(别名可以随意命名) */ require(['js/1_math'],function(math){ console.log
最近打算向HTML5的canvas进发，还有nodejs，所以对js的模块化有必要弄懂，刚好找到篇很不错的文章，先转过来，熟练之后再写个读后感~~~ http://www.cnblogs.com/yjf512
我们都知道，webpack作为一个构建工具，解决了前端代码缺少模块化能力的问题。我们写的代码，经过webpack构建和包装之后，能够在浏览器以模块化的方式运行。...准备 首先我们创建一个简单入口模块index.js和一个依赖模块bar.js： //index.js 'use strict'; var bar = require('....为什么要这样做，是因为浏览器本身不支持模块化，那么webpack就用函数作用域来hack模块化的效果。...原理还是很简单的，其实就是实现exports和require，然后自动加载入口模块，控制缓存模块，that's all。...欢迎阅读本系列第二篇《webpack模块化原理-ES6 module》。
commonjs 在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。...首先搞清楚commonjs模块化的处理方式，简单配置一下webpack，写两个模块编译一下看一下： webpack.config.js module.exports = { mode: "development...，所以就需要一个全局变量installedModules用来记录所有被加载过模块的导出 没有加载过的模块就先构造一个module对象，关键是要有一个 exports 属性 执行模块代码并返回模块导出值...最终的一步就是需要加载启动模块，也就是IIFE的最后一句： return __webpack_require__("..../src/index.js"); ES Module es 模块化的处理方式是需要借助 __webpack_require__ 实现的，首先看一些刚才被删除的代码： __webpack_require_
Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true Android（Java）与JavaScript（HTML）交互有四种情况...： 1） Android（Java）调用HTML中js代码 2） Android（Java）调用HTML中js代码（带参数） 3） HTML中js调用Android（Java）代码 4） HTML中js...脚本设置 Android（Java）与js（HTML）交互的接口函数是： mWebView.addJavascriptInterface(getHtmlObject(), "jsObj"); /.../ jsObj 为桥连对象 Android容许执行js脚本需要设置： webSettings.setJavaScriptEnabled(true); （2） js（HTML）访问Android（Java...Java）访问js（HTML）代码 Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript: showFromHtml
实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。 因此，可能会出现两种情况： 1 当页面的内容很少，没有出现滚动条。 2 当页面的内容很多，出现了滚动条。...实现的思路： 1 如果真实的内容比视窗高度小，则一直加载到超过视窗 2 如果超过了视窗，则判断下面隐藏的部分的距离是否小于一定的值，如果是，则触发加载。（即滚动到了底部）
版权声明：本文为博主汪子熙原创文章，未经博主允许不得转载。 https://jerry.blog.csdn.net/article/detai...
而 Node.js 对 CommonJS 模块化规范的引入，则更是让 JavaScript成为了一门真正能够适应大型工程的语言。...但是，对于 Node.js 模块化背后的加载与运行原理，我们是否清楚呢。首先抛出以下几个问题： Node.js 中的模块支持哪些文件类型？ 核心模块和第三方模块的加载运行流程有什么不同？...模块加载原理的关键：require 我们进一步，假设我们的 index.js 有如下内容： var http = require('http'); 那么当执行这一句代码的时候，会发生什么呢？...4.1 核心模块加载原理 核心模块是通过 NativeModule.require 加载的，NativeModule的定义在 bootstrap_node.js中，附上 github 链接： github.com...事实上，通过学习 Node.js 模块加载流程，有助于我们更深刻的了解 Node.js 底层的运行原理，而掌握了其中的扩展模块开发，并学会在适当的场景下使用，则能够使得我们开发出的 Node.js 应用性能更高
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
