天天看點
傳回

第1章 前端環境搭建第1章 前端環境搭建1 十次方需求分析與技術架構2 Node.js3 包資料總管NPM4 Webpack5 開發工具VsCode6 ES6

第1章 前端環境搭建

學習目标：

  • 了解十次方需求、技術架構，了解前後端分離開發模式
  • 掌握Node.js基本使用方法，了解子產品化程式設計
  • 掌握包資料總管NPM的使用
  • 說出webpack的作用
  • 掌握vs code開發工具的基本使用方法
  • 掌握ES6常用的新特性文法

1 十次方需求分析與技術架構

1.1 十次方是個什麼樣的網站

《十次方》是程式員的專屬社交平台，包括頭條、問答、活動、交友、吐槽、招聘六大頻道。

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-vM9Vbryo-1584179978247)(image\1-0.jpg)]

十次方名稱的由來：2的10次方為1024，程式員都懂的。

如果你是一位技術大咖，那麼趕快釋出文章，增加知名度吧。

如果你是一名技術小白，那麼趕快到問答頻道尋求幫助的，這裡高手如雲哦！

如果你不想錯過各種技術交流會，那麼請經常關注活動頻道吧~

如果你還是單身，那麼趕快到交友頻道找到你心儀的另一半。

如果你有太多的苦惱，那麼趕快吐個槽吧~

如果你正在找工作或是想跳槽拿高薪，那麼來招聘頻道淘金吧~

1.2 了解前後端分離開發

​ 前後端分離已成為網際網路項目開發的業界标準使用方式，通過nginx+tomcat的方式（也可以中間加一個nodejs）有效的進行解耦，并且前後端分離會為以後的大型分布式架構、彈性計算架構、微服務架構、多端化服務（多種用戶端，例如：浏覽器，車載終端，安卓，IOS等等）打下堅實的基礎。

以前老的方式是：

1.産品經理/上司/客戶提出需求

2.UI做出設計圖

3.前端工程師做html頁面

4.後端工程師将html頁面套成jsp頁面（前後端強依賴，後端必須要等前端的html做好才能套jsp。如果html發生變更，就更痛了，開發效率低）

5.內建出現問題

6.前端返工

7.後端返工

8.二次內建

9.內建成功

10.傳遞

新的方式是：

1.産品經理/上司/客戶提出需求

2.UI做出設計圖

3.前後端約定接口&資料&參數

4.前後端并行開發（無強依賴，可前後端并行開發，如果需求變更，隻要接口&參數不變，就不用兩邊都修改代碼，開發效率高）

5.前後端內建

6.前端頁面調整

7.內建成功

8.傳遞

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-fNsvVlD3-1584179978253)(image/1-1-1.png)]

1.3 前端技術架構

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-zUS213Hu-1584179978257)(image/1-1-2.png)]

架構描述：以Node.js為核心的Vue.js前端技術生态架構

2 Node.js

2.1 什麼是Node.js

簡單的說 Node.js 就是運作在服務端的 JavaScript。

Node.js 是一個基于Chrome JavaScript 運作時建立的一個平台。

Node.js是一個事件驅動I/O服務端JavaScript環境，基于Google的V8引擎，V8引擎執行Javascript的速度非常快，性能非常好。

2.2 Node.js安裝

1、下載下傳對應你系統的Node.js版本:

https://nodejs.org/en/download/

（我們現在使用的版本是8.9.4，資源中也已提供）

2、選安裝目錄進行安裝

預設即可

3.測試

在指令提示符下輸入指令

node -v

會顯示目前node的版本

2.3 快速入門

2.3.1 控制台輸出

我們現在做個最簡單的小例子，示範如何在控制台輸出，建立文本檔案demo1.js,代碼内容

var a=1;
var b=2;
console.log(a+b);

我們在指令提示符下輸入指令

node demo1.js

2.3.2 使用函數

建立文本檔案demo2.js

var c=add(100,200);
console.log(c);
function add(a,b){
	return a+b;
}

指令提示符輸入指令

node demo2.js

運作後看到輸出結果為300

2.3.3 子產品化程式設計

建立文本檔案demo3_1.js

exports.add=function(a,b){
	return a+b;
}

建立文本檔案demo3_2.js

var demo= require('./demo3_1');
console.log(demo.add(400,600));

