Penjelasan terperinci tentang rangka kerja MVC ringan bahagian hadapan CanJS

Pilih perpustakaan yang betul

Membuat APP JS tanpa alat yang baik adalah sangat sukar untuk menjalankan jQuery dan tidak menyediakan sebarang asas untuk mencipta APP. Inilah sebabnya kami memerlukan perpustakaan khusus seperti CanJS.

CanJS ialah perpustakaan MVC ringan yang memberikan anda alatan yang anda perlukan untuk mencipta APP JS.

CanJS ialah perpustakaan MVC ringan yang memberikan anda alatan yang anda perlukan untuk mencipta APP JS. Ia menyediakan rangka kerja asas corak MVC (Model-View-Control), pengikatan templat dinamik, sokongan laluan dan keselamatan memori. Ia juga menyokong jQuery, Zepto, Mootools, YUI, Dojo, dan mempunyai banyak sambungan dan pemalam.

Di bahagian pertama anda akan belajar:
Buat lapisan Kawalan dan lapisan Lihat (templat UI) untuk memaparkan kenalan
Gunakan lapisan model Model untuk mewakili data
Gunakan pemalam lekapan untuk mensimulasikan data pemulangan ajax
Anda pasti teruja! Mari mulakan pengekodan.
Cipta folder dan HTML anda
Anda mula-mula membuat folder untuk APP anda, dan kemudian mencipta 4 subfolder di bawah direktori: css, js, pandangan dan img. Seperti berikut:
pengurus_kenalan
css
js
pandangan
img

Simpan kod berikut sebagai index.html:

Salin kod Kod adalah seperti berikut:

Pengurus Kenalan CanJS

Di bahagian bawah halaman anda memuatkan JS yang diperlukan (termasuk APP anda: contacts.js).
Fail CSS dan imej yang digunakan dalam tutorial tersedia untuk dimuat turun.

Gunakan View untuk membina UI anda

Paparan ialah templat UI yang digunakan untuk memaparkan APP anda. CanJS menyokong berbilang enjin templat Artikel ini menggunakan EJS termasuk dan menyokong pengikatan dinamik.
Teg templat EJS sangat serupa dengan HTML dan menyokong kemasukan kod JS Tiga teg yang biasa digunakan adalah seperti berikut:
<% KOD %>%20Laksanakan%20JS%0A<%= KOD %>%20Laksanakan%20JS%20dan%20tulis%20hasil%20yang%20tidak%20dilepaskan%20ke%20HTML%20di%20lokasi%20semasa%0A<%== KOD %>%20Laksanakan%20JS%20dan%20tulis%20hasil%20yang%20dilepaskan%20ke%20HTML%20pada%20kedudukan%20semasa%20(untuk%20sub-templat).%0ATemplat%20boleh%20dimuatkan%20daripada%20fail%20atau%20tag%20skrip%20Tutorial%20ini%20dimuatkan%20daripada%20fail%20EJS.%20%0A

%0A

Tunjukkan%20Kenalan%0A

%0A

Untuk%20mencipta%20kenalan,%20anda%20mesti%20mencipta%20templat%20EJS%20dahulu%20dan%20menyimpan%20kod%20berikut%20sebagai%20contactsList.ejs%20ke%20dalam%20folder%20paparan%20anda:%20

%0A

Salin kod Kod adalah seperti berikut:

<% senarai(kenalan, fungsi(kenalan){ %>
 el.data('contact', contact) %>>

          <%== can.view.render('views/contactView.ejs', {

Kenalan: kenalan, kategori: kategori

}) %>

<% }) %>

contactLists.ejs akan memaparkan senarai kenalan, mari analisa templat ini:

Salin kod Kod adalah seperti berikut:

