element源碼學習一 —— 認識框架

時間  2019-11-08
標籤 element 源碼 學習 認識 框架 简体版
原文   原文鏈接
因爲面試須要，先來幾發 element 源碼學習博客。Vue 源碼還將繼續更新。

好，如今咱們開始學習 element —— 最受歡迎的 Vue UI 框架。css

package.json

我以爲要看一個前端項目，首先必須得看看 package.json 這個文件。html

編譯入口

來看看編譯的入口前端

"scripts": {
    # 安裝依賴
    "bootstrap": "yarn || npm i",
    # 構建文件
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
    # 構建樣式
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
    # 構建工具
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    # 構建umd
    "build:umd": "node build/bin/build-locale.js"
  }

這裏咱們以看源碼的角度，先了解構建文件命令。其實就是 node 執行了幾個 js 腳本。咱們深刻看下 iconInit、 build-entry、 i18n、 version 這些腳本文件。vue

// build/bin/build-all.js
'use strict';

const components = require('../../components.json');
const execSync = require('child_process').execSync;
const existsSync = require('fs').existsSync;
const path = require('path');

let componentPaths = [];

delete components.index;
delete components.font;

// 遍歷 components 的 key，找到相應 component 的路徑，將路徑保存到 componentPaths 數組
Object.keys(components).forEach(key => {
  const filePath = path.join(__dirname, `../../packages/${key}/cooking.conf.js`);

  if (existsSync(filePath)) {
    componentPaths.push(`packages/${key}/cooking.conf.js`);
  }
});

// pathA,pathB,pathC
const paths = componentPaths.join(',');
// 拼接爲 shell 命令，並調用 execSync 方法執行。
const cli = path.join('node_modules', '.bin', 'cooking') + ` build -c ${paths} -p`;

execSync(cli, {
  stdio: 'inherit'
});

以上方法主要是獲取全部組件名，而後拼接爲 shell 命令，執行 shell 命令進行 build。node

// build/bin/iconInit.js
'use strict';

var postcss = require('postcss');
var fs = require('fs');
var path = require('path');
var fontFile = fs.readFileSync(path.resolve(__dirname, '../../packages/theme-chalk/src/icon.scss'), 'utf8');
var nodes = postcss.parse(fontFile).nodes;
var classList = [];
// 遍歷匹配正則，符合則傳入到數組中
nodes.forEach((node) => {
  var selector = node.selector || '';
  var reg = new RegExp(/\.el-icon-([^:]+):before/); // 正則： .el-icon-(多個非:字符):before
  var arr = selector.match(reg);

  if (arr && arr[1]) {
    classList.push(arr[1]);
  }
});
// 導出 icon.json 文件
fs.writeFile(path.resolve(__dirname, '../../examples/icon.json'), JSON.stringify(classList));

以上方法經過解析 icon.scss 最終導出 icon.json 文件，該文件保存了各類圖標。webpack

// build/bin/i18n.js
'use strict';

var fs = require('fs');
var path = require('path');
// 獲取 page.json
var langConfig = require('../../examples/i18n/page.json');

langConfig.forEach(lang => {
  try {
    // 獲取文件信息
    fs.statSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  } catch (e) {
    // 建立文件夾
    fs.mkdirSync(path.resolve(__dirname, `../../examples/pages/${ lang.lang }`));
  }

  // 遍歷寫入文件
  Object.keys(lang.pages).forEach(page => {
    var templatePath = path.resolve(__dirname, `../../examples/pages/template/${ page }.tpl`);
    var outputPath = path.resolve(__dirname, `../../examples/pages/${ lang.lang }/${ page }.vue`);
    var content = fs.readFileSync(templatePath, 'utf8');
    var pairs = lang.pages[page];

    Object.keys(pairs).forEach(key => {
      content = content.replace(new RegExp(`<%=\\s*${ key }\\s*>`, 'g'), pairs[key]);
    });

    fs.writeFileSync(outputPath, content);
  });
});

以上代碼是國際化的過程，最終將會在 examples/pages/ 目錄中生成不一樣語言的內容。國際化具體內容請參照 國際化。git

生成結果

// build/bin/version.js
var fs = require('fs');
var path = require('path');
var version = process.env.VERSION || require('../../package.json').version;
var content = { '1.4.13': '1.4', '2.0.11': '2.0', '2.1.0': '2.1' };
if (!content[version]) content[version] = '2.2';
fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

獲取 version，定義了一個 content，若是當前版本不在 content 中，那麼再添加一個版本數據。因爲我學習的版本是 2.2.1，最終生成的結果是:es6

