JQuery EasyUI 引用加載分析

 

easyui是什麼，就不介紹了，接觸到前端的就算沒用過，確定也應該據說過。其次，本文不是介紹它提供如calendar、tree等這些功能如何使用的，這些官網上介紹都很詳細，中文的網上也很多。本文是從easyui的文件目錄結構上來講起，談一下easyui的兩種引用加載方式。

 

引用加載方式

easyui的加載能夠分爲兩種方式，方式一：餓漢式加載；2：懶漢式加載。在具體討論這兩種加載方式以前，咱們先看下easyui目錄結構。

 

目錄結構

demo文件夾：一些示例，（正式項目中刪除）

locale：一些不一樣語言的文件，實際上是對easyui的擴展。（只須保留你想用的語言相對應的文件）

plugins：easyui提供的各個功能的文件。（使用方式二加載必須保留，方式一加載能夠刪除）

src :各個插件的源文件，不是所有，其實有些功能不是開源的，是商業受權，所以沒有源文件。（能夠刪除）

themes：主題，就是css文件和要用到的圖標文件，裏邊提供5種風格。（能夠只保留要使用的風格，而且具體到一個風格里，又分爲兩部分：easyui.css和其它全部css。easyui.css是其它全部css的合併後結果，在不一樣的加載方式中只會用到一部分。）

easyloader.js：暫且稱之爲加載器文件。在使用方式一加載也不會被使用。

jquery.easyui.min.js：easyui的主文件。它是plugins下全部文件合併後的結果，因些它在使用方式一加載必須保留，方式二加載不會使用到，能夠刪除（主文件能夠刪除，沒聽錯吧？？哈哈，相信我，能夠的。）。

jquery.min.js：jquery文件，easyui是基於jquery的，所以是必須的。

 

其它的是一些受權文件和更新日誌之類的，就不說了。

 

這裏有兩個重點：jquery.easyui.min.js是plugins下全部文件合併後的結果，具體到某個風格下如default下全部css：easyui.css是餘下的其它全部css合併以後的結果。

這樣就致使了不一樣的兩種加載方式。

 

餓漢式加載

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

這種也是最經常使用的方式。這種方式會加載easyui提供的全部功能，無論你頁面上會不會用的到，簡單暴力。

 

懶漢式加載

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyloader.js"></script>

這種方式就相對比較懶，只會在使用特定功能的時候纔會加載相對應的plugins下的js和風格里css文件，而其它不使用的功能對應的js和css永遠不會被下載。而easyloader.js就是負責用於加載各個插件的。

 

調用

一樣，都是兩種使用方式，咱們這裏只討論下在方式2調用過程。

當頁面中包含如：

<a href="#" class="easyui-linkbutton" onclick="load1()">Load Calendar</a>

html標記中class指定easyui-linkbutton之類easyui特定的標記時，easyui會檢測到並自動的去下載相對應的文件，並應用相應的樣式和功能。對於easyui-linkbutton標記就是去下載themes/default/linkbutton.css和plugins/jquery.linkbutton.js這兩個文件，而後改變a的顯示樣式。

 

固然咱們能夠手動經過js去調用相關功能：

using('calendar', function(){
                $('#cc').calendar({
                    width:180,
                    height:180
                });
            });

這樣就會去加載calendar對就的css和js文件，並在id爲cc的div上建立一個日曆控件。

 

問題

很快，咱們就會發現一些問題。

 

風格

方式1的加載咱們經過引用 themes/default/easyui.css來指定，引用不一樣風格下的easyui.css來使用不一樣的風格，可是方式2咱們並沒用指定風格？如何指定風格？

不指定時，默認是引用default風格下的樣式，就會去下載該風格下的樣式。若是你使用方式2時且沒有指定風格，不存在default風格就會出現問題。

固然咱們能夠在頁面加載後經過

easyloader.theme = "gray";

來指定風格。

 

語言

一樣的對於語言文件，對於方式1咱們能夠直接在頁面引用jquery.easyui.min.js的後面引用。

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

可是這對於方式2的加載，這是不起做用的。

因些語言文件實際上是對各個插件默認配置的修改，當插件都尚未加載時，語言文件對它的修改固然是不會起做用的。

所以咱們能夠經過下面

easyloader.locale = "zh_CN";

來指定使用何種語言。

 

完畢。