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 For Beginners(转载)
Jan 05 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
2种简单的js倒计时方式
Oct 20 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
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和XSL stylesheets转换XML文档
2006/10/09 PHP
php header()函数使用说明
2008/07/10 PHP
php实现图片缩放功能类
2013/12/18 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python安装以及IDE的配置教程
2015/04/29 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
python将视频转换为全字符视频
2019/04/26 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
教师网络培训感言
2014/03/09 职场文书
国旗下的演讲稿
2014/05/08 职场文书
大型演出策划方案
2014/05/28 职场文书
理财学专业自荐书
2014/06/28 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
PHP RabbitMQ消息列队
2022/05/11 PHP