鐘恒-360-奇舞團(tuán)前端工程師-使用Vue.js2.0開發(fā)高交互Web應(yīng)用

實踐如何使用開發(fā)富交互式應(yīng)用我是誰奇舞團(tuán)前端工程師提綱架構(gòu)難點怎么辦架構(gòu)需求框架時代數(shù)據(jù)綁定newnewVue({typenumbervmodelnumdata:{num:0}})結(jié)構(gòu)劃分問題數(shù)據(jù)驅(qū)動讀寫分離架構(gòu)好處提綱架構(gòu)?填坑優(yōu)化組件化帶來的新問題組件通信<div><inputv-<div><inputv-model="parentMsg">br<child:message="parentMsg"></child></div>panmyMessagespan})<!<!--雙向prop綁定--><my-component:prop.sync="someThing"></my-component>propsprops:{callback:{type:Function,default:()=>{}}}<<my-component:callback="setStyles"></my-component>函數(shù)調(diào)用varvarapp=newVue({template:`<div><childref="child"></child><buttonv-on:click="reverse">ReverseMessage</button></div>`,methods:{reverse(){this.$refs.child.reverseMessage()}}})組件樹的問題 this.$parent.$parent.open()plugin<span>{{num}}</span>this.num++this.num--這個功能是異步的當(dāng)數(shù)據(jù)位被多方操作varvarbus=newVue()//incomponentA'smethodthis.total+=n})this.total-=n})this.choose().then(callback)})this.addShape(shape)})//當(dāng)然也可以promise啦getShape(){returnnewPromise((resolve,reject=>{}))}this.getShape().then(this.addShape)//自然也可以async/awaitletshape=awaitthis.getShape()this.addShape(shape)通信方法選擇提綱組件復(fù)用冗余//someeditingcode}elseif(this.type==='preview'){//somepreviewcode//somepresentcode}else{//somebasecode}包裝////plugin.vue<div><slotname="page">iamapage</slot></div>//present-plugin.vue<divclass="PresetPluginPage"><pluginref="page"><h1slot="page">iamapresentpage</h1></plugin></div><divclass="PresetPluginPage"><div>h>iamapresentpage</h1></div></div>繼承///defineamixinobjectvarmyMixin={created:function(){this.hello()},methods:{hello:function(){}}}//defineacomponentthatusesthismixinvarComponent=Vue.extend({mixins:[myMixin]})varcomponent=newComponent()//->"hellofrommixin!"復(fù)用方法的選擇提綱??組件耦合單組件修改困難組合新組件困難組件困難解耦的本質(zhì)就是將變化分離解耦<control-inputtype="number"></control-input><control-number></control-number>bindEventsbindEvents(remove){letmethod=remove}與服務(wù)端解耦.then(({body})=>{this.user=JSON.parse(body).data},err=>{console.error(err)})user.detail().then(detail=>this.detail=detail)提綱的老問題減肥抽取公用的數(shù)據(jù)處理部分利用優(yōu)化你的狀態(tài)機(jī)打點提綱?為什么會有坑前端框架的坑本質(zhì)問題的///thedefaultexportshouldbeafunction//whichwillreceivethecontextoftherendercallexportdefaultcontext=>{returnapp.preFetch(context).then(()=>{returnapp})}rverrendererconstfilePathpathjoin__dirname,'/path/to/your/file')ileSyncfilePathutfletrenderer=ssr.createBundleRenderer(code,{cache:lru(1000)})renderer.renderToString(options,(err,html)=>{this.assign({html})}constrendererconstrenderer=createRenderer({cache:LRU({max:10000})})的性能exportexportdefault{name:'item',//requiredserverCacheKey:props=>props.item.id,render(h){}}對組件的要求前后端均可運行區(qū)分靜態(tài)動態(tài)組件數(shù)據(jù)徹底分離提綱??應(yīng)用的痛離線化離線化r.then(registration=>{}).catch(function(err){//registrationfailed:(console.error(err)})}////監(jiān)聽fetchletrequest=event.request//嘗試返回線上的數(shù)據(jù)event.respondWith(fetch(request).then(function(response){//若成功，則緩存以備日后使用varcopy=response.clone()caches.open(cacheKeys[1]).then(function(cache){cache.