RequireJS 依赖关系的实例(推荐)  更新时间:2017年01月21日 09:32:27   投稿:jingxian   下面小编就为大家带来一篇RequireJS 依赖关系的实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 现在看看RequireJS带来的整洁的特点: 下面有个html页面: configuration 最有一个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 依赖关系的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 requirejs 依赖关系 相关文章 Angular Material Icon使用详解 这篇文章主要介绍了Angular Material Icon使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 浅谈Angular 观察者模式理解 这篇文章主要介绍了浅谈Angular 观察者模式理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 浅谈Angular HttpClient简单入门 本篇文章主要介绍了浅谈Angular HttpClient 简单入门,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 Web开发使用Angular实现用户密码强度判别的方法 这篇文章主要介绍了Web开发使用Angular实现用户密码强度判别的方法,需要的朋友可以参考下 2017-09-09 angular inputNumber指令输入框只能输入数字的实现 这篇文章主要介绍了angular inputNumber指令输入框只能输入数字的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-12-12 AngularJS实现动态切换样式的方法分析 这篇文章主要介绍了AngularJS实现动态切换样式的方法,结合实例形式分析了AngularJS事件响应与样式动态控制相关操作技巧,需要的朋友可以参考下 2018-06-06 详细解读AngularJS中的表单验证编程 这篇文章主要介绍了详细解读AngularJS中的表单验证编程,AngularJS是一个非常热门的JavaScript库,需要的朋友可以参考下 2015-06-06 AngularJS基础学习笔记之控制器 在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域意外的作用域实例的。当你或者AngularJS本身通过scope.$new俩创建一个新的子作用域对象时,有一个选项能让你将它当做参数传递给控制器。 2015-05-05 在AngularJS中使用AJAX的方法 这篇文章主要介绍了在AngularJS中使用AJAX的方法,示例非常简单,并不能完全体现出AJAX动态刷新的强大功能,需要的朋友可以参考下 2015-06-06 angular2 NgModel模块的具体使用方法 这篇文章主要介绍了angular2 NgModel模块的具体使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-04-04 最新评论

现在看看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 依赖关系的实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

张贴在3