【高能筆記】如何得到使人心動的前端offer

前言

硬核的哪吒，個人命由我不禁天。javascript

精彩回顧：css

【圖文並茂，點贊收藏哦！】重學鞏固你的Vuejs知識體系html

【思惟導圖】前端開發-鞏固你的JavaScript知識體系前端

Web頁面製做基礎vue

學習總結之HTML5劍指前端（建議收藏，圖文並茂）html5

前端面試必備ES6全方位總結java

本文內容參加掘金技術徵文活動《2020春招面試徵文》，但願你們支持，不要忘記留下你學習的腳印，【點贊】，【評論】，【收藏】如下內容涉及👇：node

發佈分類歸於【閱讀】，標籤爲【面試】webpack

目錄git

我的的面試經歷
看成爲考官我會考問你的面試重點
我的收集大廠面試題庫（含答案）
面試時的小技巧
整理的知識體系（我的重點內容）
對於有面試需求的朋友，須要的幫助

所謂使人心動的offer便是讓你心儀的，想要的，所追求的，若是你是社會人士，想起當年面試的本身有過哪些的經歷呢？是否遺憾在🏫學校時未曾堅持努力的本身？若是你是在校生，你會面臨出校後的一場面試，是否已經準備👌好了呢？

面試如同考試，檢驗你的知識點是否已經緊緊掌握，一次面試的成功會讓你對本身充滿信心，也許大多數人面臨的面試都是一次次的失敗，獲得挫敗感的心靈打擊。

那麼面試如何作到對答如流，或者低一點要求如何讓對方記住你呢？在考官的逐層盤問下，在腦海裏梳理起本身的知識體系，找到本身想要的答案。

面試經驗，其實能夠觸類旁通，類比考試，通過以往的在校考試，學習技巧等相相似，只不過面試是面試管當場問你題目，你做答這樣的一種模式，面試通常有幾輪，各各公司各有不一樣而已。

面試也是一次可貴的自我摸底考試。從目錄中的6點內容，但願能幫助本身也幫助他人的成長。

1. 我的的面試經歷

我的的面試經歷，從在校被老師推薦到朋友的前端開發工做崗位，到本身從新找工做，反覆面試了幾家進了其中一家，到目前的某公司前端開發負責人，我的感受本身的面試經歷都是步入正常軌跡，便是準備面試簡歷，展現本身的項目到論述本身在校的成就等。

內容重點強行在於面試的經驗與面試的準備，面試準備其實就是本身掌握的知識體系，與必備的面試考點，網紅題目。

2. 看成爲考官我會考問你的面試重點

下面，帶你一塊兒閱讀一下知識體系，大篇幅面試重點。但願能幫助到你。

面試官：說說`VueRouter`

Vue.js加Vue Router建立單頁應用，很是簡單。經過組合組件來組成本身的應用程序，當要把Vue Router添加進來，而後把組件components映射到路由routes，而後告訴Vue Router渲染它們。

VueRouter中的動態路由匹配，能夠在路由中設置多段「路徑參數」，對應的值都會設置到$route.params中。

模式	匹配路徑	`$route.params`
`/user/:username`	`/user/evan`	`{ username: 'evan' }`
`/user/:username/post/:post_id`	`/user/evan/post/123`	`{ username: 'evan', post_id: '123' }`

響應路由參數的變化

當使用路由參數時，從/user/foo導航到/user/bar，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。

Vue Router中的嵌套路由
編程式的導航

聲明式與編程式：

聲明式	編程式
`<router-link :to="...">`	`router.push(...)`

示例：

router.replace(location, onComplete?, onAbort?)
複製代碼

聲明式與編程式：

聲明式	編程式
`<router-link :to="..." replace>`	`router.replace(...)`

瞭解命名路由的使用
瞭解VueRouter重定向和別名的使用
瞭解路由組件傳參:布爾模式，對象模式，函數模式
瞭解Vue Router的html5 history模式
瞭解如何用webpack從零構建vue.js+vuerouter+webpack項目
瞭解VUe Router中的導航守衛
瞭解Vue Router中的路由元信息
瞭解Vue Router中的過渡動效
瞭解Vue Router中的數據獲取
瞭解Vue Router中的滾動行爲

