Mari kita bincangkan tentang pemahaman tentang mekanisme mesej JS dan kemahiran mekanisme_javascript acara

Mekanisme mesej/peristiwa ialah mekanisme yang terdapat dalam hampir semua bahasa pembangunan Ia bukan satu-satunya dalam bahasa, ia dipanggil mesej (Event), dan di beberapa tempat ia dipanggil (Mesej). , prinsipnya adalah serupa. Cuma beberapa kaedah pelaksanaan adalah lebih rumit. Nama bersatu peranti kami dipanggil mesej.

Konsep Asas Mesej

Terdapat beberapa pemula yang tidak biasa dengan mekanisme ini. Mari perkenalkan secara ringkas beberapa konsep asas Jika anda sudah biasa dengannya, anda boleh melangkau bahagian ini.
Mesej boleh difahami sebagai struktur data, termasuk bahagian asas berikut:

1. Sumber mesej: Ia adalah sumber mesej dan objek yang menghantar mesej

2. Nama mesej: Ia adalah pengecam unik mesej

3. Data mesej: data yang dilampirkan selepas mesej dihantar, data mungkin kosong

Mesej boleh dibahagikan kepada dua jenis:

1. Mesej sistem: mesej yang dihantar oleh sistem pengendalian atau sistem satu peranti Nama mesej ditetapkan.

2. Mesej tersuai: Mesej ditakrifkan oleh pembangun sendiri dan dihantar sendiri Nama mesej adalah sewenang-wenangnya dan boleh ditakrifkan sewenang-wenangnya.

Contoh:

Sebagai contoh, jika pengguna mengklik butang do_Button, mesej sistem akan dicetuskan, yang mengandungi 3 bahagian:

1. Sumber mesej: objek butang dalam klik pengguna

2. Nama mesej: sentuh

3. Data mesej: Mesej ini tidak disertakan dengan data

Sebagai contoh, pengguna mencetuskan acara tersuai melalui butang do_Button, yang mengandungi 3 bahagian:

1.Sumber mesej: objek butang

2. Nama mesej: Pengguna boleh mentakrifkannya seperti yang dikehendaki, ia boleh dipanggil aaa, bbb, ccc

3. Data mesej: Data yang dilampirkan ditetapkan apabila mesej dicetuskan

Mod Terbit/Langgan

Corak terbitkan/langganan ialah salah satu corak reka bentuk yang paling biasa digunakan dan merupakan teras mekanisme pemesejan Ciri-cirinya ialah mengurangkan gandingan supaya dua objek bebas tidak bergantung antara satu sama lain. Pengenalan ringkas, pelajar yang biasa boleh melangkaunya.

Mari kita gambarkan masalah ini dahulu dengan contoh mudah dari realiti, rujuk gambar di bawah:

Kita boleh lihat dari gambar ini

1. Pengguna dan penerbit tidak mengenali antara satu sama lain Pengguna tidak perlu tahu penerbit mana yang mereka mahukan diterbitkan;

2. Kedua-dua pengguna dan penerbit mesti tahu pejabat pos.

3. Pengguna perlu memberitahu pejabat pos nama dan alamat pengguna dan nama majalah yang mereka ingin langgan

4. Berbilang pengguna boleh melanggan majalah yang sama

5. Selepas pejabat pos menerima majalah, ia akan memberitahu pengguna satu persatu dan menghantar majalah kepada pengguna pada masa yang sama.

Selepas membaca contoh kehidupan sebenar di atas, mari lihat penerangan abstrak untuk menjadikannya lebih jelas Lihat gambar di bawah:

sepadan dengan penerangan contoh sebenar di atas:

1. Sistem/pembangun dan objek fungsi tidak bergantung antara satu sama lain Sistem/pembangun hanya mencetuskan mesej dan tidak peduli siapa yang menerimanya

2. Sistem/pembangun dan objek fungsi mesti boleh mendapatkan objek sumber mesej

3 Apabila objek fungsi melanggan mesej, ia perlu menunjukkan nama mesej dan rujukan kepada objek fungsi

4. Objek berbilang fungsi boleh melanggan mesej dengan sumber mesej yang sama dan nama yang sama

5 Apabila sumber mesej mencetuskan mesej, ia akan memberitahu semua pelanggan satu demi satu dan menghantar data ke objek fungsi panggil balik

Selepas membaca huraian abstrak, mari kita lihat contoh sebenar pembangunan deviceone, mengambil do_Button sebagai contoh.

1. Apabila pengguna mengklik pada butang dan menyentuhnya, sistem akan memperoleh objek butang sebagai sumber mesej dan melancarkan mesej "sentuhan" Mana-mana objek fungsi yang melanggan mesej "sentuhan". menerimanya. Mesej ini menyebabkan fungsi itu dilaksanakan.

//获取button对象
var btn_hello = ui("btn_hello");
//定义函数对象
function f(){
//当btn_hello这个按钮接收到手指点击就会执行下面的代码
deviceone.print("f 函数接收到点击触发消息")
}
function f(){
//当btn_hello这个按钮接收到手指点击就会执行下面的代码
deviceone.print("f 函数接收到点击触发消息")
}
//f，f订阅button的touch消息
btn_hello.on("touch",f);
btn_hello.on("touch",f);

