位置: 编程技术 - 正文

JavaScript中Require调用js的实例分享(js require())

编辑:rootadmin

推荐整理分享JavaScript中Require调用js的实例分享(js require()),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript reverse,js .equals,js中ceil,js实现equals函数,js中ceil,javascript entries,javascript entries,js require(),内容如对您有帮助,希望把文章链接给更多的朋友!

在我最初开始写 JavaScript 函数时,通常是这样的:

函数全写在全局环境中,项目很小时,通常不会有什么冲突问题。

但代码多了后,渐渐就发现,函数名称(英文词汇)有点不够用了。于是引入命名空间的概念,开始模块化代码。

命名空间下的函数

在命名空间下,我的代码这样写:

本着要面向对象的原则,执行函数通常我要这么写的:

当然,为了少打些字符,我还会在闭包中导入1公共 API 接口:www.gimoo.net

至此,代码冲突的可能性已经很小,但代码依赖的问题,多脚本文件管理、阻塞的问题,渐渐浮出水面 ? 命名空间的办法开始捉急。

于是 Require.js2 出场。

Require.js

首先了解下 require.js 里模块的概念3:

A module is different from a traditional script file in that it defines a well-scoped object that avoids polluting the global namespace. It can explicitly list its dependencies and get a handle on those dependencies without needing to refer to global objects, but instead receive the dependencies as arguments to the function that defines the module.

简单地说,有两点,一、模块作用域自成一体,不污染全局空间;二、模块指明依赖关系,并且依赖是通过参数传递的形式导入的,无需通过全局对象引用 ? 依赖同样不污染全局空间。

定义模块

与上面的老长的命名空间方式不同,require.js 用全局方法 define 来定义模块,形式如下:

我且把模块分两种。

无依赖的模块

假如一个模块并不依赖其他模块,那么定义起来是很简单的,比如模块 hello 放在 hello.js 文件中:

有依赖的模块

有依赖的模块要稍稍复杂点,define 时,我们需要罗列出模块的依赖情况:

这里,依赖中的 'jquery' 是模块相对于 baseUrl 的路径,等效于模块 ID。

现在,再回过头,看看上面写过的闭包中导入公共 API 的代码,跟 define 函数做个对比:

这段代码里,我同样把 jQuery 导入了,在闭包里,我同样是通过 $ 这个外部传入的参数来访问 jQuery。可以说,它「定义依赖」的方式跟 define 方法很相似,不同的是,define 导入的 jquery 不是全局变量,所以不会污染全局环境。

关于模块名称

define 函数有三个参数,第一个 id 即模块名称,这个名称的格式是相对于 baseUrl 的路径除去文件格式,比如 baseUrl 为 js 目录,一个模块放在 js/libs/hi.js 里,则如果名称是这样定义的:

这样的定义形式的好处是,模块不可能冲突,因为同一目录下不允许同名文件。但也因此 require.js 建议我们不要设置模块名称,因为设置了 ‘libs/hi' 的模块名称后,模块就必须放在 js/libs 目录下的 hi.js 文件中,要移动位置的话,模块名称要跟着改变。至于后期利用 r.js 优化时生成了模块名称,那已经是另外一回事。

使用模块

JavaScript中Require调用js的实例分享(js require())

在定义好「有依赖」、「没依赖」的各种模块后,我们该怎么用它?Require.js 提供了一个函数,require(与 requirejs 等效)。

require 函数加载依赖并执行回调,与 define 不同的是,它不会把回调结果4注册成模块:

举一个简单的例子。我有一个文件夹,文件结构如下:

这里 jquery.js 已经注册为 AMD 模块,则 HTML 文件里这样引用 require.js:

require.js 会检查 data-main 属性值,这里是 js/main,根据设定,它会加载 js 目录下的 main.js 文件。

main.js 文件里,我只干一件事,用 jQuery 方法取得当前窗口的宽度:

执行代码就这么简单。

非 AMD 规范的模块

但事情远没有我们想像中那么美好,AMD 只是一种社区规范,并非标准,而且在它出现以前,已经有各种各样的流行库存在,更不用说我们自己早期写的代码,所以我们一定会碰上一堆非 AMD 规范的模块。为了让 require.js 能够加载它们,并且自动识别、载入依赖,我们有两种选择,一、给它们全穿上一个叫 define 的函数;二、使用 Require.js 提供的配置选项 shim,曲线救国。

比如我手上一个项目,因为某种原因,还在用 jQuery 1.4.1 版本,而 jQuery 是从1.7版本开始才注册为 AMD 模块的,我要在 require.js 中使用,就需要先做 shim:

写完 shim,发现 jquery-1.4.1、libs/jquery-throttle-debounce.min 这样的名称有点长。这里我们又有两种选择,一是直接打开修改 js 文件名,或者使用 require.js 提供的配置项 paths 给模块 ID 指定对应的真实文件路径:

这样,引用起来就方便多了。

另外,需要注意 shim 中的 exports 项,它的概念更接近 imports,即把全局变量导入。我们如果把 exports 值改成非全局变量名,就会导致传入回调的对象变成 undefined,举个例子:

其他模块在做 shim 时同理,比如 underscore 需要 exports 成 _。

Require.js 的好处

说了这么多,Require.js 到底有什么好处?

并行加载

我们知道,<script></script> 标签会阻塞页面,加载 a.js 时,后面的所有文件都得等它加载完成并执行结束后才能开始加载、执行。而 require.js 的模块可以并行下载,没有依赖关系的模块还可以并行执行,大大加快页面访问速度。