vue-router是什麼，這裏的路由就是SPA（單頁應用）的路徑管理器。路由模塊的本質就是創建起url和頁面之間的映射關係。

單頁面應用(SPA)的核心之一是: 更新視圖而不從新請求頁面

hash模式，默認爲hash模式，使用url的hash來模擬一個完整的url，當url發生改變時，頁面是不會從新加載的。

hash是#，url的錨點，表示網頁中的一個位置，只改變#符號後的部分是不會從新加載網頁，只會滾動到相應的位置。

便是hash出如今url中，不會被包含在http請求中，對後端沒有影響，因此改變hash是不會從新加載頁面的。可是注意，每次改變#符號後面的部分，都會在瀏覽器的訪問歷史中添加一個記錄，當使用「後退」按鈕時，就能夠回到上一次的位置。

hash模式下，經過改變錨點值，根據不一樣的值就能夠渲染至dom指定的位置。

hash模式的原理是onhashchange事件，用於監聽hash值的變化，能夠在window對象上監聽這個事件。

history模式，利用了html5 history interface中的pushState()方法和replaceState()方法，這兩種方法用於瀏覽器記錄棧。

使用history模式，須要後臺配置支持，會更好！在服務器端增長一個可以覆蓋全部狀況的靜態資源，若是url匹配不到任何靜態資源，就應該返回一個index.html頁面，這個頁面就是app依賴的頁面。

const routes = [ 
  {path: "/", name: "home", component:Home}
  {path: "/register", name: "register", component: Register},
  {path: "/login", name: "login", component: Login},
  {path: "*", redirect: "/"}]
複製代碼

實現頁面跳轉的方式：

示例：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './components/app.vue';
import Home from './components/home.vue'
Vue.use(VueRouter);
let router = new VueRouter({
    routes: [
        { path: '/home', component: Home }
    ]
});
new Vue({
    el: '#app',
    router: router,
    render: c => c(App),
})
複製代碼

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        }
    }
</script>
複製代碼

this.$router.go(-1)

this.$router.replace('/1')

this.$router.replace({name:'1'})

this.$router.push('/1')

this.$router.push({name:'1'})
複製代碼

那麼$router.push和$router.replace的區別

使用push方法的跳轉會向history棧中添加新的記錄，當點擊瀏覽器返回按鈕時能夠返回以前的頁面
使用replace方法不會向history添加新記錄，而是替換掉當前的history記錄。

安裝依賴：npm install vue-router

main.js:

import Vue from 'vue'
import APP from './App'
import router from './router'

new Vue({
 router: router,
 render: h=>h(App),
 data: {
     eventHub: new Vue()
 }
}.$mount('#app');
複製代碼

懶加載的方式：

component: resolve => require(['/'], resolve)
複製代碼

import Vue from 'vue';
import VueRouter from 'vue-router';
import linkParams from './page/linkParams.vue';
Vue.use(VueRouter);
const router = new VueRouter({
 mode: 'history',
 base: __dirname,
 routes: [
  {
      path: '/linkParams/:userId',
      name: 'linkParams',
      component: linkParams
  },
  {
      path: '/imgParams',
      name: 'xxx',
      component: resolve => require([], resolve)
  }
 ]
})
複製代碼

編程式導航

示例：

this.$router.push('home')

this.$router.push({path: 'home'})

this.$router.push({name:'user',params:{userId:123}})

this.$router.push({path: 'register', query: {userId: '123'}})
複製代碼

全局鉤子函數

router.beforeEach((to, from, next)=>{
  next();
});
router.afterEach((to, from, next) => {

});
複製代碼

路由獨享鉤子函數

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
複製代碼

組件內鉤子函數

const BOO = {
    template: '---',
    beforeRouteEnter(to, from, next){
        
    },
    beforeRouteUpdate(to, from, next){
        
    },
    beforeRouteLeave(to, from, next){
        
    }
}
複製代碼

route object路由信息對象，表示當前激活的路由的狀態信息，包含了當前url解析獲得的信息，還有url匹配到的route records路由記錄。

spa單頁面應用，前端路由的核心就是改變視圖的同時不會向後端發出請求。

webpack搭建項目：

npm init -y
複製代碼

npm add -D webpack webpack-cli
複製代碼

npm run build
複製代碼

node dist/main.js
複製代碼

打包html

npm add -D html-webpack-plugin
複製代碼

添加vue

npm add vue
複製代碼

npm add -D webpack-dev-server
複製代碼

npm add -D style-loader css-loader
複製代碼

npm add -D less-loader
複製代碼

npm add -D less
複製代碼

npm add vue-router
複製代碼

npm add express
複製代碼

路由這個概念是由後端出現的，經過瀏覽器中url發送請求，服務器監聽到端口有發送過來的請求，進行解析url的路徑，根據服務器的路由配置，返回相應的信息，瀏覽器根據數據包的Content-Type來判斷如何進行解析。

路由時跟後端服務器進行交互的一種方式，根據不一樣的路徑，請求不一樣的資源。

實現原理，spa單一頁面應用程序，一個頁面當它在加載頁面的時候，不會加載整個頁面的內容，只會更新指定的某個容器中的內容。

單一頁面應用核心：更新視圖不會從新請求頁面；vue-router在實現單頁面應用前端路由時，提供了三種方式，hash模式，history模式，abstract模式。

hash，爲使用URL hash值來做路由
history，依賴html5 history api和服務器配置
abstract，支持全部JavaScript運行環境

爲何有了後端路由，還要前端路由呢？

後端路由最很差之處在於：每次路由的切換都會致使頁面刷新，這樣的做風對於用戶體驗來講不太友好。爲了更好的用戶體驗，就有了前端路由。

它的出現，讓瀏覽器不會從新刷新了。

瞭解一下：

window.history.pushState()，在會話瀏覽歷史記錄中添加一條記錄。
window.history.replaceState()，該方法是將修改會話瀏覽歷史的當前記錄，瀏覽歷史記錄的總長度沒有變化。

這兩個方法能夠改變url，頁面也不會從新刷新。

當咱們使用hash路由模式，每次hash值得改變，會觸發hashchange事件，因此咱們經過監聽該事件來判斷hash值是否發生了變化。

history模式，在window對象中提供了onpopstate事件來監聽歷史棧的改變。

安裝依賴：

npm install vue-router
複製代碼

main.js

import router from './router';

new Vue({
 router: router,
 render: h => h(App),
})
複製代碼

瞭解JavaScript

JavaScript的定義：它是一種具備函數優先，輕量級，解釋型，即時編譯型的編程語言。JS是一種動態的基於原型和多範式的腳本語言，支持面向對象，命令式和函數式的語言。
它支持面向對象編程，命令式編程，函數式編程，函數先行的語言；它提供了操做文本，數組，日期以及正則表達式等。
變量的聲明一般在其他的代碼執行以前完成
變量的聲明，不管發生在哪裏，都在執行任何代碼以前進行處理，用var聲明的變量的做用域是它當前的執行上下文，它能夠是嵌套的函數，也能夠是聲明在任何函數外的變量，若是你從新聲明一個JavaScript變量，它將不會丟失其值。
將賦值給未聲明變量的值在執行賦值時

示例：

<script>
var pdada = document.querySelector('p');
pdada.addEventListener('click',updateName);
function updateName(){
    var name = prompt('輸入一個新的名字');
    pdada.textContent = '魔王哪吒-達達前端'
}

// onclick
document.querySelector('html').onclick=function() {};
複製代碼

變量的描述：聲明和未聲明變量之間的區別：

聲明變量的做用域限制在其聲明位置的上下文中，而非聲明變量老是全局的。
聲明變量在任何代碼執行前建立，而非聲明變量只有在執行賦值操做的時候纔會被建立。
聲明變量是它所在上下文環境的不可配置屬性，非聲明變量是可配置的。

示例：

console.log(dada); // 拋出ReferenceError
console.log(魔王哪吒); // 打印「魔王哪吒」
複製代碼

var a;
console.log(a); // 打印"undefined"或""（不一樣瀏覽器實現不一樣）
console.log("魔王哪吒"); // 魔王哪吒
複製代碼

var a = 1;
b = 2;
delete this.a; // 嚴格模式下拋出錯誤
delete this.b;
console.log(a,b); // 拋出ReferenceError
// b屬性已經被刪除
複製代碼

建議始終聲明變量，不管它們是在函數仍是全局做用域內，在ECMAScript5嚴格模式下，分配給未聲明的變量會引起錯誤。

什麼是變量提高

因爲變量聲明老是在任意代碼執行以前進行處理，因此在代碼中的任意位置聲明變量老是等效於在代碼開頭聲明，變量能夠在聲明以前使用。

全部的變量聲明移動到函數或者全局代碼的開頭位置。

因此建議始終在做用域頂部聲明變量，便是在全局代碼的頂部和函數代碼的頂部，這樣能夠清晰地知道哪些變量是函數做用域，哪些變量是在做用域鏈上解決。

多個變量的初始化

var x=0;

function f(){
    var x=y=1; // x在函數內部聲明，y不是
}
f();

console.log(x,y); // 0, 1
// x是全局變量
// y是隱式聲明的全局變量
複製代碼

隱式全局變量和外部函數做用域

// x是全局變量，賦值爲0
var x=0;
// undefined，由於z還不存在
console.log(typeof z);

function a() { // 當a被調用時
 var y = 2; // y被聲明成函數a 做用域的變量，賦值爲2
 console.log(x,y); // 0 2
 function b() {
     // 當b被調用時
     x=3; // 全局變量x被賦值爲3,不生成全局變量
     y=4; // 已經在的外部函數的y變量 被賦值爲4，不生成新的全局變量
     z=5; // 建立新的全局變量z，並賦值爲5
     // 在嚴格模式下，會拋出ReferenceError
 }
 b(); // 調用b時建立了全局變量z
 console.log(x,z); // 3,5
}

a(); // 調用a時同時調用了b
console.log(x,z); // 3,5
console.log(typeof y); // undefined,由於y是a函數的本地變量
複製代碼

僞代碼，循環過程：

loop(foo=0, eatFood=10){
    if(foo = eatFood){
        exit loop;
    }else{
        foo+=2;
    }
}
複製代碼

原型鏈：每一個對象都有一個原型對象，對象以其原型爲模板，從原型繼承方法和屬性。原型對象也能夠擁有原型，並從中繼承方法和屬性，一層一層，以此類推的這種關係被稱爲原型鏈。

換句話說，這些屬性和方法是定義在Object的構造函數之上的prototype屬性上，而非對象實例自己。

{
    constructor: ƒ doSomething(),
    __proto__: {
        constructor: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),
        isPrototypeOf: ƒ isPrototypeOf(),
        propertyIsEnumerable: ƒ propertyIsEnumerable(),
        toLocaleString: ƒ toLocaleString(),
        toString: ƒ toString(),
        valueOf: ƒ valueOf()
    }
}
複製代碼

