フロントエンド軽量MVCフレームワークCanJS_Othersの詳細説明

適切なライブラリを選択してください

優れたツールなしで JS APP を作成するのは非常に困難です。jQuery は DOM を操作するためのライブラリに過ぎず、APP を作成するための基盤を提供するものではないため、CanJS のような特殊なライブラリが必要です。

CanJS は、JS APP の作成に必要なツールを提供する軽量の MVC ライブラリです。

CanJS は、JS APP の作成に必要なツールを提供する軽量の MVC ライブラリです。 これは、MVC (Model-View-Control) パターン、テンプレートの動的バインディング、ルート サポート、およびメモリ安全性の基本フレームワークを提供します。 jQuery、Zepto、Mootools、YUI、Dojo もサポートしており、拡張機能やプラグインも豊富です。

最初のパートでは次のことを学びます:
連絡先を表示するためのコントロール レイヤーとビュー レイヤー (UI テンプレート) を作成します
Model モデル レイヤーを使用してデータを表現します
フィクスチャ プラグインを使用して Ajax 戻りデータをシミュレートします
きっと興奮するでしょう！コーディングを始めましょう。
フォルダーと HTML を作成します
まずアプリ用のフォルダーを作成し、次にそのディレクトリの下に css、js、views、img の 4 つのサブフォルダーを作成します。以下のように:
連絡先マネージャー
css
js
ビュー
画像

次のコードをindex.htmlとして保存します:

コードをコピーします コードは次のとおりです:

<頭>



<リンク rel="スタイルシート" href="css/contacts.css">

                                                                                                                                                                                                                                                                                                                                   

                                                                                             

                                                                                                                                                                                     

                                                                                       

ページの下部で、必要な JS (APP: contacts.js を含む) をロードします。
チュートリアルで使用する CSS と画像ファイルはダウンロードできます。

ビューを使用して UI を構築します

ビューは、APP をレンダリングするために使用される UI テンプレートです。 CanJS は複数のテンプレート エンジンをサポートしています。この記事では、CanJS を使用し、動的バインディングをサポートしています。
EJS テンプレートのタグは HTML に非常に似ており、JS コードの組み込みをサポートしています。一般的に使用される 3 つのタグは次のとおりです。 <% CODE %> JS を実行
<%= CODE %>%20JS%20%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%80%81%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%AA%E3%81%84%E7%B5%90%E6%9E%9C%E3%82%92%E7%8F%BE%E5%9C%A8%E3%81%AE%E5%A0%B4%E6%89%80%E3%81%AE%20HTML%20%E3%81%AB%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E3%81%BE%E3%81%99%0A<%== CODE %>%20JS%20%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%97%E3%80%81%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%95%E3%82%8C%E3%81%9F%E7%B5%90%E6%9E%9C%E3%82%92%20HTML%20%E3%81%AE%E7%8F%BE%E5%9C%A8%E3%81%AE%E4%BD%8D%E7%BD%AE%E3%81%AB%E6%9B%B8%E3%81%8D%E8%BE%BC%E3%81%BF%E3%81%BE%E3%81%99%20(%E3%82%B5%E3%83%96%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E5%A0%B4%E5%90%88)%E3%80%82%0A%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AF%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%BE%E3%81%9F%E3%81%AF%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%20%E3%82%BF%E3%82%B0%E3%81%8B%E3%82%89%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82%E3%81%93%E3%81%AE%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%AF%20EJS%20%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8B%E3%82%89%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20%0A%0A

%E9%80%A3%E7%B5%A1%E5%85%88%E3%82%92%E8%A1%A8%E7%A4%BA%0A%0A

%E9%80%A3%E7%B5%A1%E5%85%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E3%81%AB%E3%81%AF%E3%80%81%E3%81%BE%E3%81%9A%20EJS%20%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%80%81%E6%AC%A1%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%20contactsList.ejs%20%E3%81%A8%E3%81%97%E3%81%A6%E3%83%93%E3%83%A5%E3%83%BC%20%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E3%83%BC%E3%81%AB%E4%BF%9D%E5%AD%98%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%20

%0A

コードをコピーします コードは次のとおりです:

