——工欲善其事必先利其器
以下工具部分是windows和macOS通用飘千，如，sublimeText栈雳，webStorm等护奈；部分只使用于macOS。
MarkDown
那就先講一下寫這篇文章的編輯器好了哥纫。
現(xiàn)在無論是github
還是gitee(碼云霉旗，之前叫做git.os.china),
隨便新建項(xiàng)目還是打開一個(gè)知名的項(xiàng)目，都會(huì)有MarkDown文件蛀骇，就是通常的README.md厌秒，后綴是.md，如下圖：
還有很多牛逼的社區(qū),如segmentfault擅憔、stackoverflow也都支持這種格式的在線編輯鸵闪，
對那些經(jīng)常寫技術(shù)博客的的人是超級方便的，本文也是采用這種形式暑诸。
常用的編輯器如Mou欠动、MacDown酒请、MWeb等。
當(dāng)然喜歡折騰的你，也可以集成到Atom橄抹、webstorm、sublimeText等你喜歡的編輯器中去美尸。
基本語法如下：
mac上有一個(gè)很好的編寫工具Mou,也可以使用強(qiáng)大的SublimeText,Webstorm
1.'#'語法
this is h1鞠柄，#'多少?zèng)Q定層級大小，相當(dāng)于HTML的H標(biāo)簽
this is h2械馆，#'多少?zèng)Q定層級大小胖眷，相當(dāng)于HTML的H標(biāo)簽
this is h3，#'多少?zèng)Q定層級大小狱杰，相當(dāng)于HTML的H標(biāo)簽
this is h4瘦材，#'多少?zèng)Q定層級大小，相當(dāng)于HTML的H標(biāo)簽
this is h5仿畸，#'多少?zèng)Q定層級大小食棕，相當(dāng)于HTML的H標(biāo)簽
this is h6，#'多少?zèng)Q定層級大小错沽，相當(dāng)于HTML的H標(biāo)簽
2.插入圖片
3.強(qiáng)調(diào)
強(qiáng)調(diào) 或者 強(qiáng)調(diào) (示例：斜體)
加重強(qiáng)調(diào) 或者 加重強(qiáng)調(diào) (示例：粗體)
特別強(qiáng)調(diào) 或者 特別強(qiáng)調(diào) (示例：粗斜體)
4.代碼
我們經(jīng)常需要在博客中添加代碼簿晓，可以使用如下兩種方式
a.三個(gè)反引號(hào)（鍵盤左上角波浪鍵)開始,回車，代碼區(qū)域千埃，再回車憔儿，例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File UpLoad</title>
</head>
<body>
<h1>Uploadify Demo</h1>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
</body>
</html>
b.方法二，制表符（tab鍵）或者4個(gè)空格（注意所有代碼都需要制表符或4個(gè)空格）放可，回車鍵谒臼；若沒有朝刊，則會(huì)展現(xiàn)文件預(yù)覽效果；
正確的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File UpLoad</title>
</head>
<body>
<h1>Uploadify Demo</h1>
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
</body>
</html>
5.換行
如果我們想把一行文本進(jìn)行換行蜈缤，我們可以在需要換行的地方輸入至少
兩個(gè)空格拾氓，然后回車即可，
注意底哥，如果不回車咙鞍，是沒有效果的。
6.引用
k可以使用'>'來引用趾徽，一個(gè)'>'表示一級引用续滋，兩個(gè)'>>',表示二級引用，如下
這是一級引用
這是二級引用
7.超鏈接
這個(gè)太常用了孵奶，明明自己是抄襲別人的疲酌，但又不能說，所以只好鏈的超鏈接上去了了袁，比如我現(xiàn)在這樣
8.分割線
如果我們想用分割線對內(nèi)容進(jìn)行分割徐勃，我們可以在單獨(dú)一行里輸入3個(gè)或以上的短橫線、星號(hào)或者下劃線實(shí)現(xiàn)早像。短橫線和星號(hào)之間可以輸入任意空格僻肖。
——————
9.列表標(biāo)記
如果我們的內(nèi)容需要進(jìn)行標(biāo)記，那么我們可以使用下面的方式
有序列表"1."+Space;
- order list 1;
- order list 2;
- order list 3;
無序列表"*"+Space或者"-"+Space
- order list 1;
- order list 2;
- order list 3;
- order list 1;
- order list 2;
- order list 3;
編輯器
程序猿找不到”對象(undefined)“卢鹦，種類繁多臀脏，基本都可以歸為一個(gè)原因——活該。
先放一段視頻冀自，這是HBO(對揉稚，就是那個(gè)制作了《權(quán)利的游戲》、《西部世界》等神劇的公司)《硅谷》里面的片段熬粗，主要講述一群逗逼程序猿創(chuàng)業(yè)的故事搀玖，相當(dāng)勵(lì)志。
Tab VS Space
Tab VS Space02
編輯器驻呐，這玩意幾天幾夜也說不完灌诅，誰好誰不好，什么編輯器之神(Vim)含末，神的編輯器(Emacs),據(jù)說還有“圣戰(zhàn)”猜拾，當(dāng)然是大神之間的事情，我等凡夫俗子就不要去湊熱鬧了佣盒，因?yàn)樯竦膽?zhàn)爭挎袜，你一個(gè)凡人去湊什么熱鬧，一上場就領(lǐng)飯盒了，有興趣的可以自己google(百度)盯仪。編輯器好不好紊搪，還是看你怎么用。 當(dāng)然有些編輯器熟練使用之后的確能很大程度上提高你的工作效率全景，早早完成工作嗦明，少加班，有老婆孩子的蚪燕，提前回家配老婆孩子；單身猿還是老老實(shí)加班奔浅，提前回去只能自己陪自己馆纳，。我們選擇一個(gè)最適合自己的就好了汹桦。據(jù)說鲁驶，編碼方式，也有圣戰(zhàn)舞骆，典型的是使用“tab"鍵格式代碼還是”space“钥弯。差不多就是上面視頻里面說的意思。
扯了這么多督禽，下面講一下幾個(gè)比較常用的幾個(gè)脆霎。
- SublimeText
這個(gè)幾乎大家都知道，輕巧狈惫，秒開睛蛛，隨用隨開，自動(dòng)保存胧谈，無論你是有內(nèi)涵的人還是注重表面（主題)的人忆肾，都可以根據(jù)自己的需要進(jìn)行定制，沒有做不到菱肖，只有想不到客冈，基本可以定制化所有你需要的功能。windows和mac稳强，通用场仲，免費(fèi)，前后端也通吃退疫。如下圖燎窘，
- SublimeText
- 2.前端JS開發(fā)神器——Webstorm
由JetBrains開發(fā)的一款軟件，被稱為前端JS開發(fā)神器蹄咖，雖然社區(qū)沒有SublimeText活躍褐健，但是也可以配置很多插件、主題，功能也很強(qiáng)大蚜迅，和SublimeText一樣舵匾，可以無限免費(fèi)用。唯一的缺點(diǎn)————大谁不，不是一般的大坐梯，非常占內(nèi)存，尤其index的時(shí)候刹帕，能把電腦卡到哭吵血，基本打開之后，就不用再關(guān)了偷溺。
如下圖蹋辅，
webstorm的git管理也很方便，可以進(jìn)行版本合并挫掏，對比侦另，切換等等，超級好用
- 3.Atom
是大名鼎鼎的github專門為程序猿搞的一款編輯器尉共，支持 Windows褒傅、Mac、Linux 三大桌面平臺(tái),完全免費(fèi),并且已經(jīng)在 GitHub 上開放了全部的源代碼袄友。一款非常漂亮的編輯器殿托，當(dāng)然，功能也很強(qiáng)大【珧迹現(xiàn)在用的人也越來越多碌尔，老爸牛逼，前途一片光明券敌。如下圖唾戚，
- 4.HBuilder(Window/Mac)免費(fèi)
兩年前我第一款A(yù)PP就用它寫的，個(gè)人覺得不好用待诅，現(xiàn)在不清楚什么情況叹坦。之所以列出來，因?yàn)楸把悖拖駝e人說的募书，這是國人自己搞的，支持一下國貨吧测蹲！如下圖莹捡，
- 5.其他
還有很多其他牛逼的編輯器 ，找一款適合自己的就行扣甲。
命令行工具
1.iTerm
在業(yè)內(nèi)口碑很高篮赢，已經(jīng)封神齿椅，被稱為mac下最好用的終端工具，注意启泣，沒有之一涣脚。集成git，版本管理超級方便寥茫。
官網(wǎng)：iTerm
具體使用可參考
http://www.open-open.com/lib/view/open1439560980661.html
https://www.zhihu.com/question/274473702.oh-my-zsh
我也很喜歡遣蚀，可以和iTerm、mac自帶Terminal纱耻、webstorm一起使用芭梯，主題可以很多，堪稱裝逼神器弄喘。具體配置和使用就不展開講了玖喘，大致講一下怎么集成到webstorm中去。
首先
根據(jù)http://www.cocoachina.com/ios/20160302/15372.html限次，安裝配置好zsh，包括裝逼字體Powerline柴灯，不了解Powerline卖漫，猛戳這里,配置好iterm之后效果如下圖：
其實(shí)就是目錄不同結(jié)構(gòu)用不同的顏色區(qū)塊顯示，具體有沒有用赠群，那再說羊始，至少證明我們有一顆愛鉆研（ZB）的心。
但是查描，光這樣還不行突委。因?yàn)橄裎覀冞@使用用集成terminal工具編輯器的人，比如webstorm冬三，為嘛我還需要再開一個(gè)程序匀油，一個(gè)窗口去使用本來就不需要的操作呢？從用戶體驗(yàn)（現(xiàn)在是個(gè)人都會(huì)說用戶體驗(yàn)）來說（主要我們自己）勾笆，這是極不友好的敌蚜，所以，為了提升使用體驗(yàn)窝爪，還是必須把這種字體集成到webstorm的terminal中去弛车。
具體操作也很簡單，把terminal的字體設(shè)置一下就OK了蒲每。
- a.首先纷跛，設(shè)置teminal的shell
-
b.然后，command+',',找到Font設(shè)置邀杏，并保存如下
powerline-webstorm02.png c.再找到Console Font贫奠，如下設(shè)置
- d.再將.bash_profie中路徑輸出，粘貼到.zshrc文件中，否則一些配置可能用不了叮阅，比如安卓打包adb命令刁品。
- e.最后，打開webstorm的terminal浩姥，開啟裝逼模式
Chorme
不會(huì)合理用Chrome的前端不是個(gè)好前端挑随，個(gè)人認(rèn)為Chrome瀏覽器是最牛逼、最好用的瀏覽器勒叠，沒有之一兜挨。Chrome之所以牛逼，除去本身速度快眯分，性能好拌汇，穩(wěn)定，兼容性好弊决，很大原因也在于它強(qiáng)大的擴(kuò)展功能噪舀。Chrome強(qiáng)大的控制臺(tái)調(diào)試這次就不講了，下面講一下我常用的幾個(gè)Chrome擴(kuò)展程序飘诗。
先大致講一下如何安裝(需和諧上網(wǎng))
查看已安裝的擴(kuò)展程序与倡，
和諧上網(wǎng)之后，打開Chrome應(yīng)用商店
可以搜索安裝你想要的擴(kuò)展程序昆稿，安裝很簡單纺座。 如下圖，
安裝之后溉潭，在Chrome右上角會(huì)有你安裝成功的各個(gè)擴(kuò)展程序净响，如下圖
1.印象筆記·剪藏
印象筆記網(wǎng)頁剪切功能是我最早使用的Chrome擴(kuò)展程序之一。登錄印象筆記之后喳瓣，可以將整個(gè)網(wǎng)頁馋贤、文章區(qū)域、特定區(qū)域保存到你的印象筆記中畏陕，很方便掸掸。 如下圖，
2.JSON-handle
JSON數(shù)據(jù)是前端工作中最常接觸的了蹭秋，雖然現(xiàn)在一般最新的瀏覽器會(huì)默認(rèn)有格式化JSON數(shù)據(jù)的功能扰付，只是不同瀏覽器效果不一樣，有時(shí)候會(huì)有亂碼等奇怪問題仁讨，裝一個(gè)JSON格式化的插件還是很有必要的羽莺。
3.FeHelper
前端比較常用的功能，什么字符串轉(zhuǎn)碼了洞豁，JSON格式化盐固，圖片Base64啦等等荒给，它都有了，對于調(diào)試之類的還是很好用的刁卜，真正項(xiàng)目中志电，不會(huì)用到，因?yàn)楸容^二蛔趴，需要手動(dòng)一個(gè)個(gè)去點(diǎn)挑辆，蛋疼不行，真正項(xiàng)目中都是使用各種npm包孝情，一個(gè)命令行全部搞定鱼蝉。如下圖，
4.Octotree
終于不用github項(xiàng)目箫荡，一層層往里面點(diǎn)了魁亦，然后不斷返回，跳來跳去羔挡，網(wǎng)絡(luò)好洁奈，那還好。還是上圖吧绞灼，一圖勝萬言利术，客觀請看圖，
5.React Developer Tools
若項(xiàng)目是用react寫的镀赌，那這是必備的氯哮，可以查看組件樹际跪，就類似html的dom結(jié)構(gòu)一樣商佛。
如下圖，
6.Vue.js devtools
當(dāng)然姆打，有React就有Vue的良姆，功能類似。
7.Charset
修改網(wǎng)站的默認(rèn)編碼
8.Code Cola
Code Cola是一個(gè)可視化編輯在線頁面css樣式的chrome插件幔戏。
前端數(shù)據(jù)處理
大家都知道玛追，由于現(xiàn)如今前后端分離已是大勢所趨，
而前端的很大一部分工作就是數(shù)據(jù)處理了闲延。
大部分時(shí)候痊剖，我們需要和后臺(tái)小伙伴聯(lián)合調(diào)試，可是有時(shí)候時(shí)間垒玲、資源有限陆馁，
前端工作不能完全依賴于后臺(tái)，所以有時(shí)候我們需要自己模擬數(shù)據(jù)合愈；
常見方式我知道的有如下三種：
- 1.直接在文件中定義叮贩，簡單粗暴——當(dāng)然也最二击狮；如下
function fetchUserList() {
}
var isDev = true;
var data = {
"status": 3,
"message": "hello world",
"string": "★★★",
"number": 69,
"boolean": true,
"object": {
"110000": "北京市",
"120000": "天津市",
"130000": "黑龍江省"
},
"array": [
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
},
{
"name": "Hello"
},
{
"name": "Mock.js"
},
{
"name": "!"
}
],
"regexp": "6288712123-",
"time": "2014-01-16 21:21:22",
"color": "rgba(121, 242, 135, 0.94)",
"word": "jztuqwmur",
"text": "而風(fēng)氣究及。",
"name": "崔杰",
"url": "news://imkpjsnq.ev/dhthtrgqy"
};
if (isDev) {
fetchUserList(data);
} else {
$.ajax({
url: '/list',
type: 'GET',
dataType: 'json',
success: function(data) {
fetchUserList(data);
}
});
}
- 2.自己搞一個(gè)json文件益老，調(diào)試的時(shí)候引入這個(gè)文件彪蓬；
- 3.使用mockjs等處理；
直接在文件中定義和使用json文件比較簡單捺萌，在此不再啰嗦档冬。
下面講一下比較裝逼的一種方式——使用mockjs的方式
安裝
yarn add mockjs --dev
//or
npm i mockjs --save
路徑配置
let host = YOUR URL;
需要模擬的接口地址，如
export const API_URL = {
host,
login: `${YOUR}/login`,
store_lists: `${YOUR}/store/search/`,
};
使用
a.引入
import Mock from 'mockjs'
import {API_URL} from '../config'
b.隨機(jī)數(shù)據(jù)定義
let Random = Mock.Random;//引用
Random.cname();//隨機(jī)產(chǎn)生中文名
Random.csentence(4);//隨機(jī)產(chǎn)生4個(gè)中文字符
c.生成數(shù)據(jù)
export default const mock = {
StoreLists: Mock.mock(API_URL.store_lists, {
'msg|40': [//生成40條數(shù)據(jù)
{
'id|+1': 1,//從1開始生成id互婿，累計(jì)增加
'name': '@csentence(4)',//隨機(jī)產(chǎn)生4個(gè)中文字符
'lat|30.10': 1.4918,//生成浮點(diǎn)數(shù)
'lng|119.10': 1.5240,
'create_time|+1': 1502678783,//從1502678783開始生成id捣郊，累計(jì)增加
'update_time|+1': 1502678783,
'aid|+1': 0,
'version|1': ['production', 'debug'],//隨機(jī)設(shè)置version的值production or debug
'uid|+1': 0,
}
],
'err': 0,//模擬返回成功參數(shù)
'count': 40,//定義總的數(shù)據(jù)長度
}),
}
d.模擬處理mock數(shù)據(jù)，使用reqwest慈参，當(dāng)然也可以使用ajax等方式
reqwest({
url: API_URL.store_lists,
type: 'json',
method: 'get',
success: (response) => {
console.log('啦啦啦~mock數(shù)據(jù)是', response);
let data = response;
if (data.err === 0) {
if (data.count !== 0) {
const pagination = {..._this.state.pagination};
pagination.total = data.count;
_this.setState({
listData: data.msg,
pagination: pagination,
loading: false,
})
} else {
_this.setState({
listData: [],
pagination: 0,
loading: false,
});
}
} else {
_this.setState({
listData: [],
pagination: 0,
loading: false,
});
}
},
error: (err) => {
console.log('Ops,發(fā)生錯(cuò)誤了', err)
},
});
注意：目前Mock不支持fetch方法
參考鏈接:
https://www.cnblogs.com/Leo_wl/p/6001952.html
https://www.cnblogs.com/Leo_wl/p/6693211.html
