레이유이 사용방법-레이이 튜토리얼-php.cn

레이유이 사용방법

layui에 대해 더 알고 싶다면 다음을 클릭하세요. layui tutorial

레이유이 사용방법

Layui 소개를 먼저 살펴보겠습니다.

Layui는 에 자체적으로 사용하는 소프트웨어 모듈 사양에 작성된 감성 프론트 엔드 UI 프레임워크는 기본 HTML/CSS/JS의 작성 및 구성 형태를 따르며 임계값이 매우 낮아 즉시 사용할 수 있습니다. 외부는 미니멀하지만 내부는 꽉 차 있습니다. 크기가 가볍고 구성 요소가 풍부합니다. 핵심 코드부터 API까지 모든 세부 사항이 신중하게 제작되어 빠른 인터페이스 개발에 매우 적합합니다. Layui의 첫 번째 버전은 2016년 황금빛 가을에 출시되었습니다. MVVM의 하위 계층을 기반으로 하는 UI 프레임워크와는 다르지만, 그 방식에 어긋나지 않고 자연으로의 회귀를 믿습니다. 정확하게 말하면 서버 측 프로그래머를 위해 더욱 맞춤화되었습니다. 다양한 프런트 엔드 도구의 복잡한 구성에 참여할 필요가 없으며 브라우저 자체와 모든 요소 및 상호 작용만 하면 됩니다. 당신의 손끝에서 필요한 것을 찾을 수 있습니다. layui는 현재 사람이 사용하는 모든 브라우저(IE6/7 제외)와 호환되며, PC 측 백엔드 시스템 및 프런트엔드 인터페이스를 위한 빠른 개발 솔루션으로 사용할 수 있습니다.

Get Layui

Layui 공식 홈페이지에서 최신 버전을 다운로드 받으실 수 있습니다. 자동으로 구축되어 제작 환경에서 사용하기에 더 적합합니다. 디렉토리 구조는 다음과 같습니다:

 ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

로그인 후 복사

빨리 시작하세요

layui를 얻은 후 이를 프로젝트 디렉토리(또는 정적 리소스 서버)에 완전히 배포하고 다음 두 파일만 도입하면 됩니다.

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

로그인 후 복사

이 두 파일만 로드하면 되며 다른 파일은 걱정하지 마세요. 왜냐하면 그것들(각 모듈 등)은 최종적으로 사용될 때 자동으로 로드되기 때문입니다. 이것은 기본 입력 페이지입니다.

모듈형 접근 방식

다음과 같이layui의 모듈 사양에 따라 항목 파일을 생성하고layui.use()를 통해 항목 파일을 로드하는 것이 좋습니다.

비모듈식 접근 방식(즉, 모든 모듈이 한 번에 로드됨)

layui의 모듈식 구성이 마음에 들지 않으면 확실히 "일회성 로딩" 접근 방식을 채택할 수 있으며, 우리는layui. 모든 모듈은 개별적으로 패키지되어 완전한 js 파일로 병합됩니다. 이 파일을 사용할 때 직접 가져올 수 있습니다. 이 방법을 채택하면 더 이상layui.use() 메서드를 통해 모듈을 로드할 필요가 없으며 다음과 같이 직접 사용할 수 있습니다.

<!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文件中
layui.use([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
});
</script> 
</body>
</html>

로그인 후 복사

모듈화 및 비모듈화

저는 여전히 모듈화를 선호합니다 필요할 때 로드한다는 개념입니다. 모듈이 아닌 경우 모든 js 파일이 처음에 로드되기 때문입니다. 그러나 실제로 일부 페이지에서는 매우 적은 모듈을 사용하고 그렇게 큰 js 파일을 로드할 필요가 없기 때문에 여전히 모듈화 방식을 사용하는 것이 좋습니다. 비모듈식은 편리하기는 하지만 사용자 친화적이지는 않습니다.

모듈 사양

