require.js 简洁入门

简介: 原文地址:http://blog.sae.sina.com.cn/archives/4382前言提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多复杂的概念,这里我就希望排除这些概念,从实用的角度来简单说一下require.js是干什么的,我们要怎么用它。

原文地址:http://blog.sae.sina.com.cn/archives/4382

前言

提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多复杂的概念,这里我就希望排除这些概念,从实用的角度来简单说一下require.js是干什么的,我们要怎么用它。

1.为什么要用require.js

大多数前端开发者都用过jquery,那么用jquery之前我们首先要把jquery加载进页面,然后在之后的js之中才可以使用$,这里面我们知道了两个道理,一个是我们不能把所有js代码都放到一个文件里,有些东西可以单独提出来成为一个模块,比如jquery。另外一个道理,一部分js是依赖另一部分js的,比如$依赖jquery文件的载入。其实require.js主要做的事情就是这两点。

当你的js项目足够大,足够复杂,依赖的库足够多,你完全需要这样一种工具去做这些js的管理,否则你的项目扩展性很差,结构很糟糕,要找到想修改的地方会很困难。

其实其他很多编程语言都已经在代码里实现了类似的功能,比如这段python。

很好理解,我们导入了web对象,然后就可以在接下来的代码里使用web.database

2.怎么用require.js?

首先页面要载入require.js,这个没办法用它自己依赖

 

既然使用require这种模式的目的是把文件分割成可理解的小块,那么我们的js文件也要分割成一个一个部分,称之为模块,官方api实例中的目录结构是这样的:

  • www/
    • index.html
    • js/
      • app/
        • sub.js
      • lib/
        • jquery.js
        • canvas.js
      • app.js

 

这里是一个app应用,但是普通页面开发也可以借鉴的是这个概念,就是把js根据功能和目的分开放,库文件放到一起,子模块放到一起,入口js再来选择性载入。
这里注意一下,模块化开发的目的是方便开发者理解和提高效率,如果读者认为没有必要完全则不需要硬去这么做,为了使用什么概念或者方法反而增加了开发成本的事情不要做。

定义模块

jquery这类的库文件先不提,我们说自己怎么定义一个模块,就是sub.js文件里

如果我们定义的东西里面有依赖,比如用到jquery,我们可以这样

思考一下,这里的概念是这样的,第一个参数,数组里的东西是我接下来要依赖的模块,后面的回调函数的参数,依次就是前面数组里的对象的传递。

调用模块

还记得上面那个目录结构吗,我们依然摘取官网的实例, app.js是项目的入口,内容如下

require.config 配置文件,这里定义了baseUrl等

接下来我们require调用,注意这里是调用,上面是定义define,不过看到代码发现和之前类似,同样是第一个参数是依赖对象的数组,回调里会执行,参数是之前依赖的对象。

3.举个栗子

实践是检验真理的唯一标准,光看别人实践也没用,自己动手做一遍胜读十年书。我自己写了一个简单的例子,读者如果感兴趣也可以自己写一个

我有一个中间模块,我把他叫做sth,这个模块放在 sth.js 里面,如下

这里面require了另外两个子模块,part1和part2,并把他们的方法拿出来放到中间块里面并且返回
我们来看下part1,part2长啥样,首先他们都是part1.js 和part2.js文件,require.js里认为你载入的都是js脚本文件,所以统一省略.js

然后我们在主文件里,比如index.html,main.js…调用 sth

我们假设这里还有另外一个check对象,如果check为真则执行sth.f1
,否则执行sth.f2 想一下,f1,f2其实是在两个文件里面。

这里只是我虚构一个假的例子,实际应用中要根据自己的实际需求去设计构思自己的项目,再次提醒,不要为了用而用。

最后

好了骚年们,对require.js感兴趣了吗,那就去这里疯狂的看吧
http://requirejs.org/


目录
相关文章
|
26天前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
182 2
|
6天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
6天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
15天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
42 10
|
12天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
29天前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
30天前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
20 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
378 1
|
1月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。