• 技术文章 >web前端 >Layui教程

    layui底层方法介绍

    尚2019-12-21 17:29:35转载1201

    Layui模块化页面用法:

    需要即加载模块

    //引入js,css文件跳过,看文档
    
    //在页面中,如同编写JavaScript一样
    <script>
    	layui.use(['layer','form'],function(){//需要加载的模块
            var layer = layui.layer,
            form = layui.form;//初始化模块变量
            
            layer.msg('Hi!');//调用该模块的方法
    	})
    </script>

    一次加载所有模块

    <script>
    	;!function(){
          var layer = layui.layer
          ,form = layui.form;//初始化模块变量
    
          layer.msg('Hello World');
        }();
    </script>

    自写模块

    //js文件
    layui.define(['layer'],function(exports){//自写模块需要调用的layui模块
        var layer = layui.layer;//初始化模块变量
        
        layer.msg('Hi!');
        
        exports('index',{})//导出自写模块,index为导出名,use的时候名字要和导出一致
    })
    
    //use时注意需要设定模块所在目录
    <script>
    	layui.config({
            base:'/res/js/modules/' //自建模块所在目录
    	}).use('index',function(){//加载入口
            
    	});
    </script>

    本地存储操作

    layui.data('test',//test表名
        {//对象
            key:'user_name',//键值对
            value:'用户1'
        }
    )
    
    //删除
    layui。data('test',{
        key:'user_name',//需要删除的键
        remove:true//删除
    })
    
    //查
    var local = layui.data('test');
    console.info(local.user_name);
    
    //根据删除的方法,我暂时认为,如果需要插入多个键值对,需要使用对象数组,而删除多个键值对,则未知了,因为没实际操作,因为本地存储其实不怎么会用这个,接入后端后大多用session或者redis

    各种实际可能不怎么用的底层方法

    layui.device()//获取设备信息
    layui.cache()//获得缓存
    layui.extend(options)//拓展别名,给一个模块设置别名
    layui.each(obj,fn)//对象(array,object,dom)遍历,可取代for
    layui.getStyle(node,name) //获得dom节点的style属性值,如document.body,'font-size'
    layui.img(url,callback,error)//图片预加载,可设置加载失败显示默认图从而避免图片加载失败没图的尴尬
    layui.router()//获得路由
    layui.hint()//向控制台输出异常,目前只能error,layui.hint().error('error')
    layui.stope(e)//阻止事件冒泡
    layui.onevent(modName,events,callback)//自定义模块事件
    layui.event(modName,events,params)//执行自定义事件
    layui.factory(modName)//获取模块定义时的回调函数

    更多layui知识请关注layui使用教程栏目。

    以上就是layui底层方法介绍的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:CSDN,如有侵犯,请联系admin@php.cn删除
    专题推荐:layui
    上一篇:layui的本地存储方法介绍 下一篇:Django+Layui后台布局介绍
    大前端线上培训班

    相关文章推荐

    • layui-layer独立组件-弹出层介绍• layui上传文件与数据表格的一些问题• layui数据表格隐藏列的方法介绍• layui框架form表单使用介绍

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网