国产综合精品-久久久久久成人毛片免费看-69久久夜色精品国产69-美国十次啦怡红院

Web前端知識

首頁 > 免費 > Web前端知識 >

基于RequireJS和JQuery的模塊化編程——常見問題解析

來源:北京匯仁智杰科技有限公司   時間:2016-04-14   點擊:

  由于js的代碼邏輯越來越重,一個js文件可能會有上千行,十分不利于開發(fā)與維護。最近正在把邏輯很重的js拆分成模塊,在一頓糾結(jié)是使用requirejs還是seajs的時候,最終還是偏向于requirejs。下面就循序漸進的講解一下匯仁智杰技術(shù)大師遇到的問題,以及解決的辦法。
  關于AMD和CMD的理解
  AMD(異步模塊定義)的典型就是requirejs,而CMD(通用模塊定義)的典型是淘寶的seajs。
  他們的相同點是,都會異步的加載js。但是不同點是,require.js加載完會立即執(zhí)行;而seajs則是等到進入主函數(shù)需要執(zhí)行時才執(zhí)行。
  如果使用seajs初始的加載執(zhí)行效率會比較高,但是在使用的過程中可能會取執(zhí)行js,因此可能會出現(xiàn)卡頓,影響用戶體驗。而requirejs則是在一開始就把所有加載的js都執(zhí)行,這時,如果你的模塊中有一些執(zhí)行方法,它們可能并不會按照你想的順序執(zhí)行。
  因此,如果已經(jīng)習慣了異步編程,并且希望有完善的文檔推薦使用requirejs;如果是想對執(zhí)行順序有特殊要求,又方便開發(fā),那么也可以使用seajs。
如何解決requirejs中循環(huán)依賴問題
  如果你定義的某個a模塊使用到了b模塊,而b模塊又使用了a模塊,那么就會拋出循環(huán)依賴的異常。
  比如,我這里寫了一個循環(huán)依賴的例子。
  主頁面:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script data-main="test.js" src="lib/require.js"></script>
</body>
</html>
  主方法:
requirejs.config({
  baseUrl: './'
});
requirejs(['js/a'],function (a){
  console.log("in test");
  a.testfromb();
});
  a.js模塊中,atest()方法提供b調(diào)用、testfromb()方法調(diào)用b的方法
define(function(require){
 var b = require("js/b");
 console.log("in a");
 return {
  atest:function(){
   console.log("test in a");
  },
  testfromb:function(){
   console.log("testfromb in a");
   b.btest();
  }
 }
});
  b模塊中,調(diào)用了a的方法。
define(function(require){
 var a = require("js/a");
 console.log("in b");
 return {
  btest:function(){
   console.log("test in b");
   a.atest();
  }
 }
});
  這樣相當于a調(diào)用了b的方法,但是b的方法依賴于a的方法,這就造成了循環(huán)依賴。瀏覽器會提示錯誤:
Uncaught Error: Module name "js/a" has not been loaded yet for context: _
  按照官方文檔的說法,這種屬于設計的問題,應該盡量避免。那么如果避免不了該怎么辦呢?可以這樣修改b模塊:
define(function(require){
 // var a = require("js/a");
 console.log("in b");
 return {
  btest:function(){
  console.log("test in b");
   require("js/a").atest();
  }
 }
});
  這里是等到執(zhí)行atest()方法時,才加載a模塊。這時,a模塊很顯然已經(jīng)加載完了 ??梢钥吹捷敵龅男畔ⅲ?br/>in b
a.js:3 in a
test.js:6 in test
a.js:9 testfromb in a
b.js:6 test in b
a.js:6 test in a

0.png

  同樣的方式,修改a可能就不好使了。這時因為模塊加載的順序是從b開始的。
  如何在requirejs中使用jquery
  如果想要使用jquery比較簡單,直接在main.js中添加對應的依賴即可:
requirejs.config({
 baseUrl: './',
 paths:{
  'jquery':'lib/jquery'
 }
});
requirejs(['jquery'],
function ($){
 $('#test').html('test');
});
  如何在requirejs中使用jquery插件
  對于jquery的插件,比較常見的做法都是傳入一個jquery的對象,在這個jquery對象的基礎上添加插件對應的方法。
  首先需要添加jquery插件的依賴,這里用兩個插件舉例子——jquery-ui和jquery-datatables
requirejs.config({
 baseUrl: './',
 paths:{
  'jquery':'lib/jquery',
  'jquery-ui':'lib/jquery-ui',
  'jquery-dataTables':'lib/jquery.dataTables'
 },
 shim:{
  'jquery-ui':['jquery'],
  'jquery-dataTables':['jquery']
 }
});
requirejs(['jquery','jquery-ui','jquery-dataTables'],
function ($){
 ....
});
  由于jquery插件都需要依賴于jquery,因此可以在shim中指定依賴關系。
  除了上面這種使用方法,也可以使用commonJS風格的調(diào)用:
define(function(require){
 var $ = require('jquery');
 require('jquery-ui');
 require('jquery-dataTables');
  //下面都是測試,可以忽略
 var _test = $('#test');
 _test.selectmenu({
  width : 180,
  change : function(event, ui) {
   console.log('change');
  }
 });
 return {
  test:function(){
   //測試jquery-ui
   _test.append($('<option>test1</option><option>test1</option>'));
   _test.selectmenu("refresh");
   //測試jquery-datatables
    var _table = $('table');
   _table.dataTable();
  }
 }
});
  不過,執(zhí)行上面的代碼,會報一個異常:
Uncaught TypeError: _table.dataTable is not a function
  這是因為,dataTables并不是一個require風格的模塊,因此直接這樣引入,并不會執(zhí)行它內(nèi)部的匿名函數(shù)??梢孕薷乃哪涿瘮?shù),傳入$對象,在最后一行:
 */
 return $.fn.dataTable;
//}));原來是這樣
}($)));//這里增加執(zhí)行這個匿名函數(shù),并且傳入$對象。
}(window, document));
  requirejs使用jquery-ui的問題
  由于requirejs加載js文件后會立即執(zhí)行,如果你的jquery ui 插件需要刷新DOM頁面,那么可能會導致頁面的事件失效。
  比如,你的模塊在加載后,對頁面的某個元素$('#test')綁定了click事件。但是使用了某個UI插件,這個插件會重新渲染DOM元素,test對應的click事件就失效了。
  解決辦法:
  把事件綁定推遲到DOM元素渲染完后再手動觸發(fā)綁定;
  也可以使用事件捕獲代替DOM元素的事件綁定。
  比如在DOM重構(gòu)的JS模塊中,執(zhí)行渲染的代碼下面:
require("xxx").initEvents();
  常見場景:
  比如我在頁面中使用了jquery-steps這個UI插件,它會對頁面進行重新渲染。這就導致我最開始綁定的事件都失效了....只有推遲到這個js重構(gòu)完頁面,再綁定才行。

網(wǎng)絡營銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:15201492965
業(yè)務QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網(wǎng)絡推廣經(jīng)驗
  • 有網(wǎng)站建站隊伍
  • 有大型網(wǎng)站建設經(jīng)驗
  • 致力于營銷型網(wǎng)站建設
  • 始終堅持技術(shù)和服務同樣重要
查看PC版網(wǎng)站
備案號:京ICP備15021091號-1 版權(quán)所有:匯仁智杰