我們在指令提示符下輸入指令

node demo3_2.js

結果為1000

2.3.4 建立web伺服器

建立文本檔案demo4.js

var http = require('http');
http.createServer(function (request, response) {
    // 發送 HTTP 頭部 
    // HTTP 狀态值: 200 : OK
    // 内容類型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 發送響應資料 "Hello World"
    response.end('Hello World\n');
}).listen(8888);
// 終端列印如下資訊
console.log('Server running at http://127.0.0.1:8888/');

http為node内置的web子產品

我們在指令提示符下輸入指令

node demo4.js

服務啟動後，我們打開浏覽器，輸入網址

http://localhost:8888/

即可看到網頁輸出結果Hello World

心情是不是很激動呢？Ctrl+c 終止運作。

2.3.5 了解服務端渲染

我們建立demo5.js  ，将上邊的例子寫成循環的形式

var http = require('http');
http.createServer(function (request, response) {
    // 發送 HTTP 頭部 
    // HTTP 狀态值: 200 : OK
    // 内容類型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 發送響應資料 "Hello World"
	for(var i=0;i<10;i++){
		response.write('Hello World\n');
	}  
	response.end('');	
}).listen(8888);
// 終端列印如下資訊
console.log('Server running at http://127.0.0.1:8888/');

我們在指令提示符下輸入指令啟動服務

node demo5.js

浏覽器位址欄輸入http://127.0.0.1:8888即可看到查詢結果。

我們右鍵“檢視源代碼”發現，并沒有我們寫的for循環語句，而是直接的10條Hello World ，這就說明這個循環是在服務端完成的，而非浏覽器（用戶端）來完成。這與我們原來的JSP很是相似。

2.3.6 接收參數

建立demo6.js

var http = require('http');
var url = require('url');
http.createServer(function(request, response){
    response.writeHead(200, {'Content-Type': 'text/plain'});
    // 解析 url 參數
    var params = url.parse(request.url, true).query;
    response.write("name:" + params.name);
    response.write("\n");
    response.end();
}).listen(8888);
console.log('Server running at http://127.0.0.1:8888/');

我們在指令提示符下輸入指令

node demo6.js

在浏覽器測試結果

3 包資料總管NPM

3.1 什麼是NPM

npm全稱Node Package Manager，他是node包管理和分發工具。其實我們可以把NPM了解為前端的Maven .

我們通過npm 可以很友善地下載下傳js庫，管理前端工程.

最近版本的node.js已經內建了npm工具，在指令提示符輸入 npm -v 可檢視目前npm版本

3.2 NPM指令

3.2.1 初始化工程

init指令是工程初始化指令。

建立一個空檔案夾，在指令提示符進入該檔案夾  執行指令初始化

npm init

按照提示輸入相關資訊，如果是用預設值則直接回車即可。

name: 項目名稱

version: 項目版本号

description: 項目描述

keywords: {Array}關鍵詞，便于使用者搜尋到我們的項目

最後會生成package.json檔案，這個是包的配置檔案，相當于maven的pom.xml

我們之後也可以根據需要進行修改。

3.2.2 本地安裝

install指令用于安裝某個子產品，如果我們想安裝express子產品（node的web架構），輸出指令如下：

npm install express

出現黃色的是警告資訊，可以忽略，請放心，你已經成功執行了該指令。

在該目錄下已經出現了一個node_modules檔案夾 和package-lock.json

node_modules檔案夾用于存放下載下傳的js庫（相當于maven的本地倉庫）

package-lock.json是當 node_modules 或 package.json 發生變化時自動生成的檔案。這個檔案主要功能是确定目前安裝的包的依賴，以便後續重新安裝的時候生成相同的依賴，而忽略項目開發過程中有些依賴已經發生的更新。

我們再打開package.json檔案，發現剛才下載下傳的express已經添加到依賴清單中了.

關于版本号定義：

指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式規定，安裝時隻安裝指定版本。

波浪号（tilde）+指定版本：比如~1.2.2，表示安裝1.2.x的最新版本（不低于1.2.2），但是不安裝1.3.x，也就是說安裝時不改變大版本号和次要版本号。

插入号（caret）+指定版本：比如ˆ1.2.2，表示安裝1.x.x的最新版本（不低于1.2.2），但是不安裝2.x.x，也就是說安裝時不改變大版本号。需要注意的是，如果大版本号為0，則插入号的行為與波浪号相同，這是因為此時處于開發階段，即使是次要版本号變動，也可能帶來程式的不相容。

latest：安裝最新版本。

3.2.3 全局安裝

剛才我們使用的是本地安裝，會将js庫安裝在目前目錄，而使用全局安裝會将庫安裝到你的全局目錄下。

如果你不知道你的全局目錄在哪裡，執行指令

npm root -g

我的全局目錄在

C:\Users\Administrator\AppData\Roaming\npm\node_modules

比如我們全局安裝jquery, 輸入以下指令

npm install jquery -g

3.2.4 批量下載下傳

我們從網上下載下傳某些代碼，發現隻有package.json,沒有node_modules檔案夾，這時我們需要通過指令重新下載下傳這些js庫.

進入目錄（package.json所在的目錄）輸入指令

npm install

此時，npm會自動下載下傳package.json中依賴的js庫.

3.2.5淘寶NPM鏡像

有時我們使用npm下載下傳資源會很慢，是以我們可以安裝一個cnmp(淘寶鏡像)來加快下載下傳速度。

輸入指令，進行全局安裝淘寶鏡像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝後，我們可以使用以下指令來檢視cnpm的版本

cnpm -v

使用cnpm

cnpm install 需要下載下傳的js庫

3.2.6 運作工程

如果我們想運作某個工程，則使用run指令

如果package.json中定義的腳本如下

dev是開發階段測試運作

build是建構編譯工程

lint 是運作js代碼檢測

我們現在來試一下運作dev

npm run dev

3.2.7 編譯工程

我們接下來，測試一個代碼的編譯.編譯後我們就可以将工程部署到nginx中啦~

編譯後的代碼會放在dist檔案夾中，首先我們先删除dist檔案夾中的檔案,進入指令提示符輸入指令

npm run build

生成後我們會發現隻有個靜态頁面，和一個static檔案夾

這種工程我們稱之為單頁Web應用（single page web application，SPA），就是隻有一張Web頁面的應用，是加載單個HTML 頁面并在使用者與應用程式互動時動态更新該頁面的Web應用程式。

這裡其實是調用了webpack來實作打包的，關于webpack我們後續的章節進行介紹

4 Webpack

4.1 什麼是Webpack

​ Webpack 是一個前端資源加載/打包工具。它将根據子產品的依賴關系進行靜态分析，然後将這些子產品按照指定的規則生成對應的靜态資源。

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-wYfC1yEE-1584179978264)(image/1-1.jpg)]

​ 從圖中我們可以看出，Webpack 可以将多種靜态資源 js、css、less 轉換成一個靜态檔案，減少了頁面的請求。  接下來我們簡單為大家介紹 Webpack 的安裝與使用

4.2 Webpack安裝

全局安裝

npm install webpack -g
npm install webpack-cli -g

安裝後檢視版本号

webpack -v

4.3 快速入門

4.3.1 JS打包

（1）建立src檔案夾，建立bar.js

exports.info=function(str){
   document.write(str);
}

（2）src下建立logic.js

exports.add=function(a,b){
	return a+b;
}

（3）src下建立main.js

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

（4）建立配置檔案webpack.config.js ，該檔案與src處于同級目錄

var path = require("path");
module.exports = {
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
};

以上代碼的意思是：讀取目前目錄下src檔案夾中的main.js（入口檔案）内容，把對應的js檔案打包，打包後的檔案放入目前目錄的dist檔案夾下，打包後的js檔案名為bundle.js

（5）執行編譯指令

webpack

執行後檢視bundle.js 會發現裡面包含了上面兩個js檔案的内容

（7）建立index.html ,引用bundle.js

<!doctype html>
<html>
  <head>  
  </head>
  <body>   
    <script src="dist/bundle.js"></script>
  </body>
</html>

測試調用index.html，會發現有内容輸出

4.3.2 CSS打包

（1）安裝style-loader和 css-loader

Webpack 本身隻能處理 JavaScript 子產品，如果要處理其他類型的檔案，就需要使用 loader 進行轉換。

