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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
JavaScript中交换值的10种方法总结
Aug 18 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
Jquery插件之多图片异步上传
2010/10/20 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript中的null和undefined区别介绍
2015/01/01 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
JAVA高级程序员面试题
2013/09/06 面试题
会计电算化专业个人的自我评价
2013/11/24 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
新郎答谢词
2015/01/04 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
Python如何将list中的string转换为int
2022/07/15 Ruby