首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Require.Js 前端模块

前端模块化 (Require.js) ? 为什么要用 前端模块化 早期,js代码量小, 所有Javascript代码可以都写在一个文件里面,只要加载一个js文件就够了。...通用模块定义 sea.js 依赖延迟:在需要的时候才去加载依赖项 模块化的实现(require.js) 下载后,把它放在目录下面,就可以加载了   定义模块require.js中,每个模块也是分成单独的文件保存的 每一个模块中都有自己单独的作用域!...}) 引用模块require.js中,引用一个模块使用require.js提供的函数 require() 语法:require(["模块文件的路径(不带.js后缀的)"], function(){...在require.js中,模块路径的查找方式, 一共有三种: 不做任何配置,直接以当前文件的路径作为参照 require([".

3.8K40
您找到你想要的搜索结果了吗?
是的
没有找到

模块化编程之require.js

首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载...require.js的诞生,就是为了解决这两个问题:   (1)实现js文件的异步加载,避免网页失去响应;   (2)管理模块之间的依赖性,便于代码的编写和维护。...require.js的加载: 使用require.js的第一步,是先去官方网站下载最新版本。 下载后,假定把它放在js子目录下面,就可以加载了。...那么,只需要写成下面这样就行了: data-main属性的作用是,指定网页程序的主模块...("1"); }) }) 如果想触发某个事件后再加载另外的模块也是可以的,代码如下: require.config({ paths:{ "skin1":"skin1", "skin2

1.6K10

使用Require.js实现模块化开发

在javascript中,我们把比较复杂的都是用模块化,今天我们就来了解一下require.js来实现模块化开发 require.js是什么?...require.js是在AMD规范上实现的一个 JavaScript 模块异步加载器。...,这里我只配置两个常用项 baseUrl:加载模块的根目录,因为模块大多数情况都在同一目录下,配置了此项在配置模块的时候就不用加跟目录了。...require函数 此函数就是用于加载模块和依赖的,加载完成后会只想回调函数,回调函数中的参数要和前面的模板的顺序一致。我这里就把paths里配置了4个模块都加载了。...好了,下篇我们接着讲require的全局配置和非amd规范的模块导入。 延生(全局配置):所谓全局配置,就是配置只需要设置一次,我们这篇的入口文件是main.js。

2.7K10

模块化编程之require.js

首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序(比如上例的1.js要在2.js的前面),依赖性最大的模块一定要放到最后加载...require.js的诞生,就是为了解决这两个问题:   (1)实现js文件的异步加载,避免网页失去响应;   (2)管理模块之间的依赖性,便于代码的编写和维护。...require.js的加载: 使用require.js的第一步,是先去官方网站下载最新版本。 下载后,假定把它放在js子目录下面,就可以加载了。...那么,只需要写成下面这样就行了: data-main属性的作用是,指定网页程序的主模块...("1");       }) }) 如果想触发某个事件后再加载另外的模块也是可以的,代码如下: require.config({ paths:{ "skin1":"skin1", "skin2

1.7K50

JS模块化编程规范1——require.js

概述 require.js是各种网络APP中非常常见的JS依赖库,它其实不仅仅是个模块加载器那么简单。它背后蕴含了一个非常重要的设计,也就是JS模块化编程。...后来随着require.js的推广和使用,就逐渐形成了AMD(The Asynchronous Module Definition),也就是"异步模块加载机制"。...require.config是用来配置导入的库文件,用来给模块定义配置真正的路径和简短的名称。...通过require方法去加载自定义的数学库模块和JQuery模块,其中第一个参数定义了需要加载的模块;第二个参数则是加载成功之后的回调函数: require(['modules'], callback)...参考 【第67期】ES6 系列之模块加载方案 Javascript模块化编程(三):require.js的用法 JavaScript的模块化编程

3.2K10

nodejs探秘:require加载模块的原理及代码实现

本节我们先看看它的模块加载功能,也就是require函数的实现原理。...在nodejs开发中我们会使用require将很多功能模块加载到应用中,假设我们需要使用它的文件系统进行本地文件读写,那么我们需要使用如下语句先加载fs模块require('fs') fs.writeFile...= {} //用于缓存已经加载的模块 my_require.resolve = (module_name) => { /* 为了简单起见,这里直接返回文件名,实际上他要执行如下步骤:...代码还需要注意的是,require采用了缓存功能,如果给定模块已经加载过了它就直接返回,这意味着无论模块在代码中被加载多少次,它实际上只加载了一次,以后每次遇到要requier它的时候,nodejs都会从缓存中直接将其返回...假设我们的代码模块之间存在如下循环依赖: 我们先创建a.js和b.js,a.js的内容如下: exports.loaded = false const b = my_require('.

82710

Javascript模块化编程(三):require.js的用法

真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的的require()函数。   ...使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。...因此,require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。 五、AMD模块的写法 require.js加载的模块,采用AMD规范。...六、加载非规范的模块 理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。...那么,require.js是否能够加载非规范的模块呢? 回答是可以的。 这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。

3K60

Javascript模块化编程(三):require.js的用法

真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的的require()函数。   ...使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。...五、AMD模块的写法 require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。 具体来说,就是模块必须采用特定的define()函数来定义。...六、加载非规范的模块 理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。...那么,require.js是否能够加载非规范的模块呢? 回答是可以的。 这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。

2.1K90

JAVASCRIPT模块化3篇之三:require.js

真正常见的情况是,主模块依赖于其他模块,这时就要使用AMD规范定义的的require()函数。   ...使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。...因此,require.js提供了一个优化工具,当模块部署完毕以后,可以用这个工具将多个模块合并在一个文件中,减少HTTP请求数。 五、AMD模块的写法 require.js加载的模块,采用AMD规范。...六、加载非规范的模块 理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。...那么,require.js是否能够加载非规范的模块呢? 回答是可以的。 这样的模块在用require()加载之前,要先用require.config()方法,定义它们的一些特征。

1.6K20

Node 导入模块require()和导出模块:module.exports、exports的用法及注意点

1、require()导入模块 注意:使用require方法加载模块,会执行被加载模块中的代码 /* 模块有三大分类:内置模块、自定义模块、第三方模块 */ /* 示例:使用require方法加载模块...*/ // 注意:使用require方法加载模块,会执行被加载模块中的代码 // 1、加载内置模块 const fs = require('fs') // 2、加载自定义模块 const riven...= require('..../riven-custom') // 3、加载第三方模块(第三方模块需要我们先下载才能使用) const moment = require('moment') 2、module.exports、exports...导出模块 注意:require()导入模块时,得到的永远是module.exports指向的对象 console.log('这是我的自定义模块:Riven-custom'); /* 时刻谨记,require

1K30

require() 源码解读

学习 Node.js ,必学如何使用 require 语句。本文通过源码分析,详细介绍 require 语句的内部运行机制,帮你理解 Node.js 的模块机制。 ?...当 Node 遇到 require(X) 时,按下面的顺序处理。 (1)如果 X 是内置模块(比如 require('http'))   a. 返回该模块。   b. 不再继续执行。...三、模块实例的 require 方法 每个模块实例都有一个 require 方法。..._load(path, this); }; 由此可知,require 并不是全局性命令,而是每个模块提供的一个内部方法,也就是说,只有在模块内部才能使用 require 命令(唯一的例外是 REPL 环境...、require、module三个全局变量,然后执行模块的源码,然后将模块的 exports 变量的值输出。

82880
领券