因为发现公司的项目里基本全都用了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()