layui의 모듈은layui.js에서 내부적으로 구현된 비동기 모듈 로딩 방법을 기반으로 하며 AMD를 따르지 않지만(결국 임의적입니다!) 자체적으로 새로운 모듈 세트 경량 모듈 사양. 그리고 많은 연습 끝에 이 방법은 Layui의 핵심 모듈 로딩 엔진이 되었습니다.

Pre-loaded

　 바로 본론으로 들어가니 그냥 사용법만 말씀드리는 게 더 적절할 것 같습니다. Layui의 모듈 로딩은 핵심적인layui.use(mods, callback) 메소드를 사용합니다. JS가 Layui 모듈을 사용해야 하는 경우 사전 로딩을 사용하는 것이 좋습니다. 이렇게 하면 어디서나layui.use를 작성하는 문제를 피할 수 있습니다. 가장 바깥쪽 레이어에서 다음과 같이 정의해야 합니다.

<!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.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
}();
</script> 
</body>
</html>

로그인 후 복사

주문형 로딩(권장하지 않음)

강박 장애가 있고 웹 사이트 성능에 대해 극단적인 요구 사항이 있는 경우, 필요한 모듈을 미리 로드하고 싶지 않지만 작업이 트리거될 때만 모듈을 로드하면 이것이 허용됩니다. JS의 가장 바깥쪽 레이어에 큰layui.use를 래핑할 필요는 없습니다. 다음만 필요합니다.

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

로그인 후 복사

참고:

JS에서 많은 모듈을 사용해야 하는 경우 다음을 수행하지 않는 것이 좋습니다. 이 로딩 방법을 사용하세요. 왜냐하면layui.use()를 많이 작성해야 하고 코드를 유지 관리할 수 없기 때문입니다.

사용을 권장합니다: 사전 로드. 즉, JS 파일에서는 use만 작성하면 됩니다.

모듈 네임스페이스

　　Layui的全部模块绑定在 layui对象下，内部由layui.define()方法来完成。每一个模块都会一个特有的名字，并且无法被占用。所以你无需担心模块的空间被污染，除非是你 delete layui.mod; 调用一个模块也必须借助layui对象的赋值。如：

layui.use([&#39;layer&#39;, &#39;laypage&#39;, &#39;laydate&#39;], function(){
  var layer = layui.layer //获得layer模块
  ,laypage = layui.laypage //获得laypage模块
  ,laydate = layui.laydate; //获得laydate模块
  
  //使用模块
});

로그인 후 복사

　　一个模块一旦加载后，就会注册在layui对象下，所以你无法直接用模块名来获得，而同样借助layui对象。譬如有时你可能会直接在元素的事件属性上去调用一个模块，如：

<input onclick="layui.laydate()">

로그인 후 복사

扩展一个Layui模块

　　layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法，相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧：

　　第一步：确认模块名，假设为：test，然后新建一个test.js 文件放入项目任意目录下（注意：不用放入layui目录）

　　第二步：编写test.js 如下：

/**
  扩展一个test模块
**/      
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define(&#39;layer&#39;, callback);
  var obj = {
    hello: function(str){
      alert(&#39;Hello &#39;+ (str||&#39;test&#39;));
    }
  };
  //输出test接口
  exports(&#39;test&#39;, obj);
});

로그인 후 복사

　　第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了

//config的设置是全局的
layui.config({
  base: &#39;/res/js/&#39; //假设这是test.js所在的目录
}).extend({ //设定模块别名
  test: &#39;test&#39; //如果test.js是在根目录，也可以不用设定别名
  ,test1: &#39;admin/test1&#39; //相对于上述base目录的子目录
});
 
//使用test
layui.use(&#39;test&#39;, function(){
  var test = layui.test;
  
  test.hello(&#39;World!&#39;); //弹出Hello World!
});
//使用test1
layui.use(&#39;test1&#39;, function(){
  var test = layui.test1;
  
  //……
});

로그인 후 복사

大体上来说，Layui的模块定义很类似Require.js和Sea.js，但跟他们又有着明显的不同，譬如在接口输出等地方。

위 내용은 레이유이 사용방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!