Loader 可以了解為是子產品和資源的轉換器，它本身是一個函數，接受源檔案作為參數，傳回轉換的結果。這樣，我們就可以通過 require 來加載任何類型的子產品或檔案，比如 CoffeeScript、 JSX、 LESS 或圖檔。首先我們需要安裝相關Loader插件，css-loader 是将 css 裝載到 javascript；style-loader 是讓 javascript 認識css

cnpm install style-loader css-loader --save-dev

（2）修改webpack.config.js

var path = require("path");
module.exports = {
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	},
	module: {
		rules: [  
            {  
                test: /\.css$/,  
                use: ['style-loader', 'css-loader']
            }  
        ]  
	}
};

（3）在src檔案夾建立css檔案夾,css檔案夾下建立css1

body{
 background:red;
}

（4）修改main.js ，引入css1.css

require('./css1.css');

（5）重新運作webpack

（6）運作index.html看看背景是不是變成紅色啦？

5 開發工具VsCode

5.1 VsCode簡介

​ VSCode（ Visual Studio Code）是微軟出的一款輕量級代碼編輯器 ，重要的是它在Windows, OS X 和Linux作業系統的桌面上均可運作。Visual Studio Code内置了對JavaScript, TypeScript和Node.js語言的支援，并且為其他語言如C++, C#, Python, PHP等提供了豐富的擴充庫和運作時。

​

5.2 VsCode安裝與配置

5.2.1安裝

官網下載下傳 https://code.visualstudio.com/

預設安裝即可

5.2.2插件安裝

VsCode可以通過安裝插件來使編輯器變的更加強大

以下為前端開發工程師常用插件

（1）HTML Snippets

超級實用且初級的 H5代碼片段以及提示

（2）HTML CSS Support

讓 html 标簽上寫class 智能提示目前項目所支援的樣式 新版已經支援scss檔案檢索

（3）Debugger for Chrome

讓 vscode 映射 chrome 的 debug功能，靜态頁面都可以用 vscode 來打斷點調試，真666~

（4）vetur

vue架構所需的插件 文法高亮、智能感覺、Emmet等

（5）VueHelper

snippet代碼片段

5.2.3配置自動儲存

點選菜單 ：檔案–勾選自動儲存

6 ES6

6.1 什麼是ES6

程式設計語言JavaScript是ECMAScript的實作和擴充 。ECMAScript是由ECMA（一個類似W3C的标準組織）參與進行标準化的文法規範。ECMAScript定義了：

語言文法 – 文法解析規則、關鍵字、語句、聲明、運算符等。

類型 – 布爾型、數字、字元串、對象等。

原型和繼承

内建對象和函數的标準庫 – JSON、Math、數組方法、對象自省方法等。

ECMAScript标準不定義HTML或CSS的相關功能，也不定義類似DOM（文檔對象模型）的Web API，這些都在獨立的标準中進行定義。ECMAScript涵蓋了各種環境中JS的使用場景，無論是浏覽器環境還是類似node.js的非浏覽器環境。

ECMAScript标準的曆史版本分别是1、2、3、5。

那麼為什麼沒有第4版？其實，在過去确實曾計劃釋出提出巨量新特性的第4版，但最終卻因想法太過激進而慘遭廢除（這一版标準中曾經有一個極其複雜的支援泛型和類型推斷的内建靜态類型系統）。

ES4飽受争議，當标準委員會最終停止開發ES4時，其成員同意釋出一個相對謙和的ES5版本，随後繼續制定一些更具實質性的新特性。這一明确的協商協定最終命名為“Harmony”，是以，ES5規範中包含這樣兩句話

ECMAScript是一門充滿活力的語言，并在不斷進化中。

未來版本的規範中将持續進行重要的技術改進

2009年釋出的改進版本ES5，引入了Object.create()、Object.defineProperty()、getters和setters、嚴格模式以及JSON對象。

ECMAScript 6.0（以下簡稱ES6）是JavaScript語言的下一代标準，2015年6月正式釋出。它的目标，是使得JavaScript語言可以用來編寫複雜的大型應用程式，成為企業級開發語言。

6.2 Node.js中使用ES6

ES6+ 太棒了,但是很多進階功能node是不支援的,就需要使用babel轉換成ES5

（1）babel轉換配置,項目根目錄添加.babelrc 檔案

{
  "presets" : ['es2015']
}

（2）安裝es6轉換子產品

cnpm install babel-preset-es2015 --save-dev

