layui入门教程(零基础).pdfVIP

layui 是国人开发的一款非常简洁的 UI 框架，使用了模块化加载方式， 因此 在使用过程中我们难免需要添加自己的模块， 本教程就教大家封装一个简单的模 块。 平常使用中， ajax 可以说使用广泛，所以这里我们添加一个自己的模块， 将 ajax 封装一下，方便使用。 ①搭建项目目录 首先从 layui 的网站下载 layui 的包，放置到自己的项目里，这里我用一个 全新的空项目，添加完 layui 后，目录结构如下： ②编写模块文件 现在我在 plugin 的 layui 文件夹下新建 modules 文件夹，用以保存我们 自己的模块文件，在这个文件夹里新建 common.js 文件，来编写我们第一个模 块，该文件内容如下： layui.define() 方法为 layui 的定义模块方法，该方法接收 2 个参数，第一 个参数为依赖模块，这里看到我们依赖与 jquery ；第二个回调方法，这里面我 们定义模块的内容，就是提供那些方法，从上面可以看出我们定义了一个 obj 对象，该对象有一个 ajax 方法用于调用 jquery 的 ajax 执行我们的操作。如果 你是封装其他的 jquery 插件，那就把插件的 js 代码放到 layui.define() 的回调 方法里就行了。 exports() 为输出接口，这个方法也有两个参数， 第一个为输出模块的名字， 第二个为输出哪个对象。 到此我们的模块就写完了， 如果后续需要添加方法， 就 给 obj 对象添加方法就行了。现在我们的目录结构如下： ③设置 layui 加载组件目录模块 模块写完后，我们需要配置 layui ，让 layui 能够找到我们的模块，一般这 个配置是在我们的全局 js 里完成，这里我在 assets/js 下面新建 global.js 文件， 该文件内容如下： layui.config() 为 layui 的配置方法， base 参数表示我们模块的保存目录， 这个目录是从网站的访问根目录开始算的， 从上一步中可以看出， 我的模块保存 路径为 /assets/plugin/layui/modules/ 文件夹下； extend 里面就来定义我们 的实际模块名，上面代码中冒号前的 common 表示模块的名字，也就是以后我 们加载模块时使用的名字， 而冒号后的 ‘common ’表示我们模块文件的名字， 这里其实是指 /assets/plugin/layui/modules/common.js 文件，我们可以省 略 js 后缀，加载时会自动添加后缀。 ④使用模块 模块定义好后，我们就可以来使用模块了，使用模块其实和使用 layui 的自 带模块一样，现在来修改项目的 index.html 文件，在里面我使用模块的 ajax 方法访问一个在线翻译的接口，文件代码如下： 访问 index.html 看到下图返回结果，证明模块封装成功了。 大家若是想了解更多有关 layui 的教程，大家可以考虑前去咨询 Enhancer 平台进行咨询。 Enhancer 是杭州无远信息技术有限公司倾力打造的系统开发平台 （PaaS）。 该平台积累了复旦大学软件工程实验室十余年软件开发理论研究和实战探索之 经验