RequireJS 依赖关系的实例(推荐)


Posted in Javascript onJanuary 21, 2017

现在看看RequireJS带来的整洁的特点:

下面有个html页面:

<html> 
 <head> 
  <title>configuration</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <link type="text/css" href="../master/plugin/artDialog4.1.6/skins/blue.css" rel="stylesheet"/> 
  <script data-main="../master/script/app/config" src="../master/script/third_party/require.js"></script> 
 </head>

最有一个script语句引入了require.js文件,并且在data-main中指定了另一个js文件:config.js,我定义如下:

require.config({ 
  paths: { 
    "jquery": "../third_party/jquery-1.8.0.min", 
    "jquery.validate": "../../plugin/jquery-validation-1.9.0/jquery.validate", 
    "jquery.artDialog": "../../plugin/artDialog4.1.6/jquery.artDialog" 
  } 
}); 
 
require(["jquery"], function(util) { 
 
  require(["jquery.validate", "jquery.artDialog"], function(util) { 
 
    require(["masterUI", "masterSite", "configuration"], function(util) {                                                                
      $(document).ready(function() { 
    window.configuration.init(); 
      }) 
    }); 
  }); 
});

require.config中配置了引入的第三方的js库的js文件所在位置,包括jquery, jquery.validate和jquery.artDialog

之后三个require调用,一层套一层,注意依赖顺序就是内层依赖外层。最先要被加载的就写到最外层。

最里面写了一个调用,$(document).ready(...) 本来一般写在html页面里面来的,这样好了。又和html解耦了。

以上这篇RequireJS 依赖关系的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
详解vue项目打包步骤
Mar 29 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 Javascript
js操作浏览器的参数方法
Jan 21 #Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 #Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 #Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 #Javascript
利用transition实现文字上下抖动的效果
Jan 21 #Javascript
jQuery Ajax实现跨域请求
Jan 21 #Javascript
three.js快速入门【推荐】
Jan 21 #Javascript
You might like
Apache设置虚拟WEB
2006/10/09 PHP
php反弹shell实现代码
2009/04/22 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python二元赋值实用技巧解析
2019/10/25 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
CSS3实现可翻转的hover效果
2018/05/23 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
历史专业个人求职信分享
2013/12/20 职场文书
求职信范文怎么写
2014/01/29 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
郭明义电影观后感
2015/06/08 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL