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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
JS解析XML实例分析
Jan 30 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
当json键为数字时的取值方法解析
2013/11/15 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
关于javascript中dataset的问题小结
2015/11/16 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
js实现购物车功能
2018/06/12 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python中for循环详解
2014/01/17 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python网络爬虫实例讲解
2016/04/28 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
年终晚会活动方案
2014/08/21 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
python数字图像处理实现图像的形变与缩放
2022/06/28 Python