{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1","2.2.1":"2.2"}

出現這幾個版本號的緣由麼，看下官網就能發現端倪，應該是幾個重要的穩定版本。github

版本號

來看下 build-entry.js 文件web

// build/bin/build-entry.js
var Components = require('../../components.json'); // 組件數據
var fs = require('fs'); // node文件系統
var render = require('json-templater/string');
var uppercamelcase = require('uppercamelcase'); // 駝峯大小寫寫法
var path = require('path'); // node路徑系統
var endOfLine = require('os').EOL;

// 導出路徑
var OUTPUT_PATH = path.join(__dirname, '../../src/index.js');

// 導入template、安裝組件template、主要template
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.map(component => {
    Vue.component(component.name, component);
  });

  Vue.use(Loading.directive);

  const ELEMENT = {};
  ELEMENT.size = opts.size || '';

  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;

  Vue.prototype.$ELEMENT = ELEMENT;
};

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

module.exports = {
  version: '{{version}}',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  CollapseTransition,
  Loading,
{{list}}
};

module.exports.default = module.exports;
`;

delete Components.font;
// 組件名
var ComponentNames = Object.keys(Components);

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

// 遍歷組件名解析template
ComponentNames.forEach(name => {
  var componentName = uppercamelcase(name); // 駝峯命名

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

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

  if (componentName !== 'Loading') listTemplate.push(`  ${componentName}`);
});
// 主要template
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);

以上代碼中，先是定義了三個 template，而後使用 render 方法來渲染這些 template。最後生成一個主要 template 導出爲文件。render 函數中的第二個參數爲 template 中 {{name}} 的數據。
這個 render 方法來自 json-templater 庫，這個庫能夠將字符串編譯爲 js 代碼。

依賴關係

看看 element 都 depend 了些什麼？下面對 element 的依賴做了註釋。

"dependencies": {
    // 異步驗證器
    "async-validator": "~1.8.1",
    // vue和jsx合併參數的語法轉譯器？
    "babel-helper-vue-jsx-merge-props": "^2.0.0",
    // 深刻合併
    "deepmerge": "^1.2.0",
    // 鼠標滾輪在多個瀏覽器之間的標準化。
    "normalize-wheel": "^1.0.1",
    // 方法的 Throttle/debounce？ https://www.npmjs.com/package/throttle-debounce
    "throttle-debounce": "^1.0.1"
  },
  "peerDependencies": {
    // vue核心源碼
    "vue": "^2.5.2"
  },
  "devDependencies": {
    // 一個託管的全文、數字和分面搜索引擎，可以在第一次按鍵時提供實時結果。
    "algoliasearch": "^3.24.5",
    // babel
    "babel-cli": "^6.14.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-module-resolver": "^2.2.0",
    "babel-plugin-syntax-jsx": "^6.8.0",
    "babel-plugin-transform-vue-jsx": "^3.3.0",
    "babel-preset-es2015": "^6.14.0",
    // chai斷言庫
    "chai": "^3.5.0",
    // 爲服務器專門設計的核心jQuery的快速、靈活、精益的實現。
    "cheerio": "^0.18.0",
    // node fs工具
    "chokidar": "^1.7.0",
    // cooking前端構建工具
    "cooking": "^1.5.4",
    "cooking-lint": "0.1.3",
    // 繼承vue2配置項的cooking插件
    "cooking-vue2": "^0.3.3",
    // 複製webpack插件
    "copy-webpack-plugin": "^4.1.1",
    // 代碼測試覆蓋率
    "coveralls": "^2.11.14",
    // 跨平臺支持UNIX命令
    "cp-cli": "^1.0.2",
    // 運行在平臺上設置和使用環境變量的腳本。
    "cross-env": "^3.1.3",
    // css 加載器
    "css-loader": "^0.28.7",
    // es6 promise支持
    "es6-promise": "^4.0.5",
    // eslint語法檢測
    "eslint": "4.14.0",
    "eslint-config-elemefe": "0.1.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^4.0.1",
    "eslint-plugin-json": "^1.2.0",
    "extract-text-webpack-plugin": "^3.0.1",
    // 文件加載和保存
    "file-loader": "^1.1.5",
    "file-save": "^0.2.0",
    // 將文件發佈到github的 gh-pages 分支
    "gh-pages": "^0.11.0",
    // gulp打包
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-postcss": "^6.1.1",
    "gulp-sass": "^3.1.0",
    // js 高亮
    "highlight.js": "^9.3.0",
    // html加載器
    "html-loader": "^0.5.1",
    // html webpack插件
    "html-webpack-plugin": "^2.30.1",
    // A Webpack loader for injecting code into modules via their dependencies
    "inject-loader": "^3.0.1",
    // isparta instrumenter loader for webpack，用於測試
    "isparta-loader": "^2.0.0",
    // json加載器
    "json-loader": "^0.5.7",
    // json和js的模板生成工具
    "json-templater": "^1.0.4",
    // karma測試庫
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.2.0",
    "karma-sinon-chai": "^1.2.4",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^1.8.0",
    // 用於管理具備多個包的JavaScript項目的工具。
    "lerna": "^2.0.0-beta.32",
    // 模擬時間工具
    "lolex": "^1.5.1",
    // markdown解析器
    "markdown-it": "^6.1.1",
    "markdown-it-anchor": "^2.5.0",
    "markdown-it-container": "^2.0.0",
    // mocha測試庫
    "mocha": "^3.1.1",
    // node.js 的 sass
    "node-sass": "^4.5.3",
    // 視差滾動 https://perspective.js.org/#/zh-cn/
    "perspective.js": "^1.0.0",
    // postcss
    "postcss": "^5.1.2",
    "postcss-loader": "0.11.1",
    "postcss-salad": "^1.0.8",
    // node深度刪除模塊
    "rimraf": "^2.5.4",
    // sass加載器
    "sass-loader": "^6.0.6",
    // sinon測試框架
    "sinon": "^1.17.6",
    "sinon-chai": "^2.8.0",
    // 樣式加載器
    "style-loader": "^0.19.0",
    // utf-8 字符轉換
    "transliteration": "^1.1.11",
    // 駝峯寫法
    "uppercamelcase": "^1.1.0",
    "url-loader": "^0.6.2",
    // vue
    "vue": "^2.5.2",
    "vue-loader": "^13.3.0",
    "vue-markdown-loader": "1",
    "vue-router": "2.7.0",
    "vue-template-compiler": "^2.5.2",
    "vue-template-es2015-compiler": "^1.6.0",
    // webpack
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.1",
    "webpack-node-externals": "^1.6.0"
  }

阿西吧，這依賴庫真心多~~不知道他們如何找到這麼多庫的。

src目錄

再來看看項目結構部分。按常理源碼確定是放在 src 目錄中的，咱們找到 src/index.js。代碼有點長，只貼出 install 方法部分了。說下都幹了什麼：導入全部組件，定義安裝方法，判斷環境執行 install 方法，最後總體導出。

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

  components.map(component => {
    // 遍歷將組件加入到Vue中
    Vue.component(component.name, component);
  });

  // 加載中
  Vue.use(Loading.directive);

  const ELEMENT = {};
  ELEMENT.size = opts.size || '';

  // 定義Vue的原型 prototype
  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;

  Vue.prototype.$ELEMENT = ELEMENT;
};

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

從組件的導入 import Button from '../packages/button/index.js'; 能夠看到全部組件都是在 packages 目錄下的。這部分咱們會在以後重點學習。
那麼問題來了，既然組件都在 packages 中了，那麼 src 目錄下都幹了些什麼呢？來看看各個目錄的功能：

  • directive 實現滾輪優化和避免重複點擊。
  • locale 用於 i18n 國際化功能。
  • mixins 看樣子應該是用於混合到 Vue 實例的 options 中的。
  • transition 在渲染是操做style作過渡效果處理。
  • utils 工具文件夾。

主要目的是項目結構，就不深刻展開了。若有須要後面再講。

其餘目錄

上面說過，package 目錄中存放了全部 component 組件的代碼。另外也存放了組件的樣式 .scss 文件。
而對於type目錄中，存放的 .ts 文件。都是 TypeScript 文件。可是有個問題，我不太清楚這些 .ts 都用在何處。並且在 package.json 中也未導入 TypeScript 的庫，只是在更新日誌中有 新增 TypeScript 類型聲明 這麼一句話。這點有所疑惑。
test 目錄下是各個組件的單元測試用例，這部分是學習單元測試寫法的很好的參考代碼（我學習測試框架就是在這裏學的）。須要學習單元測試的能夠深刻看看。
example 目錄下是 element 的示例項目。咱們的目的是學習源碼，因此這部分先忽略~

最後

簡單瞭解了下項目的編譯、項目的依賴庫狀況、項目的機構。下一篇開始學習一些組件的實現。逐步深刻扒開element的神祕面紗。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程