因?yàn)榘l(fā)現(xiàn)公司的項(xiàng)目里基本全都用了layer,手機(jī)端的都用的是layer for mobile各淀，所以本人本著積極探索的態(tài)度就去看源碼啦懒鉴，文檔使用實(shí)在是簡(jiǎn)單的不要不要的，對(duì)于大家的開發(fā)中提升用戶交互體驗(yàn)真的很方便碎浇，沒(méi)錢去支持它临谱，只能安利一波，雖然我安利也一點(diǎn)用都沒(méi)有奴璃。悉默。。
先說(shuō)最近學(xué)習(xí)的XMind畫腦圖苟穆，現(xiàn)在用著不熟練抄课，但已經(jīng)覺(jué)得真的對(duì)理清思路簡(jiǎn)直是神器，也有免費(fèi)版和專業(yè)版雳旅，再度給大家安利一波剖膳。
一 介紹和基本使用
- layer for mobile是非常簡(jiǎn)單的，它將PC端的幾種類型選擇還有樣式選擇都刪去了岭辣，只保留了最核心的函數(shù)
layer.open({opt})吱晒，然后利用豐富的參數(shù)來(lái)實(shí)現(xiàn)開發(fā)者想要的基本的 交互彈窗。 - 簡(jiǎn)單說(shuō)下三個(gè)典型例子
layer.open({
content:'我是一個(gè)詢問(wèn)框',
btn:'好了沦童，我知道了'
})
基本詢問(wèn)框
layer.open({
content:"我是來(lái)提示你的",
skin:"msg",
time:2
})
提示彈窗
layer.open({
type:2
})
有個(gè)遮罩層的加載動(dòng)畫
二.源碼的構(gòu)造
源碼解構(gòu)
講真仑濒，用腦圖是真心爽
簡(jiǎn)單來(lái)說(shuō)呢,就是分三部叹话，第一步就是做一些配置，拿傳進(jìn)來(lái)的參數(shù)做一些初始化墩瞳，第二步就是核心驼壶，定義一個(gè)Layer對(duì)象，里面有兩個(gè)方法喉酌，一個(gè)用來(lái)輸出視圖(view)热凹，也就是Html代碼，一個(gè)用來(lái)給上面綁定事件(action),第三補(bǔ)就是加一個(gè)css的link啊泪电，然后把Layer對(duì)象封裝一些方法般妙，然后暴露給window，這樣開發(fā)者就可以隨意使用啦相速，貌似基本做插件都是這樣碟渺，所以要總結(jié)總結(jié)，自己以后開發(fā)寫組件的時(shí)候也可以這樣突诬，然后組件也可以拿出來(lái)給別人隨意用啦~~~
三.配置部分分析
- 基本方法簡(jiǎn)化
var doc = document,
query = 'querySelectorAll',
claname = 'getElementsByClassName',
S = function(s){
return doc[query](s);
};
這個(gè)很簡(jiǎn)單粗暴苫拍，后面想調(diào)用document.querySelectorAll的時(shí)候?qū)懗?code>doc.query就好了，調(diào)用document.getElementsByClassName直接用定義了的S方法旺隙。
- 定義默認(rèn)配置config
//默認(rèn)配置
var config = {
type: 0
//是否顯示遮罩層
,shade: true
//是否點(diǎn)擊遮罩時(shí)關(guān)閉層
,shadeClose: true
//fixed固定層的位置,默認(rèn)true
,fixed: true
//默認(rèn)動(dòng)畫類型
,anim: 'scale'
};
- ready對(duì)象绒极，用來(lái)做初始化的工作，兼任的干一下點(diǎn)擊事件綁定的工作
//用戶自定義屬性初始化蔬捷，包括title,time,btn等默認(rèn)為空的
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: {}
};
//點(diǎn)觸事件,傳進(jìn)來(lái)函數(shù)執(zhí)行
ready.touch = function(elem, fn){
elem.addEventListener('click', function(e){
fn.call(this, e);
}, false);
};
四.核心對(duì)象Layer
-
Layer的定義.png
做了兩件事情集峦，一個(gè)是初始化配置，一個(gè)是調(diào)用view()
-
view
視圖.png
首先是創(chuàng)建一個(gè)el抠刺，然后后面一步步的根據(jù)config來(lái)配置el.innerHTML里要添加的字符串塔淤，所以最后一步就是將所有判斷走完后返回的字符串拼接起來(lái)。
//最終連接dom結(jié)構(gòu)
//shade為string速妖，則是顯示高蜂，并自定義樣式，所以加上一個(gè)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內(nèi)部拼接完成后就是將其appendChild給相應(yīng)的dom罕容，然后調(diào)用action();
3.action()
