背景
隨著互聯(lián)網(wǎng)技術的不端推進，以及業(yè)務場景的越來越復雜，前端應用場景的越來越多元化，而且隨著前后端技術的分離，可以預期的是目前的前端技術走向的趨向?qū)⑹嵌喽思夹g的統(tǒng)一，智能搭建，中后臺思想，這次主要為前端的工程化做一次簡單的介紹。
前端的全棧領域
在舊時代的公司里多數(shù)是沒有前端工程師這個概念的h5作為一個基礎技能被簡單囊括在了工程師的技術棧內(nèi)被多數(shù)后端工程師應用，類似之前的spring mvc 是基礎技能，由后端工程師開發(fā)，到現(xiàn)在隨著前端技術的不斷進步，以及預編譯語言的出現(xiàn)，es6 為 javascript 語言提供了類似 import export? promise await const async? 裝飾器。 typescript甚至提供了 interface 以及 類型檢驗這種幾乎和java一摸一樣的語法 為前端工程化提供了堅實的基礎，所以現(xiàn)在前端應用也可以像后端應用那樣開發(fā)，而隨著nodejs技術的不斷推進不論是作為一門后端語言也好，前端應用開發(fā)也好都為前端工程師提供了越來越多的
隨著微服務以及分布式概念的崛起node 在服用應用層已經(jīng)不僅僅可以作為一個web容器而發(fā)揮作用了，更多的可以作為一個web中間件層插入到整個通訊周期內(nèi)部。
包的概念
js 包的概念從最原始的閉包，requirejs 的模塊化，到現(xiàn)在npm包的路程一路演變，可以說包的概念是一路演變逐漸統(tǒng)一的過程但是一個js 的包與java 的包由于語言上的差別最終的產(chǎn)出還是完全不同的，我們通常可以將nodejs 的包，一個包的設計根據(jù)中心法則我們可以分為?
entity,boundry,dependency
對于一個entity而言他通常代表這個這個包內(nèi)的固定屬性，比如我們定義這個包的功能是處理賬單交易的，那么對于這個包而言賬單就是他所對應的實體，交易就是他要處理的功能，對于這個功能我們要進行邊界劃分什么是他應該做的，一般而言我們需要對一個業(yè)務進行域的劃分，交易可能涉及的有錢，貨，人，和交易規(guī)則，如果我們講這個包劃分的只是一個計算交易金額的包，那么結(jié)算，訂單，物流我們就應該重新開啟一個新的包，在此之前我們應該先畫一張時序圖，通過流程來劃分，從一個實體到另一個實體之間流程變化產(chǎn)生的業(yè)務邏輯做為劃分，這個通常需要我們對操作擬人化來處理，假設會到古時候沒有計算機的時候，交易的結(jié)算都是流轉(zhuǎn)到各個人身上去處理的，現(xiàn)在我們需要的是擬人化。
對于依賴這個向來都是管理最混亂，當我們業(yè)務里的某一塊功能需要我們其他業(yè)務支撐，比如算法啊或者組件啊這種，或者第三方業(yè)務支撐，一把來說我們內(nèi)部業(yè)務支撐的放在dependencies內(nèi)部，而工程構建用的比如eslint，webpack放在我們的devDependencies，通常一個包內(nèi)部必須有文件，index src 和 lib 通常在前端語言未有部署的情況下我們在src里定義我們的entity，core，component，util等等，在打包編譯成可以外部在cdn 部署的js文件時有打包工具生成一個lib包，一般我們的index只需要通過require語法就可以引用我們的包了，最終部署到cdn之上的也是我們這種包。
組件化治理
這個是一個老生常談的事情的現(xiàn)在我們已經(jīng)有很多mvc框架了，比如使用typescript的ag，es6的react。但是如何劃分一個組件事實并沒有一個合理的劃分。
第一步：找出重復的部分
第二步：講一個過于重的組件的功能僅可能的遷移到另一個輕組件上
第三步：出去多余的臨時變量，對于那些只賦值一次的不要再次賦值
第四步：盡可能的在render少寫if else，對于那些使用if else 的盡可能使用語義化的組件替代，通常情況下如果一個組件里有超過三個以上的判斷邏輯的化就有必要拆成小組件以便于理解
第五步：不要為了少些幾行代碼而將不同的業(yè)務邏輯柔和在一起寫，對于同樣結(jié)構的組件不同邏輯的給予不同props 小組件，小組件里只有結(jié)構沒有邏輯，對于不同邏輯的直接兩個組件
第六步：讀寫分離，對于代碼中的計算部分超過五行以上拆成一個函數(shù)
感悟
想想就先寫這么多吧，后面有時間再完善這篇順便附贈一篇eslint贈與有緣人
======================= js lint =====================================
{
? "env": {
? ? "browser": true,
? ? "node": true,
? ? "es6": true
? },
? "globals": {},
? "plugins": [
? ? "import"
? ],
? "extends": [],
? "parser": "babel-eslint",
? "parserOptions": {
? ? "ecmaVersion": 6,
? ? "sourceType": "module"
? },
? "rules": {
? ? "array-bracket-spacing": [ "error", "never" ],
? ? "block-spacing": [ "error", "always" ],
? ? "brace-style": [ "error", "1tbs" ],
? ? "comma-spacing": [ "error", { "before": false, "after": true } ],
? ? "comma-style": [ "error", "last" ],
? ? "computed-property-spacing": [ "error", "never" ],
? ? "eol-last": [ "error" ],
? ? "indent": [ "error", 2, { "SwitchCase": 1 } ],
? ? "key-spacing": [ "error", { "beforeColon": false, "afterColon": true } ],
? ? "keyword-spacing": [ "error", { "before": true, "after": true } ],
? ? "linebreak-style": [ "error", "unix" ],
? ? "max-lines": [ "error", 500 ],
? ? "new-cap": [ "error", { "newIsCap": true } ],
? ? "new-parens": [ "error" ],
? ? "newline-after-var": [ "error", "always" ],
? ? "newline-before-return": [ "error" ],
? ? "newline-per-chained-call": [ "error", { "ignoreChainWithDepth": 2 } ],
? ? "no-mixed-spaces-and-tabs": [ "error" ],
? ? "no-multiple-empty-lines": [ "error", { "max": 2, "maxEOF": 1 } ],
? ? "no-spaced-func": [ "error" ],
? ? "no-trailing-spaces": [ "error", { "skipBlankLines": true } ],
? ? "no-underscore-dangle": [ "error" ],
? ? "no-whitespace-before-property": [ "error" ],
? ? "object-curly-spacing": [ "error", "always" ],
? ? "one-var": [ "error", "never" ],
? ? "operator-linebreak": [ "error", "after" ],
? ? "padded-blocks": [ "error", "never" ],
? ? "quote-props": [ "error", "as-needed" ],
? ? "quotes": ["error", "single"],
? ? "semi": [ "error", "never" ],
? ? "semi-spacing": [ "error", { "before": false, "after": true } ],
? ? "space-before-blocks": [ "error", "always" ],
? ? "space-infix-ops": [ "error" ],
? ? "space-unary-ops": [ "error", { "words": true, "nonwords": false } ],
? ? "spaced-comment": ["error", "always"],
? ? "unicode-bom": [ "error", "never" ],
? ? "arrow-body-style": [ "error", "as-needed" ],
? ? "arrow-parens": [ "error", "as-needed" ],
? ? "arrow-spacing": [ "error", { "before": true, "after": true } ],
? ? "constructor-super": [ "error"],
? ? "generator-star-spacing": ["error", { "before": false, "after": true }],
? ? "yield-star-spacing": [ "error", "before" ],
? ? "prefer-template": [ "error" ],
? ? "rest-spread-spacing": [ "error", "never" ],
? ? "template-curly-spacing": [ "error", "never" ],
? ? "comma-dangle": [ "error", "never" ],
? ? "space-before-function-paren": [ "error", "never" ],
? ? "no-var": [ "error" ],
? ? "object-shorthand": [ "error", "always" ],
? ? "no-duplicate-imports": [ "error" ],
? ? "import/export": [ "error" ],
? ? "import/imports-first": [ "error",? "absolute-first" ],
? ? "import/newline-after-import": [ "error" ],
? ? "no-unused-vars": [ "error" ]
? }
}
=============================? ? jsx? ?========================================
{
? "ecmaFeatures": {
? ? "jsx": true
? },
? "parserOptions": {
? ? "ecmaFeatures": {
? ? ? "jsx": true,
? ? ? "experimentalObjectRestSpread": true
? ? }
? },
? "plugins": [
? ? "react"
? ],
? "rules": {
? ? "jsx-quotes": [ "error", "prefer-double" ],
? ? "react/jsx-boolean-value": [ "error", "always" ],
? ? "react/jsx-closing-bracket-location": [ "error", "line-aligned" ],
? ? "react/jsx-curly-spacing": [ "error", "never", { "allowMultiline": true } ],
? ? "react/jsx-indent": [ "error", 2 ],
? ? "react/jsx-indent-props": [ "error", 2 ],
? ? "react/jsx-pascal-case": [ "error" ],
? ? "react/jsx-uses-react": [ "error" ],
? ? "react/jsx-uses-vars": [ "error" ],
? ? "react/prefer-es6-class": [ "error", "always" ],
? ? "react/prefer-stateless-function": [ "error" ],
? ? "react/self-closing-comp": [ "error" ],
? ? "react/jsx-space-before-closing": [ "error", "always" ],
? ? "react/jsx-equals-spacing": [ "error", "never" ],
? ? "react/jsx-wrap-multilines": [ "error" ],
? ? "react/no-multi-comp": [ "error", { "ignoreStateless": true } ],
? ? "react/no-direct-mutation-state": [ "error" ],
? ? "react/jsx-key": [ "error" ],
? ? "react/jsx-no-duplicate-props": [ "error" ],
? ? "react/no-unknown-property": [ "error" ]
? }
}
