layui框架详细分析系列之框架主体组织结构

layui框架主体

今天正式的进入框架主体部分的学习与分析，该框架开源从GitHub上clone下来的源码主要的部分就是src部分，该部分主要的目录结构构成如下：

从上图可以看出css存储样式，font存储图标(iconfont), images存储图片，lay存储其他内置模块的js文件，layui.js文件就是主体部分。
layui.js还是采用IIFE的形式构成，如下面所示：

;!function(window, undefined) {
	// 主要代码
}(window);

其中；号与！号的作用就不在啰嗦了，我之前的文章有对其进行解释，我分析了layui.js整体，绘制了思维导图，具体如下图所示：

从上图可以看出，主体文件的组织结构很清晰明了，主要分为：
1、需要用到的变量，比如内置的模块对象、获取layui.js文件路径的函数以及非常重要的config配置参数对象
2、Lay构造函数，面向对象编程，方法都定义在构造函数的原型对象上
3、通过Lay构造函数创建对象，并通过window对象将其暴露出去

主体结构清晰简洁，封装性感觉很好，没有不必要的属性暴露出去，框架提供的页面元素的相关都是通过定义的CSS类来实现，行为和样式分离开来，耦合性相对较小。

该框架实现了自己的模块加载机制以及自定义事件机制，实现方法也是定义在Lay的原型对象上，我是通过分析内置模块来分析相关联的主体函数的功能的，理解并给予详细的注释。

本篇文章主要分析主体文件的组织结构，相关注释的主体文件以及各个内置模块的注释源文件都会上传到我的Github上，下一篇将会分析该框架的模块加载机制。

远行的你我