layer源码解析（一）

因为发现公司的项目里基本全都用了layer,手机端的都用的是layer for mobile，所以本人本着积极探索的态度就去看源码啦，文档使用实在是简单的不要不要的，对于大家的开发中提升用户交互体验真的很方便，没钱去支持它，只能安利一波，虽然我安利也一点用都没有。。。

先说最近学习的XMind画脑图，现在用着不熟练，但已经觉得真的对理清思路简直是神器，也有免费版和专业版，再度给大家安利一波。

一 介绍和基本使用

1. layer for mobile是非常简单的，它将PC端的几种类型选择还有样式选择都删去了，只保留了最核心的函数layer.open({opt})，然后利用丰富的参数来实现开发者想要的基本的 交互弹窗。
2. 简单说下三个典型例子

layer.open({
     content:'我是一个询问框',
     btn:'好了，我知道了'
})

基本询问框

layer.open({
    content:"我是来提示你的",
    skin:"msg",
    time:2
})

提示弹窗

layer.open({
    type:2
})

有个遮罩层的加载动画

二.源码的构造

源码解构

讲真，用脑图是真心爽

简单来说呢,就是分三部，第一步就是做一些配置，拿传进来的参数做一些初始化，第二步就是核心，定义一个Layer对象，里面有两个方法，一个用来输出视图(view)，也就是Html代码，一个用来给上面绑定事件(action),第三补就是加一个css的link啊，然后把Layer对象封装一些方法，然后暴露给window，这样开发者就可以随意使用啦，貌似基本做插件都是这样，所以要总结总结，自己以后开发写组件的时候也可以这样，然后组件也可以拿出来给别人随意用啦~~~

三.配置部分分析

1. 基本方法简化

var doc = document, 
    query = 'querySelectorAll', 
    claname = 'getElementsByClassName', 
    S = function(s){
      return doc[query](s);
    };

这个很简单粗暴，后面想调用document.querySelectorAll的时候写成doc.query就好了，调用document.getElementsByClassName直接用定义了的S方法。

2. 定义默认配置config

//默认配置
var config = {
  type: 0
  //是否显示遮罩层
  ,shade: true
  //是否点击遮罩时关闭层
  ,shadeClose: true
  //fixed固定层的位置,默认true
  ,fixed: true
  //默认动画类型
  ,anim: 'scale' 
};

3. 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

1. 

   Layer的定义.png
   
   

   做了两件事情，一个是初始化配置，一个是调用view()

2. view

   
   
   

   视图.png
   
   

   首先是创建一个el，然后后面一步步的根据config来配置el.innerHTML里要添加的字符串，所以最后一步就是将所有判断走完后返回的字符串拼接起来。

  //最终连接dom结构
  //shade为string，则是显示，并自定义样式，所以加上一个div
  layerbox.innerHTML = (config.shade ? '
' : '')
  +'
'
    +'
'
      +'
'
        + title
        +'
'+ config.content +'
'
        + button
      +'
'
    +'
'
  +'
';

在el内部拼接完成后就是将其appendChild给相应的dom，然后调用action();
3.action()