tools.png

——工欲善其事必先利其器

以下工具部分是windows和macOS通用，如，sublimeText，webStorm等；部分只使用于macOS。

MarkDown

那就先講一下寫這篇文章的編輯器好了。
現(xiàn)在無論是github
還是gitee(碼云，之前叫做git.os.china),
隨便新建項(xiàng)目還是打開一個(gè)知名的項(xiàng)目，都會有MarkDown文件，就是通常的README.md，后綴是.md，如下圖：

markdown001.png

還有很多牛逼的社區(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，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h2，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h3，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h4，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h5，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h6，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

2.插入圖片

404-bg.jpg

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è)反引號（鍵盤左上角波浪鍵)開始,回車，代碼區(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è)空格），回車鍵；若沒有，則會展現(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è)或以上的短橫線、星號或者下劃線實(shí)現(xiàn)。短橫線和星號之間可以輸入任意空格。

——————

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)勵志。
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è)。

1. SublimeText
  這個(gè)幾乎大家都知道，輕巧，秒開，隨用隨開，自動保存，無論你是有內(nèi)涵的人還是注重表面（主題)的人，都可以根據(jù)自己的需要進(jìn)行定制，沒有做不到，只有想不到，基本可以定制化所有你需要的功能。windows和mac，通用，免費(fèi)，前后端也通吃。如下圖，

sublimeText001.png

2.前端JS開發(fā)神器——Webstorm
由JetBrains開發(fā)的一款軟件，被稱為前端JS開發(fā)神器，雖然社區(qū)沒有SublimeText活躍，但是也可以配置很多插件、主題，功能也很強(qiáng)大，和SublimeText一樣，可以無限免費(fèi)用。唯一的缺點(diǎn)————大，不是一般的大，非常占內(nèi)存，尤其index的時(shí)候，能把電腦卡到哭，基本打開之后，就不用再關(guān)了。
如下圖，

webstorm002.png

webstorm的git管理也很方便，可以進(jìn)行版本合并，對比，切換等等，超級好用

webstorm001.gif

webstorm002.gif

3.Atom
是大名鼎鼎的github專門為程序猿搞的一款編輯器，支持 Windows、Mac、Linux 三大桌面平臺,完全免費(fèi),并且已經(jīng)在 GitHub 上開放了全部的源代碼。一款非常漂亮的編輯器，當(dāng)然，功能也很強(qiáng)大?，F(xiàn)在用的人也越來越多，老爸牛逼，前途一片光明。如下圖，

Atom

4.HBuilder(Window/Mac)免費(fèi)

兩年前我第一款A(yù)PP就用它寫的，個(gè)人覺得不好用，現(xiàn)在不清楚什么情況。之所以列出來，因?yàn)?，就像別人說的，這是國人自己搞的，支持一下國貨吧！如下圖，

HBuilder

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/27447370
2.oh-my-zsh
我也很喜歡，可以和iTerm、mac自帶Terminal、webstorm一起使用，主題可以很多，堪稱裝逼神器。具體配置和使用就不展開講了，大致講一下怎么集成到webstorm中去。

首先

根據(jù)http://www.cocoachina.com/ios/20160302/15372.html，安裝配置好zsh，包括裝逼字體Powerline，不了解Powerline，猛戳這里,配置好iterm之后效果如下圖：

powerline.png

其實(shí)就是目錄不同結(jié)構(gòu)用不同的顏色區(qū)塊顯示，具體有沒有用，那再說，至少證明我們有一顆愛鉆研（ZB）的心。

但是，光這樣還不行。因?yàn)橄裎覀冞@使用用集成terminal工具編輯器的人，比如webstorm，為嘛我還需要再開一個(gè)程序，一個(gè)窗口去使用本來就不需要的操作呢？從用戶體驗(yàn)（現(xiàn)在是個(gè)人都會說用戶體驗(yàn)）來說（主要我們自己），這是極不友好的，所以，為了提升使用體驗(yàn)，還是必須把這種字體集成到webstorm的terminal中去。

具體操作也很簡單，把terminal的字體設(shè)置一下就OK了。

a.首先，設(shè)置teminal的shell

powerline-webstorm01.png

b.然后，command+',',找到Font設(shè)置，并保存如下

powerline-webstorm02.png
c.再找到Console Font，如下設(shè)置

powerline-webstorm03.png

d.再將.bash_profie中路徑輸出，粘貼到.zshrc文件中，否則一些配置可能用不了，比如安卓打包adb命令。