<% senarai(kenalan, fungsi(kenalan){ %>

Jika kaedah panggil balik dalam kaedah list() digunakan dengan senarai yang dikonfigurasikan dengan pemerhati, setelah data dalam senarai berubah, ia akan dipanggil berulang kali menggunakan pengikatan dinamik.

Salin kod Kod adalah seperti berikut:

el.data('contact', contact) %>>

Kod di atas menghasilkan

dengan data kenalan melalui kaedah panggil balik elemen. Selepas kaedah selepas anak panah dilaksanakan, data objek el ditetapkan kepada elemen yang sepadan.

Salin kod Kod adalah seperti berikut:

<%== can.view.render('views/contactView.ejs', {

kenalan: kenalan, kategori: kategori

}) %>

Kod di atas menjadikan contactView.ejs subtemplat menjadi kenalan. can.view.render() mengembalikan HTML dengan templat dan data sebagai parameter.

Memberikan satu kenalan

Subtemplat ialah cara yang bagus untuk menyusun paparan ke dalam bahagian yang boleh diurus. Juga menjadikan templat anda ringkas dan mudah untuk digunakan semula. Templat ini akan digunakan kemudian dalam tutorial untuk membuat kenalan Simpan kod berikut sebagai contactView.ejs ke dalam folder pandangan:

Salin kod Kod adalah seperti berikut:

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

      <% $.each(kategori, fungsi(i, kategori){ %>
        >
          <%= category.name %>

      <% }) %>

    Alamat
          <%= contact.attr('alamat') ? "value='" contact.address "'" : "class='empty'" %>>
    Telefon
          <%= contact.attr('telefon') ? "value='" contact.phone "'" : "class='empty'" %>>
    E-mel
          <%= contact.attr('email') ? "value='" contact.email "'" : "class='empty'" %>>

联系人的属性都放入了标签里，这就可以编辑更新用户的资料。

活化你的View（好文艺。。）

EJS变化，当属性发生变化，APP中关联的UI将会被更新。这功能利益于模板动态绑定机制，EJS的动态绑定是有选择性的，只有使用了attr()定是有选择性的，只有使用了attr()并时家启。

我们通过 contactView.ejs 中一个标签来了解它的用法：

复制代码代码如下:

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

特殊标记里的代码将转变成事件绑定到此联系人的name属性上。当name属性发生变件绑定到此联系人的name属性上。当name属性发生变匫发生变匫中发变匫，中可他们小家结构会被更新。

使用can.Control来处理业务逻辑
Kawalan boleh.所需要数据为一个DOM元素创建一个Control实例，可以在你的Control中定义方法绑定事件。

当 Control 所关联的元素从DOM被删除时，Contol会自去销毁自己，同时清除所绑定的方法>。每个Contol实例都有几个重要的值和方法规范：

ini – Kawalan 实例的引用
this.element – 实例中你所创建的DOM 元素
this.options – 创建实例所需要的参数对象
init() – 当实例创建成功时被调用

管理联系人

将以下代码片段添加到contacts.js 文件来创建管理联系人的Control：

复制代码

代码如下:

Kenalan = boleh.Kawalan({

init: function(){

This.element.html(can.view('views/contactsList.ejs', {

Kenalan: this.options.contacts,

Kategori: this.options.categories

}));

}

})

Apabila tika Kenalan dibuat, init() melakukan dua perkara:
Gunakan can.view() untuk memberikan kenalan. can.view() menerima dua parameter: fail atau tag jalur yang mengandungi templat dan data ia akan mengembalikan documentFragment (bekas ringan yang menguruskan elemen DOM).
Gunakan jQuery.html() untuk memasukkan documentFragment of can.view() ke dalam elemen Kawalan

Gunakan Model untuk mewakili data

Model ialah lapisan abstraksi data APP. APP ini menggunakan dua Model: satu sepadan dengan kenalan dan satu sepadan dengan kategori. Tambahkan kod berikut pada contacts.js:

Salin kod Kod adalah seperti berikut:

Kenalan = boleh.Model({

findAll: 'DAPATKAN /kenalan',

buat : "POST /contacts",

kemas kini : "PUT /contacts/{id}",

musnahkan : "DELETE /contacts/{id}"

},{});

Kategori = boleh.Model({

findAll: 'DAPATKAN /kategori'

},{});

Sebuah model mempunyai 5 kaedah yang mungkin ditakrifkan kepada data CRUD, iaitu findAll, findOne, create, update and destroy. Anda boleh mengatasi kaedah ini, tetapi cara terbaik ialah menggunakan perkhidmatan REST (Pemindahan Negeri Perwakilan). Seperti dalam kod di atas, anda boleh mengabaikan kaedah statik yang tidak akan digunakan dalam APP dengan selamat.

Perkara penting untuk dinyatakan di sini ialah contoh model sebenarnya adalah 'boleh diperhatikan' yang diperoleh daripada CanJS. can.Observe menyediakan mod pemerhati untuk objek boleh.Observe.List menyediakan mod pemerhatian untuk tatasusunan. Ini bermakna anda boleh mendapatkan dan menetapkan data melalui attr(), dan memantau perubahan data pada masa yang sama.
Kaedah findAll() mengembalikan Model.list, yang merupakan peristiwa yang dicetuskan oleh can.Observe.List apabila elemen ditambah atau dialih keluar.

Gunakan Lekapan untuk meniru Rehat

Fixture memintas permintaan AJAX dan mensimulasikan respons melalui fail atau kaedah. Ini berguna untuk ujian atau apabila bahagian belakang belum siap lagi. Lekapan ialah perkara yang diperlukan oleh model APP untuk mensimulasikan REST.
Mula-mula, anda perlu menyediakan beberapa data untuk lekapan dan tambah kod berikut pada:

Salin kod Kod adalah seperti berikut:

var KENALAN = [
{
id: 1,
nama: 'William',
Alamat: '1 CanJS Way',
E-mel: 'william@husker.com',
Telefon: '0123456789',
Kategori: 'rakan sekerja'
},
{
id: 2,
nama: 'Laura',
Alamat: '1 CanJS Way',
E-mel: 'laura@starbuck.com',
Telefon: '0123456789',
Kategori: 'rakan'
},
{
id: 3,
nama: 'Lee',
Alamat: '1 CanJS Way',
E-mel: 'lee@apollo.com',
Telefon: '0123456789',
Kategori: 'keluarga'
}
];

var KATEGORI = [
{
id: 1,
nama: 'Keluarga',
Data: 'keluarga'
},
{
id: 2,
nama: 'Kawan',
Data: 'kawan'
},
{
id: 3,
nama: 'Rakan sekerja',
Data: 'rakan sekerja'
}
];

Sebaik sahaja anda mempunyai data, sambungkannya ke lekapan untuk mensimulasikan REST. can.fixture() menerima dua parameter. URL yang ingin kami pintas dan fail serta kaedah yang kami gunakan untuk bertindak balas. Biasanya URL yang ingin anda pintas adalah dinamik dan mengikut corak. Cuma tambah aksara kad bebas yang disertakan dalam {} pada URL.

Tambahkan kod berikut pada contacts.js:

Salin kod Kod adalah seperti berikut:

can.fixture('GET /contacts', function(){

kembalikan [HUBUNGI];

});

var id= 4;

can.fixture("POST /contacts", function(){

kembalikan {id: (id )}

});

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

kembali {};

});

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