（3）全局安裝指令行工具

cnpm install  babel-cli -g

（4）使用

babel-node js檔案名

6.3 文法新特性

6.3.1 變量聲明let

我們都是知道在ES6以前，var關鍵字聲明變量。無論聲明在何處，都會被視為聲明在函數的最頂部(不在函數内即在全局作用域的最頂部)。這就是函數變量提升例如

function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }

以上的代碼實際上是:

function aa() {
    var test // 變量提升
    if(bool) {
        test = 'hello man'
    } else {
        //此處通路test 值為undefined
        console.log(test)
    }
    //此處通路test 值為undefined
  }

是以不用關心bool是否為true or false。實際上，無論如何test都會被建立聲明。

接下來ES6主角登場：

我們通常用let和const來聲明，let表示變量、const表示常量。let和const都是塊級作用域。怎麼了解這個塊級作用域？在一個函數内部 ，在一個代碼塊内部。看以下代碼

function aa() {
    if(bool) {
       let test = 'hello man'
    } else {
        //test 在此處通路不到
        console.log(test)
    }
  }

6.3.2 常量聲明

const 用于聲明常量，看以下代碼

const name = 'lux'
name = 'joe' //再次指派此時會報錯

6.3.3 模闆字元串

es6模闆字元簡直是開發者的福音啊，解決了ES5在字元串功能上的痛點。

第一個用途，基本的字元串格式化。将表達式嵌入字元串中進行拼接。用${}來界定。

//es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux

第二個用途，在ES5時我們通過反斜杠()來做多行字元串或者字元串一行行拼接。ES6反引号(``)直接搞定。

// es5
    var msg = "Hi \
    man!"
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>`

6.3.4 函數預設參數

ES6為參數提供了預設值。在定義函數時便初始化了這個參數，以便在參數沒有被傳遞進去時使用。

看例子代碼

function action(num = 200) {
        console.log(num)
    }
    action() //200
    action(300) //300

6.3.5 箭頭函數

ES6很有意思的一部分就是函數的快捷寫法。也就是箭頭函數。

箭頭函數最直覺的三個特點。

1不需要function關鍵字來建立函數

2省略return關鍵字

3繼承目前上下文的 this 關鍵字

看下面代碼（ES6）

(response,message) => {
    .......
 }

相當于ES5代碼

function(response,message){
    ......
}

6.3.6 對象初始化簡寫

ES5我們對于對象都是以鍵值對的形式書寫，是有可能出現鍵值對重名的。例如

function people(name, age) {
        return {
            name: name,
            age: age
        };
    }

以上代碼可以簡寫為

function people(name, age) {
        return {
            name,
            age
        };
    }

6.3.7 解構

數組和對象是JS中最常用也是最重要表示形式。為了簡化提取資訊，ES6新增了解構，這是将一個資料結構分解為更小的部分的過程

ES5我們提取對象中的資訊形式如下

const people = {
        name: 'lux',
        age: 20
    }
    const name = people.name
    const age = people.age
    console.log(name + ' --- ' + age)

是不是覺得很熟悉，沒錯，在ES6之前我們就是這樣擷取對象資訊的，一個一個擷取。現在，ES6的解構能讓我們從對象或者數組裡取出資料存為變量，例如

//對象
    const people = {
        name: 'lux',
        age: 20
    }
    const { name, age } = people
    console.log(`${name} --- ${age}`)
    //數組
    const color = ['red', 'blue']
    const [first, second] = color
    console.log(first) //'red'
    console.log(second) //'blue'

6.3.8 Spread Operator

ES6中另外一個好玩的特性就是Spread Operator 也是三個點兒…接下來就展示一下它的用途。 組裝對象或者數組

//數組
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //對象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

6.3.9 import 和 export

import導入子產品、export導出子產品

lib.js

let fn0=function(){
    console.log('fn0...');
}
export {fn0}

demo9.js

import {fn0} from './lib'
fn0();

注意：node(v8.x)本身并不支援import關鍵字，是以我們需要使用babel的指令行工具來執行（配置詳見6.2小節内容）

babel-node demo9
前後端分離招聘交友類項目
上一篇: UVA 11354 Bond
下一篇: 交友小程式伺服器,又是陌生人交友小程式，探探Lite到底有什麼不同？

繼續閱讀