360前端星計劃-前端工程化

什么是前端工程化

工程化是一種思想
解決低效、繁瑣問題

一、規(guī)范化

git

222.jpg

本章參考

二、模塊化

css模塊化解決?案

核?思想：通過樣式?效規(guī)則來避免沖突。

js模塊化解決?案

nodejs commonjs 
require()
module.exports = xx;
ES
import {M} from './a.js'   //b.js
export function() M(){ retrun 1};   //a.js

本章參考

https://huangxuan.me/2015/07/09/js-module-7day/
? https://github.com/seajs/seajs/issues/588
? https://juejin.im/post/5aaa37c8f265da23945f365c
? https://yuguo.us/weblog/javascript-module-development-history/
? http://es6.ruanyifeng.com/#docs/module-loader
? https://juejin.im/post/5bb6c5195188255c9e02e6f3
? https://juejin.im/entry/59a5538b6fb9a02481206f22
? https://dom.spec.whatwg.org/#shadow-trees
? https://www.w3.org/TR/shadow-dom/

三、組件化

組件化和模塊化的核?思想都在于分治，實際帶來的好處就是團隊協(xié)作效率和項?可維護性的提升。
組件化開發(fā)是Web開發(fā)的趨勢。
什么是組件？

UI為主

??上的?個UI塊可以封裝成?個組件。?如??的頭部，封裝成?個Header組件后，我希望它的腳本、樣式和模版可以放在?個?件夾中，到時候便于維護。

邏輯為主

某?個功能邏輯也可以封裝成?個組件。?如AutoComplete組件，封裝成?個組件后，我希望它的腳本、樣式和模版可以放在?個?件夾中，可以?處封裝，多處任意使?。
組件
在Web前端領域，我們可以將由特定邏輯和UI進?的?內聚，低耦合的封裝體稱為?個組件。
1）側重UI進?封裝的組件：代碼結構清晰，組件內的模塊就近放置，?便進?修改和維護。這種組件具備?內聚，低耦合的特性，但普適性不?。
2）側重邏輯進?封裝的組件：除了具備上述優(yōu)點外，還具有很?的普適性，更?便組件重?。
3）組件內可以包含組件，?如偏UI的組件往往都是包含有偏邏輯的組件。
規(guī)范化、模塊化、組件化是否符合前端?程化的?的——提效

本章參考

? https://jiongks.name/slides/css-scoping/
? https://zhuanlan.zhihu.com/p/42370005
? https://zhuanlan.zhihu.com/p/48811872
? https://www.webcomponents.org/introduction

四、?動化

核心思想

能由機器?動完成的事情，絕不讓?來做。?動化是前端?程化核?。

  • ?動初始化 eg. : vue-cli
  • ?動構建（打包） eg.: webpack
  • ?動測試 eg.: karma, jest
  • ?動部署 eg.: Jenkins

本章參考

?https://juejin.im/entry/5b286a126fb9a00e45113435
? https://ithelp.ithome.com.tw/articles/10192300
? http://fis.baidu.com/fis3/index.html

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容