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 相关文章推荐
JS删除数组元素的函数介绍
Mar 27 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
Vue.js对象转换实例
Jun 07 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
JS实现的base64加密解密操作示例
Apr 18 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
微信小程序实现录音Record功能
May 09 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下使用SMTP发邮件的代码
2008/01/10 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
python 测试实现方法
2008/12/24 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
培训专员岗位职责
2014/02/26 职场文书
党员创先争优承诺书
2014/03/26 职场文书
高二学生评语大全
2014/04/25 职场文书
债务纠纷委托书
2014/08/30 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书