瞭解掌握什麼是原型，Prototype和__proto__，以及原型鏈

create()：使用Object.create()方法建立新的對象實例：

// person1 爲原型對象建立了person2對象
// person2.__proto__ 結果返回對象person1
var person2 = Object.create(person1);

// person2.__proto__ === person1
複製代碼

create()其實是從指定原型對象建立一個新的對象。

constructor屬性

每一個實例對象都從原型中繼承了一個constructor屬性，該屬性指向了用於構造此實例對象的構造函數。

person1.constructor
person2.constructor
複製代碼

都將返回Person()構造器，由於該構造器包含這些實例的原始定義。

想要獲取某個對象實例的構造器的名字：

instanceName.constructor.name

// person1.constructor.name
複製代碼

原型式的繼承

定義構造器函數

function Person(first, last, age, gender, interests) {
    this.name = {
        first,
        last,
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
}

Person.prototype.greeting = function(){
    console.log('hello'+this.name.first)
}

function dadaqianduan(first, last, age, gender, interests, subject) {
    Person.call(this, first, last, age, gender, interests);
    
    this.subject = subject;
}
複製代碼

Function.prototype.call()

call()方法調用一個函數，具備一個指定的this值和分別地提供的參數（參數的列表）

這個方法的做用和apply()方法相似，只有一個區別，就是call()方法接收的是若干個參數的列表，而apply()方法接收的是一個包含多個參數的數組。

語法：

fun.call(thisArg, arg1, arg2, ...)
複製代碼

返回值，使用調用者提供的this值和參數調用該函數的返回值，若該方法沒有返回值，則返回undefined。

圖中的this指向了abc的位置。

從無參構造函數繼承

示例：

function dada(){
    this.width = 10;
    this.height = 20;
}

// 無參構造函數繼承

function da1() {
    dada.call(this);
    this.opacity = 0.5;
    this.color = 'blue';
}
複製代碼

var a = new da1()

a
複製代碼

設置原型和構造器的引用

Teacher.prototype = Object.create(Person.prototype)
複製代碼

任何你想要被繼承的方法都應該定義在構造函數的prototype對象裏，而且永遠使用父類的prototype來創造子類的prototype，這樣纔不會打亂類繼承結構。

why is necessary to set the prototype constructor?

Student.prototype.coonstructor = Student;
複製代碼

示例：

// define the Person Class
function Person(name) {
    this.name = name;
}

Person.prototype.copy = function() {
    // return new Person(this.name);
    return new this.constructor(this.name);
};

// define the Student class
function Student(name) {
    Person.call(this, name);
}

// inherit Person
Student.prototype = Object.create(Person.prototype);
複製代碼

var student1 = new Student("掘金");
console.log(student1.copy() instanceof Student); // false
複製代碼

添加：

Student.prototype.constructor = Student;

var student1 = new Student("掘金");
console.log(student1.copy() instanceof Student); // true
複製代碼

繼承

示例：

Teacher.prototype = Object.create(Person.prototype)
Teacher.prototype.constructor = Teacher
複製代碼

什麼是JSON

聲明：

var：聲明一個變量，可選初始化一個值 let：聲明一個塊做用域的局部變量，可選初始化一個值 const：聲明一個塊做用域的只讀常量

使用變量來做爲值的符號名，變量的名字又叫作標識符，它必須以字母，下劃線，或者美圓符號（$）開頭；後續的字符也能夠是數字。

labeled語句

一個label提供了一個可讓你引用到您程序別的位置的標識符。

for...in語句，循環一個指定的變量來循環一個對象全部可枚舉的屬性。

for...of和for...in兩種循環語句之間的區別：

for...in循環遍歷的結果是數組元素的下標
for...of遍歷的結果是元素的值

函數聲明：一個函數定義，也稱爲函數聲明，或函數語句，由一系列的function關鍵字組成。

遞歸：一個函數能夠指向並調用自身。

嵌套函數：一個函數裏面嵌套另一個函數。嵌套（內部）函數對其容器（外部）函數是私有的。它自身造成了一個閉包。內部函數包含外部函數的做用域。

內部函數造成了一個閉包，它能夠訪問外部函數的參數和變量，可是外部函數卻不能使用它的參數和變量。

內部函數能夠訪問外部函數的做用域，所以當內部函數生命週期大於外部函數時，外部函數中定義的變量和函數的生命週期比內部函數執行時間長才行，當內部函數被銷燬後，外部函數纔會被銷燬。

使用arguments對象

函數的實際參數被保存在一個相似數組的arguments對象中。

箭頭函數相比函數表達式具備較短的語法並以詞法的方式綁定this。

typeof(null)
// object

typeof({})
// object
複製代碼

表達式：一組代碼的集合，它返回一個值。this關鍵字被用於指代當前的對象，一般，this指代的是方法中正在被調用的對象。

split經過將字符串分離成一個個子串來把一個string對象分裂到一個字符串數組中。

slice從一個字符串提取片斷並做爲新字符串返回。

substring,substr，分別經過指定起始和結束位置，起始位置和長度來返回字符串的指定子集。

match,replace,search經過正則表達式來工做。

toLowerCase,toUpperCase分別返回字符串的小寫表示和大寫表示。

normalize按照指定的一種Unicode正規形式將當前字符串正規化。

repeat，將字符串內容重複指定次數後返回。

trim，去掉字符串開頭和結尾的空白字符。

正則表達式

正則表達式是用於匹配字符串中字符組合的模式。在JavaScript中，正則表達式也是對象。

使用一個正則表達式字面量：

const regex = /ab+c/;

const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;
複製代碼

正則表達式能夠被用於RegExp的exec和test方法以及String的match，replace，search和split方法。

exec()方法在一個指定字符串中執行一個搜索匹配，返回一個結果數組或null。

test一個在字符串中測試是否匹配的RegExp方法，它返回true或false。

match一個在字符串中執行查找匹配的String方法，它返回一個數組或者未匹配到時返回null。

search一個在字符串中測試匹配的String方法，它返回匹配到的位置索引，或者在失敗時返回-1。

replace一個在字符串中執行查找匹配的String方法，而且使用替換字符串換掉匹配到的子字符串。

如何使用Promise

一個Promise是一個表明異步操做最終完成或者失敗的結果對象。本質上是一個綁定了回調的對象，而不是將回調傳進函數內部。

示例：

function wait(ms){
    return new Promise(function(resolve,reject){
        setTimeout(resolve,ms);
    })
}

console.log('開始')
wait(3000).then(()=>{
  console.log('123')  
})
複製代碼

一個Promise有如下幾種狀態：

pending：初始狀態，既不是成功，也不是失敗狀態；fulfilled：意味着操做成功完成；rejected：意味着操做失敗。

Promise對象是一個代理對象，被代理的值在Promise對象建立時多是未知的。它容許你爲異步操做的成功和失敗分別綁定相應的處理方法。

讓異步方法能夠像同步方法那樣返回值，但並非當即返回最終執行結果，而是一個能表明將來出現的結果的promise對象。

由於Promise.prototype.then和Promise.prototype.catch方法返回promise對象，因此它們能夠被鏈式調用。

Promise.all方法返回一個新的promise對象，該promise對象在iterable參數對象裏全部的promise對象都成功的時候纔會觸發成功，一旦有任何一個iterable裏面的promise對象失敗則當即觸發該promise對象的失敗。

一個新的promise對象在觸發成功狀態後，會把一個包含iterable裏全部promise返回值的數組做爲成功回調的返回值，順序跟iterable的順序保持一致，若是這個新的promise對象觸發了失敗狀態，它會把iterable裏第一個觸發失敗的promise對象的錯誤信息做爲它的失敗錯誤信息。

Promise.race當iterable參數裏的任意一個子promise被成功或失敗後，父promise立刻也會用子promise的成功返回值或失敗詳情做爲參數調用父promise綁定的相應句柄，並返回該promise對象。

JavaScript中的帶鍵的集合

一個Map對象就是一個簡單的鍵值對映射集合，能夠按照數據插入時的順序遍歷全部的元素。

JavaScript中的Object對象

枚舉一個對象的全部屬性

for...in循環，該方法依次訪問一個對象及其原型鏈中全部可枚舉的屬性。

Object.keys(o)，該方法返回一個對象o自身包含的全部屬性的名稱的數組。

Object.getOwnPropertyName(o)，該方法返回一個數組，它包含了對象o全部擁有的屬性的名稱。

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort());

