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获取网页中指定节点的父节点、子节点的方法小结
Apr 24 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 Javascript
详细分析Node.js 模块系统
Jun 28 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
nodejs分页类代码分享
2014/06/17 NodeJs
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
详解python中init方法和随机数方法
2019/03/13 Python
python属于解释语言吗
2020/06/11 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
超市活动计划书
2014/04/24 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
英文投诉信格式
2015/07/03 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
LeetCode189轮转数组python示例
2022/08/05 Python