背景
随着互联网技术的不端推进，以及业务场景的越来越复杂，前端应用场景的越来越多元化，而且随着前后端技术的分离，可以预期的是目前的前端技术走向的趋向将是多端技术的统一，智能搭建，中后台思想，这次主要为前端的工程化做一次简单的介绍。
前端的全栈领域
在旧时代的公司里多数是没有前端工程师这个概念的h5作为一个基础技能被简单囊括在了工程师的技术栈内被多数后端工程师应用，类似之前的spring mvc 是基础技能，由后端工程师开发，到现在随着前端技术的不断进步，以及预编译语言的出现，es6 为 javascript 语言提供了类似 import export promise await const async 装饰器。 typescript甚至提供了 interface 以及 类型检验这种几乎和java一摸一样的语法 为前端工程化提供了坚实的基础，所以现在前端应用也可以像后端应用那样开发，而随着nodejs技术的不断推进不论是作为一门后端语言也好，前端应用开发也好都为前端工程师提供了越来越多的
这是一个request
随着微服务以及分布式概念的崛起node 在服用应用层已经不仅仅可以作为一个web容器而发挥作用了，更多的可以作为一个web中间件层插入到整个通讯周期内部。
包的概念
js 包的概念从最原始的闭包，requirejs 的模块化，到现在npm包的路程一路演变，可以说包的概念是一路演变逐渐统一的过程但是一个js 的包与java 的包由于语言上的差别最终的产出还是完全不同的，我们通常可以将nodejs 的包，一个包的设计根据中心法则我们可以分为
entity,boundry,dependency
对于一个entity而言他通常代表这个这个包内的固定属性，比如我们定义这个包的功能是处理账单交易的，那么对于这个包而言账单就是他所对应的实体，交易就是他要处理的功能，对于这个功能我们要进行边界划分什么是他应该做的，一般而言我们需要对一个业务进行域的划分，交易可能涉及的有钱，货，人，和交易规则，如果我们讲这个包划分的只是一个计算交易金额的包，那么结算，订单，物流我们就应该重新开启一个新的包，在此之前我们应该先画一张时序图，通过流程来划分，从一个实体到另一个实体之间流程变化产生的业务逻辑做为划分，这个通常需要我们对操作拟人化来处理，假设会到古时候没有计算机的时候，交易的结算都是流转到各个人身上去处理的，现在我们需要的是拟人化。
对于依赖这个向来都是管理最混乱，当我们业务里的某一块功能需要我们其他业务支撑，比如算法啊或者组件啊这种，或者第三方业务支撑，一把来说我们内部业务支撑的放在dependencies内部，而工程构建用的比如eslint，webpack放在我们的devDependencies，通常一个包内部必须有文件，index src 和 lib 通常在前端语言未有部署的情况下我们在src里定义我们的entity，core，component，util等等，在打包编译成可以外部在cdn 部署的js文件时有打包工具生成一个lib包，一般我们的index只需要通过require语法就可以引用我们的包了，最终部署到cdn之上的也是我们这种包。
组件化治理
这个是一个老生常谈的事情的现在我们已经有很多mvc框架了，比如使用typescript的ag，es6的react。但是如何划分一个组件事实并没有一个合理的划分。
第一步：找出重复的部分
第二步：讲一个过于重的组件的功能仅可能的迁移到另一个轻组件上
第三步：出去多余的临时变量，对于那些只赋值一次的不要再次赋值
第四步：尽可能的在render少写if else，对于那些使用if else 的尽可能使用语义化的组件替代，通常情况下如果一个组件里有超过三个以上的判断逻辑的化就有必要拆成小组件以便于理解
第五步：不要为了少些几行代码而将不同的业务逻辑柔和在一起写，对于同样结构的组件不同逻辑的给予不同props 小组件，小组件里只有结构没有逻辑，对于不同逻辑的直接两个组件
第六步：读写分离，对于代码中的计算部分超过五行以上拆成一个函数
感悟
想想就先写这么多吧，后面有时间再完善这篇顺便附赠一篇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" ]
}
}
网友评论