// 結果
["0", "1", "2", "length"]

// 類數組對象
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.getOwnPropertyNames(obj).sort());

// 結果
["0", "1", "2"]

// 使用Array.forEach輸出屬性名和屬性值
Object.getOwnPropertyName(obj).forEach(function(val, idx, array) {
   console.log(val+"->"+obj[val]); 
});

// 輸出
0 -> a
1 -> b
2 -> c
複製代碼

JavaScript中的內存管理

內存生命週期：

分配你所須要的內存，使用分配的內存，在不須要時須要歸還釋放內存。

Node.js

學習Node.js，須要預備知識，html，css，javascript,簡單的命令行操做，具備服務端開發經驗。

node.js不是一門語言
node.js不是庫，不是框架
Node.js是一個JavaScript運行時環境
node.js能夠解析和執行JavaScript代碼

node.js中的JavaScript

沒有bom,dom，有EcmaScript，提供額外的api

node.js能作web服務器後臺，命令行工具

B/S編程模型：Browser-Server，back-end。模塊化編程，RequireJS，SeaJS，什麼是模塊化編程，就是能夠在node中能夠像@import()同樣來引用加載JavaScript腳本文件。

異步編程：回調函數，Promise，async，generator

文件名不要使用node.js來命名，不要使用中文。在node中，採用EcmaScript進行編碼沒有，沒有Bom，Dom，和瀏覽器中的JavaScript不同。

