Low Proとは何ですか？
Low Proとは何ですか？ これは、イベントの委任によってJavaScriptをよりオブジェクト指向にできるプラグインです。 jQueryプラグインアーキテクチャでは、カーネル機能を簡単に拡張できますが、以前は、1つの要素で複数の種類のイベントを作成するマクロを作成する簡単な方法はありませんでした。 しかし、この時が来ました！
Low Proの仕組みを説明する最も簡単な方法は、簡単なデモを作成することです。 時々、多くの家庭教師が技術の以前の知識を必要とすることに気づき、これを知って、私は家庭教師をできるだけシンプルにするようにしようとします。 ただし、この例では、このチュートリアルで取り上げていない他のプラグインをいくつか使用しています。
両方のプラグインには優れたドキュメントがあるため、基本的な例を拡張する場合は、それをお読みください。
例1：再利用可能な登録フォームを作成します。
これを行うには、簡単な登録フォームを作成します。 シンプルな外観にもかかわらず、必要に応じて小さな変更を加えて多くの場所で使用できます。 このテンプレートを調べた後、同じスタイルで再利用できる他の多くのアプリケーションが表示されることを願っています。
最初のステップは、単純なフォームを作成することです。
<！DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 // EN"
" Www.w3.org/TR/html4/strict.dtd ">
< html >
< 頭 >
< meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1 " / >
< title > Lowproの例< / / title >
< スクリプト タイプ = "text / javascript" src = "js / jquery.js" / >
< スクリプト タイプ = "text / javascript" src = "js / jquery.livequery.js" / >
< スクリプト タイプ = "text / javascript" src = "js / lowpro.jquery.js" / >
< スクリプト タイプ = "text / javascript" src = "js / jquery.validate.js" / >
< スクリプト タイプ = "text / javascript" src = "js / reg-form.js" / >
< / / ヘッド >
< 本体 > < / / p >
< div id = "form-container" >
< form method = "post" action = "。" id = "lowpro-form" >
< フィールドセット >
< 凡例 >ユーザーの詳細< / 凡例 > < / / p >
< ul >
< li >
< label for = "username" >ユーザー名 < / label > < / p >
< 入力 タイプ = 「テキスト」 id = 「ユーザー名」 名前 = 「ユーザー名」 / >
< / li >
< li >
< label for = "email" >メール< / label > < / p >
< 入力 タイプ = "text" id = "email" name = "email" / >
< / li >
< li >
< label for = "password1" >パスワード< / / label > < / / p >
< 入力 タイプ = 「パスワード」 id = 「パスワード1」 名前 = 「パスワード1」 / >
< / li >
< li >
< label for = "username" >パスワード（再び） < / label > < / p >
< 入力 タイプ = 「パスワード」 id = 「パスワード2」 名前 = 「パスワード2」 / >
< / li >
< / ul >
< 入力 タイプ = 「送信」 クラス = 「登録」 値 = 「登録」 / >
< / / フィールドセット >
< / フォーム >
< / p > < / div >
< p > < / body >
< / html >
JavaScriptを作成し、reg-form.jsと呼びます。 その中で、フォームにアタッチするクラスを作成します。 このクラス内で、イベントをトリガーする関数を作成します。 Low Proを使用して作成された各クラスは、$ .klass（{...}）;という形式を取ります。 中括弧内では、JavaScriptプロトタイプの性質を使用して擬似クラスを作成します。 サンプルのRegisterFormを呼び出します
RegisterForm = $。 クラス （ {
initialize ： function （ options ） { </ p >
< p > }
} ） ;
PHP、Python、またはJavaを使用して開発している場合は、おそらくすでにこれを見ています。 この最初の関数、initializeは、1つのパラメーターを受け取るLow Proの予約済み関数です（後で説明します）。 この関数は、クラスが要素に関連付けられている場合に常に呼び出されます。 イベントの開始を必要としないため、初期化用のデータまたは動的DOM要素のイベントを設定することは非常に便利です。
検証
最初に行う必要があるのは、JavaScript検証ルールを作成することです。 このチューターはこれらのルールの作成については説明しませんが、理解する必要があります。 さらに情報が必要な場合は、 優れたドキュメントをお読みください。
RegisterForm = $。 クラス （ {
初期化： 関数 （オプション） {
これ 。 要素 検証 （ {
ルール： {
ユーザー名： {
必須： true 、
最小長： 4
} 、
メール： {
必須： true 、
メール： true
} 、
password2 ： {
equalTo ： "＃password1"
}
} 、
メッセージ： {
ユーザー名： {
required ： 「あなたのユーザー名が必要です」 、
minlength ： 「最小文字数は4です」
} 、
メール： {
必須： 「メールアドレスを入力する必要があります」 、
電子メール： 「有効な電子メールを入力する必要があります」
} 、
password2 ： {
equalTo ： 「パスワードは一致する必要があります」
}
}
} ） ;
}
} ） ;
関数内で$（ '＃lowpro-form'）ではなくthis.elementを使用していることに注意してください。 Low Proはこの便利なエイリアスを提供し、常に適切なオブジェクトを使用します。 複雑な関数を作成する場合は、this.elementを別の変数に割り当てることが関数内で最適です。
これでコードは何もしなくなりました。 それは、クラスをフォームにバインドする必要があるためです。 ここが、私たちが知っていて愛している古き良きjQueryに戻るべき場所です。 このクラスの下にファイルを置きます：
$ （ドキュメント） 。 準備完了 （ 関数 （ ） {
$ （ '＃lowpro-form' ） 。 添付 （ RegisterForm ） ;
} ） ;
そのため、ブラウザでページを開き、フィールドへの入力を開始します。 フィールド検証ルールの作業にすでに気付いているはずです。 おめでとうございます、Low Proで最初の再利用可能なクラスを作成しました！
機能強化
検証ルールができたので、フォームをもっと魅力的にしましょう。 手始めに、シンプルなもの。 最初のフィールド（ユーザー名）が常に最初にアクティブになり、ユーザーがTabを使用して簡単に切り替えられることを確認しましょう。
$ （ '#username' ） 。 フォーカス （ ） ;
ページを更新すると、ユーザー名フィールドにフォーカスが移ります。
コショウを追加しましょう-別のイベントです。 ユーザーがフォームを送信するとき、データがサーバーに送信されていることをユーザーに知らせる必要があります。 これを行うには、ボタンのテキストを「登録」から「送信」に変更してユーザーに通知します。
RegisterForm = $。 クラス （ {
初期化： 関数 （オプション） {
...
} 、
onsubmit ： function （ ） {
$フォーム= これ 。 要素
$ （ '.register' ） 。 val （ '送信中' ） ;
/ * Ajaxを使用している場合、ここに入ります* /
falseを 返し ます 。
}
} ） ;
検証済みの再利用可能な完全に機能するAjax登録フォーム。 デモをご覧ください 。
そして最後に、初期化関数のパラメーター。 Low Proクラスの接続中、初期化関数は、関数に渡す必要のあるデータを含むオブジェクトを受け入れます。
$ （ '#myform' ） 。 attach （ MyFunction 、 { foo ： 'moo' 、 bar ： 2 }
上記の例では、その日のメッセージを表示するタグを追加しました。 HTMLで、motdクラスを使用してdivを作成します。 次に、次のコードを初期化関数に追加します。
if （ options。motd ） {
$ （ '.motd' ） 。 テキスト （ options。motd ） ;
}
クラスをフォームにアタッチしたので、次を使用します。
$ （ドキュメント） 。 準備完了 （ 関数 （ ） {
$ （ '＃lowpro-form' ） 。 attach （ RegisterForm 、 { motd ： 'jQuery Rocks！' } ） ;
} ） ;
フォームを更新したので、画面にメッセージが表示されます。