利用 RequireJS 进行依赖项管理

在大多数软件开发语言中，应用程序往往由数十、数百乃至数千个文件构建而成。 但是，在 JavaScript 中，在少量文件（每个文件都包含数百或数千行代码）内开发通常是司空见惯的事情。 无论是业界专家还是初学者，掌握这些文件的范围和错综复杂性都是一项艰巨的任务。 确保代码保持干净和模块化甚至成为一个难以完成的任务。 那么，为什么这种大型、复杂的 JavaScript 文件应用如此广泛？ 最普遍提及的原因是：

  • JavaScript 开发一直以来都遵循这种方式发展。
  • 加载多份 JavaScript 文件需要多次 HTTP 请求，从而导致加载时间延长。
  • JavaScript 依赖项管理难以实施。

虽然第一个理由确实存在，但仅延续过去的老套做法最终必然会走向灭亡。 第二点是一项合法要求，并且与现在相比，第三点在过去通常是一个重大的问题。 幸运的是，有大量绝佳的信息库和标准能够帮助开发人员克服上述两大问题。 事实上，克服这些困难已然成为当务之急。 JavaScript 应用程序的可扩展性及开发工程师的理性判断均有赖于此。 本文对 RequireJS 进行了简要介绍，并阐述了用户如何利用它来帮助管理 JavaScript 项目。

文件拆分和文件管理难题

通常情况下，首先需要将 JavaScript 代码从一个大文件拆分为多个小文件。 即使仅创建少数文件，也必须开始对文件彼此之间的依赖性进行跟踪，从而确保以正确的顺序加载它们。 这将很快演变成为一个长长的清单，因而后期很容易陷入困境。例如：

<script src="script3.js"></script> <script src="script1.js"></script> <script src="script13.js"></script> <script src="script7.js"></script> <script src="script6.js"></script> <script src="script12.js"></script> <script src="script4.js"></script> <script src="script11.js"></script> <script src="script5.js"></script> <script src="script9.js"></script> <script src="script8.js"></script> <script src="script10.js"></script> <script src="script2.js"></script>

您可以假设其中存在某些依赖项，但究竟存在哪些依赖项呢？ 如何找出依赖项？ 如果我刚刚加入团队，不会想远远地拿一根十英尺长的杆子触摸这些顺序。 有没有更好的办法呢？ 有没有可能每个文件都能声明自身的依赖项，这样您就不必费力维护这份脆弱的总列表？ 某种加载器有没有可能认识各份文件（参见图 1）声明的关系并按需加载这些关系，以及这些依赖项之间的依赖项等？

JavaScript 文件之间的依赖项表示。
图 1. JavaScript 文件之间的依赖项表示。

模块、AMD 和 RequireJS 简介

让我们共同怀念一下过去的时光。 几年前，刚刚开始流行在服务器上使用 JavaScript。 服务器端库和 JavaScript 引擎开始广为部署，但却并未开发标准的有效 API 开展协作及定义依赖项。 让库彼此协作需要达成妥协，并且很显然，如果 JavaScript 规模不断扩大，还需要一些通用 API。 2009 年 1 月，Kevin Dangoor 撰写了一篇博客文章，名为“服务器端 JavaScript 的需求”，简要阐述了服务器端 JavaScript 的需求。 作为满足这些需求的一种方法，他创建了一个名为 ServerJS 的 Google 群，以便志同道合的人们相互协作。 很快，该群体意识到他们的许多目标并不一定要局限于服务器，于是将群名改为 CommonJS。

CommonJS 工作的其中一个标准是 模块。模块是一个自包含的代码段（这么含糊？），这种说法定义了模块本身，那么它们还可以选择依赖哪些其他模块以便保证正常运行呢？ 模块 B 可以调用模块 G 和模块 M，而模块 G 则可以调用模块 D 和模块 W。通过设定模块标准，依赖项管理变得更加简单。 它并非为保持某种必须维持秩序的隐含主列表，各模块只为定义自身依赖项。 该映射可用来确定所需的资源，以及必须采用的加载顺序。

AMD

模块概念对于服务器端开发至关重要，因为它解决了如何根据依赖项定义加载模块这个问题，但浏览器端 JavaScript 开发人员有些羡慕。 为什么这么有效的机制只能局限于服务器？ 当然，浏览器需要异步而不是同步加载模块，但这并不意味着模块概念和依赖项定义无法适用。异步模块定义或 AMD 均具有与生俱来的使命。 他们从服务器端获取模块和依赖项定义 API，并将其应用至浏览器的异步模式。

RequireJS

那么，RequireJS 需要对此做些什么呢？ 尽管您可以通过 AMD 定义模块及其依赖项，但却需要智能工具获取这种依赖项映射，加载模块及按顺序执行模块。 这就是 RequireJS 的作用所在。 RequireJS 与 AMD 都具有开源特性，并且都是由 James Burke精心策划的流行函数。

定义和请求模块

此时此刻，我们直接跳到某些代码，以帮助您巩固其中一些概念。 模块几乎总是在单一文件内定义。 同样，单一文件仅包含单一的模块定义。 在文件中心定义模块非常简单，如下列代码所示。 下列定义在名为 book.js 的文件内完成。

define({ title: "My Sister's Keeper", publisher: "Atria" });

此代码使用 define() 定义了书籍模块，它是一种由 RequireJS 显示的 AMD 函数。 当您调用它时，相当于从本质上说， "将我传递的内容注册为模块" 。 在这种情况下，该模块是一个以大括号开始和结束的书籍对象。 默认情况下，RequireJS 假设模块名称是一个文件路径，该文件路径遵循除扩展名外的下列基本 URL（后面将进行介绍）。 由于文件命名为 book.js，其中 book 是默认的模块名称。 当其他代码请求 RequireJS 获取 book 模块时，RequireJS 将返回上文定义的对象。 现在，您可以在名为 bookshelf.js 的新文件中创建 bookshelf 模块，以便了解如何在其内部请求书籍模块。

define([ 'book' ], function(book) { return { listBook: function() { alert(book.title); } }; });

请注意，这与书籍模块有点不同。 书籍模块不包含依赖项，因此要简单得多。 此代码将大量书架依赖项传递至define()。 在这种情况下，唯一的依赖项是书籍。 第二个参数是回调函数。 如果尚未使用 RequireJS 注册该书籍模块（换句话说，book.js 尚未加载至该应用程序），RequireJS 将从服务器获取它。

加载了 book.js 且注册了书籍模块后，RequireJS 将执行回调函数并传入该模块（之前定义的书籍对象）作为参数。 从技术角度而言，参数名称并不重要。 您可以只是简单地命名为 function(a1337Book) ，也可以使用任何想用的名称。 在这种情况下，使参数名称与模块名称相符很有意义，因为保持一致有助于理解。

最后，从此回调函数返回的任何对象均将会通过 RequireJS 注册为书架模块。 在这种情况下，这是指带有listBook() 方法的对象，刚刚我们就是用它在书籍标题上调用 alert()。 当加载多个模块时，RequireJS 会尽量提高效率。 例如，如果列出多个依赖项，则 RequireJS 将并行加载所有这些依赖项。

创建应用程序

为开始使用 RequireJS 及新模块，请创建一个基本 HTML 页面。 下面就是这个页面的外观：

<!DOCTYPE html> <html> <head> <title>RequireJS Example</title> <script data-main="js/main" src="js/libs/require.js"></script> </head> <body/> </html>

毫不夸张地说，通过使用 JavaScript 操纵正文内容及加载 HTML 模板，无需向 HTML 文件添加任何其他元素即可构建大型 单页面应用程序 ，您也可以使用 RequireJS 完成此操作。 现在，只需注意 data-main属性。 这将为 RequireJS 指出引导文件的所在位置 js 目录（假设主目录的扩展名为 js）。下面是一个 main.js 文件示例：

require([ 'bookshelf' ], function(bookshelf) { bookshelf.listBook(); });

由于您指定此文件作为 HTML 文件的 data-main ，RequireJS 将尽快加载并立即执行该文件。

您将会发现它与之前的模块定义具有某些相似之处，但此代码不调用 define() ，而是调用require()。define()函数（当定义依赖项时至少需要）完成以下三个步骤：

  1. 加载指定的依赖项
  2. 调用回调函数
  3. 将回调函数返回的值注册为模块

require() 函数仅负责完成步骤 1 和 2。main.js 文件就是引导文件。 我不需要使用 RequireJS 注册 main 模块，因为不会针对它调用任何其他模块作为依赖项。

main.js 文件列出书架模块作为依赖项。 假设尚未使用 RequireJS 注册书架模块，它将会加载 bookshelf.js。当加载了 bookshelf.js 后，将会发现该书架将书籍模块列为依赖项。 如果尚未注册书籍模块，则会加载 book.js。操作完成后，书籍和书架均会使用 RequireJS 将其各自的对象注册为模块，执行 main.js 回调函数，书架从中通过。 这时，您就可以利用书架执行想要执行的一切操作。 如果需要，您还可以列出多个模块依赖项，它们会在使用 RequireJS 加载和注册后立即传入回调函数。

配置 URL 和路径

我在前面曾经提到过基本 URL。 默认情况下，基本 URL 是指目录中包含引导文件的 URL。 在上面的示例中，main.js 与 book.js 和 bookshelf.js 一起位于 js 目录。这意味着基本 URL 是 /js/。 您可以不把所有 js 文件直接放在 js 目录下，可以将 book.js 和 bookshelf.js 移至 /js/model/。 main.js 文件需要更新，过程如下所示：

