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 相关文章推荐
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
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小教程之实现链表
2014/06/09 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
jquery根据name属性查找的小例子
2013/11/21 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
深入理解JS DOM事件机制
2016/08/06 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
python中精确输出JSON浮点数的方法
2014/04/18 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python字典简介以及用法详解
2016/11/15 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
长安大学毕业生自我鉴定
2014/01/17 职场文书
小摄影师教学反思
2014/04/27 职场文书
防沙治沙典型材料
2014/05/07 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript