摘要：層現(xiàn)在在前端開發(fā)中用的非常的多，舉個(gè)最簡單的例子，比如前端工程的搭建，都是圍繞于。

最近在閏土大叔的前端圈里有很多小伙伴南下杭州應(yīng)聘求職拿OFFER，貨比三家之后，最終入職了適合自己的公司，并且還拿到了不錯(cuò)的薪水。在這些小伙伴當(dāng)中，不乏剛剛大學(xué)畢業(yè)或者師出培訓(xùn)班的職場(chǎng)萌新，在順利找到工作之后，該如何在公司里體現(xiàn)前端的價(jià)值？你又該如何在前端圈里提高自己的議價(jià)能力呢？

別急，接下來且聽大叔娓娓道來。

今天我主要想講講前端工程，這是目前國內(nèi)的前端主流模式，這其中就包括了webpack 和 Vue.js。

webpack已經(jīng)是一個(gè)我們開發(fā)WEBAPP這種類型的項(xiàng)目的時(shí)候，離不開的工具。webpack能幫我們解決非常多的問題。作為一個(gè)前端開發(fā)人員，在可見的幾年內(nèi)，我們都需要去加強(qiáng)自己webpack的能力。或者說將來可能會(huì)出現(xiàn)一個(gè)類似于webpack，或者比它更強(qiáng)大的工具，那么這么一個(gè)工具是可預(yù)見的，肯定會(huì)存在的一個(gè)東西，而這個(gè)東西會(huì)在很長的時(shí)間內(nèi)成為我們前端去衡量一個(gè)開發(fā)人員的能力是否強(qiáng)大的一個(gè)標(biāo)準(zhǔn)。

Vue.js作為現(xiàn)在前端圈的框架里數(shù)一數(shù)二的存在，尤其是在國內(nèi)，用的非常多，應(yīng)該來說已經(jīng)超過了React的使用量。而且現(xiàn)在Vue.js依然處于一個(gè)非常好的社區(qū)氛圍當(dāng)中，它的開發(fā)速度，新的功能的增加速度都非常的快。然后它的BUG解決的效率也非常的高。

Vue.js的作者在他的發(fā)布過程當(dāng)中，為我們解決了非常多的在開發(fā)過程中遇到的工程問題，比如他給我們提供了.vue的開發(fā)模式，讓我們可以非常方便地去寫一個(gè)組件。然后官方發(fā)布了Vuex、Vue Router這些工具包，這在React中有相似的參照物像 React Router、Redux。這些工具包都是Vue.js官方去開發(fā)的，所以它的維護(hù)性會(huì)比React 中的第三方維護(hù)的要好很多。在這種情況下之下，國內(nèi)的很多工程師，在做前端項(xiàng)目之后，越來越多地選擇使用Vue.js作為開發(fā)框架。所以我們作為前端開發(fā)人員去學(xué)習(xí)Vue.js，是我們需要掌握的必不可少的技術(shù)棧。

在現(xiàn)在的前端開發(fā)當(dāng)中，重點(diǎn)和難點(diǎn)并不是我們的業(yè)務(wù)開發(fā)。因?yàn)榇蟛糠止镜臉I(yè)務(wù)并不會(huì)特別的復(fù)雜，而且每個(gè)公司當(dāng)中他們的業(yè)務(wù)是不一樣的。所以你在學(xué)習(xí)一門技術(shù)的時(shí)候，你如果花很多的時(shí)間去做業(yè)務(wù)開發(fā)，其實(shí)你的效率是非常低的，因?yàn)槟銢]有學(xué)到真正的內(nèi)容。

在公司中我們的前端應(yīng)用，也就是客戶端應(yīng)用，它是放在每一個(gè)人的電腦或者手機(jī)里面去跑的，每個(gè)人跑的都是多帶帶一份。所以它們的性能不會(huì)特別的高。因?yàn)楹芏嗟墓镜臉I(yè)務(wù)不會(huì)很復(fù)雜，不會(huì)像那種要在線編輯，PS圖片這種工具要求性能會(huì)非常高。所以在性能不是特別大的問題的時(shí)候，我們更多要考慮的是工程化的問題。

所以我們?nèi)绾卧谇岸巳w現(xiàn)出自己的一個(gè)價(jià)值呢？接下來我們將圍繞以下四個(gè)Keywords來具體闡述：

首先，我們要學(xué)會(huì)如何在一個(gè)項(xiàng)目中去搭建工程。因?yàn)楝F(xiàn)在前端變得越來越復(fù)雜，不像是以前我們前端開發(fā)一個(gè)頁面，開發(fā)一個(gè)模板，一個(gè)簡單的DOM交互的動(dòng)畫，一些CSS樣式，這些東西我們寫好之后交給后端，他們?nèi)ヌ顢?shù)據(jù)就可以了。

那現(xiàn)在不一樣，現(xiàn)在的前端業(yè)務(wù)邏輯都在我們的工作范疇之內(nèi)，我們要去做很多的東西，比如說數(shù)據(jù)緩存，這時(shí)候我們必須要考慮一個(gè)工程化的概念。不然的話我們代碼太多，不好維護(hù)。

我們寫起來效率會(huì)非常低。而且我們現(xiàn)在的前端開發(fā)并不是所見即所得了，我們要使用ES6，使用LESS，這些東西我們都不能在瀏覽器里面直接跑，但是這些東西又可以加快我們的開發(fā)效率，所以我們希望去使用它。那么如何去平衡這兩者之間的關(guān)系，這就是我們?cè)谇岸斯こ讨行枰紤]的問題。

