富貴教你寫程式碼之前端早下班系列（一）

原文連線: 沈富貴的BLOG

程式碼自動生成工具

概述

為什麼會想著去寫這個東西，主要還是因為懶在3家創業公司待過每次都是遍體鱗傷，工作很累。老闆想2，3個人去實現別人公司幾十人才能完成的軟體工作。而且還要求你快，每天8小時肯定是完不成啊這就出現了自願加班原則而且不給加班費。

有段時間我在思考一個問題：像這樣的專案，我不能按時完成是我的技術問題還是公司問題還是其他的問題。那換種思路，假設讓一個阿里的大牛自己一個人去搭建一個軟體平臺（比如一套B2B2C商城系統）1，2個月應該是搭不完的。那麼多業務邏輯主要還是時間問題，技術上其實也不算特別複雜。

反思

1、初創團隊沒有技術沉澱（無可複用元件和規範化程式碼）

2、團隊內部磨合差，技術棧不統一。能力也不統一

3、缺乏凝聚力和團隊使命感

---

程式碼自動生成工具思路

1、常用程式碼塊的封裝

2、通過JSON配置檔案自動生成程式碼

3、字串模版

一、以表格為例子

開發管理後臺，表格形式的列表出現的頻率最高，我們先拿它下手。

我先安裝一個小的依賴包。

npm install clipboard

複製程式碼

然後寫一個工具方法，clipboard.js

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() {
  Vue.prototype.$message({
    message: 'Copy successfully',
    type: 'success',
    duration: 1500
  })
}

function clipboardError() {
  Vue.prototype.$message({
    message: 'Copy failed',
    type: 'error'
  })
}

export default function handleClipboard(text, event) {
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    clipboardSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    clipboardError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}

複製程式碼

呼叫方式

1、 <el-button @click='htmlCopy("", $event)'>獲取表格html</el-button>

2、  import clip from './../../utils/clipboard'

3、htmlCopy(text, event) {
        const tableData = this.tableData
        const tableRow = this.tableDataObj
        const tbaleHtml = temp.tableToHtml(tableData, tableRow)
        clip(tbaleHtml, event)
        this.test = tbaleHtml
   }

複製程式碼

把json串生成對應的表格並且通過ES6的新特性把它轉換成對應的html

// 生成的json串資料
{"tableData":"music","rowData":[{"rowName":"ID","rowData":"id","rowWidth":"100"},{"rowName":"名稱","rowData":"name","rowWidth":"200"},{"rowName":"狀態","rowData":"status","rowWidth":"80"}]}

複製程式碼

  /**
   * @param tableData 表格資料來源
   * @param tableRow  表格行資訊
   * @returns {string}   表格的html模版
   */
  tableToHtml: (tableData, tableRow) => {
    var tableRowData = tableRow
    var rowStr = ``
    // 表格列資料拼接
    for (let i = 0; i < tableRow.rowData.length; i++) {
      const tempData = `
              <el-table-column
                header-align="center"
                prop="${tableRowData.rowData[i].rowData}"
                label="${tableRowData.rowData[i].rowName}"
                width="${tableRowData.rowData[i].rowWidth}">
              </el-table-column>
      `
      rowStr += tempData
    }
    var templat = `
    <el-table
              ref="multipleTable"
              :data="${tableData}"
              stripe="true"
              tooltip-effect="dark"
              style="width: 100%;margin-top: 20px;text-align: center;border-radius: 5px;"
              @selection-change="handleSelectionChange">
              <el-table-column
                header-align="center"
                type="selection"
                width="55">
              </el-table-column>
              ${rowStr}
              <el-table-column label="操作" header-align="center">

                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
                </template>
              </el-table-column>

            </el-table>
    `
    return templat
  },
  // 表格中需要的資料
  tableToData: (tableData, tableRow) => {
    var templat = ``
    var rowStr = ``
    for (let i = 0; i < tableRow.rowData.length; i++) {
      const tempData = `${tableRow.rowData[i].rowData}: '',
      `
      rowStr += tempData
    }
    templat = `
      ${tableData}: '',
      ${rowStr}
    `
    return templat
  }

複製程式碼