require([ 'model/bookshelf' ], function(bookshelf) { bookshelf.listBook(); });

现在主目录已经知道 bookshelf.js 的正确位置。同样，尽管书籍和书架位于同一目录下，但 bookshelf.js 还是会将书籍依赖项列为 model/book 。 这样 RequireJS 配置就完成了。 通常，我会在引导文件顶部执行配置。 main.js 可能如下所示：

require.config({ baseUrl: '/another/path', paths: { 'myModule': 'dirA/dirB/dirC/dirD/myModule' 'templates': '../templates', 'text': 'libs/text', } }); require([ 'bookshelf' ], function(bookshelf) { bookshelf.listBook(); });

在这种情况下，我已经将基本 URL 手动更改为另一种完全不同的样式。 就我个人而言，我从不需要执行这项配置，但它的存在证明了还有一个配置选项可供使用。  有关详细信息，请参阅 RequireJS 配置选项文档。

上方的代码也同样演示了路径的配置方法。 path 是特定目录或模块的别名。 在这种情况下，当列出整个模块的依赖项时，我们不必再键入 dirA/dirB/dirC/dirD/myModule ，现在只需键入 myModule。 我还创建了一个路径，用于访问与 js 目录平级的 templates 目录。 最后，我已经建立一个路径，以便在整个模块中更加轻松地访问 RequireJS 文本插件。 虽然本文并未提及，但您确实可以使用此文本插件轻松地加载 HTML 模板。有关详细信息，请参阅 文本插件文档。

构造函数模块

到目前为止，您所看到的都是对象实例，书架是对象，书籍也是对象。 事实上，模块通常就是构造函数（类似于经典语言中的类）。 在本例中，您可能希望将书籍模块创建为构造函数。 这样，书架即可创建并存储多个书籍对象。 此时，书籍模块如下所示：

define(function() { var Book = function(title, publisher) { this.title = title; this.publisher = publisher; }; return Book; });

在这里请注意，您正在将函数传入 define() 而不是对象。 当您传递函数而非普通对象时，RequireJS 将执行该函数，届时该函数返回的所有元素均将成为模块。 这里将返回书籍构造函数。 现在书架模块显示如下：

