Lauiiフレームワークとは何ですか

はじめに

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

layui は、現在人間が使用しているすべてのブラウザ (IE6/7 を除く) と互換性があり、PC 側のバックエンド システムおよびフロントエンド インターフェイスの迅速な開発ソリューションとして使用できます。

Layui を入手する

1. 公式 Web サイトのホームページからダウンロード

Layui を公式 Web サイトにダウンロードします: https://www.layui.com /layui にダウンロード 最新バージョンは自動的に構築されており、運用環境での使用に適しています。ディレクトリ構造は次のとおりです:

2. Git ウェアハウスのダウンロード

GitHub または Code Cloud を通じて、layui の完全な開発パッケージを入手して、二次開発を促進したり、layui をフォークして貢献したりすることもできます。解決策

3. npmのインストール

npm install layui-src

一般的にWebPack管理に使用されます

関連する推奨事項: 「layui Frameworkチュートリアル」

使用法

1. モジュールの使用法 (推奨)

layui のモジュール仕様に従ってエントリ ファイルを作成し、layui.use() を通じてロードすることをお勧めします。エントリ ファイルは次のとおりです:

<script>
layui.config({
  base: &#39;/js/modules/&#39; //你存放新模块的目录，注意，不是layui的模块目录
}).use(&#39;index&#39;); //加载layui入口
</script>    
上述的 index 即为你/js/modules/ 目录下的 index.js，它的内容如下：
/**
项目JS主入口
以依赖layui的layer和form模块为例
**/
layui.define([&#39;layer&#39;, &#39;form&#39;], function(exports){
var layer = layui.layer
,form = layui.form;
layer.msg(&#39;Hello World&#39;);
exports(&#39;index&#39;, {}); //注意，这里是模块输出的核心，模块名必须和use时的模块名一致
});

2. 非モジュール的な使用法

layui のモジュール構成が気に入らない場合は、間違いなく「ワンタイム ロード」を使用できます。 layui.js とすべてのモジュールを完全な js ファイルに個別にパッケージ化してマージします。このファイルを使用する場合は、このファイルを直接インポートできます。このメソッドを使用すると、layui.use() メソッドを通じてモジュールをロードする必要がなくなり、次のように直接使用できます。

<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
!function(){
//无需再执行layui.use()方法加载模块，直接使用即可
var form = layui.form
,layer = layui.layer;
//…
}();
</script>

ただし、このメソッドの使用はモジュール化を意味することを知っておく必要があります。 lauiui の意味が失われています。しかし、よりシンプルで使いやすくなることは否定できません。

以上がLauiiフレームワークとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。