快捷導(dǎo)航

詳解vue移動(dòng)端項(xiàng)目代碼拆分記錄

更新時(shí)間：2019年03月15日 11:19:47 作者：坐不住的程序員

這篇文章主要介紹了詳解vue移動(dòng)端項(xiàng)目代碼拆分記錄，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

擼一套vue多端共用，非常適合需要快速且全面上線的項(xiàng)目。但是多端共用一套vue代碼，由于平臺(tái)間的互相限制，每端在某些業(yè)務(wù)例如支付分享等是完全獨(dú)立的代碼，每個(gè)平臺(tái)的支付方式也會(huì)有所差異，造成在這些業(yè)務(wù)的實(shí)現(xiàn)過程中會(huì)有太冗余的“if else”判斷。所以為了提高代碼的復(fù)用性、擴(kuò)展性，可以將代碼拆分，以-小程序和App兩端舉例，一份部署到小程序，一份部署到App（Android&Ios）。

首先代碼拆分應(yīng)該保證本地開發(fā)的時(shí)候只有一套代碼，提取所有公共頁面，并且分別提取小程序和app的獨(dú)立JS方法，避免開發(fā)完小程序端vue，然后粘貼復(fù)制到App端的繁瑣操作。
直接看圖最清晰，拆分前目錄結(jié)構(gòu)：

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

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

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

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

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

拆分后，route.list.js中按public、mobile_app、wechat_mini 分別定義數(shù)組，這樣如果現(xiàn)在正在開發(fā)小程序端的vue，那么則將public和wechat_mini的數(shù)組合并到一起，開發(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ú)立部分的頁面拆分之后，進(jìn)一步分析代碼：App端和小程序端相互獨(dú)立的大多是支付功能，分享功能等涉及到需要原生處理的地方，并且會(huì)在多個(gè)頁面，多個(gè)業(yè)務(wù)中出現(xiàn)，那么就將App獨(dú)立的vue代碼拆分到一個(gè)公共JS中（app-common.js），將小程序獨(dú)立的vue代碼拆分到一個(gè)公共JS中（mini-common.js），在需要的頁面中引入即可。就商品購買支付功能為例：

拆分前：

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ì)有多層if else，代碼太冗余。

拆分后：

小程序端的商品支付購買頁面：

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端的商品購買支付頁面只需要將引入的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
  };
  
});

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: