ヴューへの浅い深い：自動ルーティング

ソフトウェア開発の過程では、「オートメーションは、」発生の単語の出現頻度が比較的高いです。自動テスト、自動データマッピング、およびコードジェネレータのすべての種類。これらの言葉の背後に、また、ソフトウェア開発の過程でそれらのために、ことを示して繰り返され、ステレオタイプのものを。人々は常に我々の手を解放するために、それを自分で作りたいです。

「怠惰」は進歩の原動力であります

なぜ自動ルーティング

自動化されたルーティングは、次の質問に対処することです。

たびの新しいページを繰り返します。ルートファイルに対応するルートにオブジェクトを追加します。
ルーティングと結合コード：特定の経路は、経路が対応するオブジェクトを変更するために必要とされるときに、ハードコードされたルートは、オブジェクトの経路に依存するが、変更されます。ルーティング階層は、経路が変化し、さらにはオブジェクトの配列に直面するかもしれないときに経路全体を書き換えることです。
ルート間でスキップする場合、ハードコードされました。

目的は、開発プロセスでは、開発者は2つのだけのことを行うことができ、非常に簡単です：

このルートの名前は
対応するディレクトリに作成された.vueファイル

開発プロセスは唯一の書き方を心配ルートオブジェクトを移動することなく、これらの2つのステップを実行する必要があります。

最初のステップは、さらに、当該小規模なプロジェクトのために無視することができます。

自動化されたルーティングルール

これらのルールは、他の部分は、プログラムを見ている参照するには、開発者の一部です：

ルーティングは、ディレクトリを指定する必要があります
ディレクトリをルーティング、それぞれの層（1あるフォルダが）必要があります持っているLayout.vue副経路を描画するために使用されているファイルを。
そのような指定などのディレクトリ、すなわち、その対応するルーティング、ルーティングアセンブリのパスsrc/viewsを含むフォルダsrc/views/admin/users：であり、対応するルーティングlocalhost/admin/users。
大文字と小文字を区別しないルーティングディレクトリ、小文字の治療に変換統一。

上記の我々が設定したルーティングルールを自動化されています。

定義

最初の3つのコンセプトを抽出：

自動化されたルーティング・プロバイダは、それが外部のオープンインタフェース、開発者は、それをすることができます使用する必要があります。

ビューは、そのようなパス名など、アセンブリに関する情報のビューを指します。

ルーティング、ルーティングが発生するため、ビューを解析した後、オブジェクトに対応する手段vue-routerルートオブジェクト。

開発を始めました

コードが長すぎるので、コードにそこにアップロードされGithub、行くと見ることができる子供用の靴に興味を持っています。
ここで唯一重要な部分を全体的なプロセスを説明し、コードのアイデア。

まずによってrequire.context指定されたディレクトリのすべての取得.vueファイルを。
そして、ディレクトリ構造に低減され、プレフィックスによる並べ替え操作。
ディレクトリ構造の減少によって、解決のために。
解析された構造は、ルーティング・オブジェクトに変換されます。

最も重要な領域の1つはであるrequire.contextファイルのリストを取得するために、元のツリー構造に削減。

ツリー構造の後に対応するルーティングツリー生成されたオブジェクトにすることができます。

まず、ポストの深い文書の深さ、最初の浅い深さに応じてソートされたファイルのリストを並べ替えます。

_getViews(dir) {
    let views = [];

    let keys = dir.keys();
    for (let index in keys) {
        let path = keys[index];
        let component = dir(path);
        views.push(View.create(path, component.default || component))
    }
    views = views.sort((x, y) => { return x.Deep  > y.Deep ? 1 : -1; });
    return views;
}

ソートされたリストのディレクトリ構造を復元します。

/**
 * 解析views,生成对应的目录结构
 * @private
 */
_generateDirectory() {
    for (let index in this._views) {
        let view = this._views[index];
        this._directory.addView(view);
    }
}

addView 方法：

addView(view) {
    if(this.isCurrentDirectoryView(view)) {
        this._views.push(view);
    } else if(this._isInSubDirectory(view)) {
        this._addInSubDirectory(view);
    } else {
        let newSubDirectory = this._createSubDirectory(view);
        newSubDirectory.addView(view);
        this._subDirectory.push(newSubDirectory);
    }
}

：ディレクトリの削減のための3つの可能性があるとき

このファイルは、現在のディレクトリ内のファイルです
このファイルは、カレントディレクトリにあるサブディレクトリを持っています
このファイルは、現在のディレクトリの下に、そして初のサブディレクトリです

ディレクトリの還元後、対応するルートは、オブジェクトディレクトリに応じて生成することができます。そして、あなたは、ビルド時に、このような案の開口部などの一部のカスタマイズのニーズを、行うことができます。

現在の文書がある場合はLayout.vueその電流ルートのデフォルトのルートルート
現在の文書がある場合はIndex.vue、デフォルトルートが現在の層内の空である（直接レンダリングルートルーティングエントリ）

使用router.js自動的に生成されるように、代替ルーティングオブジェクトを：

import Vue from 'vue'
import Router from 'vue-router'
import Generator from './routerGenerator/generator';

Vue.use(Router);

let generator = new Generator(require.context('./views', true, /\.vue$/));

export default new Router({
  routes: [generator.generate()]
})

次のようにディレクトリ構造は次のとおりです。

結果は以下の通りであります：

githubの住所：https://github.com/WhileKing/ea-router

NPM住所：https://www.npmjs.com/package/ea-router

NPMパッケージのインストール：

NPM私は、EA-ルータを