Cara Mengurus Negara Aplikasi JavaScript Anda Dengan Mobx

Artikel ini dikaji semula oleh Michel Weststrate dan Aaron Boyer. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint sempurna!

Jika anda pernah menulis permohonan yang lebih kompleks daripada yang sangat mudah menggunakan jQuery, anda mungkin mempunyai masalah untuk menjaga bahagian -bahagian yang berlainan dari UI dalam penyegerakan. Sering kali, perubahan kepada data perlu dicerminkan di pelbagai lokasi, dan apabila aplikasi berkembang, anda mungkin mendapati diri anda dalam masalah. Untuk mengawal kekeliruan ini, peristiwa sering digunakan untuk membiarkan bahagian -bahagian yang berlainan aplikasi mengetahui apabila perubahan telah berlaku.

Jadi, bagaimana anda menguruskan status aplikasi hari ini? Saya akan mengambil kebebasan untuk mengatakan bahawa anda melampaui perubahan kepada perubahan. Betul. Saya tidak mengenali anda, tetapi saya akan menunjukkannya. Sekiranya anda tidak melampaui langganan, maka saya pasti anda telah bekerja terlalu keras.

tentu saja, melainkan jika anda menggunakan Mobx ...

mata utama

Memudahkan pengurusan negeri dengan MOBX:
• dengan cekap menguruskan keadaan aplikasi melalui objek yang dapat dilihat, mengurangkan kerumitan dan kod boilerplate yang terdapat di perpustakaan pengurusan negeri lain seperti Redux. Kemas kini automatik Mobx: Melaksanakan Mobx's
melaksanakan fungsi Mobx
• untuk mengemas kini komponen UI secara automatik sebagai tindak balas kepada perubahan negara tanpa pemprosesan peristiwa manual, dengan itu mempermudah proses penyegerakan keseluruhan aplikasi. autorun Meningkatkan prestasi dengan nilai-nilai yang dikira:
Gunakan nilai-nilai yang dikira dari MOBX untuk mendapatkan data dari negeri, memastikan komponen hanya diberikan semula apabila perlu, dengan itu meningkatkan prestasi aplikasi keseluruhan.
• Mobx mudah dimulakan:
dengan lancar mengintegrasikan MOBX ke dalam aplikasi JavaScript yang sedia ada dengan menukar objek standard ke dalam objek yang dapat dilihat, yang membolehkan pengangkatan secara beransur -ansur tanpa penulisan penuh.
• Pengubahsuaian transaksional dengan operasi MOBX:
Memohon operasi MOBX untuk merangkum pengubahsuaian keadaan dalam urus niaga, dengan itu mengemas kini dan meminimumkan rendering berlebihan, mengakibatkan kod yang lebih efisien dan kurang rawan.
Apakah "keadaan"?

Ini adalah watak. Hei, itu saya! Saya mempunyai nama pertama, nama terakhir dan umur. Juga, jika saya mempunyai masalah, fungsi mungkin muncul.

fullName() Bagaimana anda akan memberitahu pelbagai output (pandangan, pelayan, log debug) pengubahsuaian kepada orang ini? Bilakah anda akan mencetuskan pemberitahuan ini? Sebelum Mobx, saya akan menggunakan setter yang mencetuskan acara jQuery tersuai atau isyarat JS. Pilihan ini berfungsi dengan baik, tetapi penggunaan saya jauh dari teliti. Jika mana -mana bahagian objek orang berubah, saya akan mencetuskan peristiwa "berubah".

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

Katakan saya mempunyai kod pandangan yang menunjukkan nama saya. Jika saya menukar umur saya, pandangan akan dikemas kini kerana ia terikat kepada peristiwa yang berubah dari orang itu.

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

Bagaimana kita mengetatkan overtrigger ini? Mudah. Cukup tetapkan setter untuk setiap medan dan tetapkan acara berasingan untuk setiap perubahan. Tunggu - jika anda mahu menukar umur dan nama pertama sekaligus, anda boleh mula terlalu banyak. Anda perlu membuat cara untuk menangguhkan penembakan acara sehingga kedua -dua perubahan selesai. Kedengarannya seperti kerja, dan saya malas ...

Mobx datang untuk menyelamatkan

Mobx adalah perpustakaan pengurusan negeri yang mudah, fokus, cekap dan tidak mencolok yang dibangunkan oleh Michel Weststrate.

dari dokumentasi Mobx:

Cukup lakukan sesuatu tentang Negeri dan Mobx akan memastikan aplikasi anda menghormati perubahan ini.

person.events = {};

person.setData = function (data) {
  $.extend(person, data);
  $(person.events).trigger('changed');
};

$(person.events).on('changed', function () {
  console.log('first name: ' + person.firstName);
});

person.setData({age: 38});

Adakah anda melihat perbezaannya? mobx.observable adalah satu -satunya perubahan yang saya buat. Mari lihat contoh console.log lagi:

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
});

Menggunakan autorun, MOBX hanya akan memerhatikan kandungan yang telah diakses.