// fs是 file-system的簡寫,就是文件夾系統的意思
// 在Node中若是想要進行文件操做,就必須引入fs這個核心模塊
// 在js這個核心模塊中,就提供了全部的文本操做相關的api
// fs.readFile 就是用來讀取文件的

// 使用require方法加載fs核心模塊
var fs = require('fs')

// 讀取文件
// 第一個參數就是要讀取的文件路徑
// 第二個參數就是一個回調函數
// error
// 若是讀取失敗,error就是錯誤對象
// 若是讀取成功,error就是Null
// data
// 若是讀取失敗,error就是錯誤對象
// 若是讀取成功,data就是讀取到的數據

// 成功
// data 數據
// error null
// 失敗
// data null
// error 錯誤對象

fs.readFile('./dada.txt', function(error, data){
	// 文件中存儲的其實都是二進制數據0或1
	// 看到的是二進制轉16進制
	// toString方法
	console.log(data.toString())
})
複製代碼

var fs = require('fs')

// 第一個參數:文件路徑
// 第二個參數:文件內容
// 第三個參數:回調函數

// 成功
// 文件寫入成功,error是null
// 失敗
// 文件寫入失敗,error是錯誤對象
fs.writeFile('./da.md', '你們好,我是達達前端', function(error){
	console.log('文件寫入成功')
})
複製代碼

