bootstrapラジオボタンchangeイベントをクリックして1回だけトリガー_干物|フロントエンド思考の転換イベント駆動からデータ駆動まで...
GUI(グラフィックユーザインタフェース)とイベント駆動の源は浅くない.
GUIアプリケーションの特徴はユーザとのインタラクションを重視することであるため,プログラムの実行はユーザとのリアルタイムインタラクション状況に依存し,ほとんどのプログラムの実行はユーザのインタラクション動作が発生するまで待つ必要がある.
ユーザーの入力頻度が高くないため、ポーリングを続けてユーザーの入力を取得すると、ajaxポーリングとwebsocketプッシュの関係に似ています.
GUIプログラムの実行プロセスはユーザによって制御され,予想できないため,この特徴に適応するためにイベント駆動のプログラミング手法を採用する必要がある.
通常のプログラムの実行は「起動-動作-終了」と概括され、イベントドライバのプログラムの実行は「起動-イベントループ(すなわち、イベントの発生を待機して処理する)」と概括される.1.2イベント駆動プログラミング
1.2.1イベント
イベントは、決定ボタンを押したり、ラジオボタンを選択したり、チェックボックスを選択したりするなど、コントロールによって識別できる操作です.各コントロールには、フォームのロード、クリック、ダブルクリックなどのイベント、編集ボックス(テキストボックス)のテキスト変更イベントなど、自分で認識できるイベントがあります.
イベント(event)はアプリケーションで発生したことであり、アプリケーションはこのようなことに応答する必要がある.
1.2.2イベント処理
プログラムのイベントに対する応答は、イベントハンドラ(event handler)と呼ばれる予め作成されたコードを呼び出してイベントを処理することである.
イベントドライバプログラミング(event-driven programming)は、このような「プログラムの実行はイベントによって決定される」アプリケーションに対するプログラミングモデルである.
1.2.3Event loop
プライマリ・スレッドは、「タスク・キュー」からイベントを読み出します.このプロセスはループが絶えないため、この実行メカニズム全体をEvent Loop(イベント・ループ)と呼びます.
JavascriptのシングルスレッドとEvent Loopについては、「JavaScript実行メカニズム詳細:Event Loopについて」を参照してください.今日の主役はデータドライバで、イベントについては詳しく説明しません.1.3イベント駆動思考
GUIとJavascriptのデザインシーンでは、コードを書くときにもこのような思考が代入されます.
ユーザー入力=>イベント応答=>コード実行=>ページステータスのリフレッシュ
そこで、書き始めたばかりのアプリケーションの考え方は以下の通りです.
通俗的に言えば、イベント駆動思考はイベント応答から出発し、応用の設計とプログラミングを完成する.2.データ駆動
データ駆動は、複雑な論理設計からデータ処理の世界に持ち込む.2.1データとは
データは何ですか.公式の答え:データは科学実験、検査、統計などで得られたものと、科学研究、技術設計、検証、意思決定などに用いられる数値です.
しかし、実際には資料の中でも、生活の中でも、仕事の中でも、すべてのものをデータとして抽象化することができます.ゲームのキャラクター、アイテム、経験値、天気、時間など、データです.ゲームは実際には現実世界に対する抽象的なものであり、抽象的になると、最終的にはデータとして現れることができる.
データは抽象的なプロセスだと思います.
日常の書き込みコードに戻ると、フロントエンドでページを書き、抽象的にデータとしてよく使われるのは以下のことにほかならない.
2.2.1データ駆動vsイベント駆動
イベント・ドライバとデータ・ドライバを直感的に比較するには、次のようにします.
イベント駆動
実は最大の転換は、以前はコンポーネントをDOMと見なし、イベント/論理処理をJavascriptと見なし、スタイルをCSSと見なしていたことだ.
思考方式を変換した後、コンポーネント、イベント、論理処理、スタイルはすべて1部のデータで、私たちはデータの状態と変換を設計するだけで、残りの実現は具現方式(テンプレートエンジン、イベントメカニズムなど)で実現します.
2.2.2データ駆動思考
データ駆動思考に変換した後、プログラミング実装の過程で、UIの変化やイベントの傍受をあまり考慮することなく、データのメンテナンスと処理を考えることが多くなりました.
ある企業のウェブサイトにとって、中の多くのデータとリンクは、昔私たちがよく使っていた方法は直接DOMと書いて、それから長いDOMコードを生み出しました.
もし私たちがそれをデータに切り替えて、オブジェクトと配列で格納するとしたら、私たちはこのデータのセットをDOMに変換する方法を書くだけです.この方法には、次のようなメリットがあります.
2.3データ駆動とmvvm
データ駆動の設計思考はmvvmと必然的に関連していないかもしれませんが、mvvmフレームワークは、データ駆動をより容易にするためのいくつかの具現的な方法を提供します.
2.3.1 mvvm集積具現化方法
vueフレームワークでは、以下の便利な具現方法があります.
2.3.2 mvvmデータ駆動思考の推進
ここではvueを借りて、2つの例を挙げましょう.
第一に、input入力を取得して更新する.Inputのリスニング入力を実現し、テンプレートに出力を更新します.次のコードの変化があります.
p>$('#input').on('click', e => {
const val = e.target.value; $('#p').text(val);})script><input type="text" v-model="inputValue" /><p>{
{ inputValue }}p></code></pre>
<p> vue ， 、 ， ， input 。</p>
<p> ， </p>
<p> ， ， ：</p>
<pre class="has"><code>const list = [ {id: 1, name: 'name1', href: 'http://href1'}, {id: 2, name: 'name2', href: 'http://href2'}, {id: 3, name: 'name3', href: 'http://href3'}, {id: 4, name: 'name4', href: 'http://href4'}]</code></pre>
<p> ：</p>
<pre class="has"><code><ul id="ul">ul><script>const dom = $('#ul');list.forEach(item => {
dom.append(`${item.name}: ${item.href}`)});script><ul> <li v-for="item in list" :key="item.id"><span>{
{item.name}}span><a :href="item.href">{
{item.href}}a>li>ul></code></pre>
<p> id ( id 3 name )：</p>
<pre class="has"><code>// 1). const dom = $('#ul');const id = 3;dom.find(`li[data-id="${id}"] span`).text('newName3');// 2). + vueconst id = 3;list.find(item => item.id == 3).name == 'newName3';</code></pre>
<p> <code>list</code> <code>id</code> 3 ， ， ， ：</p>
<pre class="has"><code>const id = 3;const item3 = list.find(item => item.id == 3);if(item3) item3.name == 'newName3';</code></pre>
<p> ，<strong> ， 。</strong></p>
<p>THE END</p> ， 。 ， ， ， 。
<p> ： </p>
<p><strong><a href="https://img. .com/image/info8/71a53e248c9d441ca03724cadb3342b3.jpg" target="_blank"><img src="https://img. .com/image/info8/71a53e248c9d441ca03724cadb3342b3.jpg" alt="bootstrap change _ | ..._ 1 " width="258" height="258" style="border:1px solid black;"></a></strong></p>
<p><strong> NEXT </strong></p>
<p> | blog | </p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--PC WAP -->
<div id="SOHUCS" sid="1386276969896824832"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">
むりょう
java ソースコード 例外処理 exception
抜け目のある石
mongodb
0624chenhong
tomcat mysql
物心の知れないおなら
さぎょう
韓国の赤い果物の番号を変えます
JavaScript
霊静志遠
spring AOP struts session
a-john
タブ
aijuans
Ajax
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z その他
トップページ -
私たちについて -
構内検索 -
Sitemap -
権利侵害苦情
著作権すべてのIT知識ベースCopyRight© 2000-2050 IT知識ベースIT 610.com , All Rights Reserved.
京ICP備09083238号