因為發現公司的項目里基本全都用了layer,手機端的都用的是layer for mobile，所以本人本著積極探索的態度就去看源碼啦，文檔使用實在是簡單的不要不要的，對于大家的開發中提升用戶交互體驗真的很方便，沒錢去支持它，只能安利一波，雖然我安利也一點用都沒有。。。
先說最近學習的XMind畫腦圖，現在用著不熟練，但已經覺得真的對理清思路簡直是神器，也有免費版和專業版，再度給大家安利一波。
一 介紹和基本使用
- layer for mobile是非常簡單的，它將PC端的幾種類型選擇還有樣式選擇都刪去了，只保留了最核心的函數
layer.open({opt})，然后利用豐富的參數來實現開發者想要的基本的 交互彈窗。 - 簡單說下三個典型例子
layer.open({
content:'我是一個詢問框',
btn:'好了，我知道了'
})
基本詢問框
layer.open({
content:"我是來提示你的",
skin:"msg",
time:2
})
提示彈窗
layer.open({
type:2
})
有個遮罩層的加載動畫
二.源碼的構造
源碼解構
講真，用腦圖是真心爽
簡單來說呢,就是分三部，第一步就是做一些配置，拿傳進來的參數做一些初始化，第二步就是核心，定義一個Layer對象，里面有兩個方法，一個用來輸出視圖(view)，也就是Html代碼，一個用來給上面綁定事件(action),第三補就是加一個css的link啊，然后把Layer對象封裝一些方法，然后暴露給window，這樣開發者就可以隨意使用啦，貌似基本做插件都是這樣，所以要總結總結，自己以后開發寫組件的時候也可以這樣，然后組件也可以拿出來給別人隨意用啦~~~
三.配置部分分析
- 基本方法簡化
var doc = document,
query = 'querySelectorAll',
claname = 'getElementsByClassName',
S = function(s){
return doc[query](s);
};
這個很簡單粗暴，后面想調用document.querySelectorAll的時候寫成doc.query就好了，調用document.getElementsByClassName直接用定義了的S方法。
- 定義默認配置config
//默認配置
var config = {
type: 0
//是否顯示遮罩層
,shade: true
//是否點擊遮罩時關閉層
,shadeClose: true
//fixed固定層的位置,默認true
,fixed: true
//默認動畫類型
,anim: 'scale'
};
- ready對象，用來做初始化的工作，兼任的干一下點擊事件綁定的工作
//用戶自定義屬性初始化，包括title,time,btn等默認為空的
var ready = {
extend: function(obj){
var newobj = JSON.parse(JSON.stringify(config));
for(var i in obj){
newobj[i] = obj[i];
}
return newobj;
},
timer: {}, end: {}
};
//點觸事件,傳進來函數執行
ready.touch = function(elem, fn){
elem.addEventListener('click', function(e){
fn.call(this, e);
}, false);
};
四.核心對象Layer
-
Layer的定義.png
做了兩件事情，一個是初始化配置，一個是調用view()
-
view
視圖.png
首先是創建一個el，然后后面一步步的根據config來配置el.innerHTML里要添加的字符串，所以最后一步就是將所有判斷走完后返回的字符串拼接起來。
//最終連接dom結構
//shade為string，則是顯示，并自定義樣式，所以加上一個div
layerbox.innerHTML = (config.shade ? '<div '+ (typeof config.shade === 'string' ? 'style="'+ config.shade +'"' : '') +' class="layui-m-layershade"></div>' : '')
+'<div class="layui-m-layermain" '+ (!config.fixed ? 'style="position:static;"' : '') +'>'
+'<div class="layui-m-layersection">'
+'<div class="layui-m-layerchild '+ (config.skin ? 'layui-m-layer-' + config.skin + ' ' : '') + (config.className ? config.className : '') + ' ' + (config.anim ? 'layui-m-anim-' + config.anim : '') +'" ' + ( config.style ? 'style="'+config.style+'"' : '' ) +'>'
+ title
+'<div class="layui-m-layercont">'+ config.content +'</div>'
+ button
+'</div>'
+'</div>'
+'</div>';
在el內部拼接完成后就是將其appendChild給相應的dom，然后調用action();
3.action()
