玉案轩窗的博客

前言所谓的流加载实际上是第一种优化手段，通常用于图片丰富的网站，目的是为了提供更好的用户体验。具体的体现是在页面初始化时，先加载一小部分内容，当用户下拉页面到一定的距离，开始加载另一小部分的内容，直至将所有资源加载呈现，体现的是化整为零的思想，具有较好地用户体现效果。自实现流加载以及图片懒加载功能流加载功能和图片懒加载功能是分开实现的，使用原生的JavaScript开发（所有涉及交互效果的案例等都是

element内置模块时layui框架中页面元素的交互功能的实现，主要是选项卡、面板、导航等的交互的实现。下面先分析element模块的组织结构，具体如下图所示： 从上图中可以看出，element模块使用该框架自己的模块加载机制来加载该模块。该框架内置的模块都是采用面向对象的编程，该模块也是，定义了Element构造函数，对外的API接口都定义在Element的原型对象上，使用JQuery来绑定一

前言今天分析的是layui框架内置模块tree.js，该模块的功能是构建树形菜单，具体的形式(layui官网该模块的具体形式)如下： 自实现树形菜单使用html+css+js实现了树形菜单，具体的实现思路如下：html中定义包含树形菜单的容器节点规划好树形菜单的样式以及图标使用js构建html结构以及绑定事件，实现树形菜单的点击折叠实现效果图如下： 核心的实现是构建html结构，组织

这个系列的文章主要是分析layui源码，所以文章是针对于主要的功能或者单独的内置模块来书写的，本章主要分析layui框架自己的模块加载机制的实现。上一篇文章是通过MarkDown来书写，感觉排版比之前的好多了，之后就采用MarkDown来编写了。今天天气热的公司空调都挂了，直接接入正题，真是热……该框架的模块加载机制主要是使用define和use这两个方法来实现的，define方法适用于定义模块，u

layui框架主体今天正式的进入框架主体部分的学习与分析，该框架开源从GitHub上clone下来的源码主要的部分就是src部分，该部分主要的目录结构构成如下： 从上图可以看出css存储样式，font存储图标(iconfont), images存储图片，lay存储其他内置模块的js文件，layui.js文件就是主体部分。 layui.js还是采用IIFE的形式构成，如下面所示：;!f

前不久，阅读了layer.js的源码，实际上它是layui框架的内置模块，不过可以独立出去使用，主要是用于弹出层的，layui框架中内置了很多模块，在未来的一段时间内，我都会对于这个框架的各个内置模块代码以及整个逻辑进行详细的描述和说明，以此来提高自己的各个方面的能力。layui是一个UI框架，它的官网对其的说明是经典模块化前端框架，该框架的内部提供了一些UI框架常有的功能点，例如按钮、表单等

自从参入工作，已经一年了。在这一年看过不少技术类书籍，主要是Js相关的，例如《JavaScript高级程序设计》、《你所不知道的JavaScript》等等，对于Js方面的知识，从理论上感觉成长了不少，但是有些虚。古人说的好：“纸上得来终觉浅，方知此事要躬行”，上一年这种方式给我带来的成长感觉不是太大，所以今年换一种方式，不仅是思想上同时也是方式上的改变。决定开通博客，阐述自己对于一些源码以

前言所谓的模板引擎，其实最早接触该形式的应该是jsp，在html代码中嵌套java代码，使用形式与模板很相似，实际上jsp就是一种模板语言，对于模板语言我的了解并不多，此处就不再详细的描述了。当我看见layui内置的模板引擎模块laytpl.js时，我首先想起的是Vue中{{}}模板的使用，但是Vue中还有双向绑定的概念（你可已使用get/set方法来实现），laytpl.js中提供的模板类型有两种

最近在看layer.js源码，从中得到了一些启发，对于一个框架的设计也有了一定的看法，现在对于这个框架的设计以及其他的问题来说明一下。layer.js是一个专注于弹出层的框架，这个框架本身可以实现5种弹出层类型，其他的就不多说了，可以去看看它的官网，下面说一下它的主要组织形式：首先，这个框架本身就是一个IIFE（立即执行函数表达式），保证了局部环境，避免了全局变量污染的问题框架内部

所谓的富文本编辑器就是内嵌在浏览器上、所见即所得的文本编辑器，它的形式如下： layui框架中内置了layedit模块，该模块就是富文本编辑器模块，在最近两天中我自己使用原生js实现了简易的富文本编辑器，具体效果如下： 首先说说这个demo的组织结构： 在这个demo中，整体是一个IIFE，使用window对象将其构造函数暴露出去，想要使用这个demo，需要创建一个容器设置id属性为uedit

upload模块从今天的文章开始，将会采用自己动手实现的方式+分析作者思路的形式来讲解layui框架的其他模块。采取这样的目的也是为了更好地提高自己，希望通过该框架学习到更多的东西。upload模块时layui框架内置模块之一，该模块实现文件上传的功能。文件上传是一个常用的功能，现在有好多主要用于文件上传的插件，而且非常好用。今天依照layui官网对该内置模块功能的描述，实现了下简易版的demo，后