layUI学习笔记-胡新春个人博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  程序员式幽默
  •  闲言碎语
  •  博客大计事
  •  留言板
  • 
    layUI学习笔记
     作者:收藏  发布时间:2017-10-08 16:31:17  访客:644

    1.什么是layUI
           从名字layUI就可以看出,layUI是一款轻量级前端UI框架,大部分结构支持响应式。layUI发布于2016年秋天,最新版本layui2.0发布于2017年8月,也就最近。锵锵锵,热腾腾的layUI上桌了~~~


          layUI定义为“经典标准化”,其模式和AMD相似,所以在使用过程中,你会发现其有些使用方式和AMD,requireJS非常相似。但是更加简单的是,layUI以当前浏览器普通认可的方式去组织模块。


    2.快速使用


          在layUI官网GitHub下载layUI文件。在官网上下载下来的文件中心目录为(现更新到v2.0):


    1503735684122467.png

    是不是特别简单~~~


    (1)完整加载


           获得layui后,将其完整地部署到你的项目目录(或静态资源服务器),你只需要引入下述两个文件(这样加载的方式不用去管其他任何文件。因为各模块文件都是在最终使用到的时候才会自动加载。也就是说你要使用的模块文件位置必须准确。):

    ./layui/css/layui.css
    ./layui/layui.js

    例如以下的基本页面:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>开始使用Layui</title>
      <link rel="stylesheet" href="../layui/css/layui.css">
    </head>
    <body>
    
    <!-- 你的HTML代码 -->
    
    <script src="../layui/layui.js"></script>
    <script>
    
    //一般直接写在一个js文件中,要使用模块layer和form两个模块
    layui.use(['layer', 'form'], function(){
      var layer = layui.layer
      ,form = layui.form();
      layer.msg('Hello World');
    });
    </script>
    
    </body>
    </html>


    最终的效果是在页面中心弹出一个灰底的提示框,5S后消失。


    (2)规范化使用(推荐)


            如果你想快速使用Layui的组件,你还是跟平时一样script标签引入你的js文件,然后在你的js文件中使用layui的组件。但我们更推荐你遵循Layui的模块规范,建立一个自己的模块作为入口:

    <script>
    layui.config({
      base: '/res/js/modules/' //你的模块目录(存放模块JS文件的位置)
    }).use('index'); //加载入口,index即为/res/js/modules/下的index.js 文件
    </script>


    index.js需要定义一个自己的模块,作为JS主入口。简单示例如下:


    /**
      项目JS主入口
      以依赖Layui的layer和form模块为例
    **/    
    layui.define(['layer', 'form'], function(exports){
      var layer = layui.layer
      ,form = layui.form();
      
      layer.msg('Hello World');
      exports('index', {}); //注意,这里是模块输出的核心,模块名必须和use时的模块名一致
    });


    (3)简单粗暴使用(不推荐)
           layUI打包合并成了一个完整的jS文件,用的时候可以直接引入,这样,可以直接使用:

    <script src="../layui/layui.js"></script
    <script src="../layui/lay/dest/layui.all.js"></script>  
    <script>
    ;!function(){
      var from = layui.form()
      ,layer = layui.layer;
      
      //…
    }();
    </script>

    这种方法意味着Layui的模块化已经失去了它的意义。


    本文来源:http://www.qdfuns.com/notes/18344/81c956da9f7ebb3c9a51fddcf7e63c8f

    点评一下

    
    程序:HXC博客v2.0 主题:HXC博客前端Funs主题    基于CodeIgniter框架构建
    博客平稳运行2年+