2017 ModernWeb Conference 演講簡報
吚7XUEROLQNV蝽Ӥ5HDFW
View Slide
襟儘䓛⛳@elct9620WEB DEVELOPERGAME DEVELOPER
Բ狝夺䌌Ꭺ7DPDVKLL䌕礯䛑አ礯ֺ
7XUEROLQNVฎचෝ+70/ጱ+LVWRU\$3,ಅ䋿匍ጱದ蔩牐ದ蔩ܻቘ
ࣁ螂݄+LVWRU\$3,ݝአෝ獥矦ӤӞ殷ᘏӥӞ殷牐ದ蔩ܻቘ
ದ蔩ܻቘhistory.back();history.forward();ܻতጱ+LVWRU\$3,
+70/碝ीጱSXVK6WDWHۑ胼㳷虏౯㮉ݢ犥䌘倵薩夵袅蝱ᤈ砺֢牐ದ蔩ܻቘ
技術原理
ದ蔩ܻቘvar newState = {pageName: 'New Page',controller: 'acticle',id: '1'};window.history.push(newState, newState.pageName,"/article/1");
7XUEROLQNVฎݑک3-$;ದ蔩ጱ段叨ኞጱ叨ᇔ牐ದ蔩ܻቘ
7XUEROLQNV虏M4XHU\篷ဩྋଉ螀֢य़疑犋ฎ盄ࡅ稭
M4XHU\碉ݳ$(document).ready(function() {// OnLoad...});य़ग़碍碻狡౯㮉䨝ࣁM4XHU\ጱUHDG\狶蒂ቘ
M4XHU\碉ݳ$(document).on("turbolinks:load, function(){// OnLoad...});犋螂ࣁ7XUEROLQNVᥝ硬አ7XUEROLQNVጱORDGԪկ
M4XHU\䨝㵕֕ฎ螭ฎ瓥ധ᯿蕦ڡত玕
jQuery.ready => 頁面讀取觸發Turbolinks:load => 替換頁面時觸發Turbolinks API
M4XHU\碉ݳ$(document).on(“turbolinks:before-cache, function(){// UnLoad…});ࣁ殷ᶎᤩ䧙ਂԏ獮薹ᴻM4XHU\زկ
7XUEROLQNV吚5HDFW5RXWHUጱ磦դ5HDFW7XUEROLQNV
5HDFW碉ݳReactDOM.render(, root)Ӟ膢౯㮉䨝ፗ矑狶౮6LQJOH3DJH$SSOLFDWLRQ
虏5HDFWݝ䌘蟂獤ጱ殷ᶎ磦矦蟂獤磦矦
᯿蕦5HQGHUزկ蝨౮ग़稞Ԫկ翉ਧๅ矦殷ᶎ
5HDFW碉ݳReactDOM.unmountComponentAtNode(root);ֵአXQPRXQW㬵薹ᴻܻጱ翉ਧ
櫝樄殷ᶎ碻狶XQORDGXQPRXQW疰ݢ犥ԧ蚤M4XHU\ጱ眐हӞ䰬
ඪൔ:HESDFNHUԏ盅牧-DYD6FULSW哴ᰁ獊蟂硬አ:HESDFN蒂ቘ5DLOV
3UR7LSconst dataset = root.dataset;ReactDOM.render(, root);5HQGHU碻ݢ犥癲獈GDWD痀斔ۗ
3UR7LSconst Cable = ActionCable.createConsumer();$FWLRQ&DEOH犖ݢ犥ࣁ:HESDFNӾֵአ
3UR7LSMessageChannel.broadcast_to(current_user,type: 'PRIVATE_MESSAGE',message: 'Hi, I am Aotoki!')$FWLRQ&DEOHݢ犥ፘෝ5HGX[)OX[
3UR7LSconst channel = Cable.subscriptions.create('MessageChannel')channel.received = store.dispatch$FWLRQ&DEOHݢ犥ፘෝ5HGX[)OX[
3UR7LSvar App = new Vue({ beforeDestroy: ... })# before-cacheApp.$destroy()9XHӞ䰬犖ݢ犥