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 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 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
第七节--类的静态成员
2006/11/16 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
PHP二分查找算法示例【递归与非递归方法】
2016/09/29 PHP
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
javascript流程控制语句集合
2017/09/18 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python与php实现分割文件代码
2017/03/06 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
flask应用部署到服务器的方法
2019/07/12 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
python3.7添加dlib模块的方法
2020/07/01 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
有关HTML5中背景音乐的自动播放功能
2017/10/16 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
物流管理毕业生自荐信范文
2014/03/15 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
学生不参加考试检讨书
2015/02/19 职场文书
生产车间管理制度
2015/08/04 职场文书