<% list(連絡先, function(連絡先){ %>

• el.data('コンタクト', コンタクト) %>>
  <%== can.view.render('views/contactView.ejs', {
  連絡先: 連絡先、カテゴリ: カテゴリ
  }) %>
  

contactLists.ejs は連絡先リストをレンダリングします。このテンプレートを分析してみましょう:

コードをコピーします コードは次のとおりです:

<% list(連絡先, function(連絡先){ %>

list() メソッドのコールバック メソッドがオブザーバーで構成されたリストで使用される場合、リスト内のデータが変更されると、動的バインディングを使用して繰り返し呼び出されます。

コードをコピーします コードは次のとおりです:

el.data('連絡先', 連絡先) %>>

上記のコードは、要素のコールバック メソッドを通じて連絡先データを含む

を生成します。 矢印以降のメソッドが実行されると、elオブジェクトのデータが対応する要素に設定されます。

コードをコピーします コードは次のとおりです:

<%== can.view.render('views/contactView.ejs', {
連絡先: 連絡先、カテゴリ: カテゴリ
}) %>

上記のコードは、サブテンプレート contactView.ejs を連絡先にレンダリングします。 can.view.render() は、パラメータとしてテンプレートとデータを含む HTML を返します。

単一の連絡先をレンダリング

サブテンプレートは、ビューを管理可能なチャンクに整理するための優れた方法です。 また、テンプレートがシンプルになり再利用しやすくなります。このテンプレートは、チュートリアルの後半で連絡先を作成するために使用します。次のコードを contactView.ejs としてビュー フォルダーに保存します。

コードをコピー コードは次のとおりです:

<フォーム>

 

   
 

 

          <%= contact.attr('name') ? "value='" contact.name "'" : "class='empty'" %>>
    <名前="カテゴリ" を選択>
      <% $.each(categories, function(i, category){ %>
        <オプション値="<%= category.data %>" <%= contact.category === category.data ? "選択済み" : "" %>>
          <%= category.name %>
       
     
   
 

 

    住所
          <%= contact.attr('アドレス') ? "value='" contact.address "'" : "class='empty'" %>>
    電話
          <%= contact.attr('電話') ? "value='" contact.phone "'" : "class='empty'" %>>
    メール
          <%= contact.attr('email') ? "value='" contact.email "'" : "class='empty'" %>>
 

联系人のプロパティ都投入済み

これにより、ユーザーのリソースを更新できます。

活性化されたビュー（好文艺。。）

EJS 処理モジュールの処理中に attr() が使用されると、その周囲のコードがイベント プロセッサによって管理され、プロパティの変更に対応し、プロパティが変更されると、APP に関連する UI が更新されます。機能はモジュールの動作決定機構を利用しており、EJS の動作決定には選択性があり、attr() を使用する場合にのみ対応するプロパティが設定されます。 私は contactView.ejs 中一标签を介して、它の使用法を理解します：

复制代 代码如下:

  <%= contact.attr('name') ? "value='" contact.name "'" : "class='empty'" %>>

ここで指定された特定のコードは、この関係者の名前プロパティに設定されたイベントに変換されます。名前プロパティが変更されると、イベントが呼び出されると同時に HTML 構造が更新されます。

can.Control を使用して処理を行います

can.Control は、必要なデータを介してウィジェットを作成したり、トラフィックの処理に使用できる完全なコントローラー内で、可能なグループを構築します。メソッドを決定するイベント。

Control に関連する要素が DOM から削除されると、Contol は、設定されたメソッドを削除すると同時に、自分自身を削除します。 コントロールを作成するには、定義されたパケットに関数が含まれるオブジェクトを can.Control() に渡すことによって継承が実現されます。 すべてのコントロールの例には重要な方法と方法が含まれています:

this – コントロールの例の引用
this.element – 实例中你所创建的 DOM 元素
this.options – 作成例に必要なパラメータオブジェクト
init() –現在の例が成功したときに使用される



管理联系人

以下の代コード部分を contacts.js ファイルに追加して、管理システムのコントロールを構築します:

复制代码

代码如下:

連絡先 = can.Control({
init: function(){
This.element.html(can.view('views/contactsList.ejs', {
連絡先: this.options.contacts,
カテゴリ: this.options.categories
}));
}
})

Contacts のインスタンスが作成されると、init() は次の 2 つのことを行います。
can.view() を使用して連絡先をレンダリングします。 can.view() は、テンプレートとデータを含むファイルまたはストリップ タグの 2 つのパラメータを受け取り、documentFragment (DOM 要素を管理する軽量のコンテナ) を返します。
jQuery.html() を使用して、can.view() の documentFragment を Control 要素
に挿入します。

モデルを使用してデータを表現します

モデルは、APP データの抽象化レイヤーです。このアプリは 2 つのモデルを使用します。1 つは連絡先に対応し、もう 1 つはカテゴリに対応します。次のコードを contacts.js に追加します:

コードをコピーします コードは次のとおりです:

連絡先 = can.Model({
findAll: 'GET /contacts',
作成: "POST /contacts",
更新: "PUT /contacts/{id}",
破棄: "DELETE /contacts/{id}"
},{});

カテゴリ = can.Model({
すべて検索: 'GET /categories'
},{});

モデルには、CRUD データに対して定義できる 5 つのメソッド (findAll、findOne、create、update、destroy) があります。これらのメソッドをオーバーライドすることもできますが、最良の方法は REST サービス (Representational State Transfer) を使用することです。上記のコードと同様、APP で使用されない静的メソッドは無視しても問題ありません。

ここで指摘すべき重要なことは、モデル インスタンスは実際には CanJS から派生した「オブザーバブル」であるということです。 can.Observe はオブジェクトのオブザーバー モードを提供します。 can.Observe.List は配列の観察モードを提供します。これは、データの変更を監視しながら、attr() を通じてデータを取得および設定できることを意味します。
findAll() メソッドは Model.list を返します。これは、要素が追加または削除されたときに can.Observe.List によってトリガーされるイベントです。

固定具を使用して Rest を模倣します

フィクスチャは、AJAX リクエストをインターセプトし、ファイルまたはメソッドを通じて応答をシミュレートします。これは、テストの場合、またはバックエンドの準備がまだ整っていない場合に役立ちます。フィクスチャは、APP モデルが REST をシミュレートするために必要なものです。
まず、フィクスチャ用のデータを準備し、次のコードを

に追加する必要があります。

コードをコピーします コードは次のとおりです:

var 連絡先 = [
{
ID: 1、
名前: 'ウィリアム'、
住所: '1 CanJS Way'、
電子メール: 'william@husker.com'、
電話: '0123456789'、
カテゴリ: '同僚'
}、
{
ID: 2、
名前: 'ローラ'、
住所: '1 CanJS Way'、
電子メール: 'laura@starbuck.com'、
電話: '0123456789'、
カテゴリ: '友達'
}、
{
ID: 3、
名前: 'リー'、
住所: '1 CanJS Way'、
電子メール: 'lee@apollo.com'、
電話: '0123456789'、
カテゴリ: '家族'
}
];

var CATEGORIES = [
{
ID: 1、
名前: '家族'、
データ: '家族'
}、
{
ID: 2、
名前: 'フレンズ'、
データ: '友達'
}、
{
ID: 3、
名前: '同僚'、
データ: '同僚'
}
];

データを取得したら、それをフィクスチャに接続して REST をシミュレートします。 can.fixture() は 2 つのパラメータを受け取ります。 インターセプトしたい URL と、応答するために使用するファイルとメソッド。通常、インターセプトする URL は動的であり、パターンに従います。 {} で囲まれたワイルドカード文字を URL に追加するだけです。

次のコードを contacts.js に追加します:

コードをコピー コードは次のとおりです:

can.fixture('GET /contacts', function(){
return [連絡先];
});

var id= 4;
can.fixture("POST /連絡先", function(){
return {id: (id )}
});

can.fixture("PUT /contacts/{id}", function(){
return {};
});

can.fixture("DELETE /contacts/{id}", function(){
return {};
});

can.fixture('GET /categories', function(){
return [カテゴリ];
});

最初の 4 つのフィクスチャは、Contact モデルの GET、POST、PUT、および DELETE レスポンスをシミュレートし、5 番目のフィクスチャは、Category モデルの GET レスポンスをシミュレートします。

アプリを起動

あなたのアプリには、データを管理するモデル、連絡先を表示するビュー、そしてそれらすべてを整理するコントロールがあります。あとはアプリを起動するだけです。次に、アプリケーションをキックスタートする必要があります!
次のコードを contacts.js に追加します:

コードをコピーします コードは次のとおりです:

$(document).ready(function(){
$.when(Category.findAll(), Contact.findAll()).then(
Function(categoryResponse, contactResponse){
var category = categoryResponse[0],
連絡先 = contactResponse[0];

新しい連絡先('#contacts', {
連絡先: 連絡先、
カテゴリ: カテゴリ
});
});
});

このコードを分析してみましょう:

コードをコピーします コードは次のとおりです:

$(document).ready(function(){

jQuery.ready メソッドを使用して、DOM の準備状況を監視します。

コードをコピーします コードは次のとおりです:

$.when(Category.findAll(), Contact.findAll()).then(
function(categoryResponse, contactResponse){

2 つのモデルの findAll() メソッドを呼び出してすべての連絡先のタイプを取得します。 findAll() には遅延があるため、$.when() はコールバック メソッドを実行する前に両方のリクエストが同時に完了することを保証します。

コードをコピーします コードは次のとおりです:

var category = categoryResponse[0],
連絡先 = contactResponse[0];

2 つの findAll() メソッドから Model インスタンスに対応するデータ セットを取得します。 応答によって返される配列の最初の要素です。

コードをコピーします コードは次のとおりです:

新しい連絡先('#contacts', {
連絡先: 連絡先、
カテゴリ: カテゴリ
});

#contacts 要素の連絡先のコントロールを作成します。連絡先とタイプのデータ セットは Control に渡されます。
ブラウザでアプリを開くと、次の連絡先リストが表示されます:

概要

これはチュートリアル シリーズの最初の記事です。CanJS の核心はすでに理解されています。
モデル APP データの抽象化レイヤー
データを HTML に変換するビュー テンプレート
コントロールはすべてを整理します

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：php、js、css_javascript スキルで文字列をインターセプトするメソッドのコレクション次の記事：php、js、css_javascript スキルで文字列をインターセプトするメソッドのコレクション

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved