私は電力会社で 2 年間働いており、開発されたアプリケーションはすべて H5 アプリケーションに基づいています。 H5 リファレンスは、cordova.js ライブラリに基づいて開発されていますが、さまざまなアウトソーシング企業がアプリケーションを受け取ったとき、どのように開発すればよいのかわかりませんでした。この記事では、主に seajs に基づいて構築されたフロントエンドの使用方法について説明します。ライブラリとブートストラップ フレームワーク。
フロントエンドフレームワークは主に4つの点を研究します
1. Webフレームワークの動的ローディング技術の研究
モバイルインターネットにおけるモバイル端末の限られたメモリ、トラフィック、バッテリーリソースを考慮して動的ローディング技術を使用することで、プログラムは複数の小さなファイルに分割され、遅延ローディング技術 (LazyLoading) を使用してオンデマンドローディングを実現し、ユーザーエクスペリエンスを向上させ、モバイル端末でのリソース使用量を削減します。ビジネスとスタイルの観点から見ると、フロントエンド開発者は、JS コード ブロックの先頭で必要な JS ライブラリと CSS スタイルを参照するだけで済みます。論理的には、開発者はバックエンドによって提供されるインターフェイスを呼び出して読み取りと表示を行うだけで済みます。このテクノロジーの主な利点には、高い保守性、高速な動的読み込み、優れたフロントエンド パフォーマンスの最適化が含まれます。
2.モジュラー構築技術の研究フロントエンド担当者によるモバイルアプリケーションプロジェクトの開発に基づいて、モジュラー構築技術を使用して、各ページを複数の機能に分割してセグメンテーション処理を行うことで、両方の機能を迅速に実現しますモバイル端末でのページの取得や、モバイル端末のデバッグ中に関連する問題を迅速に特定します。複数のモジュールを定義して相互に呼び出すことで、モジュール間で競合が発生しないようにするだけでなく、開発者のコーディング効率も向上します。その主な利点は、責任が単一であることと、依存関係が近いことです。
3.
マルチ解像度・マルチサイズ携帯端末インターフェース適応技術の研究各携帯端末デバイスに対して、
ブートストラップフレームワークに基づき、メディアクエリ機能(Medie Query)を通じて統一インターフェースを設定するスタイルは、ウィンドウ (メタ) 属性の内容を通じてプロポーショナル ウィンドウを設定します。これにより、携帯電話モデルの異なる解像度やサイズの端末が適応できない問題が解決され、コードの冗長性と再開発がさらに削減されます。 4.
モバイル端末上のパブリックコンポーネントのカプセル化に関する研究
ブートストラップフレームワークの下でのいくつかのコンポーネントの限定的なカプセル化に基づいて、タイムプラグイン(datatime)、ポップアッププラグを介して-in (ダイアログ)、グラフィックス プラグイン (echarts)、プルダウン更新およびプルアップ読み込みプラグイン (更新)、スライディング プラグイン (スワイパー)、都道府県と都市の選択 (シティピッカー) プラグイン、プロンプト情報プラグイン (UED) およびその他のプラグインはカプセル化され、オンデマンドで呼び出され、さまざまなページを実現するためにロードされます。これにより、フロントエンド開発者の時間が大幅に短縮され、また、コンポーネント呼び出しが実装されます。ユーザーエクスペリエンスを向上させます。
ここでは、プラグインの 1 つであるポップアップ ウィンドウを取り上げて説明します
最初にレンダリングをお見せしましょう
ポップアップ ウィンドウ、基本的にすべてのアプリケーションはさまざまな種類のポップアップ ウィンドウがたくさんあり、コードは非常に複雑です。私もインターネットでこのセットを見つけて、自分で整理してみました。将来的には、共通のコード セットを使用して、簡潔かつシンプルに保つ予定です。
フロントエンド H5 コード
h5 ページは簡潔かつシンプルである必要があり、個別の CSS および JS ロジック コードは許可されません (次の CSS コードはテスト用です)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>首页</title>
<meta charset="utf-8" />
<style>.col-xs-6 {
padding: 10px 1px;
}</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6"><button class="btn has-hover input-reverse-tofull">默认的弹窗</button></div>
<div class="col-xs-6"><button class="btn btn-success has-hover">success</button></div>
<div class="col-xs-6"><button class="btn btn-primary has-hover">primary</button></div>
<div class="col-xs-6"><button class="btn btn-danger has-hover">danger</button></div>
<div class="col-xs-6"><button class="btn btn-warning has-hover">warning</button></div>
<div class="col-xs-6"><button class="btn btn-success has-hover">可设置背景色</button></div>
<div class="col-xs-6"><button class="btn btn-danger has-hover">自定义标题、描述</button></div>
<div class="col-xs-6"><button class="btn btn-danger has-hover">点后回调</button></div>
<div class="col-xs-6"><button class="btn has-hover input-reverse-tofull">box-shadow</button></div>
<div class="col-xs-6"><button class="btn btn-success has-hover">box-shadow</button></div>
<div class="col-xs-6">
<button class="btn btn-primary has-hover">box-shadow</button>
</div>
<div class="col-xs-6"><button class="btn btn-primary has-hover">无进入动画</button></div>
<div class="col-xs-6"><button class="btn btn-warning has-hover">单个按钮</button></div>
<div class="col-xs-6">
<button type="button" class="btn btn-info" id="btn-modal">bootstrap弹窗</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-info" >无标题</button>
</div>
</div>
</div>
<script type="text/html" id="modal-tpl">
<div id="dialogContent">这里是用户获取到的内容,获取的内容，可直接设置在这里，然后在页面显示</div>
</script>
<script>var basepath = "../../";//定义当前目录的位置（如果全部在根目录的话，则不需要定义）</script><!--1、首先加载sea.js 我们使用的是模块化来加载文件-->
<script src="../../js/modules/sea.js"></script>
<!--2、然后加载配置项-->
<script src="../../config.js"></script>
<!--3、最后使用seajs.use来加载当前需要加载的模块-->
<script>seajs.use("../js/dialogs");</script>
</body>
</html>
dialogtest.js のコードは次のとおりです
define(function (require) {
require("bootstrap");//加载bootstrap
require('dialog');//加载弹窗
require('dialogcss');//加载弹窗
var modal = new Modal({
title: '测试案例',
content: $('#modal-tpl').html(),
width: "90%",
onOk: function () {
//操作
alert("你点击了确定");
},
onModalShow: function () {
//弹窗初始化操作
}
});
$(".btn").each(function (index) {
$(this).on("click", function () {
if(index==0)
{
$('body').dailog({ type: 'defalut' });
}else if(index==1)
{
$('body').dailog({ type: 'success' })
}
else if (index == 2) {
$('body').dailog({ type: 'primary' })
}
else if (index == 3) {
$('body').dailog({ type: 'danger' })
}
else if (index == 4) {
$('body').dailog({ type: 'warning' })
}
else if (index ==5) {
$('body').dailog({ type: 'success', maskBg: 'rgba(33,11,22,0.5)' })
}
else if (index ==6) {
$('body').dailog({
type: 'danger', title: '我是自定义标题',
discription: '这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧'
}, function (ret) {
if (ret.index == 0)
{
alert("你点击了确定按钮");
} else
{
alert("你点击了取消操作");
}
console.log("信息为："+JSON.stringify(ret));
})
} else if (index ==7) {
$('body').dailog({
type: 'danger', title: '错误提示',
discription: '这里是自定义的描述，可以写上你的描述或者他的描述，总之可以写很多文字，你自己看着办吧',
isInput: true
}, function (ret) {
console.log(ret);
if (ret.index === 0)
{
alert('你点击的是第' + ret.index + '个按钮,状态:' + ret.input.status + ';输入的值为:' + ret.input.value)
};
});
} else if (index == 8) {
$('body').dailog({ type: 'defalut', showBoxShadow: true })
} else if (index ==9) {
$('body').dailog({ type: 'success', showBoxShadow: true, maskBg: '#fff' })
} else if (index == 10) {
$('body').dailog({ type: 'primary', showBoxShadow: true, maskBg: '#ccc' })
} else if (index == 11) {
$('body').dailog({ type: 'primary', showBoxShadow: true, animateStyle: 'none' })
} else if (index == 12) {
$('body').dailog({
type: 'warning', showBoxShadow: true, animateStyle: 'none',
bottons: ['确定'], discription: '也许有点问题!'
})
}else if(index==13)
{
modal.open();
} else if (index == 14) {
$('body').dailog({ type: 'defalut',showBoxShadow: true, animateStyle: 'none',isnobutton:false,
bottons: ['关闭'], discription: '也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题也许有点问题!'
});
}
})
})
})以上がフロントエンド フレームワーク - ポップアップ ウィンドウの調査の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
