dairen_j的博客

2021.05.14 前端面试分享

dairen_j — Fri, 14 May 2021 19:15:05 +0800

1. Vue和jQuery的区别 jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象 Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。 2. 闭包的理解，闭包的缺点闭包（closure）指有权访问另一个函数作用域中变量的函数常驻内存，增加内存使用量；使用不当造成内存泄漏 3. 接着问到：什么是

JavaScript 宏任务和微任务

dairen_j — Fri, 30 Apr 2021 16:44:55 +0800

宏任务分类：setTimeout setInterval Ajax 事件绑定等宏任务所处的队列就是宏任务队列第一个宏任务队列中只有一个任务：执行主线程的js代码宏任务队列可以有多个当宏任务队列的中的任务全部执行完以后会查看是否有微任务队列，如果有先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列。微任务分类：new Promise().then(回调) process.nextTick 微任务所处的队列就是微任务队列只有一个微任务队列在上一个宏任务队列执行完华后如

排序算法

dairen_j — Thu, 29 Apr 2021 18:53:01 +0800

排序算法 : sort方法：改变原数组 let arr = [22,31,21,1,7,45]; function seq(a,b){ return a-b } arr.sort(seq); console.log(arr) 冒泡排序两个for循环嵌套循环遍历 let arr1 = [33,22,21,41,5,1] function bubbleSort(arr) { var len = arr.length; for (var i = 0; i < len; i+

从一个url地址到最终页面渲染完成，发生了什么？

dairen_j — Wed, 28 Apr 2021 19:08:42 +0800

1. DNS解析：将域名地址解析为IP地址浏览器DNS缓存系统DNS缓存路由器DNS缓存网络运行商DNS缓存递归搜索：例如 csdn.jinxiaozhaung.com .com 域名下查找DNS解析 .jinxiaozhuang 域名下查找DNS解析 .csnd 域名下查找DNS解析出错了 2. TCP连接，TCP三次握手第一次握手，由浏览器发起，告诉服务器我要发送请求了第二次握手，由服务器发起，告诉浏览器我准备接受了，你发送吧第三次握

TypeScript数据类型

dairen_j — Sat, 06 Feb 2021 17:23:03 +0800

TypeScript安装使用npm管理工具安装 npm install -g typescript TypeScript基础类型 1. 任意类型（any）声明为 any 的变量可以赋予任意类型的值 let x: any = 1; // 数字类型 x = '你好'; // 字符串类型 x = false; // 布尔类型 2. 数字类型（number）双精度 64 位浮点值。它可以用来表示整数和分数。 let a:number = 11 let b:number = 2

Vuex

dairen_j — Tue, 22 Dec 2020 18:49:27 +0800

1. Vuex 概述 1.1 组件之间共享数据的方式父向子传值：v-bind 属性绑定子向父传值：v-on 时间绑定兄弟组件之间共享数据：EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件 1.2 Vuex是什么 Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。 2. Vuex 的基本使用按装 vuex 依赖包 npm install vuex --save 导入 vuex 包 import Vuex from 'vuex

vue全家桶项目优化上线

dairen_j — Sun, 20 Dec 2020 22:18:19 +0800

1. 项目优化 1.1 项目优化策略 A.生成打包报告，根据报告优化项目 B.第三方库启用CDN C.Element-UI组件按需加载 D.路由懒加载 E.首页内容定制 1.1.1 生成打包报告打包时，为了直观的发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：通过命令行参数的形式生成报告通过 vue-cli 的命令选项可以生成打包报告 --report 选项可以生成 report.html 以帮助分析包内容 vue-cli-service build --report 通过可视

echarts出现 “TypeError: Cannot read property ‘init‘ of undefined“报错解决

dairen_j — Fri, 18 Dec 2020 23:44:31 +0800

导入echarts时用：import echarts from 'echarts' 出现 “Cannot read property ‘init’ of undefined” 报错，改成 import * as echarts from 'echarts' 后解决。

Error: Cannot find module ‘webpack-cli/bin/config-yargs‘报错原因

dairen_j — Fri, 27 Nov 2020 16:05:50 +0800

配置 webpack 自动打包功能后，执行命令 npm run dev 出现以下报错：出现此问题的原因是安装的 webpack-dev-server 与 webpack-cli 的版本问题，下面是 package.json 中的版本信息我们看到 webpack-cli 的版本是 4.2.0，而 webpack-cli 从4.x.x开始就没有该目录，所以我们保证webpack-cli 和 webpack-dev-server 的版本只要都是 3.x.x 就可以解决了具体步骤：使用 npm.

Vue--前端交互 axios

dairen_j — Thu, 26 Nov 2020 19:22:38 +0800

1. axios 的基本特性 axios是基于Promise用于浏览器和node.js的HTTP客户端特征：支持浏览器和node.js 支持 promise 能拦截请求和响应自动转换JSON数据 2. axios 的基本用法 axios.get('/adata').then(ret=>{ console.log(ret.data) //data属性固定，用于获取后台响应数据 }) 3. axios的参数传递 1.get 通过restful传递参数也可以通

Vue--前端交互 fetchAPI

dairen_j — Thu, 26 Nov 2020 18:58:31 +0800

1. fetch基本使用 fetch 就是 ajax + Promise. 使用的方式和 jquery 提供的 $.ajax() 差不多 fetch默认是get请求 //基本用法 fetch('http://localhost:3000/data') .then(function (data) { //text() 方法属于fetchAPI的一部分，他返回一个Promise实例对象，用于获取后台返回的数据 ret

Vue--组件化开发

dairen_j — Wed, 25 Nov 2020 11:39:30 +0800

1. 组件注册 1.全局组件注册语法 //Vue.component(组件名称，{ //data:组件数据（函数）， //template:组件模板内容 //}) //------------------------------ Vue.component('button-counter', { data: function () { return {

Vue基础--常用特性

dairen_j — Tue, 24 Nov 2020 17:57:52 +0800

常用特性与表单操作 1. 表单操作 1. 基于Vue的表单操作常见的表单元素： input 单行文本，textarea 多行文本，select 下拉多选，radio 单选框，checkbox 多选框单选框实现单选 1、两个单选框需要同时通过v-model 双向绑定一个值 2、每一个单选框必须要有value属性且value 值不能一样 3、当某一个单选框选中的时候 v-model 会将当前的 value值改变 data 中的数据复选框实现复选 1、复选框需要

Vue基础-本地应用

dairen_j — Mon, 23 Nov 2020 20:51:12 +0800

1. 内容绑定，事件绑定 v-text：设置标签的文本值（textContent）默认写法会替换全部内容，使用差值表达式{{}} 可以替换指定内容内部支持写表达式 v-html：设置标签的innerHTML 内容中有HTML会被解析成标签（存在安全问题） v-pre :填充原始信息显示原始信息跳过编译过程 v-on基础：为元素绑定事件 v-on:click="doit" || @dblclick="doit" 绑定的方法定义在methods属性中方法内部通过this关键字可以

Linux常用操作

dairen_j — Sun, 15 Nov 2020 14:55:08 +0800

this 简单明了指向问题

dairen_j — Thu, 05 Nov 2020 20:17:15 +0800

回顾一下 JavaScript 中 this 的指向问题（非严格模式下的 this 指向）函数的不同调用方式决定了 this 的指向不同普通函数 this 指向 window function fn() { console.log('普通函数的this' + this); } window.fn(); 对象的方法 this 指向的是对象 var o = { sayHi: function().

模块化与闭包

dairen_j — Mon, 02 Nov 2020 11:56:30 +0800

在《《JavaScript核心技术开发解密》》讲模块化与闭包中，提到了一个案例，实现每隔一秒 body的背景颜色就随着一个数字的递增在固定的三种颜色之间切换。目前流行的模块化开发思路，无论是requier，还是ES6中的module，虽然实现方式不同，但是核心的思路都是一样，模块化其实就是建立在单例模块基础之上的，因此模块化开发和闭包息息相关。下面实现每隔一秒 body的背景颜色就随着一个数字的递增在固定的三种颜色之间切换的案例首先创建一个专门用来管理全局状态的模块。这个模块中有一个私有变量保存.

npm install 安装出错

dairen_j — Fri, 30 Oct 2020 11:47:00 +0800

今天在搭建项目运行环境时，进入项目根目录下，使用 npm install 下载项目依赖的第三方模块出现报错。过程先是卡顿，后报错如下：搜索之后感觉是下载的版本不对应，执行的解决办法是：使用 npm cache clean --force 清除缓存然后将安装失败的项目中的node_modules文件夹以及package-lock.json文件删除最后再使用 npm install 命令下载就成功了出现以上报错的原因是因为 package-lock.json 文件之前锁定了下载包.

前端基础面试题--基础数据类型与引用数据类型（Obiect）

dairen_j — Tue, 27 Oct 2020 20:07:48 +0800

今天在图书馆看到《JavaScript核心技术开发解密》这本书，里面讲了js的基础核心知识，拿来回顾一下，加深对基础知识的理解，感觉还不错，值得推荐，下面是随手记录一下知识点总结。基础数据类型与引用数据类型发生复制行为后的不同结果看下面两个demo //demo01.js var a = 20; var b = a; b = 30; //这时a的值是多少 //demo02.js var m = { a: 10 , b: 20} var n = m; n.a = 15; //这时m.a的值是多.

Ajax学习--FormData对象

dairen_j — Sat, 24 Oct 2020 17:35:04 +0800

1.FormData 对象的作用模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式异步上传二进制文件 2.FormData 对象的使用 1.准备 html 表单