欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學(xué)堂HTML5培訓(xùn)之詳解vue移動(dòng)端項(xiàng)目代碼拆分記錄

2019-03-15 14:12:40 2175瀏覽

今天扣丁學(xué)堂HTML5培訓(xùn)老師給大家分享一篇關(guān)于vue移動(dòng)端項(xiàng)目代碼拆分記錄的詳細(xì)介紹，首先vue多端共用，非常適合需要快速且全面上線(xiàn)的項(xiàng)目。但是多端共用一套vue代碼，由于平臺(tái)間的互相限制，每端在某些業(yè)務(wù)例如支付分享等是完全獨(dú)立的代碼，每個(gè)平臺(tái)的支付方式也會(huì)有所差異，造成在這些業(yè)務(wù)的實(shí)現(xiàn)過(guò)程中會(huì)有太冗余的“ifelse”判斷。所以為了提高代碼的復(fù)用性、擴(kuò)展性，可以將代碼拆分，以-小程序和App兩端舉例，一份部署到小程序，一份部署到App（Android&Ios）。

首先代碼拆分應(yīng)該保證本地開(kāi)發(fā)的時(shí)候只有一套代碼，提取所有公共頁(yè)面，并且分別提取小程序和app的獨(dú)立JS方法，避免開(kāi)發(fā)完小程序端vue，然后粘貼復(fù)制到App端的繁瑣操作。

直接看圖最清晰，拆分前目錄結(jié)構(gòu)：

拆分后目錄結(jié)構(gòu)：

拆分前項(xiàng)目目錄結(jié)構(gòu)

拆分后項(xiàng)目目錄結(jié)構(gòu)

目錄拆分好之后，開(kāi)始拆分代碼。由于部署到生產(chǎn)環(huán)境的時(shí)候只能App端部署App端，小程序端部署小程序端，那么在本地開(kāi)發(fā)過(guò)程中為了調(diào)試不同端的頁(yè)面就需要進(jìn)行路由配置，所以對(duì)路由配置文件route.list.js做了修改：

拆分代碼前，route.list.js中將所有頁(yè)面JS文件的相對(duì)路徑放在一個(gè)數(shù)組里：

define(
 [
  ‘../xxx/xxx/user.js',
  ‘../xxx/xxx/goods.js',
  …
  …
 ]
)

拆分后，route.list.js中按public、mobile_app、wechat_mini分別定義數(shù)組，這樣如果現(xiàn)在正在開(kāi)發(fā)小程序端的vue，那么則將public和wechat_mini的數(shù)組合并到一起，開(kāi)發(fā)app端的vue則將public和moblie_app的數(shù)組合并到一起，合并數(shù)組使用ES6擴(kuò)展運(yùn)算符（…）。

var public_goods = [];
var mini_goods = [];
var app_goods = [];
var fun = (isWechatMini) => {
  if(isWechatMini){
    return [
     …public_goods,
     …mini_goods
    ]
  } else {
    return [
     …public_goods,
     …app_goods
    ]
  }
}
define(
  fun(true)
)

將公共部分和獨(dú)立部分的頁(yè)面拆分之后，進(jìn)一步分析代碼：App端和小程序端相互獨(dú)立的大多是支付功能，分享功能等涉及到需要原生處理的地方，并且會(huì)在多個(gè)頁(yè)面，多個(gè)業(yè)務(wù)中出現(xiàn)，那么就將App獨(dú)立的vue代碼拆分到一個(gè)公共JS中（app-common.js），將小程序獨(dú)立的vue代碼拆分到一個(gè)公共JS中（mini-common.js），在需要的頁(yè)面中引入即可。就商品購(gòu)買(mǎi)支付功能為例：

拆分前：

define([‘vue', ‘a(chǎn)xios', ‘text!/File/Html/goods/goodsPay.html'], (vue, axios, Template) => {
  var App = {
   data() {
 
   },
   template: Template,
   mounted() {
 
   },
   methods: {
     pay(){
       if(isWechatMini){
         //這里是小程序支付
       } else {
         //這里是App支付
       }
     }
   }
  };
 
  return{
    app: App
  };
   
});

業(yè)務(wù)復(fù)雜的情況下，會(huì)有多層ifelse，代碼太冗余。

拆分后：

小程序端的商品支付購(gòu)買(mǎi)頁(yè)面：

define([‘vue', ‘a(chǎn)xios', ‘text!/File/Html/mini/goods/goodsPay.html', ‘mini-common'], (vue, axios, Template, common) => {
  var App = {
    data() {
 
    },
  template: Template,
  mounted() {
 
  },
  methods: {
     pay(){
       //調(diào)用mini-common中定義的支付方法
       common.pay();
     }
  }
 };
 
 return{
  app: App
 };
   
});

App端的商品購(gòu)買(mǎi)支付頁(yè)面只需要將引入的JS換成app-common即可：

define([‘vue', ‘a(chǎn)xios', ‘text!/File/Html/app/goods/goodsPay.html', ‘a(chǎn)pp-common'], (vue, axios, Template, common) => {
  var App = {
    data() {
    },
  template: Template,
  mounted() {
 
  },
  methods: {
    pay(){
      //調(diào)用app-common中定義的支付方法
      common.pay();
    }
   }
  };
  return{
   app: App
  };
   
});

本地開(kāi)發(fā)完后，部署到服務(wù)器只需要將public目錄下和wechat_mini下的文件復(fù)制粘貼到打包工具打包即是小程序端的代碼，public和mobile_app打包即是app端的代碼。

以上就是關(guān)于扣丁學(xué)堂HTML5培訓(xùn)之詳解vue移動(dòng)端項(xiàng)目代碼拆分記錄的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，想要了解更多關(guān)于HTML5開(kāi)發(fā)方面內(nèi)容的小伙伴，請(qǐng)關(guān)注扣丁學(xué)堂HTML5培訓(xùn)官網(wǎng)、微信等平臺(tái)，扣丁學(xué)堂IT職業(yè)在線(xiàn)學(xué)習(xí)教育平臺(tái)為您提供權(quán)威的HTML5視頻教程供學(xué)員學(xué)習(xí)，HTML5培訓(xùn)后的前景無(wú)限，行業(yè)薪資和未來(lái)的發(fā)展會(huì)越來(lái)越好的，扣丁學(xué)堂老師精心推出的HTML5視頻直播課定能讓你快速掌握HTML5從入門(mén)到精通開(kāi)發(fā)實(shí)戰(zhàn)技能?？鄱W(xué)堂H5技術(shù)交流群：673883249。

【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】

查看更多關(guān)于“HTML5開(kāi)發(fā)技術(shù)資訊”的相關(guān)文章>>