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面向对象之四 继承
Feb 08 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
JS中自定义事件的使用与触发操作实例分析
Nov 01 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
原生js实现表格翻页和跳转
Sep 29 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积分兑换接口实例
2015/02/09 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
yii2使用gridView实现下拉列表筛选数据
2017/04/10 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
cookie的secure属性详解
2015/04/08 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
angular中的http拦截器Interceptors的实现
2017/02/21 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
pygame播放音乐的方法
2015/05/19 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
关于python多重赋值的小问题
2019/04/17 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
挂职自我鉴定
2014/02/26 职场文书
学校火灾防控方案
2014/06/09 职场文书
学校工作推荐信范文
2014/07/11 职场文书
2015年党员自评材料
2014/12/17 职场文书
开学典礼致辞
2015/07/29 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
Python初识逻辑与if语句及用法大全
2021/08/07 Python