kembali {};

});

can.fixture('DAPATKAN /kategori', fungsi(){

kembalikan [KATEGORI];

});

Empat lekapan pertama mensimulasikan respons GET, POST, PUT dan DELETE bagi model Kenalan, dan lekapan kelima mensimulasikan respons GET bagi model Kategori.

Lancarkan APP

APP anda mempunyai Model untuk mengurus data, Paparan untuk memaparkan kenalan dan Kawalan untuk mengatur semuanya. Apa yang anda perlu lakukan sekarang ialah melancarkan APP. Kini anda perlu memulakan aplikasi!
Tambahkan kod berikut pada contacts.js:

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){

$.when(Kategori.findAll(), Contact.findAll()).then(

Fungsi(categoryResponse, contactResponse){

var categories = categoryRespons[0],

Kenalan = contactResponse[0];

Kenalan baharu('#contacts', {

        kenalan: kenalan,

kategori: kategori

});

});

});

Mari kita analisa kod ini:

Salin kod Kod adalah seperti berikut:

$(dokumen).sedia(fungsi(){

Gunakan kaedah jQuery.ready untuk memantau kesediaan DOM.

Salin kod Kod adalah seperti berikut:

$.when(Kategori.findAll(), Contact.findAll()).then(

fungsi(categoryResponse, contactResponse){

Panggil kaedah findAll() kedua-dua Model untuk mendapatkan jenis semua kenalan Memandangkan findAll() mempunyai kelewatan, $.when() memastikan kedua-dua permintaan diselesaikan pada masa yang sama sebelum melaksanakan kaedah panggil balik.

Salin kod Kod adalah seperti berikut:

var categories = categoryRespons[0],

kenalan = contactResponse[0];

Dapatkan set data yang sepadan dengan contoh Model daripada dua kaedah findAll(). Adakah elemen pertama tatasusunan yang dikembalikan oleh respons.

Salin kod Kod adalah seperti berikut:

Kenalan baharu('#contacts', {

kenalan: kenalan,

kategori: kategori

});

Buat Kawalan untuk Kenalan untuk elemen #contacts. Set data kenalan dan jenis dihantar ke Kawalan.
Buka APP anda dengan penyemak imbas, anda akan melihat senarai kenalan berikut:

Ringkasan

Ini adalah artikel pertama dalam siri tutorial, anda sudah memahami inti CanJS:
Model Lapisan abstraksi untuk data APP anda
Melihat Templat yang menukar data kepada HTML
Kawalan mengatur segalanya

Label berkaitan：

canjs rangka kerja mvc Penjelasan terperinci

sumber：php.cn

Artikel sebelumnya：Pengumpulan kaedah untuk memintas rentetan dalam kemahiran php, js, css_javascript Artikel seterusnya：Analisis ringkas kemahiran pramuat js/lazy loading_javascript

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang