位置: 编程技术 - 正文

javascript高级模块化require.js的具体使用方法(js 高级技巧)

编辑:rootadmin

推荐整理分享javascript高级模块化require.js的具体使用方法(js 高级技巧),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript高级程序设,js 高级技巧,javascript 高级,javascript高级语言程序设计,javascript高级程序编程,《javascript高级程序设计》,javascript高级程序设,javascript 高级,内容如对您有帮助,希望把文章链接给更多的朋友!

本文介绍了require.js的具体使用方法,分享给大家,也给自己留个笔记。

Require.js:

RequireJS是一个非常小巧的javascript模块载入框架,是AMD(Asynchronous Module Definition,异步模块加载机制)规范最好的实现之一。最新版的requireJS压缩后只有k,堪称非常轻量。它还同时可以和其他的框架协调工作,使用requireJS必将使我们的前端代码质量得以提升。

首先我们先来看一下一个普通的页面js加载

运行结果:

此时,如果我们不对弹出框做操作,页面就不会接着加载,就不会有页面内容,这并不是我们想要实现的结果。

下面我们用require.js进行操作:

index.html

index.js

首先页面上不再导入test.js,只是导入了requireJS,其次在javascript中我们使用require()方法,在其中传递了一个数组的参数,实参为我们要导入的js文件的【路径+文件名称。

此时的运行结果:

javascript高级模块化require.js的具体使用方法(js 高级技巧)

可以看出,此时页面内容已经显现出来了。并不像前面我们传统的一样在等待js运行完成后页面再加载,而是页面加载完成后才运行js代码,这样在运行效率上就大大的提高了。

根据上面的代码,我们可以来分析requirejs的基本API:

requireJS会定义三个变量:define,require,requirejs

require==requirejs,一般使用require更简短。 define 用来定义一个模块 require 加载依赖模块(引用定义好的模块),并执行加载完后的回调函数

require有三个参数:

加载网络文件

之前我们加载的都是本地的js文件,但是,有些时候我们又需要加载网络上的文件,那又该怎么加载呢?下面我们就来介绍一下怎样加载网络上的js文件.

我们现在以加载一个jquery.js文件为例:

在取网络上的文件时注意:

1、config方法的参数是一个对象 2、paths的值也是一个对象 3、当我们为网络上的库取名字是任意,但是建议取有意义的名字,别人可以通过名称知道你的网络资源是什么资源 4、库的值是一个数组,意味着可以多个同时写,防止网络异常取不到 5、特别注意:网络资源路径不能带后缀名,否则取不到 6、我们也可以先让去网络中去取,如果取不到,再在本地取,减轻本地服务的压力(属于项目优化)。

同样我们也可以将本地的配置到paths中:

上面的例子中重复出现了require.config配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs提供了一种叫”主数据”的功能,我们首先创建一个main.js:

然后再页面中使用下面的方式来使用requirejs:

在官方提供了一种基于标签属性的方式:

将所有的配置和导入js都放在了main.js中,这样在页面只要这样一个标签就行了。

代码演示如下:

标签: js 高级技巧

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

上一篇:JS简单实现点击跳转登陆邮箱功能的方法(js简单实现点击按钮商品加入购物车)

下一篇:React Native使用Modal自定义分享界面的示例代码(react-native-modal)

  • 企业重组的特殊性税务处理比例
  • 偷税行为五年后被发现要接受行政处罚吗?
  • 企业所得税怎么征收几个点
  • 六税两费指的是什么
  • 材料费发票税点
  • 企业会计制度固定资产保险费
  • 出口关税的计算基数
  • 季度不超过30万是含税还是不含税
  • 融资租赁如何确认收入
  • 设计合同需要缴哪些税
  • 纸质银行承兑到期多久时间之内可以兑现
  • 个人减税具体政策
  • 公务出差乘坐飞机
  • 进口材料海关到港
  • 变更银行手机号需要去银行吗
  • 软件研发购买的测试用的设备应该怎么做账?
  • 预缴企业所得税税率
  • 7月1日起,中药生产企业增值税税率为多少?
  • 因公出差的人身故怎么办
  • 进口货物的关税税率
  • 修叉车这个工作怎么样
  • 营业外收入怎么开票能开吗
  • WIN10专业版永久激活
  • 新版edge浏览器文字不显示
  • PHP:pg_close()的用法_PostgreSQL函数
  • 息税前利润和税前净利润的关系
  • 残疾人取得房屋所有权
  • 纳税人辅导期申报流程
  • 木质家具出口
  • 野外生存探险家
  • 增值税免征与即征的区别
  • 高新企业技术服务成本核算
  • 数学建模三个人谁最难
  • vue3 $bus
  • 销售自己使用过的物品的税率
  • 购进来的样品怎么账务处理
  • 员工社保缴纳规定标准
  • 生产型外资企业
  • 应交增值税为负数怎么处理
  • 小规模纳税人去年免税,红冲后今年开多少税率的发票
  • 免税进项抵扣要做账吗
  • 公司食堂开支如何记账
  • centos8 mongodb
  • 发票未到已付款怎么入账
  • 社保工伤保险可以退吗
  • 如何设置固定资产累计折旧增值税进项税额缺损入账科目
  • 备案办税人员信息是谁
  • 住房公积金中的钱可以当首付吗?
  • 累计折旧计提会计分录
  • 政府部门城投公司融资安全吗
  • 公司员工入职的心得体会
  • 固定资产的进项税额可以一次性抵扣吗
  • 资产评估资产如何入帐
  • 进项跟销项金额一样是否可行
  • 其他收益和营业外收入有什么区别
  • 税收分类编码填错有影响吗
  • 支付宝里的收入和支出明细能查多久的?
  • 合作社开具免税发票流程
  • windows8.1开机
  • ubuntu如何下载
  • ubuntu系统中文件夹不能改名
  • xp桌面底部任务在右边
  • win7系统如何更改默认浏览器
  • 延长药品使用时间的方法
  • dosbox批处理
  • Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
  • assets怎么编辑
  • android项目总结
  • vue组件的使用步骤
  • csm support
  • unity3d添加组件
  • 深入浅出css
  • unity协程的工作原理
  • js script跨域
  • unity3d打包成apk
  • jquery分页插件的使用
  • python3 编码转换
  • 河南工商年检网上申报
  • 小规模纳税人房土两税优惠政策
  • 晋阳学堂实验学校学费多少钱
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设