// http 幫你建立服務器

// 加載核心模塊
var http = require('http')

// 使用http.createServer()方法建立一個web服務器

// 返回一個server實例
var server = http.createServer()

// 服務器提供服務:對數據的服務
// 發請求
// 接收請求
// 處理請求
// 給個反饋

// 註冊 當客戶端請求過來,就會自動觸發服務器的request請求事件
// 而後執行第二個參數
// 回處處理函數

// request請求事件處理函數,須要接收兩個參數:
// Request 請求對象
// 請求對象能夠用來獲取客戶端的一些請求信息,例如請求路徑
// Response 響應對象
// 
server.on('request', function(request, response){
	console.log('收到客戶端的請求了'+request.url)
	
	// response 對象有一個方法
	// write 用來給客戶端發送響應數據
	// write 可使用屢次
	// 最後必定必定要使用end來結束響應
	// 不然客戶端會一直等待
	response.write('dada')
	response.write('掘金魔王哪吒')
	response.end()
})

// 綁定端口號 啓動服務器
server.listen(3000, function(){
	console.log('服務器啓動成功')
})
複製代碼

node.js是什麼？它是JavaScript運行時，不是語言，框架，它是一個平臺，沒有BOM，DOM。EcmaScript基本的JavaScript語言部分，在Node.js中爲JavaScript提供了一些服務器級別的api，文件操做的能力，http服務的能力。

var http = require('http')

// 建立server
var server = http.createServer()

// 監聽request 請求事件,設置請求處理函數
server.on('request',function(req,res){
	console.log('收到請求'+req.url)
	
	res.end('達達前端,魔王哪吒-掘金')
	
	// 根據不一樣的請求路徑發送不一樣的響應結果
	// 獲取請求路徑
	// 判斷路徑響應
	
	// res.end() 響應內容必須是字符串,或二進制數據
	// res.end(JSON.stringify())
	
	var url = req.url
	
	if(url === '/') {
		res.end('index')
	}else if(url === '/login') {
		res.end('login page')
	}else {
		res.end('404 not found')
	}
	
})

// 綁定端口號,啓動服務
server.listen(80,function(){
	console.log('服務器啓動')
})
複製代碼

核心模塊：

node爲JavaScript提供了不少服務器級別的api，這些api絕大部分包裝到了一個具名的核心模塊中。

fs核心模塊文件操做，http服務器構建的http模塊，path路徑操做模塊等。

在node中，沒有全局做用域，只有模塊做用域，外部訪問不到內部，內部也訪問不到外部。

require方法有兩個做用：

加載文件模塊並執行裏面的代碼
拿到被加載文件模塊導出的接口對象

每一個文件模塊中提供了一個對象：exports exports 默認是一個空對象

var ret = request('./b')

// console.log(ret)
console.log(ret.foo)

console.log(ret.add(1,2))
複製代碼

var foo = '達達前端'
// console.log(exports)
exports.foo = 'hello'

exports.add = function(x,y) {
    return x+y
}
複製代碼

web服務器開發：

ip地址是用來定位計算機，端口號用來定位具體的應用程序，全部須要聯網通訊的軟件都會佔用一個端口號，端口號的範圍從0-65536之間，在計算機中有一些默認端口號，建議不要去使用。

響應內容類型：Content-type

var http = require('http')

var server = http.createServer()

