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获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
求数组最大最小值方法适用于任何数组
Aug 16 Javascript
javascript函数作用域学习示例(js作用域)
Jan 13 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
Echarts之悬浮框中的数据排序问题
Nov 08 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 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的输入输出流
2007/02/14 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
无缝滚动的简单实现代码(推荐)
2016/06/07 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
最新党员思想汇报
2014/01/01 职场文书
社区中秋节活动方案
2014/01/29 职场文书
餐厅总厨求职信
2014/03/04 职场文书
小学生环保倡议书
2014/05/15 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
护林防火标语
2014/06/27 职场文书
财产分割协议书范本
2014/11/03 职场文书
小浪底导游词
2015/02/12 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书