1. 程式人生 > >Arcgis javascript那些事兒(二十)——dojo中djconfig配置、dojo與requirejs專案衝突

Arcgis javascript那些事兒(二十)——dojo中djconfig配置、dojo與requirejs專案衝突

一、引言


      由於專案一部分使用requirejs另一部分地圖是用dojo開發(因為arcgis javascript使用的dojo),兩個要和到一起,所以要求研究下如何把兩者和到一起,花了兩天時間看了看requirejs與dojo,終於搞定了,跟大家分享下==



二、AMD標準下dojo與requirejs區別與聯絡


      AMD標準我就不說了,簡單來講這個就是類似java包import或者C#using,為了方便js管理與使用,不清楚的可以看下這個點選開啟連結

      一樣的是dojo與requirejs都符合AMD標準,所以define、require和初始化基本一樣,依次類推其他符合AMD的也應該通用;

      不同的是dojo和requirejs都自己實現了AMD標準,沒有依賴關係,dojo早期版本沒有實現AMD的時候有人以requirejs為基礎實現了AMD標準,所以一直以為dojo底層使用的是requirejs,但是我把dojo原始碼翻了翻沒有找到requirejs,所以現在兩者程式碼沒有任何關聯。



三、dojo與requirejs專案衝突整合


      衝突的可能原因:如果兩套框架完全沒有關係,那麼直接使用應該直接使用沒有問題,為啥有衝突呢?

      經過n次油霸實驗,終於找到了原因所在,事實上兩個框架程式碼並沒有任何關係,但是在初始化配置的時候的引數設定會出現問題,一個的設定會影響另一個的設定,加入說兩者設定完全相同那麼沒問題,但是兩個專案的引數設定不同的話就會出現問題!!!

      筆者決定將require框架拋棄,將requirejs中的配置全部搬到dojo的初始化設定中,畢竟dojo中還有arcgis javascript中地圖的東西這樣穩妥些。



四、AMD模式下dojo配置


下面講解一下dojo中djconfig的引數

/**
 * Created by xcy on 2017/4/14.
 */
var xcyip="192.168.70.133";
var webport=":8080";
var gisport=":6080";
var temp=location.pathname;
var package_path='/'+location.pathname.replace(/\/[^/]*$/, '').split("/")[1];
//var package_path='/ggdl/xcyjs';
//模組所處的路徑
dojoConfig = {
    has: {
        "dojo-firebug": true,
        "dojo-debug-messages": true
    },
    parseOnLoad: true,
    async: true,
    //baseUrl: '/'+location.pathname.replace(/\/[^/]*$/, '').split("/")[1],
    baseUrl: package_path+'/3.20/dojo/',
    packages: [
        {name: "application", location: package_path+"/xcyjs"},
        {name:"js",location:package_path+"/js"}
    ],
    shim : {
        'bootstrap' : { 'deps' : ['jquery'] },
        'BMap' : {'deps' : ['jquery'], 'exports': 'BMap'},
        'jquery-ui' : {'deps': ['jquery']},

        'ztree' : {'deps': ['jquery'],exports:'zTree'},
        'ztree-excheck' : {'deps': ['ztree']},
        'ztree-exedit' : {'deps': ['ztree']}
    },
    paths: {
        jquery: package_path+"/js/"+'lib/jquery',
        'jquery-ui' : package_path+"/js/"+'lib/jquery-ui.min',
        handlebars: package_path+"/js/"+'lib/handlebars',
        bootstrap: package_path+"/js/"+'lib/bootstrap',
        'bootstrap-datetimepicker': package_path+"/js/"+'lib/bootstrap-datetimepicker.min',
        echarts :package_path+"/js/"+ 'lib/echarts',
        chalk: package_path+"/js/"+'lib/chalk',
        'jquery-dataTables':package_path+"/js/"+ 'lib/jquery-dataTables.min',
        layui:package_path+"/js/"+'lib/layui.all',
        'ztree':package_path+"/js/"+'lib/jquery.ztree.core',
        'ztree-excheck':package_path+"/js/"+'lib/jquery.ztree.excheck',
        'ztree-exedit':package_path+"/js/"+'lib/jquery.ztree.exedit',
        Jtopo1:package_path+"/js/"+'lib/jtopo',
        bar:package_path+"/js/"+'lib/toolbar',
        module:package_path+"/js/module"
    }
};

1、has()

      Dojo1.7+採用的配置選項。在has()中可以設定是否啟用某個功能例如是否採用firebug除錯,是否採用AMD的工廠掃描功能: 
dojoConfig={ 
has:{ 
“dojo-amd-factory-scan”: false, 
“dojo-firebug”: true 

}


2、baseUrl

      baseUrl值是String形式。這個配置項可以重新定義本地或者跨域載入工具箱時的頂級路徑。實踐中一般用於自定義module的位置解析。 
baseUrl的預設路徑是dojo.js檔案的上一級目錄。

比如檔案路徑為:

/--a
   /--dojo
       /--dojo.js
   /--aaa.js
/--b
   /--bbb.js


      當require([aaa].……)的時候,則找的是aaa.js

      此時我們要想使用bbb.js,使用require([b/bbb]……)是無法找到的,找到的路徑實際路徑是/a/b/bbb.js 。此時要修改該baseUrl,比如修改baseUrl=“/b”,這樣require([bbb])……j就可以找到了。


3、package

      packages是物件陣列。提供了package 名字與路徑的鍵值對。例如:

    packages: [
        {name: "application", location: "/xcyjs"},
        {name:"js",location:"xcyjs"}
    ],

      此時相當於為require中引用起了一個別名,require([application/aaa]……),實際路徑是/xcyjs/aaa.js,這個是絕對路徑,跟baseUrl沒有關係;

      而下面的一個是相對路徑require([js/aaa]……),實際路徑是baseUrl/xcyjs/aaa.js,這個需要注意,絕對路徑相對路徑絕對路徑相對路徑絕對路徑相對路徑!!!


4、path

      可以將 module id 對映到不同的檔案路徑,與package有相同的效果

var dojoConfig = {
    packages: [
        "package1",
        "package2"
    ],
    paths: {
        package1: "../lib/package1",
        package2: "/js/package2"
    }
};

    // ...is equivalent to:
var dojoConfig = {
    packages: [
        { name: "package1", location: "../lib/package1" },
        { name: "package2", location: "/js/package2" }
    ]
};

5、async

      設定 Dojo core 採用非同步載入。值可以為 true, false 或 legacyAsync( 將 loader 永久地置為 legacy cross-domain mode)


6、parseOnLoad

      parseOnLoad: 設定為true的話,就會使用dojo/parser物件去解析頁面載入的DOM和依賴(包括定義在dojoConfig.deps中陣列)


7、waitSeconds

      設定模組載入的超時之前的等待時間 預設值為 0 (永遠等待):


      講完這些就差不多夠用的了,不過還有個問題,不知道大家記不記得在配置arcgis javascriptapi環境的時候會讓你在init,js和dojo,js中修改[HOSTNAME_AND_PATH_TO_JSAPI]為自己的機器的路徑。

      這個時候我發現init自己初始化的時候會自己做一個判斷,當我們不設定baseUrl的時候會預設使用我們在init中設定的路徑,但是當我們在djconfig中配置baseUrl以後他就會預設使用我們設定的baseUrl,所以我們最好主動在djconfig檔案中配置下baseUrl,這樣使用起來比較方便。



五、總結


  • dojo與requirejs的區別

  • dojo與requirejs專案衝突與解決

  • dojo中djconfig配置詳細解釋