layui 如何去dom_layui 学习（1）

最新推荐文章于 2021-08-17 15:52:17 发布

原创最新推荐文章于 2021-08-17 15:52:17 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui 如何去dom

博主分享了作为后端开发者学习前端的心得，推荐使用layui框架，认为其简洁易用，并提到了HBuilderX作为前端开发工具的便利性。建议在代码最外层使用layui.use预加载所需模块，避免依赖问题。同时，强调了layui对jQuery的内置支持，简化了代码。他还计划结合SSM框架做一些实战项目，以便日后项目应用。

自我感觉作为一个后端开发程序猿，不会点前端太傻逼了。但是写原生的html,js,css代码又写得太丑了，之前试过bootstrap，感觉还行，但没有深入尝试，后面看到什么vue之类的，又感觉系统太庞大了。一次偶然机会，让我感觉到layui这个东西的不错，所以准备上手一波。

搞前端有一个开发工具比较好，这里推荐一个HBuilderX，大家可以去官网下载。

DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、mui、wap2app、流应用、快应用开发工具、HTML5

感觉很不错。大家看看菜鸟教程的就可以快速上手了，我这里就不重复了。

HBuilder 使用教程 | 菜鸟教程

hbuilder的自动提示太舒服了。

然后我会在这里记录一些笔记。绝大部分来源于官网的文档，只是把自己觉得很有需要记忆的部分摘抄到这里。

加载所需模块

layui.use([mods], callback)

mods里面必须是一个合法的模块名，不能包含目录。callback即回调函数。如：

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

即加载了layui的laypage和layedit模块，然后获取该模块的功能，在后面使用。

大家可以在目录中找到相应的模块。其实就是我们说的模块化，封装性。获取到后直接调用就行。

预先加载：即一个JS文件中，写一个use即可。

layui.use(['form', 'upload'], function(){  //如果只加载一个模块，可以不填数组。如：layui.use('form')
  var form = layui.form //获取form模块
  ,upload = layui.upload; //获取upload模块
  
  //监听提交按钮
  form.on('submit(test)', function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: '上传接口url'
    ,success: function(data){
      console.log(data);
    }
  })
});

强烈推荐的方式是：你应该在你js文件的代码最外层，就把需要用到的模块 layui.use以一下，如：

/**
  你的js文件
**/
 
//我们强烈推荐你在代码最外层把需要用到的模块先加载
layui.use(['layer', 'form', 'element'], function(){
  var layer = layui.layer
  ,form = layui.form
  ,element = layui.element
 
  //……
  //你的代码都应该写在这里面
});

由于Layui部分内置模块依赖jQuery，所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块（唯一的一个第三方模块）。只有你所使用的模块有依赖到它，它才会加载，并且如果你的页面已经script引入了jquery，它并不会重复加载。内置的jquery模块去除了全局的$和jQuery，是一个符合layui规范的标准模块。所以你必须通过以下方式得到：

//主动加载jquery模块
layui.use(['jquery', 'layer'], function(){ 
  var $ = layui.$ //重点处
  ,layer = layui.layer;
  
  //后面就跟你平时使用jQuery一样
  $('body').append('hello jquery');
});
 
//如果内置的模块本身是依赖jquery，你无需去use jquery，所以上面的写法其实可以是：
layui.use('layer', function(){ 
  var $ = layui.$ //由于layer弹层依赖jQuery，所以可以直接得到
  ,layer = layui.layer;
 
  //……
});

这里主要是看一些教程发现教程说引入layer前，由于layer依赖jquery，所以得先加载jquery，再加载layer，不然会出错。。现在是layui已经内置了jquery，连教你怎么用都教了，简直再直白不过了。

然后后面自己试了试layui的css，感觉还是很不错的，只是有些前端基础忘了，得多百度一下。感觉这个还得配合后台才好学，后面准备找些常用的例子和ssm配合做几个小demo。以后方面做项目用。

Hbuilder快捷键：

快速在浏览器上运行： ctrl＋ｒ

动态的都是需要js的，如果动态的不能正常运行，那可能是js文件引入失败