收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

javascript高級模塊化require.js的具體使用方法

本文介紹了require.js的具體使用方法,分享給大家,也給自己留個筆記。

Require.js:

RequireJS是一個非常小巧的javascript模塊載入框架,是AMD(Asynchronous Module Definition,異步模塊加載機制)規范最好的實現之一。最新版的requireJS壓縮后只有14k,堪稱非常輕量。它還同時可以和其他的框架協調工作,使用requireJS必將使我們的前端代碼質量得以提升。

首先我們先來看一下一個普通的頁面js加載

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/index02.js" ></script>
  </head>
  <body>
    <h1>this is a page.</h1>
  </body>
</html>

運行結果:

查看圖片

此時,如果我們不對彈出框做操作,頁面就不會接著加載,就不會有頁面內容,這并不是我們想要實現的結果。

下面我們用require.js進行操作:

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/require2.1.11.js"></script>
    <script type="text/javascript">
      require(["js/index","js/index01"],function(){
        console.log("當js加載成功后會執行的函數");
      },function(){
        console.log("當js加載失敗后會執行的函數");
      });
    </script>
  </head>
  <body>
  </body>
</html>

index.js

define(function(){
  console.log("this is a test!");
  function test(){
    console.log("haha,i am a test!");
  }
  test();
});

首先頁面上不再導入test02.js,只是導入了requireJS,其次在javascript中我們使用require()方法,在其中傳遞了一個數組的參數,實參為我們要導入的js文件的【路徑+文件名稱。

此時的運行結果:

查看圖片

查看圖片

查看圖片

可以看出,此時頁面內容已經顯現出來了。并不像前面我們傳統的一樣在等待js運行完成后頁面再加載,而是頁面加載完成后才運行js代碼,這樣在運行效率上就大大的提高了。

根據上面的代碼,我們可以來分析requirejs的基本API:

requireJS會定義三個變量:define,require,requirejs

require==requirejs,一般使用require更簡短。 define 用來定義一個模塊 require 加載依賴模塊(引用定義好的模塊),并執行加載完后的回調函數

require有三個參數:

require(["js/index","js/index01"],function(){
        console.log("當js加載成功后會執行的函數");
      },function(){
        console.log("當js加載失敗后會執行的函數");
      });
//第一個參數:定義require中的依賴,參數必須是數組形式,即使只有一個依賴,也必須使用數組形式傳參。
//第二個參數:是一個回調函數,用來處理加載完畢后的邏輯,當所有模塊加載完成后觸發
//第三個參數:也是一個回調函數,用來處理模塊加載失敗后的情況。如上面代碼,js中沒有定義index01.js這個文件,所以出調用這個回調函數。

加載網絡文件

之前我們加載的都是本地的js文件,但是,有些時候我們又需要加載網絡上的文件,那又該怎么加載呢?下面我們就來介紹一下怎樣加載網絡上的js文件.

我們現在以加載一個jquery.js文件為例:

//百度cdn公共庫jQuery地址:   http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js 
//jQuery官方地址:      https://code.jquery.com/jquery-3.1.1.js
//注意:網絡上去取時不能加后綴,否則取不到
require.config({
  paths : {
    //為網絡上的庫去一個名字:jquery
    "jquery" : ["https://code.jquery.com/jquery-3.1.1"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("頁面加載成功~~");
},function(){
  alert("頁面加載失敗~~")
});

在取網絡上的文件時注意:

1、config方法的參數是一個對象
2、paths的值也是一個對象
3、當我們為網絡上的庫取名字是任意,但是建議取有意義的名字,別人可以通過名稱知道你的網絡資源是什么資源
4、庫的值是一個數組,意味著可以多個同時寫,防止網絡異常取不到
5、特別注意:網絡資源路徑不能帶后綴名,否則取不到
6、我們也可以先讓去網絡中去取,如果取不到,再在本地取,減輕本地服務的壓力(屬于項目優化)。

require.config({
  paths : {
    //這樣配置,減輕本地服務器的壓力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1.js","js/jquery-1.8.3"]
  }
});

//
require(["jquery","js/test01","js/test02"],function(){
  alert("頁面加載成功~~");
},function(){
  alert("頁面加載失敗~~")
});

同樣我們也可以將本地的配置到paths中:

require.config({
  paths : {
    //這樣配置,減輕本地服務器的壓力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //將本地的js文件同樣配置,之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

//
require(["jquery","test01","test02"],function(){
  alert("頁面加載成功~~");
},function(){
  alert("頁面加載失敗~~")
});

上面的例子中重復出現了require.config配置,如果每個頁面中都加入配置,必然顯得十分不雅,requirejs提供了一種叫”主數據”的功能,我們首先創建一個main.js:

require.config({
  paths : {
    //這樣配置,減輕本地服務器的壓力
    "jquery" : ["https://code.jquery.com/jquery-3.1.1","js/jquery-1.8.3"],
    //將本地的js文件同樣配置,之后引用
    "test01" : ["js/test01"],
    "test02" : ["js/test02"]
  }
});

然后再頁面中使用下面的方式來使用requirejs:

<script type="text/javascript" src="js/require2.1.11.js" ></script>
<script type="text/javascript" src="js/main.js" ></script>
<script type="text/javascript">

  require(["jquery","t1","t2"],function(){
    alert("頁面加載成功~~");
  },function(){
    alert("頁面加載失敗~~")
  });

</script>

在官方提供了一種基于標簽屬性的方式:

<script data-main="js/main" src="js/require2.1.11.js" ></script>

將所有的配置和導入js都放在了main.js中,這樣在頁面只要這樣一個標簽就行了。

代碼演示如下:

//test01.js--定義一個js模塊
define(function(){
  function test(){
    console.log("this is test01.js");
  }
  test();

  $("p").css("color","#DB7093");
});
//main.js--requirejs的全局配置
require.config({
  paths:{
    "jquery":["jquery-1.8.3"],
    "test":["test01"]
  },
  shim:{
    "test":["jquery"]
  }
});
require(["test"],function(){
  console.log("success!");
});
//index.html--此時,引入js文件只需一行代碼
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" data-main = "js/main" src="js/require2.1.11.js" ></script>
  </head>
  <body>
    <p>i am liyanan and this is a testn Page.</p>
  </body>
</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

React Native使用Modal自定義分享界面的示例代碼
在很多App中都會涉及到分享,ReactNative提供了Modal組件用來實現一些模態彈窗,例如加載進度框,分享彈框等。使用Modal搭建分析的效果如下:自定義的

微信小程序頂部可滾動導航效果
需求是小程序做頭部做導航分類的效果頂部用scroll-view組件橫向滾動,類似tab選項卡的效果,內容用類似模板方式引用,可重復利用scroll-viewclass="scroll-vi

react-native fetch的具體使用方法
在前端快速發展地過程中,為了契合更好的設計模式,產生了fetch框架,此文將簡要介紹下fetch的基本使用。在AJAX時代,進行請求API等網絡請求都是通過

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
时时彩免费分析软件