Mikel
来源： layui框架详细分析系列之熟悉框架以及提供的页面元素_玉案轩窗的博客-CSDN博客
前不久，阅读了layer.js的源码，实际上它是layui框架的内置模块，不过可以独立出去使用，主要是用于弹出层的，layui框架中内置了很多模块，在未来的一段时间内，我都会对于这个框架的各个内置模块代码以及整个逻辑进行详细的描述和说明，以此来提高自己的各个方面的能力。
layui是一个UI框架，它的官网对其的说明是经典模块化前端框架，该框架的内部提供了一些UI框架常有的功能点，例如按钮、表单等。
先说说为什么选择这个框架作为学习源码过程中的第一步，原因大概有如下几点：
该框架不依赖与其他的Js框架，虽然它有的模块需要JQuery
它是基于原生Js的，对于我来说我不需要去了解其他Js的框架或库，减少分析该框架的成本
就正式进入正题吧，看框架源码是要有目的性的，这句话确实不错啊。如果只是为看而看，当你看到一定程度后，你就不想看了，代码是枯燥的，特别是看别人的源码，有了目的性，就有所不同，你知道自己想要什么。
在正式进入框架代码阅读分析之前，我认为需要熟悉和使用该框架，这样你在分析其源码的过程中，会更加清晰具体的功能。下面主要介绍该框架中命名规范以及提供的页面元素。
该框架中关于css类的命名规范分为两种，一种是具体模块的css的命令，它遵循layui-模块-状态或类型，另一种是公共类（可以说是不具体属于哪一个模块的），它遵循layui-状态或类型。
该框架中关于js的命名规则：
变量基本采用小写
方法名采用驼峰法命名
逻辑相关的都以is开头
获取相关的方法是以get开头
文件名小写
该框架提供的页面元素有：
内置几种背景颜色，主要的css类：.layui-bg-red、.layui-bd-orange等
图标，使用的是iconfont
按钮以及按钮组，分为大小、状态等，主要的css类：.layui-btn、.layui-btn-primary、.layui-btn-big等
表单，主要的css类有：.layui-form等
导航，分为水平导航、垂直导航、侧边栏导航，主要css类有：.layui-nav、.layui-nav-tree、.layui-nav-side等
选项卡，分为卡片选项卡、简洁风格、可删除的，主要css类有：.layui-tab等
表格，主要css类有.layui-table等
进度条，主要css类有.layui-progress、.layui-progress-bar等
面板，手风琴风格，主要的css类有.layui-collapse等
上面提供的都是css类，用于呈现该框架UI风格，一些功能需要交互才可以完成，所以需要引入模块来保证完整功能的使用。
本文主要是描述下该框架的css命名规范以及熟悉该框架，不出意外，明天会分析该框架中自己提供的模块加载机制，该收拾下班了。
————————————————
版权声明：本文为CSDN博主「玉案轩窗」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/s1879046/article/details/76095467
