【高能笔记】如何得到使人心动的前端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 | 掘金技术征文

前言