ソースコード構造の記事 - ElementUIソースの分析

コンポーネントライブラリの現在の使用の最も広くVueのPCのエンドとしてElementUI、部品ライブラリアーキテクチャVueの多くがそうElementUIを参照しています。夢（塩辛）とのフロントエンドとして、これはもちろん、多くの成熟したアーキテクチャを学ぶ必要があります。

ディレクトリ構造解析

まずは、と一般的には、ElementUIディレクトリ構造、ElementUIのディレクトリ構造を見てみましょうvue-cli2ほとんど差：

• .github：成熟したオープンソースプロジェクトが持っている必要があります店の貢献だけでなく、問題は、PRテンプレート、へのガイド。
• 構築：は間違いありません、フォルダの名前は、パッケージングツールの設定ファイルを格納している知って見に。
• 例：コンポーネントElementUIストレージの例。
• パッケージ：元の保存コンポーネントだけでなく、客観的な分析の主な情報源の後。
• SRC：ファイルストアの入り口、そして様々な書類。
• テスト：ストレージ・ユニットテスト、ユニットテストは必要も資格の成熟したオープンソースプロジェクトです。
• 種類：宣言ファイルストレージ、typescriptです書き込みプロジェクトの導入を可能にする、必要であるpackage.json有効にするに輸入書類の分野で宣言された値でタイピングを指定します。

フォルダのディレクトリを持って、それらの共通脇に置く.babelrc、.eslintcおよびその他の文書を、私たちは、ファイルのルートディレクトリのいくつかを見てはかなり奇妙に見えます：

• .travis.yml：継続的インテグレーション（CI）プロファイル、その役割は、文書によると対応するスクリプトを実行する1つは、必要なオープンソースプロジェクトを成熟、コードの時に提出されるべきです。
• CHANGELOG：更新ログは、ElementUIの暴君は、更新ログ4つの異なる言語バージョンを用意しました。
• components.json：WebPACKのパッケージ取得したファイルパスの組み立てを容易にするために、ファイルパス要素によって示されるプロファイル。
• element_logo.svg：ElementUIアイコン、SVG形式を使用して、SVGファイルの使用の合理化、あなたは大幅に画像サイズを減らすことができます。
• FAQ.md:ElementUI開発者の回答は、よくある質問します。
• ライセンス：MITライセンスを使用して、オープンソースライセンス、ElementUI、開発者のElementUI二次開発を使用するには、ファイルに注意を払うことをお勧めします。
• メイクファイル：ガイド.githubフォルダに記載され貢献、規範の開発中の第1成分：によるmake newコンポーネントのディレクトリ構造を作成し、テストコード、インポートドキュメント、ドキュメントを含みます。どちらmake newであるmake1のコマンド。make学生は多くの場合、LinuxはMakefileのに不慣れではありません使用し、エンジニアリングコマンドは、コンパイルツールで、Makefileは、ファイルの変異を開発する一連のルールを定義します。

エントランスのファイルの解析

次に、我々は、プロジェクトファイルの入り口を見てみましょう。前述したように、ファイルのエントリがありますsrc/index.js：

/* Automatically generated by './build/bin/build-entry.js' */

import Pagination from '../packages/pagination/index.js';
// ...
// 引入组件

const components = [
  Pagination,
  Dialog,
  // ...
  // 组件名称
];

const install = function(Vue, opts = {}) {
  // 国际化配置
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  // 批量全局注册组件
  components.forEach(component => {
    Vue.component(component.name, component);
  });

  // 全局注册指令
  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);

  // 全局设置尺寸
  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  // 在 Vue 原型上挂载方法
  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  version: '2.9.1',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  // 导出组件
};

全体的に、輸入書類を理解することは非常に簡単です。原因の使用にVue.use呼び出すプラグインが自動的に呼び出すメソッドinstallの機能を、それが中にのみ必要であるinstallグローバルに登録各種コマンド、コンポーネント、グローバルメソッドはマウントするバッチ機能。

私たちの研究の2つの非常に価値があるためElementUIエントリー書類：

1. 初期化中に、大幅に部品の使用を容易にグローバルプロパティを設定するためのオプションを提供し、コンクリートは私の以前の記事を参照することができます。
2. 自動生成・エントリのファイル

自動生成・エントリのファイル

のは、その前に、いくつかの学生が生成されたファイルを自動化するための入り口を見つけあり、自動化されたファイルを生成するための入り口についてお話しましょうか？それは入り口がファイル生成自動化されていたときに言って恥ずかしい、私はこの記事を書いていました。

のは、最初の文の入り口のファイルを見てみましょう：

/* Automatically generated by './build/bin/build-entry.js' */

これは、ファイルがされていることを教えてくれるbuild/bin/build-entry.js私たちは、このファイルに来たので、生成されました：

var Components = require('../../components.json');
var fs = require('fs');
var render = require('json-templater/string');
var uppercamelcase = require('uppercamelcase');
var path = require('path');
var endOfLine = require('os').EOL;

// 输出地址
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');
// 导入模板
var IMPORT_TEMPLATE = 'import {{name}} from \'../packages/{{package}}/index.js\';';
// 安装组件模板
var INSTALL_COMPONENT_TEMPLATE = '  {{name}}';
// 模板
var MAIN_TEMPLATE = `/* Automatically generated by './build/bin/build-entry.js' */

{{include}}
import locale from 'element-ui/src/locale';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';

const components = [
{{install}},
  CollapseTransition
];

const install = function(Vue, opts = {}) {
  locale.use(opts.locale);
  locale.i18n(opts.i18n);

  components.forEach(component => {
    Vue.component(component.name, component);
  });

  Vue.use(InfiniteScroll);
  Vue.use(Loading.directive);

  Vue.prototype.$ELEMENT = {
    size: opts.size || '',
    zIndex: opts.zIndex || 2000
  };

  Vue.prototype.$loading = Loading.service;
  Vue.prototype.$msgbox = MessageBox;
  Vue.prototype.$alert = MessageBox.alert;
  Vue.prototype.$confirm = MessageBox.confirm;
  Vue.prototype.$prompt = MessageBox.prompt;
  Vue.prototype.$notify = Notification;
  Vue.prototype.$message = Message;

};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  version: '{{version}}',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
{{list}}
};
`;

delete Components.font;

var ComponentNames = Object.keys(Components);

var includeComponentTemplate = [];
var installTemplate = [];
var listTemplate = [];

// 根据 components.json 文件批量生成模板所需的参数
ComponentNames.forEach(name => {
  var componentName = uppercamelcase(name);

  includeComponentTemplate.push(render(IMPORT_TEMPLATE, {
    name: componentName,
    package: name
  }));

  if (['Loading', 'MessageBox', 'Notification', 'Message', 'InfiniteScroll'].indexOf(componentName) === -1) {
    installTemplate.push(render(INSTALL_COMPONENT_TEMPLATE, {
      name: componentName,
      component: name
    }));
  }

  if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);
});

// 传入模板参数
var template = render(MAIN_TEMPLATE, {
  include: includeComponentTemplate.join(endOfLine),
  install: installTemplate.join(',' + endOfLine),
  version: process.env.VERSION || require('../../package.json').version,
  list: listTemplate.join(',' + endOfLine)
});

// 生成入口文件
fs.writeFileSync(OUTPUT_PATH, template);
console.log('[build entry] DONE:', OUTPUT_PATH);

build-entry.js使用json-templater来世は入り口ファイルになりました。ここで、我々は懸念していないjson-templaterだけで、この研究書のことを考え、用法。

これは、の導入によりであるcomponents.json私たちは、以前の静的ファイルは、部品のバッチ生産は、登録コードを導入している言及した本。そうであることの利点は何ですか？私たちは、もはやあなたが入学書類にいくつかの変更を行い、それぞれが追加またはコンポーネントを削除する必要はありません、オートメーションの使用後に生成されたインポート文書は、私たちは一つだけであることができ、変更する必要があります。

また、それは幽霊の話は言う：前述のcomponents.jsonファイルが自動生成されます。ここでは限られたスペースのため、我々は学生にそれに身を掘り下げする必要があります。

概要

悪いコードは異なりますが、アイデアは常に同じ良いコードで、それは、高いパフォーマンスと保守が容易で、コードプロジェクトの成長量と、多くの場合、簡単に保守コードの高性能よりもさらになく、維持することは困難ですより人気のあるコードは、高い凝集低カップリングたびに考えて、時代遅れになることはありません。

私はいつも私たちは盲目的に彼らの文言を模倣するのではなく、自分の考えから学ぶことではない、さまざまなソースを学ぶことを信じていました。結局のところ、コードの文言はすぐに、より優れた書面によって置き換えられますが、これらのアイデアは、最も貴重な資産となります。