소스 코드 구조 기사 - ElementUI 소스 분석

ElementUI 구성 요소 라이브러리의 현재 사용의 가장 널리 뷰 PC 끝으로, 구성 요소 라이브러리 아키텍처 뷰 많은 할 ElementUI를 참조한다. 꿈 (소금에 절인 생선)와 프론트 엔드로, 물론이 훨씬 더 성숙 된 아키텍처를 배울 필요가있다.

디렉토리 구조 분석

먼저,과 일반, ElementUI 디렉토리 구조에서, ElementUI의 디렉토리 구조를 살펴 보자 vue-cli2약간의 차이 :

• .github : 성숙한 오픈 소스 프로젝트가 있어야합니다를 저장하는 기여뿐만 아니라 문제, PR 템플릿, 가이드.
• 구축 : 의심의 여지가 없다, 폴더의 이름은 포장 도구 구성 파일을 저장 알아 볼 수 있습니다.
• 예 : 성분 ElementUI 저장의 예.
• 패키지 : 소스 저장 성분뿐만 아니라, 객관적인 분석의 주요 소스 후.
• SRC : 파일 저장소 입구, 각종 지원 서류.
• 시험 : 기억 부 검사 단위 테스트 자격 성숙한 오픈 소스가 필요한 투사도이다.
• 유형 : 선언 파일 저장, 타이프 라이터 쓰기 프로젝트의 도입을 활성화 필요가있다 package.json을 적용하려면 수입 문서의 필드에 선언 된 값에 입력을 지정할 수 있습니다.

폴더 디렉토리를 갖는, 그 공통 치워 버리고 .babelrc, .eslintc및 기타 문서를, 우리는 파일의 루트 디렉토리의 일부를 보면 오히려 이상한 같습니다

• .travis.yml : 연속 통합 (CI) 프로필, 그 역할은, 문서에있어서 대응하는 스크립트를 실행 한 필요한 오픈 소스 프로젝트 성숙 코드시에 제출한다.
• 변경 내역 : 업데이트 로그는 ElementUI의 폭군 업데이트 로그의 네 가지 언어 버전을 준비했다.
• components.json : 때 웹팩 패키지 취득 된 파일 경로의 조립을 용이하게하기 위해, 파일 경로 요소로 나타낸 단면도.
• element_logo.svg : ElementUI 아이콘의 SVG 형식, SVG 파일의 합리적인 사용을 사용, 당신은 크게 이미지의 크기를 줄일 수 있습니다.
• FAQ.md:ElementUI 개발자 자주 묻는 질문에 대한 응답.
• 라이센스 : 오픈 소스 라이센스, ElementUI는 MIT 라이센스를 사용하여 파일에주의를 기울 추천 개발자의 ElementUI 차 개발을 사용합니다.
• 메이크 : 가이드 .github 폴더에서 언급 기여, 규범의 개발에 첫 번째 구성 요소 : 에 의해 make new구성 요소 디렉토리 구조를 작성하는 테스트 코드, 수입 서류, 문서를 포함 . 어떤 make new는 IS make하나의 명령. make학생들이 종종 리눅스 메이크에 익숙하지 않아야 사용, 엔지니어링 명령은 컴파일 도구이며, 메이크 파일 돌연변이를 개발하는 일련의 규칙을 정의합니다.

입학 파일을 구문 분석

다음으로, 우리는 프로젝트 파일의 입구를보십시오. 앞서 언급 한 바와 같이, 파일 항목입니다 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세계적으로 등록 된 다양한 명령, 구성 요소, 글로벌 방법은 마운트 배치 기능.

우리의 연구의 매우 가치있는 두 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우리가 이전에 정적 파일, 구성 요소의 일괄 생산이 등록 코드를 도입하는 언급이. 그래서 IS 수행의 장점은 무엇입니까? 우리는 더 이상 입구 문서에 몇 가지 수정을, 각각의 구성 요소를 추가하거나 제거 할 필요가 없습니다, 자동화의 사용 후 생성 된 문서 가져 오기, 우리는 하나가 될 수 있습니다 수정해야합니다.

또한, 유령 이야기는 말한다 : 앞서 언급 한 components.json파일이 자동 생성됩니다. 여기에 사용할 수있는 제한된 공간으로 인해, 우리는 학생들에게 그것으로 자신을 탐구 할 필요가있다.

개요

나쁜 코드는 다르지만, 아이디어는 항상 같은 좋은 코드, 즉, 높은 성능과 쉬운 유지하기, 코드 프로젝트의 성장 양, 많은 경우에, 쉽게 유지 보수 코드 고성능보다 더 있지만 유지하기가 어렵습니다 대중적인 코드는, 높은 응집력이 낮은 커플 링 때마다 생각하고 쓸모 없게하지 않습니다.

나는 항상 우리가 맹목적으로 자신의 표현을 모방하는 것이 아니라 자신의 아이디어에서 배우고 다양한 소스를 배울 수 있다고 생각했습니다. 결국, 코드의 표현은 곧 더 뛰어난 쓰기로 대체 될 것이다, 그러나이 아이디어는 가장 가치있는 자산이 될 것입니다.