server.on('request', function(req, res){
	// 解決編碼問題
	// res.setHeader('Content-Type','text/plain;charset=urf-8')
	// res.end('dadaqianduan')
	
	var url = req.url
	// text/plain 普通文本
	if(url === '/plain'){
		res.setHeader('Content-Type', 'text/plain;charset=utf-8')
		res.end('dadaqianduan')
	}else if(url === '/html'){
		res.setHeader('Content-Type', 'text/html;charset=utf-8')
		res.end('<p>dadaqianduan</p>')
	}
	
})

server.listen(3000, function(){
	console.log('server is runing...')
})
複製代碼

var http = require('http')
var fs = require('fs')

var server = http.createServer()

server.on('request', function(req, res){
	var url = req.url
	if(url === '/'){
		fs.readFile('./resource/index.html', function(err,data){
			if(err){
				res.setHeader('Content-Type','text/plain;charset=utf-8')
				res.end('文件讀取失敗,請稍後重試')
			}else{
				// data默認是二進制數據
				// toString轉爲字符串
				
				// 圖片資源不要指定編碼
				// res.setHeader('Content-Type','image/jpeg')
				res.end(data)
			}
		})
	}
})

server.listen(3000, function(){
	
})

// url 統一資源定位符
複製代碼

經過網絡發送文件

發送的並非文件，本質上是發送文件的內容；當瀏覽器收到服務器響應內容以後，就會根據你的Content-Type進行對應的解析處理。

服務器渲染和客戶端渲染的區別

客戶端渲染不利於SEO搜索引擎優化
服務端渲染能夠被抓取到，客戶端異步渲染就很難獲取到
真正的網站既不是純異步也不是純服務渲染

ip地址和端口號

全部聯網的程序都須要進行網絡通訊，計算機只有一個物理網卡，並且同一個局域網中，網卡的地址必須是惟一的。

網卡是經過惟一的ip地址來進行定位的。端口號用來定位具體的應用程序，全部須要聯網通訊的應用程序都會佔用一個端口號。端口號的範圍0到65536之間。

JavaScript思惟導圖

更加深刻JavaScript等待下一篇總結。

3. 我的收集大廠面試題庫（含答案）

interview-answe 1+1：目錄

github.com/webVueBlog/…

4. 面試時的小技巧

面試考察點：

基礎部分，須要掌握基礎技術點，庫和框架
經驗部分，如作過什麼項目，項目中解決了什麼核心問題；項目開發過程當中，先後端多個角色是如何配合的；多人如何合做開發；針對你的工做作過的如何思考，項目，團隊，自身各個方面均可以進行談論
思路部分，框架適用的場景，設計某個技術場景的解決方案
面試部分，一輪，老大面，考關注綜合能力，二輪，技術總監，關注算法和綜合能力，三輪，hr將公司的好等

對於簡歷：不要列舉太多，通常兩頁就夠，強調特殊技能，管理，跨端，全棧，作的重要項目，核心解決了什麼問題，附加github或者網站等。

面試準備，將最近最近作過的重要的技術點梳理一下，能過清晰說出總體的架構和思考改進，常見問題複習一下，沒必要全面，但要重要，準備問題留着問面試官。

面試時，要沉着冷靜，不要想太多，就事論事，讓面試官聽你講。掌握主動權，不少問題並無標準答案，因此儘可能答就行，考官的考察點可能並非問題自己。

5. 整理的知識體系

【 suggestion 👍 】 from 0 to 1 web front-end

web-0-1目錄

github.com/webVueBlog/…

6. 對於有面試需求的朋友，所提供的幫助

優秀的工程師，有好奇心，學習能力，分析解決問題的方式和能力。

利用技術解決生活中遇到的問題，有本身的小做品，專欄或者學習總結，對技術投入大量的時間等。

看書，邊看邊寫，模仿實現，學習流行的開發框架

用框架開發小應用，開發項目等

深刻了解各類框架解決的核心問題，解決多人開發問題，工程化

深刻js底層，瞭解各類框架的核心機制，架構師

更多精彩內容：www.dadaqianduan.cn/#/

7. 參考文獻

MDN:developer.mozilla.org/

維基百科:zh.wikipedia.org/

JavaScript高級程序設計（第3版）

【高能筆記】如何得到使人心動的前端offer | 掘金技術徵文

前言