define([ 'book' ], function(Book) { var books = [ new Book('A Tale of Two Cities', 'Chapman & Hall'), new Book('The Good Earth', 'John Day') ]; return { // Notice I’ve changed listBook() to listBooks() now that // I am dealing with multiple books. listBooks: function() { for (var i = 0, ii = books.length; i < ii; i++) { alert(books[i].title); } } }; });

优化部署

假设您已经将代码适当分解成粒度模块，则可能会具有数百个文件，除非进行某种优化，否则您的代码将提出数以百计的 HTTP 请求。 幸运的是，您可以利用 RequireJS 优化器解决这一问题。

一般来说，您会设置优化器在部署流程期间运行。 RequireJS 优化器将通过扫描模块及其依赖项代码发现应用程序内使用了哪些文件。 然后缩小文件（缩短代码以保证真实文件较小），并将它们连接起来（将它们粉碎再一起组成一个文件）。 最后，输出一个包含所有应用程序代码的 JavaScript 文件。 当您开展部署时，这个单一文件将代替 main.js 发挥作用。

当用户加载 index.html 时，它将反过来加载 RequireJS，然后加载 main.js 文件。 此时，main.js 文件将不仅包含常规 main.js 引导代码，而且还包含应用程序其余部分的所有小型级联代码。 这时，文件中的所有模块均将使用 RequireJS 进行注册。 当主目录开始探寻依赖项时，这些依赖项也开始寻找依赖项，RequireJS 将会意识到所有必要模块均已加载，再次放弃从服务器加载它们。

当然，该优化器自身也包含一组选项。 您可以深入几个不同的文件优化应用程序，呈现应用程序的各个部分而不是单个大文件。 您还可以使用多个不同的压缩库，从串联中排除文件，甚至缩小 CSS。

下一步阅读方向

本文涉及大量基础内容，但依然还有很多依赖项管理知识需要学习。 RequireJS 网站是一个不错的起点

你可能感兴趣的:(requirejs)

  • js模块化标准CommonJS 与AMD,CMD的区别 leo_xl
    CommonJS是nodejs中服务器端的规范范畴，AMD,CMD是客户端浏览器的范畴AMD是RequireJS在推广过程中对模块定义的规范化产出。CMD是SeaJS在推广过程中对模块定义的规范化产出。（淘宝大牛玉伯）对于依赖的模块，AMD是提前执行，CMD是延迟执行，requirejs从2.0开始也可以延迟执行CMD推崇依赖就近，AMD推崇依赖前置，比如：CMD会在方法中引用，而AMD则在头部d
  • RequireJS用法解析 aimee66
    1、概述requirejs的相关说明：RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS可以提升前端代码质量。主要特点：异步加载模块按依赖顺序加载模块依赖前置2、define和require在整个require中，主要的方法为：requ
  • Vue学习笔记六 神里の凌华 vue.js学习javascript
    前端工程化一、模块化相关规范1.模块化概述传统开发模式的主要问题①命名冲突②文件依赖通过模块化解决上述问题模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护2.浏览器端模块化规范1.AMDRequire.js(http://www.requirejs.cn
  • requirejs 配置 requirejs.config 引用css Amy_yqh
    requirejs.config基本配置我们在使用require.js的时候，需要配置一些默认的路径，方便后面的文件的引用requirejs.config({baseUrl:'js/lib',//参照于引入这个js文件的index.html页面的相对路径,因为此时mian.js文件已经导入到了index.html中map:{'*':{'css':'require/css.min'//require
  • RequireJS LinuxSuRen
    介绍RequireJS是一个方便用户以模块化的方式进行开发的框架，因而，模块、依赖等是它的核心概念。模块每个JS文件即一个模块，并作为一个匿名函数包括在define中。下面是一个示例：/**当前模块的名称为two，依赖的模块包括：one，并把fun函数导出（暴露）@authorsuren*/define('two',['one'],function(){console.log('alreadylo
  • AMD, CMD, CommonJS和UMD 小豆soybean
    原文链接：https://www.jianshu.com/p/bd4585b737d7今天由于项目中引入的echarts的文件太大，requirejs经常加载超时，不得不分开来加载echarts的各个图表。但是使用echarts自带的在线构建工具生成的支持AMD标准的模块报错，所以不得不使用echarts的全局函数，使用requirejs的shim进行加载。借此机会学习一下AMD,CMD,Comm
  • ES6 模块 别抱紧一个梦 es6javascript前端
    概述在ES6前，实现模块化使用的是RequireJS或者seaJS（分别是基于AMD规范的模块化库，和基于CMD规范的模块化库）。ES6引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6的模块化分为导出（export）@与导入（import）两个模块。特点ES6的模块自动开启严格模式，不管你有没有在模块头部加上usestrict;。模块中可以导入和导出各种类型的
  • requirejs+jsx再会 技术与健康
    上回项目优化中，原本是jsx文件，那么如果直接使用jsx语法，应该也是可以的。在上还正好有一文章，https://www.jianshu.com/p/138b5b7b0a36，可是没跑起来，可能还是缺什么资源了。不过从本文描述，提到了一个重要库requirejs-react-jsx,于是就在本地，按照https://npm.taobao.org/package/requirejs-react-js
  • 30组常用前端开发组件库，前端组件收集整理列表 Mr_rencp 常用组件前端开发ui组件
    0.前端自动化前端构建工具gulp–Thestreamingbuildsystemgrunt–theJavaScriptTaskRunner前端模块管理器Bower–ApackagemanagerforthewebBrowserifyComponentDuoRequireJSSea.jscss预处理器Less–LessisMore,ThanCSSSass–SyntacticallyAwesomeS
  • ES6语法（五）封装模块化公共工具函数、引入npm包 ，并上传到npm中进行下载 雪芽蓝域zzs ES语法es6npm前端
    1.模块化  模块化是指将一个大的程序文件，拆分为许多小的文件（模块），然后将小的文件组合起来。1.1.优点（1）防止命名冲突（2）代码复用（3）高维护性（4）模块化规范产品1.2.ES6之前本身没有模块化，社区衍生出模块化产品CommonJS===>NodeJS、BrowserifyAMD===>RequireJSCMD===>SeaJS1.2.1.语法  模块功能主要有两个命令构成export
  • 服务器无法在此时接受控制信息iis,IIS启动应用程序池报错"服务无法在此时接受控制信息"... 王利芬
    使用RequireJS优化Web应用前端基于AMD(AsynchronousModuleDefinition)的JavaScript设计已经在目前较为流行的前端框架中大行其道,jQuery.Dojo.MooTools.EmbedJ...assert的用法assert用来调试时,判断一个语句是否为真.assert是宏,而不是函数.在C的assert.h头文件中.assert的作用是先计算表达式exp
  • Thinkphp开发的返佣商城分销商城理财商城源码 源码庄 返佣商城分销商城理财商城
    （本站长在localhost安装测试，发现提示有错，具体问题没有时间查找了，或者php解密插件没有安装，有能力的朋友自行折腾。）程序基于THINKPHP6+VUE全新开发，保障安全的同时大大提高代码执行效率。后台管理UI基于新版本的LayUI前端框架，使得后台管理简洁明了，管理员一目了然；同时使用了RequireJs加载，后台管理加载速度会非常快。后台通过RBAC授权管理，从而保证后台数据安全，拒
  • 模块化发展历程 丐中丐
    模块化主要用来抽离公共代码，隔离作用域，避免变量冲突。。。llFE(立即调用函数表达式)使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突(function(){return{data:[]}})()AMD使用requireJS来编写模块化，特点：依赖必须提前声明好//在html引入require.js//script里有个data-main属性，require.js
  • 前端性能优化四十二：模块化加载方案 wanmeijuhao 前端性能优化自动化webpack系统架构前端框架vue.js
    1.JS模块化加载方案和选型:①.CommonJS:a.旨在Web浏览器之外为JavaScript建立模块生态系统,同步加载.b.Node.js模块化方案受CommonJS影响,非常类似.②.AMD(AsynchronousModuleDefinition):a.异步模块定义规范,主要应用于浏览器上.b.RequireJS模块化加载器:(1).基于AMDAPI实现③.CMD(CommonModul
  • js模块化的应用！！！（前无古人，后无来者） 明天更新 javascript前端开发语言vscode
    简介：在ES6前，实现模块化使用的是RequireJS或者seaJS（分别是基于AMD规范的模块化库，和基于CMD规范的模块化库）。ES6引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6的模块化分为导出（export）@与导入（import）两个模块。特点：ES6的模块自动开启严格模式，不管你有没有在模块头部加上usestrict;。模块中可以导入和导出各种类
  • JS模块化工具requirejs教程(一)：初识requirejs 阿奇XS Nodenodejsrequirejscommonjs
    随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用R
  • require.js官方使用教程 boonya JavaScriptrequirejs
    目录原文地址：http://www.requirejs.cn§1.使用§1.1加载JavaScript文件§1.2data-main入口点§1.3定义模块§2.机制§3.配置选配§4高级使用§4.1从包中加载模块§4.2多版本支持§4.3在页面加载之后加载代码§4.4WebWorker支持§4.5Rhino支持§4.6处理错误§5.加载插件§5.1指定文本文件依赖§5.2页面加载事件及DOMRea
  • RequireJS 2.x —— 模块的相互引用 _jan_ requirejsjavascript
    test.html文件内容//配置基本信息require.config({baseUrl:"http://www.domaintrade.com/requirejs/assets/",paths:{"jquery":"global/js/jquery-1.8.3",}});//使用模块，链式调用//require是异步调用，是加载完成依赖，再调用回调//require放在define方法中的时候，
  • require.js 模块加载器用法 -和自己对话- 原创RequireJSrequire.jsJS模块化加载
    require.js模块加载器用法RequireJS是一个JavaScript模块加载器。它非常适合在浏览器中使用，但它也可以用在其他脚本环境，就像RhinoandNode。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。【百度百科】1.下载require.js1.1去https://requirejs.org/docs/download.html官网下载1.2csdn资源下载ht
  • webpack与模块化 _Jyann_ 前端JS高级webpack与模块化ESMAMD（requireJS）CommonJSUMD
    目录1.模块化2.模块化的核心3.ESM3.1独立模块作用域3.2导出模块内部数据3.3导入外部模块数据3.3.1静态导入3.3.2ESM导入导出——示例：3.3.3动态导入import()4.模块化的向下兼容5.CommonJS5.1独立模块作用域5.2导出模块内部数据5.3导入外部模块数据5.4CommonJS规范使用示例6.AMD7.AMD——requireJS7.1独立模块作用域7.2导出
  • 模块化开发 沈深 前端学习javascripthtmlnode.js
    模块化开发目录为什么要模块化开发模块化演变过程（演示）文件划分方式命名空间方式IIFEIIFE模式增强（引入依赖）模块化规范Node.js安装与配置（演示）语法（演示）commonJScommonjs特点：commonJS四个变量：commonjs举例（演示）缓存规则拓展AMDCMDrequirejs引入多个script文件后出现出现问题下载主模块（演示）提高代码质量推荐博客30分钟学会前端模块化
  • AMD、CMD、UMD等模块解决方案和工具使用总结 hibop js组件-模块解决方案AMD-CMDUMD
    js组件和模块解决方案1、AMD（AsynchromousModuleDefinition-异步模块定义）AMD是RequireJS在推广过程中对模块定义的规范化产出，AMD是异步加载模块，推崇依赖前置。define('module1',['jquery'],($)=>{//dosomething...});2、CMD（CommonModuleDefinition-公共模块定义）CMD是SeaJS
  • AMD, CMD, CommonJS和UMD l_set_Sail node.jsvueAMDCMDCommonJS和UMD
    AMD,CMD,CommonJS和UMD今天由于项目中引入的echarts的文件太大，requirejs经常加载超时，不得不分开来加载echarts的各个图表。但是使用echarts自带的在线构建工具生成的支持AMD标准的模块报错，所以不得不使用echarts的全局函数，使用requirejs的shim进行加载。借此机会学习一下AMD,CMD,CommonJS和UMD各自的规范，和它们之间的区别。
  • AMD、CMD、UMD是什么？ 祈澈菇凉 服务器linux运维
    AMD（AsynchronousModuleDefinition）、CMD（CommonModuleDefinition）和UMD（UniversalModuleDefinition）是JavaScript模块化规范，用于管理和组织JavaScript代码的模块化加载和依赖管理。1：AMD（异步模块定义）：AMD是由RequireJS提出的模块化规范。它支持异步加载模块，适用于浏览器环境。模块使用
  • JS模块对比 屠龍之技 javascript模块1024程序员节
    一表流名称实现平台特点执行写法类型CommonJSnodejs后端同步加载运行时requiremodule.exports值拷贝AMDrequirejs前端异步预加载CMDseajs前端异步懒加载UMDumdjs前后端融合CommonJS和AMDESModulenodejs&browser前后端异步加载编译时importexport值引用以上CommonJSAMDCMDUMDESModule傻傻分
  • 爱创课堂每日一题第十七天- 对前端模块化的认识？ weixin_34221332 前端ViewUI
    AMD是RequireJS在推广过程中对模块定义的规范化产出。CMD是SeaJS在推广过程中对模块定义的规范化产出。AMD是提前执行，CMD是延迟执行。AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。CMD模块方式    define(function(require, exports, mo
  • ES6新特性--模块化 魔笛手7 前端es6前端ecmascript模块化
    1.模块化概述模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。2.模块化的好处使用模块化有以下的几种优点:(1).防止命名冲突(2).代码复用(3).高维护性3.ES6之前的模块化规范有:(1)CommonJS=>NodeJS、Browserify(2)AMD=>requireJS(3)CMD=>seaJS4.模块化相关的语法模块功能主要由两个命令构成：export和imp
  • Electron中requirejs require.nodeRequire is not a function chuzhong5401 javascriptViewUI
    Electron版本：原来使用的时1.7.12，只要升级到2.X及以上的版本都会报错Nodejs：原来的版本是10，尝试升级到12也有问题require.js:2.1.11,升级最新的3.X版本也没有解决问题；此问题是Electron版本升级引起的：//Inthemainprocess.varmainWindow=newBrowserWindow({webPreferences:{nodeInte
  • 关于前端模块化开发 四爷来了
    关于前端模块化开发1前端中有哪些模块化开发的规范以及实现方案前端模块化规范标准浏览器端&服务端：CommonJS同步Node.js浏览器:CMDCommonModuleDefinitionseajs同步AMDAsynchronousModuleDefinitionrequirejs异步2模块化的开发的好处1、容易维护2、复用率高3、避免全局变量名污染3CommonJS比较早期一个模块化开发规范，既
  • 面试题 樱速
    面试题1.优化问题使用requireJS、seaJS按需加载CSS方面可以使用less、sass对CSS进行预处理尽量减少或者不使用闭包，避免内存泄漏尽量少的操作DOM，防止反复控制DOM影响性能2.跨域问题CORSCORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。//IE中对CORS的实现是xdrvarxdr=newXDomai
  • Enum用法 不懂事的小屁孩 enum
    以前的时候知道enum，但是真心不怎么用，在实际开发中，经常会用到以下代码: protected final static String XJ = "XJ"; protected final static String YHK = "YHK"; protected final static String PQ = "PQ";
  • 【Spark九十七】RDD API之aggregateByKey bit1129 spark
    1. aggregateByKey的运行机制   /** * Aggregate the values of each key, using given combine functions and a neutral "zero value". * This function can return a different result type
  • hive创建表是报错： Specified key was too long; max key length is 767 bytes daizj hive
    今天在hive客户端创建表时报错，具体操作如下   hive> create table test2(id string); FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException(message:javax.jdo.JDODataSto
  • Map 与 JavaBean之间的转换 周凡杨 java自省转换反射
    最近项目里需要一个工具类，它的功能是传入一个Map后可以返回一个JavaBean对象。很喜欢写这样的Java服务，首先我想到的是要通过Java 的反射去实现匿名类的方法调用，这样才可以把Map里的值set 到JavaBean里。其实这里用Java的自省会更方便，下面两个方法就是一个通过反射，一个通过自省来实现本功能。 1：JavaBean类 1 &nb
  • java连接ftp下载 g21121 java
    有的时候需要用到java连接ftp服务器下载，上传一些操作，下面写了一个小例子。 /** ftp服务器地址 */ private String ftpHost; /** ftp服务器用户名 */ private String ftpName; /** ftp服务器密码 */ private String ftpPass; /** ftp根目录 */ private String f
  • web报表工具FineReport使用中遇到的常见报错及解决办法（二） 老A不折腾 finereportweb报表java报表总结
      抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、没有返回数据集： 在存储过程中的操作语句之前加上set nocount on 或者在数据集exec调用存储过程的前面加上这句。当S
  • linux 系统cpu 内存等信息查看 墙头上一根草 cpu内存liunx
    1 查看CPU 　　1.1 查看CPU个数 　　# cat /proc/cpuinfo | grep "physical id" | uniq | wc -l 　　2 　　**uniq命令：删除重复行;wc –l命令：统计行数** 　　1.2 查看CPU核数 　　# cat /proc/cpuinfo | grep "cpu cores" | u
  • Spring中的AOP aijuans springAOP
      Spring中的AOP Written by Tony Jiang @ 2012-1-18 （转）何为AOP AOP，面向切面编程。 在不改动代码的前提下，灵活的在现有代码的执行顺序前后，添加进新规机能。 来一个简单的Sample: 目标类： [java]  view plain copy print ? package&nb
  • placeholder(HTML 5) IE 兼容插件 alxw4616 JavaScriptjquery jQuery插件
    placeholder 这个属性被越来越频繁的使用. 但为做HTML 5 特性IE没能实现这东西. 以下的jQuery插件就是用来在IE上实现该属性的. /** * [placeholder(HTML 5) IE 实现.IE9以下通过测试.] * v 1.0 by oTwo 2014年7月31日 11:45:29 */ $.fn.placeholder = function
  • Object类,值域,泛型等总结(适合有基础的人看) 百合不是茶 泛型的继承和通配符变量的值域Object类转换
    java的作用域在编程的时候经常会遇到,而我经常会搞不清楚这个 问题,所以在家的这几天回忆一下过去不知道的每个小知识点   变量的值域;   package 基础; /** * 作用域的范围 * * @author Administrator * */ public class zuoyongyu { public static vo
  • JDK1.5 Condition接口 bijian1013 javathreadConditionjava多线程
    Condition 将 Object 监视器方法（wait、notify和 notifyAll）分解成截然不同的对象，以便通过将这些对象与任意 Lock 实现组合使用，为每个对象提供多个等待 set （wait-set）。其中，Lock 替代了 synchronized 方法和语句的使用，Condition 替代了 Object 监视器方法的使用。 条件（也称为条件队列或条件变量）为线程提供了一
  • 开源中国OSC源创会记录 bijian1013 hadoopsparkMemSQL
    一.Strata+Hadoop World（SHW）大会         是全世界最大的大数据大会之一。SHW大会为各种技术提供了深度交流的机会，还会看到最领先的大数据技术、最广泛的应用场景、最有趣的用例教学以及最全面的大数据行业和趋势探讨。          二.Hadoop   &nbs
  • 【Java范型七】范型消除 bit1129 java
    范型是Java1.5引入的语言特性，它是编译时的一个语法现象，也就是说，对于一个类，不管是范型类还是非范型类，编译得到的字节码是一样的，差别仅在于通过范型这种语法来进行编译时的类型检查，在运行时是没有范型或者类型参数这个说法的。 范型跟反射刚好相反，反射是一种运行时行为，所以编译时不能访问的变量或者方法(比如private)，在运行时通过反射是可以访问的，也就是说，可见性也是一种编译时的行为，在
  • 【Spark九十四】spark-sql工具的使用 bit1129 spark
    spark-sql是Spark bin目录下的一个可执行脚本，它的目的是通过这个脚本执行Hive的命令，即原来通过 hive>输入的指令可以通过spark-sql>输入的指令来完成。 spark-sql可以使用内置的Hive metadata-store，也可以使用已经独立安装的Hive的metadata store   关于Hive build into Spark
  • js做的各种倒计时 ronin47 js 倒计时
    第一种：精确到秒的javascript倒计时代码      HTML代码:   <form name="form1">   <div align="center" align="middle"
  • java-37.有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接 bylijinnan java
    public class MaxCatenate { /* * Q.37 有n 个长为m+1 的字符串，如果某个字符串的最后m 个字符与某个字符串的前m 个字符匹配，则两个字符串可以联接， * 问这n 个字符串最多可以连成一个多长的字符串，如果出现循环，则返回错误。 */ public static void main(String[] args){
  • mongoDB安装 开窍的石头 mongodb安装 基本操作
    mongoDB的安装          1:mongoDB下载   https://www.mongodb.org/downloads         2:下载mongoDB下载后解压     
  • [开源项目]引擎的关键意义 comsci 开源项目
         一个系统，最核心的东西就是引擎。。。。。       而要设计和制造出引擎，最关键的是要坚持。。。。。。       现在最先进的引擎技术，也是从莱特兄弟那里出现的，但是中间一直没有断过研发的    
  • 软件度量的一些方法 cuiyadll 方法
    软件度量的一些方法http://cuiyingfeng.blog.51cto.com/43841/6775/在前面我们已介绍了组成软件度量的几个方面。在这里我们将先给出关于这几个方面的一个纲要介绍。在后面我们还会作进一步具体的阐述。当我们不从高层次的概念级来看软件度量及其目标的时候，我们很容易把这些活动看成是不同而且毫不相干的。我们现在希望表明他们是怎样恰如其分地嵌入我们的框架的。也就是我们度量的
  • XSD中的targetNameSpace解释 darrenzhu xmlnamespacexsdtargetnamespace
    参考链接: http://blog.csdn.net/colin1014/article/details/357694 xsd文件中定义了一个targetNameSpace后，其内部定义的元素，属性，类型等都属于该targetNameSpace,其自身或外部xsd文件使用这些元素，属性等都必须从定义的targetNameSpace中找： 例如：以下xsd文件，就出现了该错误，即便是在一
  • 什么是RAID0、RAID1、RAID0+1、RAID5，等磁盘阵列模式? dcj3sjt126com raid
    RAID 1又称为Mirror或Mirroring，它的宗旨是最大限度的保证用户数据的可用性和可修复性。 RAID 1的操作方式是把用户写入硬盘的数据百分之百地自动复制到另外一个硬盘上。由于对存储的数据进行百分之百的备份，在所有RAID级别中，RAID 1提供最高的数据安全保障。同样，由于数据的百分之百备份，备份数据占了总存储空间的一半，因而，Mirror的磁盘空间利用率低，存储成本高。 Mir
  • yii2 restful web服务快速入门 dcj3sjt126com PHPyii2
    快速入门 Yii 提供了一整套用来简化实现 RESTful 风格的 Web Service 服务的 API。 特别是，Yii 支持以下关于 RESTful 风格的 API： 支持 Active Record 类的通用API的快速原型 涉及的响应格式（在默认情况下支持 JSON 和 XML) 支持可选输出字段的定制对象序列化 适当的格式的数据采集和验证错误
  • MongoDB查询(3)——内嵌文档查询（七） eksliang MongoDB查询内嵌文档MongoDB查询内嵌数组
    MongoDB查询内嵌文档 转载请出自出处：http://eksliang.iteye.com/blog/2177301 一、概述        有两种方法可以查询内嵌文档：查询整个文档；针对键值对进行查询。这两种方式是不同的，下面我通过例子进行分别说明。   二、查询整个文档 例如:有如下文档 db.emp.insert({ &qu
  • android4.4从系统图库无法加载图片的问题 gundumw100 android
    典型的使用场景就是要设置一个头像，头像需要从系统图库或者拍照获得，在android4.4之前，我用的代码没问题，但是今天使用android4.4的时候突然发现不灵了。baidu了一圈，终于解决了。 下面是解决方案： private String[] items = new String[] { "图库","拍照" }; /* 头像名称 */
  • 网页特效大全 jQuery等 ini JavaScriptjquerycsshtml5ini
    HTML5和CSS3知识和特效 asp.net ajax jquery实例 分享一个下雪的特效 jQuery倾斜的动画导航菜单 选美大赛示例 你会选谁 jQuery实现HTML5时钟 功能强大的滚动播放插件JQ-Slide 万圣节快乐！！！ 向上弹出菜单jQuery插件 htm5视差动画 jquery将列表倒转顺序 推荐一个jQuery分页插件 jquery animate
  • swift objc_setAssociatedObject block(version1.2 xcode6.4) 啸笑天 version
      import UIKit class LSObjectWrapper: NSObject { let value: ((barButton: UIButton?) -> Void)? init(value: (barButton: UIButton?) -> Void) { self.value = value
  • Aegis 默认的 Xfire 绑定方式，将 XML 映射为 POJO MagicMa_007 javaPOJOxmlAegisxfire
          Aegis 是一个默认的 Xfire 绑定方式，它将 XML 映射为 POJO, 支持代码先行的开发.你开发服 务类与 POJO,它为你生成 XML schema/wsdl XML 和 注解映射概览       默认情况下，你的 POJO 类被是基于他们的名字与命名空间被序列化。如果
  • js get max value in (json) Array qiaolevip 每天进步一点点学习永无止境max纵观千象
    // Max value in Array var arr = [1,2,3,5,3,2];Math.max.apply(null, arr); // 5 // Max value in Jaon Array var arr = [{"x":"8/11/2009","y":0.026572007},{"x"
  • XMLhttpRequest 请求 XML,JSON ,POJO 数据 Luob. POJOjsonAjaxxmlXMLhttpREquest
    在使用XMlhttpRequest对象发送请求和响应之前，必须首先使用javaScript对象创建一个XMLHttpRquest对象。 var xmlhttp； function getXMLHttpRequest(){ if(window.ActiveXObject){ xmlhttp:new ActiveXObject("Microsoft.XMLHTTP
  • jquery wuai jquery
    以下防止文档在完全加载之前运行Jquery代码，否则会出现试图隐藏一个不存在的元素、获得未完全加载的图像的大小 等等 $(document).ready(function(){ jquery代码; }); <script type="text/javascript" src="c:/scripts/jquery-1.4.2.min.js&quo
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他