網(wǎng)絡(luò)優(yōu)化涉及到的更多的是基礎(chǔ)概念，比如說我們HTTP的理解，因?yàn)槲覀兯械撵o態(tài)資源都是通過HTTP去加載的，如何才能去加快我們HTTP使用的速度，如何去緩存我們的HTTP請(qǐng)求，這些東西只有我們理解了之后，才能更好的去優(yōu)化我們的前端工程。這些東西如何去做到，這也能體現(xiàn)出你的價(jià)值。

我們希望去減少HTTP請(qǐng)求，我們希望去壓縮靜態(tài)資源的文件，我們希望使用瀏覽器的長緩存，讓應(yīng)用的流量能夠變得更小，加載速度變得更快等等。

在我們做前端應(yīng)用之后，大部分項(xiàng)目的開發(fā)模式是前后端分離的，不是以前在瀏覽器里輸入一個(gè)URL，后端填數(shù)據(jù)操作HTML模板，然后返回給用戶的。這是我們以前看到的HTML頁面。

跟現(xiàn)在不一樣的是，我們跟后端的交互都是API請(qǐng)求，比如說JSON數(shù)據(jù)，這個(gè)時(shí)候我們要跟后端達(dá)成一個(gè)合作協(xié)議，因?yàn)锳PI是涉及到前端和后端的，我們是使用方，后端是提供方。如果后端提供的不好，那么我們前端使用起來就會(huì)非常的難用，所以這個(gè)我們要如何去跟后端進(jìn)行交流，需要我們?nèi)ダ斫夂蠖巳ラ_發(fā)一個(gè)API接口是如何去做的等一些簡單的概念。

如果你不懂這些，你無法去跟他們交流，那么你只能聽他們后端說，“ 這個(gè)東西你剛才說的我們做不到啊~ ”，然后你沒有辦法去反駁他。那這樣的話，就跟產(chǎn)品經(jīng)理走過來跟你說，這個(gè)需求一定要做，但你跟他說 “ 這個(gè)用前端技術(shù)實(shí)現(xiàn)不了的~ ” 這個(gè)概念其實(shí)是一樣的。

所以，如果你不希望做一個(gè)被忽悠的一方，那么你就要去了解他們這邊如何去做這個(gè)事情。

NodeJS現(xiàn)在在前端開發(fā)中用的非常的多，舉個(gè)最簡單的例子，比如前端工程的搭建，都是圍繞于NodeJS。比如我們的webpack，Gulp，Grunt等這些工具他們都是在NodeJS環(huán)境里面去運(yùn)行的，不是在我們前端環(huán)境里面去運(yùn)行的。所以你要有基本的NodeJS使用的概念。你要去學(xué)這些東西，至少要知道如何用NodeJS去寫一個(gè)腳本，讓它在我們的Terminal命令行里面去跑起來。只有這樣才能把我們的前端工程去運(yùn)行起來。

同時(shí)有很多公司已經(jīng)把NodeJS運(yùn)用起來，他們會(huì)在前端和后端的API層之間，去加一個(gè)NodeJS層，用NodeJS去做一些分發(fā)，數(shù)據(jù)處理，所以說，如果你希望你的前端議價(jià)能力越來越高，那么你必須要去學(xué)NodeJS的一些東西。而你在學(xué)NodeJS的過程當(dāng)中，又會(huì)去加強(qiáng)你的API定制的一些理解。當(dāng)你學(xué)到后端的開發(fā)之后，你對(duì)網(wǎng)絡(luò)的一個(gè)概念，對(duì)HTTP請(qǐng)求的概念，也會(huì)變得越來越深。所以，你現(xiàn)在去學(xué)NodeJS，性價(jià)比是非常高的。

說了這么多，我想告訴大家，你現(xiàn)在去學(xué)一門前端框架，固然非常重要，但是你不要把更多的時(shí)間去花在你使用這個(gè)框架去做業(yè)務(wù)開發(fā)上面，業(yè)務(wù)開發(fā)不會(huì)特別的復(fù)雜，或者說它需要你的知識(shí)能力并不會(huì)特別的高。

很多童鞋知道，如果公司要使用Vue.js框架，會(huì)使用vue-cli這個(gè)腳手架工具，給我們?nèi)ド梢粋€(gè)項(xiàng)目。生成項(xiàng)目之后，你只需要去寫一個(gè)項(xiàng)目就OK了，你的項(xiàng)目就會(huì)跑起來。

但是你要知道，使用vue-cli生成的項(xiàng)目，在很多公司里面，是沒有辦法直接投入到生產(chǎn)環(huán)境當(dāng)中的，因?yàn)樗且粋€(gè)廣泛適用的模板，但是每個(gè)公司在業(yè)務(wù)上是不同的，他們肯定多多少少會(huì)在這個(gè)工程有一些定制的需求。

那這個(gè)時(shí)候如果你沒有辦法去理解vue-cli這個(gè)項(xiàng)目是怎么跑起來的，那么你就沒有辦法去定制它，去修改它。那么這個(gè)時(shí)候，你就沒有辦法去撐起一個(gè)公司的前端部門的項(xiàng)目搭建這個(gè)工作，那么你的前端議價(jià)能力會(huì)變得比較的低。而vue-cli生成的項(xiàng)目其實(shí)就是基于一個(gè)webpack的前端工程，那么它里面涉及到的東西你就要去理解去學(xué)習(xí)它。這樣才能把你的價(jià)值往上去提升。

所以，當(dāng)你在公司中體現(xiàn)出你作為前端的價(jià)值來之后，你的議價(jià)能力也會(huì)隨之水漲船高，得到提升，這是一個(gè)相輔相成的過程。

謹(jǐn)以此文，與君共勉。

最后，想看閏土雜談系列文章，歡迎關(guān)注我的公眾號(hào)：閏土大叔。