✨ 👩🏾‍🏭 👩🏿‍🚀 宣言型javascript 💇🏾 ⛴️ 👲🏿

この記事はjavascriptの達人にとっては面白くないかもしれませんが、初心者にとってはおそらく役に立つでしょう。

記事では、サードパーティのフレームワーク（jqueryなど）を接続せずに、純粋なJavaScriptのみを使用することをすぐに予約します。

宣言的なスタイルでjavascriptを記述するほうがはるかに便利です。

必要なjavascript機能を特定のhtmlブロックにバインドする機能
css（オブジェクトにプロパティをバインド）のようなjavascriptコードを書く機能
特定のhtmlブロックに関連付けられたロジックを別のファイルに転送することにより、コードの可読性を向上させます
そして、はるかに。試してみて、自分の目で確かめてください。

それでは始めましょう。

まず、3つのファイルを取得しましょう。

index.html-処理するhtmlブロックを含むファイル
index.js-ブロックバインド関数の初期化関数を含むファイル
init.js-添付ブロックを処理するためのロジックを含むファイル

index.htmlファイルの内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="init.js"></script> <!--        --> <script type="text/javascript" src="index.js"></script> <!--   c - --> </head> <style type="text/css"> div { margin:30px; padding:10px; background: #ccc; border:solid 1px #666; font-family:arial; font-size:12px; } </style> <body> <div class="b-block init_block1"> <!--   --> , ))) </div> <div class="init_block2"> <!--   -->   ..))) </div> </body> </html>

Index.jsファイル：

 /** * ,      * (      ,    ) * @param object elem - ,      * @param string evType -   (: "click","mouseover") * @param function call - - ( ) */ function addEvent(elem,evType,call) { if(elem.addEventListener) { elem.addEventListener(evType, call, false); } else if(elem.attachEvent) { elem.attachEvent('on' + evType, call); } } /** * ,     */ function initStart() { var arrayElem = document.getElementsByTagName('*'); var arrayElemLength = arrayElem.length; for(var i=0;i<arrayElemLength;i++) { var attr = arrayElem[i].className; if(attr) { if(attr.indexOf('init_') !== -1) { var initText = attr.substr(attr.indexOf('init_')); if (initObject[initText]) { initObject[initText](arrayElem[i]) } } } } } /*    ,      */ addEvent(window,'load',initStart);

Init.jsファイル：

 /** * ,       */ var initObject = { /** *   html-,  class "init_block1"  * @param object elem -  html- (  -) */ init_block1: function(elem) { elem.innerHTML += ' ...    '; }, /** *   html-,  class "init_block2"  * @param object elem -  html- (  -) */ init_block2: function(elem) { elem.innerHTML += '     .    '; addEvent(elem,'click',function(){ alert('!'); }); } }

だからみんながつながったので、今から説明します。

特定のロジックをページ上の任意のブロックにバインドするには、この要素のクラスでinitObjectオブジェクトメソッドを指定する必要があります。

html要素自体（より正確には、その要素へのリンク）はメソッドに渡され、イベントをバインドしたり、データをajaxに渡したり、プロパティを変更したりなど、好きなことができます。

このような簡単な方法で、特定のロジックをページ上の必要なオブジェクトにバインドできます。

initStart関数は完全に理想的ではないことに注意してください-変更する必要があります。

しかし、これはケーススタディであるため、「その場で」すべてを行ったわけではありません。一般的な概念はすでに明確になっていると思います。

仕組みについては、こちらをご覧ください。

1つのサンプルアーカイブをダウンロードします。

宣言型javascript

More articles: