【高能笔记】如何获得令人心动的前端offer

前言

硬核的哪吒,我的命由我不由天。

精彩回顾:

【图文并茂,点赞收藏哦!】重学巩固你的Vuejs知识体系

【思维导图】前端开发-巩固你的JavaScript知识体系

Web页面制作基础

学习总结之HTML5剑指前端(建议收藏,图文并茂)

前端面试必备ES6全方位总结

目录

  1. 个人的面试经历
  2. 当作为考官我会考问你的面试重点
  3. 个人收集大厂面试题库(含答案)
  4. 面试时的小技巧
  5. 整理的知识体系(个人重点内容)
  6. 对于有面试需求的朋友,需要的帮助

所谓令人心动的offer即是让你心仪的,想要的,所追求的,如果你是社会人士,想起当年面试的自己有过哪些的经历呢?是否遗憾在学校时不曾坚持努力的自己?如果你是在校生,你会面临出校后的一场面试,是否已经准备好了呢?

面试如同考试,检验你的知识点是否已经牢牢掌握,一次面试的成功会让你对自己充满信心,也许大多数人面临的面试都是一次次的失败,得到挫败感的心灵打击。

那么面试如何做到对答如流,或者低一点要求如何让对方记住你呢?在考官的逐层盘问下,在脑海里梳理起自己的知识体系,找到自己想要的答案。

面试经验,其实可以举一反三,类比考试,经过以往的在校考试,学习技巧等相类似,只不过面试是面试管当场问你题目,你作答这样的一种模式,面试一般有几轮,各各公司各有不同而已。

面试也是一次难得的自我摸底考试。从目录中的6点内容,希望能帮助自己也帮助他人的成长。

1. 个人的面试经历

个人的面试经历,从在校被老师推荐到朋友的前端开发工作岗位,到自己重新找工作,反复面试了几家进了其中一家,到目前的某公司前端开发负责人,个人感觉自己的面试经历都是步入正常轨迹,即是准备面试简历,展示自己的项目到论述自己在校的成就等。

内容重点强行在于面试的经验与面试的准备,面试准备其实就是自己掌握的知识体系,与必备的面试考点,网红题目。

2. 当作为考官我会考问你的面试重点

下面,带你一起阅读一下知识体系,大篇幅面试重点。希望能帮助到你。

面试官:说说VueRouter

Vue.jsVue 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.push(...)

示例:

router.replace(location, onComplete?, onAbort?)

声明式与编程式:

声明式 编程式
router.replace(...)
  • 了解命名路由的使用
  • 了解VueRouter重定向和别名的使用
  • 了解路由组件传参:布尔模式,对象模式,函数模式
  • 了解Vue Routerhtml5 history模式
  • 了解如何用webpack从零构建vue.js+vuerouter+webpack项目
  • 了解VUe Router中的导航守卫
  • 了解Vue Router中的路由元信息
  • 了解Vue Router中的过渡动效
  • 了解Vue Router中的数据获取
  • 了解Vue Router中的滚动行为

vue-router是什么,这里的路由就是SPA(单页应用)的路径管理器。路由模块的本质就是建立起url和页面之间的映射关系。

单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面

hash模式,默认为hash模式,使用urlhash来模拟一个完整的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: "/"}]

实现页面跳转的方式:

【高能笔记】如何获得令人心动的前端offer_第1张图片

示例:

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),
})


【高能笔记】如何获得令人心动的前端offer_第2张图片

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的区别

  1. 使用push方法的跳转会向history栈中添加新的记录,当点击浏览器返回按钮时可以返回之前的页面
  2. 使用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模式。

  1. hash,为使用URL hash值来作路由
  2. history,依赖html5 history api和服务器配置
  3. abstract,支持所有JavaScript运行环境

为什么有了后端路由,还要前端路由呢?

后端路由最不好之处在于:每次路由的切换都会导致页面刷新,这样的作风对于用户体验来说不太友好。为了更好的用户体验,就有了前端路由。

它的出现,让浏览器不会重新刷新了。

了解一下:

  1. window.history.pushState(),在会话浏览历史记录中添加一条记录。
  2. 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

  1. JavaScript的定义:它是一种具有 函数优先,轻量级,解释型,即时编译型 的编程语言。JS是一种动态的基于原型和多范式的脚本语言,支持面向对象,命令式和函数式的语言。
  2. 它支持面向对象编程,命令式编程,函数式编程,函数先行的语言;它提供了操作文本,数组,日期以及正则表达式等。
  3. 变量的声明通常在其余的代码执行之前完成
  4. 变量的声明,无论发生在哪里,都在执行任何代码之前进行处理,用var声明的变量的作用域是它当前的执行上下文,它可以是嵌套的函数,也可以是声明在任何函数外的变量,如果你重新声明一个JavaScript变量,它将不会丢失其值。
  5. 将赋值给未声明变量的值在执行赋值时

示例:


                    
                    

你可能感兴趣的:(达达前端指路)