不愁依赖

在我们定义模块的时候,我们就已经决定好模块的依赖 ? c 依赖 b,b 又依赖 a。当我想用 c 模块的功能时,我只要在 require函数的依赖里指定 c:

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

至于 c 依赖的模块,c 依赖的模块的依赖模块… 等等,require.js 会帮我们打理。

而传统的 script 办法,我们必须明确指定所有依赖顺序:

换句话说,传统的 script 方法里,我们极可能要靠记忆或者检查模块内容这种方式来确定依赖 ? 效率太低,还费脑。

减少全局冲突

通过 define 的方式,我们大量减少了全局变量,这样代码冲突的概率就极小极小 ? JavaScript 界有句话说,全局变量是魔鬼,想想,我们能减少魔鬼的数量,我想是件好事。

关于全局变量

有一点需要说明的是,require.js 环境中并不是只有 define 和 require 几个全局变量。许多库都会向全局环境中暴露变量,以 jQuery 为例,1.7版本后,它虽然注册自己为 AMD 模块,但同时也向全局环境中暴露了 jQuery 与 $。所以以下代码中,虽然我们没有向回调函数传入一份引用,jQuery/$ 同样是存在的:

以上这篇JavaScript中Require调用js的实例分享就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。

JS+CSS实现网页加载中的动画效果 本文实例为大家分享了JS实现网页加载中效果的具体代码,供大家参考,具体内容如下需要材料:一张loading动画的gif图片基本逻辑:模态框遮罩+loading.gi

浅析Javascript中双等号(==)隐性转换机制 在Javascript中判断相等关系有双等号(==)和三等号(===)两种。其中双等号(==)是值相等,而三等号(===)是严格相等(值及类型是否完全相等)。因此有几个常

js通过Date对象实现倒计时动画效果 js通过Date对象实现倒计时效果,具体内容如下!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"title倒计时动画/titlestylediv{text-align:center;height:px;line-height:px;}/styles

标签: js require()

本文链接地址:https://www.jiuchutong.com/biancheng/368453.html 转载请保留说明!

上一篇:JavaScript自执行函数和jQuery扩展方法详解(js自动执行点击事件)

下一篇:JS+CSS实现网页加载中的动画效果(给网页添加javascript)

  • 企业所得税是什么税
  • 工会经费应该怎么做账
  • 一般风险准备是留存收益吗
  • 对公付款对方不开发票怎么处理
  • 企业对企业分红要缴纳什么税免税分红
  • 个人所得税申报退税多久到账
  • 小规模纳税人季度不超45万免增值税
  • 收到订金如何开票
  • 印花税是不是必须要交
  • 劳务发票税率营改增后是多少?
  • 收到知识产权专用发票
  • 购买原材料的费用
  • 交易性金融资产借贷方向
  • 小规模纳税人需要汇算清缴吗
  • 旧税号的发票专用章还能使用吗
  • 没有税务登记证
  • 当月取得的进项必须当月勾选吗
  • 企业处置固定资产怎么纳税
  • 关闭客户端快捷键
  • 实收资本要求
  • window清除临时存储文件夹
  • PHP:Memcached::getResultMessage()的用法_Memcached类
  • php判断ip是否属于某个区段
  • 进程mmc.exe
  • 股份有限公司变更法人的流程
  • php与jquery
  • php显示文件目录及路径
  • vue 移动端
  • jetson nano nvidia-smi
  • 未取得合法凭证税前扣除
  • 上月未开发票的销项税,已经申报缴税,在本月开了票,应该如何填报?
  • 头歌HTML基础第一关初识HTML
  • 发票查真伪是什么意思
  • 学python真的好就业吗
  • python pyecharts
  • 公司之间借款利息需要开票吗
  • mysql分区语句
  • 一般贸易和进料加工退税的区别
  • 快递费属于办公费用吗?
  • 信用减值损失的借贷方向
  • 一个简单的后台与数据库交互的登录与注册[sql注入处理、以及MD5加密]
  • 软件研发主要研发啥软件
  • 租房合同违约金200%合理吗
  • 房屋租金的摊销怎么算
  • sqlserver数据库定时任务
  • 差旅费税前扣除政策
  • 对增值税发票开具方面是有啥要求?
  • 进出口贸易出纳主要做什么
  • 什么情况纳税
  • 长期待摊销费用属于
  • 预收款开票的会计分录
  • 取得无形资产时增值税进项税额的处理
  • 一般纳税人外地预缴税款怎么做分录
  • 销售如果对待不同客户
  • 营改增后计税依据
  • 未开发票已付款
  • mysql5.7最新版
  • ubuntu software database is broken错误该怎么解决?
  • watchs2最新版本
  • windows 批处理
  • 你一定不知道的56个历史真相
  • xmpdisabled什么意思
  • apache2.4配置文件详解
  • win8使用技巧 图文
  • win10资源管理器频繁无响应
  • Win10 Build 14279正式推送 更新后QQ可能会崩溃
  • opengl绘制图形旋转
  • python supper函数
  • 新浪微博 app 安卓
  • mare的用法
  • pycharm安装教程2020.2
  • web应用程序开源框架
  • 深入理解javascript特性.pdf
  • pycharm支持python3.9
  • 【Android】利用Notification操作设备的通知栏
  • android socket聊天
  • 北京医保网上服务大厅
  • 誊抄什么意思
  • 增值税税控开票软件怎么下载
  • 国税和地税归哪里管
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设