RequireJS 依赖关系的实例(推荐)

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

赞 (0)

相关推荐

  • RequireJS 依赖关系的实例(推荐)

    现在看看RequireJS带来的整洁的特点: 下面有个html页面: <html> <head> <title>configuration</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" href="../master/plu

  • RequireJS多页面应用实例分析

    本文是requireJS的一些知识点的总结,配上多页面应用中的实例分析. 本案例的目录结构如下: requireJS API的三个主要函数:define(创建模块),require(加载模块),config(配置) 1. HTML文件中加载JS文件 page1.html内容如下: <!DOCTYPE html> <html> <head> <title>Page 1</title> <script data-main="scrip

  • in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案

    in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案

    国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器.但是本文将会向大家介绍一个新的开源的轻量级"多线程"异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用. 优点: 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用? A.引入In.js 复制代码 代

  • java application maven项目打自定义zip包实例(推荐)

    java application maven项目打自定义zip包实例(推荐)

    1.配置pom.xml文件,添加build节点 <build> <!-- 输出的包名 --> <finalName>p2p</finalName> <sourceDirectory>src/main/java</sourceDirectory> <resources> <!-- 控制资源文件的拷贝(默认复制到classes目录,最后打进jar包) --> <resource> <directo

  • Spring实战之依赖关系注入之后的行为示例

    本文实例讲述了Spring实战之依赖关系注入之后的行为.分享给大家供大家参考,具体如下: 一 配置 <?xml version="1.0" encoding="GBK"?> <beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.springframework.org/schema/beans" xsi:sc

  • ASP.NET Core依赖关系注入

    ASP.NET Core依赖关系注入

    1.前言 面向对象设计(OOD)里有一个重要的思想就是依赖倒置原则(DIP),并由该原则牵引出依赖注入(DI).控制反转(IOC)及其容器等老生常谈的概念,初学者很容易被这些概念搞晕(包括我在内),在学习Core依赖注入服务之前,下面让我们先了解下依赖倒置原则(DIP).依赖注入(DI).控制反转(IOC)等概念,然后再深入学习Core依赖注入服务. 2.依赖倒置原则(DIP) 高层模块不依赖于低层模块的实现,而低层模块依赖于高层模块定义的接口.通俗来讲,就是高层模块定义接口,低层模块负责实现.

  • 使用JQuery实现图片轮播效果的实例(推荐)

    使用JQuery实现图片轮播效果的实例(推荐)

    [效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用fadeOut,fadeIn方法显示图片 4,设置setInterval,定时执行切换函数 [代码说明] filter(":visible") :获取所有可见的元素 unbind():从匹配的元素中删除绑定的事件 siblings:取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元

  • 详解表单验证正则表达式实例(推荐)

    验证:!reg.test(value) 邮箱: 复制代码 代码如下: reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 复制代码 代码如下: reg = /.*[\u4e00-\u9fa5]+.*$/i; 身份证号: // 验证身份证号码 var city = {11:'北京',12:'天津',13:'河北',14:'山西',15:'内蒙古',21:'辽宁',22:'吉

  • shell脚本一键安装php7的实例(推荐)

    如下所示: #!/bin/bash php_gz_file='/home/php/Downloads/source/php-7.0.0.tar.bz2' tar_dir='/home/php/Downloads/dst/' source_dir='php-7.0.0' cd $tar_dir rm -rf $source_dir echo '===start tar php ========' tar -jxvf $php_gz_file > /dev/null echo '===end tar

  • 获取当前按钮或者html的ID名称实例(推荐)

    今天做的上传图片,点击图片删除. 随机给图片id,获取图片id,然后删除图片. 由于图片id是随机的,用点击img或者点击class,获取id都不行,最后用onclick事件获取. js代码如下: $("#pic").append("<img style='width:70px;margin:5px;height:70px;' id='"+num+"' onclick='upimg()' src=\"" + images.loca

随机推荐