Jika anda fikir ini kemas, lihat yang berikut:

mobx.autorun(function () {
  console.log('first name: ' + person.firstName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 仍然为空
person.firstName = 'Matthew!'; // 此处触发

berminat? Saya tahu anda berminat.

konsep teras Mobx

Diamati

mobx.autorun(function () {
  console.log('Full name: ' + person.fullName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 触发
person.firstName = 'Matthew!'; // 也触发

objek yang dapat dilihat oleh Mobx hanya objek. Dalam contoh ini, saya tidak memerhatikan apa -apa. Contoh ini menunjukkan bagaimana untuk memulakan mengintegrasikan MOBX ke pangkalan kod anda yang sedia ada. Hanya gunakan mobx.observable() atau mobx.extendObservable() untuk memulakan.

Autorun

var log = function(data) {
  $('#output').append('' +data+ '');
}

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 34
});

log(person.firstName);

person.firstName = 'Mike';
log(person.firstName);

person.firstName = 'Lissy';
log(person.firstName);

Apa yang anda mahu lakukan apabila pemerhatian anda berubah, bukan? Izinkan saya memperkenalkan autorun(), yang akan mencetuskan panggilan balik apabila sebarang perubahan nilai yang dapat dirujuk. Perhatikan bahawa dalam contoh di atas, autorun() tidak akan terbakar apabila umur berubah.

dikira

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 0
});

mobx.autorun(function () {
  log(person.firstName + ' ' + person.age);
});

// 这将打印Matt NN 10次
_.times(10, function () {
  person.age = _.random(40);
});

// 这将什么也不打印
_.times(10, function () {
  person.lastName = _.random(40);
});

adakah anda melihat fungsi fullName? Perhatikan bahawa ia tidak mempunyai parameter dan get? MOBX secara automatik akan mencipta nilai yang dikira untuk anda. Ini adalah salah satu ciri Mobx kegemaran saya. Perhatikan bahawa ada sesuatu yang pelik tentang person.fullName? Tonton lagi. Ini adalah fungsi, anda dapat melihat hasilnya tanpa memanggilnya! Biasanya, anda akan memanggil person.fullName() bukan person.fullName. Anda baru sahaja bertemu dengan JS Getter pertama anda.

keseronokan tidak berakhir di sini! MOBX akan memantau kebergantungan nilai yang dikira untuk perubahan dan hanya berjalan apabila mereka berubah. Jika tiada perubahan, nilai cache akan dikembalikan. Sila lihat situasi berikut:

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 0,
  get fullName () {
    return this.firstName + ' ' + this.lastName;
  }
});
log(person.fullName);

person.firstName = 'Mike';
log(person.fullName);

person.firstName = 'Lissy';
log(person.fullName);

Anda dapat melihat di sini bahawa saya telah memukul pengiraan

beberapa kali, tetapi satu -satunya masa fungsi berjalan adalah apabila namename atau lastname berubah. Ini adalah salah satu cara Mobx boleh mempercepatkan aplikasi. person.fullName

lebih banyak!

Saya tidak akan terus menulis semula dokumen Mobx yang indah lagi. Semak dokumentasi untuk lebih banyak cara untuk menggunakan dan membuat objek yang dapat dilihat.

(kandungan berikut menghilangkan beberapa contoh kod dan penjelasan terperinci, dan mengekalkan kandungan dan struktur teras)

letakkan mobx ke dalam penggunaan

mari kita membina sesuatu sebelum terlalu membosankan.

Ini adalah contoh bukan mobx yang mudah yang akan menunjukkan nama penuh orang itu apabila ia berubah.

Perhatikan bahawa walaupun kita tidak pernah menukar nama, nama itu diberikan 10 kali. Anda boleh mengoptimumkan masalah ini menggunakan banyak peristiwa atau menyemak beberapa jenis muatan perubahan. Ini terlalu banyak kerja.

Ini adalah contoh yang sama yang dibina dengan Mobx:

Perhatikan bahawa tiada peristiwa, pencetus, atau seterusnya. Dengan Mobx, anda berurusan dengan nilai terkini dan hakikat bahawa ia telah berubah. Perhatikan bahawa ia hanya diberikan sekali? Ini kerana saya tidak mengubah apa -apa autorun pemantauan.

mari kita membina sesuatu yang sedikit kurang remeh:

di sini, kami dapat mengedit seluruh objek orang dan secara automatik memantau output data. Sekarang, terdapat beberapa titik lembut dalam contoh ini, dan perkara yang paling ketara ialah nilai input tidak selaras dengan objek orang. Mari kita selesaikan masalah ini:

Saya tahu, anda mempunyai satu lagi aduan: "Ruby, anda telah membuat terlalu banyak!" Inilah sebabnya ramai orang memilih untuk menggunakan React. React membolehkan anda dengan mudah memecahkan output ke widget yang boleh diberikan secara berasingan.

Untuk kesempurnaan, inilah contoh jQuery yang saya telah dioptimumkan.

Adakah saya akan melakukan sesuatu seperti ini dalam aplikasi sebenar? Mungkin tidak. Jika saya memerlukan butiran ini, saya akan menggunakan React pada bila -bila masa. Apabila saya menggunakan Mobx dan JQuery dalam aplikasi sebenar, saya menggunakan cukup nuanced autorun() yang saya tidak membina semula seluruh DOM setiap kali saya mengubahnya.

anda telah sampai ke tahap ini, jadi inilah contoh yang sama yang dibina dengan React dan Mobx

mari kita bina persembahan slaid

Bagaimana anda akan mewakili status persembahan slaid? Mari kita mulakan dengan kilang slaid tunggal:

kita harus mempunyai sesuatu untuk mengagregatkan semua slaid kita. Mari kita bina sekarang:

Pertunjukan slaid telah bermula! Ini lebih menarik kerana kami mempunyai pelbagai slaid yang dapat dilihat yang membolehkan kami menambah dan mengeluarkan slaid dari koleksi dan mengemas kini UI kami dengan sewajarnya. Seterusnya, kami menambah nilai yang dikira activeSlide, yang akan memastikan dirinya terkini seperti yang diperlukan.

mari kita membuat persembahan slaid kita. Kami tidak bersedia untuk output HTML, jadi kami hanya akan mencetak ke konsol.

Ia sejuk, kami mempunyai beberapa slaid, autorun hanya mencetak status semasa mereka. Mari kita ubah satu atau dua slaid:

Ia kelihatan seperti autorun kami berfungsi. Jika anda menukar apa -apa autorun pemantauan, ia akan terbakar. Mari tukar derivasi output dari konsol ke html:

Kami kini mempunyai paparan asas pertunjukan slaid ini, tetapi belum ada interaksi. Anda tidak boleh mengklik pada lakaran kecil dan menukar imej utama. Walau bagaimanapun, anda boleh dengan mudah menukar teks imej dan menambah tayangan slaid menggunakan konsol:

mari kita buat tindakan pertama dan satu -satunya untuk menubuhkan tayangan slaid yang dipilih. Kita perlu mengubah suai slideShowModelFactory dengan menambahkan:

anda boleh bertanya, mengapa anda perlu menggunakan operasi? Soalan yang baik! Operasi MOBX tidak diperlukan, seperti yang telah saya tunjukkan dalam contoh lain untuk mengubah nilai yang dapat dilihat.

Operasi akan membantu anda dalam beberapa aspek. Pertama, semua operasi MOBX dijalankan dalam transaksi. Ini bermakna bahawa autorun dan tindak balas MOBX kami akan menunggu operasi selesai sebelum mencetuskan. Fikirkanlah. Apa yang berlaku jika saya cuba menyahaktifkan slaid aktif di luar transaksi dan mengaktifkan slaid seterusnya? autorun kami akan dicetuskan dua kali. Larian pertama akan menjadi janggal, kerana tidak akan ada slaid aktif yang tersedia untuk paparan.

Di samping sifat transaksional mereka, operasi MOBX cenderung membuat debugging lebih mudah. Parameter pilihan pertama yang saya lulus ke mobx.action adalah rentetan "set slaid aktif". Rentetan ini boleh dikeluarkan menggunakan API Debug Mobx.

jadi kami mempunyai operasi kami, mari kita gunakan jQuery untuk menyambungkannya ke:

itu sahaja. Anda kini boleh mengklik pada lakaran kecil dan aktiviti akan menyebarkan seperti yang diharapkan. Berikut adalah contoh kerja persembahan slaid:

Ini adalah contoh pertunjukan slaid yang sama menggunakan React.

Nota, saya tidak mengubah model sama sekali? Dari segi Mobx, React hanyalah satu lagi derivatif data anda, seperti jQuery atau konsol.

Amaran untuk jQuery slide Show Contoh

Sila ambil perhatian bahawa saya tidak mengoptimumkan contoh jQuery dalam apa cara sekalipun. Kami memusnahkan keseluruhan slaid menunjukkan DOM setiap kali kami mengubahnya. Dengan pecah, saya maksudkan kita menggantikan semua HTML untuk pertunjukan slaid dengan setiap klik. Sekiranya anda membina pertunjukan slaid berasaskan jQuery yang kuat, anda boleh menyesuaikan DOM selepas penampilan awal dengan menetapkan dan memadam kelas aktif dan mengubah atribut mainImage. src

mahu mengetahui lebih lanjut?

Jika anda ingin mengetahui lebih lanjut mengenai Mobx, lihat beberapa sumber berguna lain di bawah:

Jika anda mempunyai sebarang pertanyaan, sila beritahu saya dalam komen di bawah, atau cari saya di saluran Mobx Gitter.

Soalan Lazim Mengurus Status Aplikasi JavaScript dengan Mobx

(bahagian FAQ ditinggalkan dari kandungan berikut, kerana artikel itu terlalu panjang dan tidak ada kaitan dengan kandungan teras.)

Atas ialah kandungan terperinci Cara Mengurus Negara Aplikasi JavaScript Anda Dengan Mobx. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!