2. Kami boleh mentakrifkan dua mesej tersuai "message1" dan "message2" untuk objek butang, dan mempunyai dua objek fungsi melanggan kedua-dua mesej ini. Tetapi pada akhirnya, pembangun mesti mencetuskan mesej ini dengan memanggil fungsi api Ini adalah perbezaan daripada mesej sistem.

//获取button对象
var btn_hello = ui("btn_hello");
//定义函数对象
function f(d){
//当btn_hello这个按钮接收到开发者触发的消息message就会执行下面的代码
deviceone.print("f 函数接收到message消息,消息的数据是:"+d)
}
function f(d){
//当btn_hello这个按钮接收到开发者触发的消息message就会执行下面的代码
deviceone.print("f 函数接收到message消息,消息的数据是:"+d)
}
//f，f订阅button的touch消息
btn_hello.on("message",f);
btn_hello.on("message",f);
//触发消息
btn_hello.fire("message","data");
btn_hello.fire("message","data");

看到这里，你肯定会奇怪，为什么我们要在button上自定义对象？这有神马意义？其实确实没有意义也没有必要，这里只是拿button举例子，在常规的开发中，基本不会这么用。

消息的使用

前面讲了这么多，现在才是deviceone消息的使用。使用其实很简单，上面的例子基本说明的了系统事件和自定义事件的使用方法。

有几个概念再说明一下

1.deviceone的所有对象，包括UI，MM，SM对象都可以是消息源

// SM对象可以是消息源
var page = sm("do_Page");
page.on("loaded",function()){
// 这个是page对象的系统消息,这个消息不需要手动触发，系统会自动触发
}
page.on("message",function(d)){
// 这个是page对象的自定义消息
}
page.fire("message","data");
// MM对象可以是消息源
var http = mm("do_Http");
http.on("result",function()){
// 这个是http对象的系统消息,这个消息不需要手动触发，接受到http服务端的反馈后会自动触发
}
http.on("message",function(d)){
// 这个是http对象的自定义消息
}
http.fire("message","data");
//UI对象可以是消息源
var alayout = ui("alayout_id");
alayout.on("touch",function()){
// 这个是alayout对象的系统消息,这个消息不需要手动触发，手机点击就会触发
}
alayout.on("message",function(d)){
// 这个是alayout对象的自定义消息
}
alayout.fire("message","data");

2.消息源对象有作用域，所以订阅和触发的消息源必须是是一个作用域的同一个对象。这里结合数据分享和数据传递文档来理解。

看以下的例子，test1.ui和test2.ui有可能在一个page作用域，也有可能不在一个作业域，只有在一个作用域fire的消息才能正确送达回调函数。

判断是否一样，可以通过打印page的地址 page.getAddress().

//在test.ui.js里订阅消息
var page = sm("do_Page");
deviceone.print(page.getAddress());
page.on("message",function(d)){
deviceone.print(d);
}
//在test.ui.js触发消息
var page = sm("do_Page");
deviceone.print(page.getAddress());
page.fire("message","data");

如果不在同一page作用域，则可以把消息订阅在2个page都能共享到的app作用域
上面的代码改成：

//在test.ui.js里订阅消息
var app = sm("do_App");
app.on("message",function(d)){
deviceone.print(d);
}
//在test.ui.js触发消息
var app = sm("do_App");
app.fire("message","data");

3.同样的函数对象可以重复订阅一个对象源的消息，触发消息的时候会使函数执行多次，这是初学者经常犯的错误。

var page = sm("do_Page");
var count = ;
function f(){
deviceone.print("执行次数"+(count++));
}
page.on("message",f);
page.on("message",f);
page.fire("message");

看上面的例子，如果执行的话，会打印2此，因为订阅了2次，或许你会说谁会写这样的代码？实际情况肯定没有这么容易看出来执行了重复的on函数，实际情况经常是比如在点击事件里执行on函数，每点击一下按钮，就重复订阅一次。

4.消息的订阅一定要在消息的触发之前，这是初学者经常犯的错误。

var page = sm("do_Page");
var count = ;
function f(){
deviceone.print("执行次数"+(count++));
}
page.fire("message");
page.on("message",f);

看上面的例子，如果执行的话，会没有效果，或许你会说谁会写这样的代码？实际情况肯定没有这么容易看出来顺序反了，实际情况经常是比如on函数执行在某一个函数的回调函数里，你无法确定回调函数啥时候执行，是否是在fire之前执行。一般碰到这种情况可以加几个deviceone.print打印一下看看是on先执行还是fire先执行。

5.有订阅就有取消订阅，取消订阅是off函数，之所以很少用，是因为closePage的时候会自动把当前page作用域订阅的消息全部释放。

但是如果消息订阅在app作用域，就要注意，可能需要手动去取消订阅。否则就会出现触发消息的时候会使函数执行多次的问题。

var page = sm("do_Page");
var count = ;
function f(){
deviceone.print("执行次数"+(count++));
}
page.on("message",f);
page.fire("message");
.page.off("message");
page.fire("message");

看上面的例子，打印只会执行一次，因为fire一次后就取消订阅了。