来自 前端技术 2019-09-04 19:43 的文章
当前位置: 六合联盟网 > 前端技术 > 正文

依赖关系的实例,RequireJS管理js文件依赖示例

在应用RequireJS管理依赖在此以前,必要在html页面上手动引进一群js文件,要小心信赖顺序。那倒无妨,最入眼的是本人以为html文件中搞这么多东西显得凌乱不堪,并且会影响web美术职业的劳作。

现行反革命走访RequireJS带来的净化的性状:

 

上边有个html页面:

现今拜谒RequireJS带来的清爽的风味:

<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,作者定义如下:

上面有个html页面:

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

[html]  

尔后几个require调用,一层套一层,注意正视顺序正是内层依赖外层。最初要被加载的就写到最外层。

<html>  

最里面写了一个调用,$(document).ready(...) 本来一般写在html页面里面来的,那样好了。又和html解耦了。

  <head>  

以上那篇RequireJS 依赖关系的实例(推荐)正是作者共享给大家的全体内容了,希望能给我们三个参照他事他说加以考察,也可望大家多多扶助脚本之家。

    <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,作者定义如下:

[javascript]  

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();  

            })  www.2cto.com

        });  

    });  

});  

require.config中配置了引进的第三方的js库的js文件所在地方,包罗jquery, jquery.validate和jquery.artDialog

而后三个require调用,一层套一层,注意依赖顺序正是内层正视外层。最早要被加载的就写到最外层。

 

最里面写了二个调用,$(document).ready(...) 本来一般写在html页面里面来的,那样好了。又和html解耦了。

 

 

 

观念自身那堆凌乱不堪的html文件,赶紧去改呀。

 

 

 

...

本文由六合联盟网发布于前端技术,转载请注明出处:依赖关系的实例,RequireJS管理js文件依赖示例

关键词: