Vueの2.0 G取引復興プロジェクト経験の共有

著者：ジェシーの雨

プロジェクトの背景：

G取引H5は多端子ゲームトレーディング・プラットフォームで実行されています。プロジェクトの開発ニーズの効率を改善するための機能や製品のアップグレードのレベルに基づいて、いくつかの時間前、私はVUEとのWebPACKとの緩やかな再構成を持っていました。それは、各サイクルのページ変換の一部でしかありません、プログレッシブいわゆる、他のサービスの行動に影響を与えません。この時間は、私は私の買い/オーダーリストと私は販売注文の詳細を変更しました。

主に以下の点で共有：

コアテクノロジー
コンポーネントの実装
データ管理
コードレベルのポイントの改善
遭遇ピット
継続的な最適化のポイント

コアテクノロジー

再建に使用されるコア技術はvue2.0とwebpack1.0です。その横に簡単に。

Vue.jsフレームは緩やかなビルド・ユーザー・インターフェースです。他のヘビー級のフレームは、Vueのインクリメンタル開発のボトムアップ設計異なっています。Vueのコアライブラリのビュー層にのみ焦点を当て、そして学ぶことは非常に簡単です。具体的に公式サイトにその使い方を学びます。

WebPACKの今日は、最も人気のあるフロントエンドのリソース管理とモジュラーパッケージングツールである、それはルールに従ってパッケージ緩いモジュールの多くなると本番環境の導入を満たすために、フロントエンドリソースに依存することができ、それはまた、実際のまで、需要モジュールのコード分割にロードすることができます際に必要として、非同期的にロードされました。

相互に依存するモジュールファイルを見て、この絵の公式のWebPACKに図の導入は、あなたがHTTPリクエストの数を減らすことができ、一個の以上のjsファイルにパッケージ化されます。

WebPACKの特定の使用は、参照することができ公式サイト。

ヴューの再構築バージョン使用のWebPACKは1.13.2で、2.1.0です。

ディレクトリ構造：

  gmmh5
  |-- build //构建目录
  |    |-- build.js   
  |    |-- dev-client.js      
  |    |-- dev-server.js  
  |    |-- HashedModuleIdsPlugin.js 
  |    |-- utils.js  
  |    |-- webpack.base.conf.js  
  |    |-- webpack.dev.conf.js  
  |    |-- webpack.prod.conf.js  
  |-- config //配置文件
  |-- dist //打包后的文件
  |-- src //源码目录
  |    |--assets           // 静态资源
  |    |--biz           // 页面配置文件
  |    |--common           // 公共方法
  |    |--components           // 基础组件
  |    |--constants             
  |    |--modules           // 业务组件
  |    |--pages           // 页面
  |    |--utils           // 工具函数

どのようにコンポーネント化？

それらを表示しない利点のコンポーネント、単一責任、スケーラブルで、メンテナンスが容易...

まず第一に私は、これら2つのページが機能し、プレゼンテーションコンポーネントによって分割されていると述べています。

選択されたアイテムのタイプ、トランザクションのスイッチング状態、データのリストとレンダリングコンポーネント：順序の3つのコンポーネントに分けることができる機能に応じて上から下へ、ページの次のページを一覧表示します

選択型部品商品の種類を選択しgoodsTypeを変更する責任があり、トランザクションのステータスの変化状態の切り替えコンポーネントは状態を変更する責任があり、2つのコンポーネントはapp.vue文書をインポートするために渡されたパラメータを変更し、データのリストを取得するには、インポート文書を担当し、その後、データ転送データを表示するリストを担当するコンポーネントをリストします。以下に示すようにデータの流れ：

注文の詳細は、同じアプローチです。

$上のVUEを通してサブアセンブリによって次支柱に送信コンポーネントサブアセンブリの親コンポーネント間の通信上のデータは、$親コンポーネントと通信するイベントインターフェイスを発します。兄弟コンポーネントまたはアセンブリより深いレベルは、現在の場合に通信するEventBusを使用vuex使用していません。次のように具体的な動作は以下のとおりです。

まず、イベントbus.jsという名前EventBusという名前の新しいグローバルVueのインスタンスを作成し、オブジェクトをエクスポートします。

import Vue from 'vue'
var EventBus = new Vue()
export default EventBus

Vueが同時に組立AとEventBusで導入します。このコンポーネント「emitMethod」のメソッドが呼び出されると、イベント「EVENT_NAME」をトリガし、「ペイロード」パラメータを渡します。

import Vue from 'vue';
import EventBus from 'event-bus'
Vue.component('component-a', {
  ...
  methods: {
    emitMethod () {
       EventBus.$emit('EVENT_NAME', payLoad);
    }
  }
});

別の成分Bでは、私たちは「EVENT_NAME」にEventBusで配信するイベントをリッスンするイベントリスナーを登録することができます。

import Vue from 'vue';
import EventBus from './event-bus';
Vue.component(‘component-b’, {
  ...
  mounted () {
    EventBus.$on('EVENT_NAME', function (payLoad) {
      ...
    });
  }
});

B成分、あなたは過剰なレベルの問題を考慮することなく、イベントのトリガアセンブリを聞くことができるように。

データ管理

複雑なプロセスのための詳細ページの一部が、それは商品の種類や取引状況の値に依存することを示しています。

アカウントはまた、旅行の手の移動端、外側の委託アカウントに分割され、Gは、以下のページH5販売アイテムタイプを有しています。クーポンはまた、マッチポイント、クーポン、クーポンタイプの共通点を有しています。図より処理錯体における商品の実際の型。

各製品タイプ、アカウントステータスの前記最大値の異なる状態値が存在します。商品の種類や状態の値が一緒にページの内容が表示されるかを決定：ステータス説明タイトル、トップ、テキスト、アイコン、および取引操作項目ボタンを。

このようなデータを処理し、論理ページと一緒に混合されていないために、私は、コンフィグレーションテーブルにそれを作ります。コードの一部を次のように

const account = {
  '1': {
    'title': '待付款',
    'topImg': imgState.wait,
    'topMsg': topMsgSource.fromFixTxtByFunc,
    'btns': [btn.cancel, btn.pay]
  },
  '2': {
    'title': '付款成功',
    'topImg': imgState.trade,
    'topMsg': topMsgSource.fromFixTxtByFunc,
    'btns': [btn.refund, btn.selectCheckType]
  },
  ...
}

アカウントの種類に代わって商品のアカウントの種類。「1」、「2」の状態値です。

インタフェースの値がgoods_typeとstate_to_out、ステータス値を取引する商品や商品の種類、すなわちのうち、データの詳細、詳細を取得する際に店舗一覧ページを呼び出します。次に、設定ファイルの設定ファイル内の対応するデータを取得します。たとえば、タイトルの状態の見出しの説明をしてください。

const vm = this
let goods_type = vm.detail.goods_type
let state_to_out = vm.detail.state_to_out
title = vm.config[goods_type][state_to_out]["title"]

利点は、構成テーブルの変更を変更することができ作ることは明らかです。

コードレベルのポイントの改善

コードの重複を減らします

そこにある元のコード、：ときに変更を漏洩した場所を変更した場合、複数の場所でコードのコピーは、多くの場合、知りません。私は、抽象パッケージコードロジックを繰り返し、再び重複したコードの多くを整理します。

多くの機能のように操作ボタンの後、それはAjaxはページを更新呼び出しますので、私は、単一の関数を記述し、それを引き出します。

operateRefresh(url, params) {
      //通用方法 -- ajax后刷新页面
      const vm = this
      utils.get(url, params, (res) => {
        let data = res.data
        if (res.return_code === 0) {
          vm.refresh()
        } else {
          utils.toast(res.return_message)
        }
      })
}

単一責任の原則の製造方法

シングル責任はオブジェクト（メソッド）一つだけです。この方法は、あまりにも多くの責任、変更が他の業務の実現に影響を与える可能性が責任を引き受ける場合は、コードはより危険になっ変更します。

私は機能によっていくつかの大きな機能は、小さな機能機能に細分化されます変換。たとえば、ページのリストは、初期のものの時に行われるためには、次のとおりです。イベントリスナーおよびその他のコンポーネントのリストを取得するために、商品の初期化、データ検索インターフェースの種類を取得し、有料または売却注文を決定します：

created() {
    const vm = this
    // 判断用户是买家还是卖家
    vm.judgeRole()
    // 从url获取goods_type以及trade_mode
    vm.getUrlParams()
    // 获取列表数据
    vm.getList()
    // 监听事件
    vm.subscribeToEvent()
  }

遭遇ピット

ピットの再構成プロセスは、ピットを再構築するVue2.0と、この時間ものVueのいくつかに遭遇し、ビジネスの不十分な理解のために多くの原因が発生しました。

Vueのプロパティゲッター/セッター変換プロセスで実行、そうするので、その変化を検出できるようにするインスタンスVueの変換を初期化するときに、プロパティは、データオブジェクト上に存在しなければなりません。Vueが属性が検出または削除することはできません追加しています。私は、データのビジネスセクションの追加、および変更する属性でんだけど、この時点でいくつかの時間のため立ち往生Vueのを、再レンダリングには至りませんでした。その後、私はVue.set（オブジェクト、キー、値）メソッドは、それによって更新されたコンポーネントをトリガー、ネストされたオブジェクトに属性をするために応答します使用することができることを見出し、公式ドキュメントを読んで：

Vue.set(vm.someObject, 'b', 2)

また、Vueの非同期実行DOMの更新ので。限りデータの変更が認められたとして、Vueがキューを開くと、同じイベントループで発生するすべてのデータの変更をバッファリングします。複数が同じウォッチャーをトリガした場合、一度だけキューにプッシュ。あなたは、データの変更直後にDOMを更新する場合は、データが変更された直後Vue.nextTick（コールバック）を使用することができます。

Vue.nextTick(function () {
	// 数据变化
})

継続的な最適化のポイント

ビジネスが行われ、私はいくつかのポイントを最適化し続けることができますコンパイルしています。

パフォーマンス。あなたがキャッシュをより効率的に使用することができ、ファイルサイズの狭い部分を得ることができ、最初の画面には、レンダリング速度を向上させます。
経験。経験を強化し、プロンプトが表示されたら、ドロップダウン対話をリフレッシュするためにページを追加します。
データ・ストリーム。場合は、追加事業の統合では、データ・ストリームの構造設計は、より明確にします。
コンポーネント化。基部構成要素は、より抽象的、有益再利用することができます。

概要

この再建の後、私はビジネスのより深い理解と知識を持っている、そして、複雑なビジネスの顔にそれを認識停止し、明らかにはるかに重要な実践的なコードを書くよりも、ビジネスシーンについて考えます。

より深い理解と知識のためにもVueのでなく、自分で毎日の開発を思い出させるためには、継続的にエンコードする機能と、コードの品質を改善する必要があります。将来的には、より多くの復興事業の新規事業に統合するだけでなく、常に最適化し、他の分野で学習する必要があります。