layUi框架入门篇（一）

layUi框架学习笔记(一)

整理人：LF

时间：2017-9-1

---

表示今天第一次听说了layui的前端框架，上网搜了很多的资料和图示，对比了一下自己辛辛苦苦写了十天的网页样式，最后不得不感叹前端框架的魅力，下定决心要好好学习一番。

首先去了官网看了一下说明文档和示例，非常感兴趣，但是对于layui提出的精髓：模块化编写，这个词却是不太理解，我感觉模块可能就是指的是每一个标签？希望懂得小伙伴可以为我指点一二。如果笔记中有理解错误的地方也欢迎小伙伴们指正！

个人感觉layui的使用方式还是比较快捷的，先从官网下载下了源码，它的目录如下的：

  ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

---

在实际开发过程中，将文件夹打包入自己的项目中，在页面引入layui.css和layui.js两个文件便好。我在我的的layUiTest.jsp文件中这样引入(这是模块化的引入方式):

<script type="text/javascript" src="./layui/layui.js"></script>
<link rel="stylesheet" href="./layui/css/layui.css">

---

另外layui提供了自定义模块的操作，作为第一天接触前端框架的小白我来说，学习到这儿依旧是一脸懵逼，但是只能硬着头皮理解下去。

layui.define([mods], callback)

[mods]是可选参数，用于声明自定义模块的依赖模块。callback是模块加载完毕的回调函数

使用示例：

layui.define(function(exports){
  //do something

  exports('demo', function(){
    alert('Hello World!');
  });
});

定义了一个叫demo的模块，layui.define（）会返回一个模块的接口，即上述代码中的exports,这个接口即模块的功能，exports实质上是一个函数，它拥有两个参数，第一个是模块名，第二个是接口本身实现的功能，当你声明了上述demo模块后，demo模块就被注册到了layui下，即可通过layui.demo（）来执行模块的接口(即执行alert（‘hello world！’）)。

---

接下来便是如何使用layui中的各种控件了,我的理解是想要使用layui控件，必不可少的便是

/**加载所需模块（这么一想，模块可能真的指那些控件标签？）
*[mods]：mods里面必须是一个合法的模块名，不能包含目录。如果需要加载目录，建议采用extend建立别名（详见模块规范）
*callback:应该就是回调函数吧,我理解为加载模块时执行的操作。
/
layui.use([mods], callback)

使用示例：

layui.use(['laypage', 'layedit'], function(){
  var laypage = layui.laypage
  ,layedit = layui.layedit;

//使用分页
  laypage();

  //建立编辑器
  layedit.build(‘[控件id]’);
});

通过赋值，使模块获取到相应接口，但是回调函数本身返回的即是相应模块的接口，所以也可以不用赋值，通过参数的形式获得接口：

layui.use(['laypage', 'layedit'], function(laypage, layedit){

  //使用分页
  laypage();

  //建立编辑器
  layedit.build(‘[控件id]’);
});

---

今天就先学习到这里，对于模块化依旧是有疑问的，网上看了很多大神的笔记，但是还是不怎么理解，下篇笔记再深入研究layui官网推荐的规范开发方式的实现过程。