本篇將主要講解使用過程中普遍遇到的“問題”,這些問題并非是BUG,通常是需要我們自己去注意的一些點。(會結合用戶反饋持續補充)
應該如何加載模塊最科學?
事實上我們在模塊規范已經有明確地說明,你可以采用預先加載和按需加載兩種模式,但后者我們并不推薦(文檔也解釋原因了)。因此我們強烈推薦的方式是:你應該在你js文件的代碼最外層,就把需要用到的模塊 layui.use以 一下,如:
JavaScriptlayui.code
/**
你的js文件
**/
//我們強烈推薦你在代碼最外層把需要用到的模塊先加載
layui.use(['layer', 'form', 'element'], function(){
var layer = layui.layer
,form = layui.form
,element = layui.element
//……
//你的代碼都應該寫在這里面
});
如何使用內部jQuery?
由于Layui部分內置模塊依賴jQuery,所以我們將jQuery1.11最穩定的一個版本作為一個內置的DOM模塊(唯一的一個第三方模塊)。只有你所使用的模塊有依賴到它,它才會加載,并且如果你的頁面已經script引入了jquery,它并不會重復加載。內置的jquery模塊去除了全局的$和jQuery,是一個符合layui規范的標準模塊。所以你必須通過以下方式得到:
JavaScriptlayui.code
~~~
//主動加載jquery模塊
layui.use(['jquery', 'layer'], function(){
var $ = layui.$ //重點處
,layer = layui.layer;
//后面就跟你平時使用jQuery一樣
$('body').append('hello jquery');
});
//如果內置的模塊本身是依賴jquery,你無需去use jquery,所以上面的寫法其實可以是:
layui.use('layer', function(){
var $ = layui.$ //由于layer彈層依賴jQuery,所以可以直接得到
,layer = layui.layer;
//……
});
~~~
為什么表單不顯示?
當你使用表單時,Layui會對select、checkbox、radio等原始元素隱藏,從而進行美化修飾處理。但這需要依賴于form組件,所以你必須加載 form,并且執行一個實例。值得注意的是:導航的Hover效果、Tab選項卡等同理(它們需依賴 element 模塊)
JavaScriptlayui.code
layui.use('form', function(){
var form = layui.form; //只有執行了這一步,部分表單元素才會自動修飾成功
//……
//但是,如果你的HTML是動態生成的,自動渲染就會失效
//因此你需要在相應的地方,執行下述方法來手動渲染,跟這類似的還有 element.init();
form.render();
});
哪里有 layui 未壓縮源代碼?
我們的全部代碼托管在GitHub(你可以通過首頁的Star進入)和碼云。之所以在下載包里沒有提供未壓縮的源代碼,是為了避免一些猿的使用混淆,因為之前有遇到過部分可愛到極致的猿,居然同時引入了壓縮過和未壓縮過的layui.js,雖然文檔在“開始使用”中有相關的明確說明,但這種問題仍然不是個例,使得我欲哭無淚啊啊啊,但畢竟我們要做“中國最容易使用的UI框架”,因此才決定只對下載包提供我們構建后的代碼,并且,由于是經過了壓縮、合并等處理,所以更適合用于生產環境。
layui的 GitHub 地址(點擊下述 Star 進入)
還是遇到困難咋辦?
可以繼續看看這個:layui 常見問題的處理和實用干貨集錦
但我還是不會用怎么辦?我還是遇到困難怎么辦?
首先,多看文檔啊親!那可是作者一個字節一個字節擼出來的,求珍惜。你抽出一定時間仔細閱讀文檔,后面只會節省更多時間!
其次,實在無解,就請在社區反饋吧。你也可以自己組織QQ群,在社區神馬的地方拉一些 layui 的小伙伴,相互交流噢!