require.js的用法-阮一峰

最新推荐文章于 2024-08-04 03:29:52 发布
最新推荐文章于 2024-08-04 03:29:52 发布
阅读量356 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js 文章标签： require
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/github_39319000/article/details/102669391
本文探讨了模块化JavaScript的产生原因，包括解决JS加载阻塞问题，通过AMD规范实现按需快速加载，以及增强代码复用性和维护管理，推荐学习资源及下载地址。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

模块化js 的产生的原因

1. js如果放在body前面会有阻塞的副作用，js加载不完，html 也是加载不出来的，除非是放在头部

2. require是amd ，按需加载，相应跟快

3. js模块可以重复利用，便于代码段的维护和管理

https://blog.youkuaiyun.com/p312011150/article/details/83504255

https://blog.youkuaiyun.com/longyanchen/article/details/92840756

https://www.runoob.com/w3cnote/requirejs-tutorial-1.html

蚂蚁教程 https://www.runoob.com/w3cnote/requirejs-tutorial-1.html 这个也不错

下载地址

【阮一峰】12.模块
Bidding
02-18 807
任何包含 import 或 export 语句的文件，就是一个模块（module）。相应地，如果文件不包含 export 语句，就是一个全局的脚本文件。模块本身就是一个作用域，不属于全局作用域。模块内部的变量、函数、类只在内部可见，对于模块外部是不可见的。暴露给外部的接口，必须用 export 命令声明；如果其他文件要使用模块的接口，必须用 import 命令来输入。如果一个文件不包含 export 语句，但是希望把它当作一个模块（即内部变量对外不可见），可以在脚本头部添加一行语句。
前端领域 Node.js 处理大文件上传
小白菜的博客
04-24 871
本文章的目的是全面介绍在前端领域使用 Node.js 处理大文件上传的技术和方法。我们将从核心概念入手，逐步深入到算法原理、数学模型，通过项目实战展示具体的实现过程，并探讨其实际应用场景。范围涵盖了大文件上传的基本原理、切片上传、断点续传等关键技术，以及如何使用 Node.js 构建一个完整的大文件上传系统。背景介绍：介绍文章的目的、预期读者和文档结构。核心概念与联系：阐述大文件上传的核心概念，包括切片上传、断点续传等，并展示它们之间的联系。
require.js
08-14
/** * @license r.js 2.1.14 Copyright (c) 2010-2014, The Dojo Foundation All Rights Reserved. * Available via the MIT or new BSD license. * see: http://github.com/jrburke/requirejs for details */ /* * This is a bootstrap script to allow running RequireJS in the command line * in either a Java/Rhino or Node environment. It is modified by the top-level * dist.js file to inject other files to completely enable this file. It is * the shell of the r.js file. */ /*jslint evil: true, nomen: true, sloppy: true */ /*global readFile: true, process: false, Packages: false, print: false, console: false, java: false, module: false, requirejsVars, navigator, document, importScripts, self, location, Components, FileUtils */
[技巧] Javascript模块化编程（三）：require.js的用法
xiaoaifei2010的专栏
11-10 1610
这个系列的第一部分和第二部分，介绍了Javascript模块原型和理论概念，今天介绍如何将它们用于实战。 我采用的是一个非常流行的库require.js。 一、为什么要用require.js？ 最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。 复制
学习阮一峰Javascript模块化编程，requireJS使用
zhouzuoluo的博客
10-30 1377
使用背景NOW： 网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式。 项目需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑，而项目业务逻辑是包含许多特定功能的模块组合而成，理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块...
Require.js
weixin_33943347的博客
07-25 287
前言 前段时间粗略的扫过一次require.js，当时没怎么在意，结果昨天看到index里面的代码就傻了，完全不知道从哪开始看啦，所以require与backbone的学习还要加紧才行。 由于前端所占业务越来越重，所以出现了模块化编程，但是js加载的先后顺序可能会给我们带来麻烦。 有时候我们为了解决页面堵塞会采用异步加载js的方式，这种方式往往带来了一些不确定因素。 为了解决这些问题，Ja...
js之RequireJs学习
莫老王的专栏
01-25 417
RequireJs已经流行很久了，我们在项目中也打算使用它。它提供了以下功能： 声明不同js文件之间的依赖可以按需、并行、延时载入js库可以让我们的代码以模块化的方式组织 初看起来并不复杂。 在html中引入requirejs 在HTML中，添加这样的 标签： script src="/path/to/require.js" data-main="/path/to/app/con
Content Security Policy 入门教程
AliMobileSecurity的博客
09-30 1966
跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞，本文详细介绍如何使用 CSP 防止 XSS 攻击。
a.js和b.js互相require怎么执行？ —— CommonJS模块探究
weixin_33862188的博客
06-19 863
a.js和b.js互相require怎么执行？ —— CommonJS模块探究 学习Node.js遇到2个模块互相引用的问题，有点搞不清楚。我觉得这个模块机制对于学习Node.js来说，搞清代码执行顺序来说，十分有必要。 所以在读了相关资料，并实践之后，愉快的在这分享一下成果。 CommonJS中模块的"循环引用"问题 先说结论： Com...
NodeJS(一)：基础入门
算云烟
01-30 1764
有参看其他文章 尚硅谷视频笔记：https://github.com/smallC-L-Y/Demo/blob/notes/nodeJS%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0.md https://www.cnblogs.com/coder-lzh/p/9232192.html commonJS模块规范：https://javascript.ruanyifeng.com/nodejs/module.html nodejs的express入门：https://www.jia
RequireJS 使用文档
06-30
requirejs 的基本使用手册，目前国内最全的
requirejs源码分析，使用注意要点
aigunzhu1081的博客
08-29 189
本文将深度剖析require.js代码，为了是大家更高效、正确的去使用它，本文不会介绍require的基本使用！ 概要 先来一个流程图来概要一下大概流程 在require中，根据AMD(Asynchronous Module Definition)的思想，即异步模块加载机制，其思想就是把代码分为一个一个的模块来分块加载，这样无疑可以提高代码的重用。 在整个require中，主要的方法...
Require.js 详解
繁依Fanyi的博客
08-04 928
使用definereturn app;});Require.js 是一个强大的模块加载器和依赖管理工具，通过 AMD 规范定义模块和依赖，提升了代码的组织性和可维护性。通过其异步加载机制和优化工具，开发者可以有效地管理和优化前端资源，提高应用的性能和加载速度。在现代前端开发中，尽管有了如 ES6 模块等新特性，Require.js 依然是一个重要的工具，特别是在需要支持老旧浏览器或特定项目需求时。
requirejs入门到精通
热门推荐
bounsail
05-02 3万+
使用了块作用域来申明function防止污染全局变量 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 可以让我们的代码以模块化的方式组织 通常使用requirejs的话，我们只需要导入requirejs即可，不需要显式导入其它的js库，因为这个工作会交给requirejs来做。 data-main 是告诉requirejs：你下载完以后，马上去载入真正的入口文件。它一
RequireJS和AMD规范
weixin_33938733的博客
08-08 206
2019独角兽企业重金招聘Python工程师标准>>> ...
RequireJs
张小杰
07-10 1106
RequireJs RequireJS是一个js脚本加载器，它遵循AMD（Asynchronous Module Definition，即异步模块加载机制 ）规范。实现js脚本的异步加载，不阻塞页面的渲染和其后脚本的执行，并提供了在加载完成之后执行相应回掉函数的功能。 为什么使用RequireJs 实例1： // index.html <!DOCTYPE html><ht...
RequireJS
LEVsunshine的博客
10-21 1217
RequireJS 概括 RequireJS是一个JavaScrip模块加载，可以提高代码的加载速度和质量。 浏览器兼容情况如下： IE 6+/Firefox 2+/Safari 3.2+/Chrome 3+/Opera 10+ 优点 1、实现js文件的异步加载，避免网页失去响应（我们在进行页面开发时，会引入很多js文件，页面会依次同步加载这些js文件，这样页面响应时间会很长） 2、管理模块之间的...
webpack 中文板
最新发布
05-17
### 关于 Webpack 中文文档及相关资源 Webpack 是一种强大的前端构建工具，能够将 JavaScript 文件以及其它类型的资产（如 CSS、图片等）视为模块并进行打包处理[^2]。为了更好地理解和使用 Webpack，以下是几个重要的中文文档和学习资源： #### 官方中文文档 官方提供了详细的 Webpack 中文文档，涵盖了基础概念、配置方法、插件使用等内容。可以通过以下链接访问： - **Webpack 中文官网**: [https://www.webpackjs.com/](https://www.webpackjs.com/) 此网站包含了 Webpack 的核心功能介绍、API 文档以及常见问题解答。 #### 插件相关文档 对于 `html-webpack-plugin` 这一常用插件，其作用是自动生成 HTML 文件并将打包后的 JS/CSS 自动注入其中[^1]。具体安装与配置如下： ```javascript // 安装插件 npm install html-webpack-plugin --save-dev // webpack.config.js 配置 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', // 指定模板文件路径 filename: 'index.html' // 输出的HTML文件名称 }) ] }; ``` #### 开发服务器配置 如果需要设置开发环境下的热更新服务，则可以利用 `devServer` 功能。通过指定 `contentBase` 参数告知服务器从哪个目录提供静态文件[^5]。例如： ```javascript const path = require('path'); module.exports = { devServer: { contentBase: path.join(__dirname, 'dist'), // 设置静态文件根目录 compress: true, port: 9000 // 启动端口号 } }; ``` #### 学习资料推荐 除了官方文档外，还有一些优秀的社区教程可以帮助深入理解 Webpack： 1. **《Webpack 实战指南》** - 提供了从入门到高级使用的全面讲解。 2. **阮一峰老师的博客文章系列** - 对 Webpack 原理进行了剖析，并附有实际案例演示。 3. **SegmentFault 社区问答平台** - 可以找到许多关于 Webpack 使用过程中的疑难解析。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值