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 中文参数乱码解决方案
Nov 09 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
浅谈Express异步进化史
Sep 09 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
Node.js中console.log()输出彩色字体的方法示例
Dec 01 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
2019/04/28 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
python中global用法实例分析
2015/04/30 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
详解python metaclass(元类)
2020/08/13 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
Sisley法国希思黎中国官网:享誉全球的奢华植物美容品牌
2019/06/30 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
便利店促销方案
2014/02/20 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
群众路线自查自纠工作情况报告
2014/10/28 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js