powerline-webstorm04.png

e.最后，打開webstorm的terminal，開啟裝逼模式

powerline-webstorm05.png

Chorme

不會合理用Chrome的前端不是個(gè)好前端，個(gè)人認(rèn)為Chrome瀏覽器是最牛逼、最好用的瀏覽器，沒有之一。Chrome之所以牛逼，除去本身速度快，性能好，穩(wěn)定，兼容性好，很大原因也在于它強(qiáng)大的擴(kuò)展功能。Chrome強(qiáng)大的控制臺調(diào)試這次就不講了，下面講一下我常用的幾個(gè)Chrome擴(kuò)展程序。
先大致講一下如何安裝(需和諧上網(wǎng))
查看已安裝的擴(kuò)展程序，

chrome001.png

chrome002.png

和諧上網(wǎng)之后，打開Chrome應(yīng)用商店

chrome003.png

可以搜索安裝你想要的擴(kuò)展程序，安裝很簡單。如下圖，

chrome004.png

安裝之后，在Chrome右上角會有你安裝成功的各個(gè)擴(kuò)展程序，如下圖

chrome005.png

1.印象筆記·剪藏
印象筆記網(wǎng)頁剪切功能是我最早使用的Chrome擴(kuò)展程序之一。登錄印象筆記之后，可以將整個(gè)網(wǎng)頁、文章區(qū)域、特定區(qū)域保存到你的印象筆記中，很方便。如下圖，

chrome006.png

2.JSON-handle
JSON數(shù)據(jù)是前端工作中最常接觸的了，雖然現(xiàn)在一般最新的瀏覽器會默認(rèn)有格式化JSON數(shù)據(jù)的功能，只是不同瀏覽器效果不一樣，有時(shí)候會有亂碼等奇怪問題，裝一個(gè)JSON格式化的插件還是很有必要的。

chrome007.png

3.FeHelper
前端比較常用的功能，什么字符串轉(zhuǎn)碼了，JSON格式化，圖片Base64啦等等，它都有了，對于調(diào)試之類的還是很好用的，真正項(xiàng)目中，不會用到，因?yàn)楸容^二，需要手動一個(gè)個(gè)去點(diǎn)，蛋疼不行，真正項(xiàng)目中都是使用各種npm包，一個(gè)命令行全部搞定。如下圖，

chrome008.png

4.Octotree
終于不用github項(xiàng)目，一層層往里面點(diǎn)了，然后不斷返回，跳來跳去，網(wǎng)絡(luò)好，那還好。還是上圖吧，一圖勝萬言，客觀請看圖，

chrome009.gif

5.React Developer Tools
若項(xiàng)目是用react寫的，那這是必備的，可以查看組件樹，就類似html的dom結(jié)構(gòu)一樣。
如下圖，

chrome010.png

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í)候，我們需要和后臺小伙伴聯(lián)合調(diào)試，可是有時(shí)候時(shí)間、資源有限，
前端工作不能完全依賴于后臺，所以有時(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

http://highsea90.com/t/mock/

https://github.com/nuysoft/Mock

http://mockjs.com/

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

前端開發(fā)的工具庫

前端開發(fā)的工具庫

——工欲善其事必先利其器

MarkDown

基本語法如下：

this is h1，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h2，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h3，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h4，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h5，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h6，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

編輯器

命令行工具

首先

Chorme

前端數(shù)據(jù)處理

安裝

路徑配置

使用

a.引入

b.隨機(jī)數(shù)據(jù)定義

c.生成數(shù)據(jù)

d.模擬處理mock數(shù)據(jù)，使用reqwest，當(dāng)然也可以使用ajax等方式

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

前端開發(fā)的工具庫

——工欲善其事必先利其器

MarkDown

基本語法如下：

this is h1，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h2，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h3，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h4，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h5，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h6，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

編輯器

命令行工具

首先

Chorme

前端數(shù)據(jù)處理

安裝

路徑配置

使用

a.引入

b.隨機(jī)數(shù)據(jù)定義

c.生成數(shù)據(jù)

d.模擬處理mock數(shù)據(jù)，使用reqwest，當(dāng)然也可以使用ajax等方式

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

this is h1，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h2，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h3，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h4，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h5，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

this is h6，#'多少決定層級大小，相當(dāng)于HTML的H標(biāo)簽

d.模擬處理mock數(shù)據(jù)，使用reqwest，當(dāng)然也可以使用ajax等方式