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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
Javascript模板技术
Apr 27 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
原生JS轮播图插件
Feb 09 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
基于JavaScript实现选项卡效果
Jul 21 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
使用webpack搭建react开发环境的方法
May 15 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
详解vue中axios请求的封装
Apr 08 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用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
js 单引号 传递方法
2009/06/22 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
javascript闭包概念简单解析(推荐)
2016/06/03 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
详解用Python进行时间序列预测的7种方法
2020/03/13 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
水电工岗位职责
2014/02/12 职场文书
秋游活动策划方案
2014/02/16 职场文书
毕业生自荐信格式
2014/03/07 职场文书
党员演讲稿
2014/09/04 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Python 中random 库的详细使用
2021/06/03 Python
Redis Stream类型的使用详解
2021/11/11 Redis