ライウイの使い方-ライユイのチュートリアル-php.cn

ライウイの使い方

layui について詳しく知りたい場合は、次をクリックしてください: layui チュートリアル

ライウイの使い方

## まず、Layui の紹介を見てみましょう:

Layui は、独自の言語を使用して記述された感情的なフロントエンド UI です。モジュール仕様. フレームワークはネイティブ HTML/CSS/JS の記述および構成形式に従います. しきい値は非常に低く、そのまま使用できます。外観はミニマルですが、内部は充実しています。サイズは軽く、コンポーネントが豊富です。コアコードから API に至るすべての詳細が注意深く作成されており、迅速なインターフェイス開発に非常に適しています。 layui の最初のバージョンは、2016 年の黄金の秋にリリースされました。これは、MVVM の最下位層に基づいた UI フレームワークとは異なりますが、方向性に反するものではなく、自然への回帰を信じています。正確に言うと、サーバーサイドプログラマ向けにカスタマイズされたものです。さまざまなフロントエンドツールの複雑な構成に関与する必要はありません。ブラウザ自体、およびすべての要素と対話に直面するだけで済みます。必要なものがすぐに見つかります。 layui は、現在人間が使用しているすべてのブラウザ (IE6/7 を除く) と互換性があり、PC 側のバックエンドシステムおよびフロントエンドインターフェイスの迅速な開発ソリューションとして使用できます。

Layui を入手

Layui の最新バージョンは、公式 Web サイトのホームページからダウンロードできます。運用環境で使用します。ディレクトリ構造は次のとおりです。

 ├─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

ログイン後にコピー

これら 2 つのファイルをロードするだけでよく、他のファイルについて心配する必要はありません。なぜなら、それら（各モジュールなど）は、最終的に使用されるときに自動的にロードされるからです。これは基本的なエントリページです。

モジュラーアプローチ

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.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>

ログイン後にコピー

#非モジュール式メソッド (つまり、すべてのモジュールが一度にロードされます) #layui のモジュール構成が気に入らない場合は、「ワンタイムロード」方式を採用することもできます。layui.js とすべてのモジュールを個別にパッケージ化し、完全な 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.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
}();
</script> 
</body>
</html>

ログイン後にコピー

モジュール化と非モジュール化

私は依然として、必要に応じてロードするというモジュール性の概念を好みます。非モジュール式の場合、すべての js ファイルが最初にロードされるためですが、実際には一部のページではモジュールが非常に少ないため、そのような大きな js ファイルをロードする必要がないため、モジュール方式のアプローチを使用することをお勧めします。非モジュール式は便利ですが、あまり使いやすいとは言えません。

モジュール仕様

Layui のモジュールは、layui.js に内部実装された非同期モジュール読み込みメソッドに基づいており、AMD には準拠していません (結局のところ、なぜあなたは故意なのですか!)、より軽量なモジュール仕様のセットを定義しました。そして、多くの練習を重ねた結果、このメソッドは、layui のコアモジュール読み込みエンジンになりました。

プリロード

早速本題に入りますが、使い方だけを述べた方が適切です。 Layui のモジュールの読み込みでは、コアのlayui.use(mods, callback) メソッドが使用されます。JS で Layui モジュールを使用する必要がある場合は、どこにでも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);
    }
  })
});

ログイン後にコピー

ロードオンデマンド (推奨されません)

強迫性障害がある場合、Web サイトに極端なパフォーマンス要件があることに興味がない場合、必要なモジュールを事前にロードしたくないが、アクションがトリガーされたときにのみモジュールをロードする必要がある場合、これは許可されます。 JS の最外層で大きなlayui.useをラップする必要はありません。必要なのは次のとおりです:

/*
  Demo2.js
  按需加载一个Layui模块
*/
 
//……
//你的各种JS代码什么的
//……
 
//下面是在一个事件回调里去加载一个Layui模块
button.addEventListener(&#39;click&#39;, function(){
  layui.use(&#39;laytpl&#39;, function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
    var html = laytpl(&#39;&#39;).render({});
    console.log(html);
  });
});

ログイン後にコピー

注:

多くのモジュールを使用する必要がある場合は、このロード方法を使用することは、多くの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 中国語 Web サイトの他の関連記事を参照してください。