dairen_j的博客

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

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

原创 Vue--前端交互 axios

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传递参数也可以通

原创 2021.05.14 前端面试分享

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

原创 JavaScript 宏任务和微任务

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

原创 排序算法

排序算法 :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地址到最终页面渲染完成，发生了什么？

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

原创 TypeScript数据类型

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

原创 Vuex

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全家桶项目优化上线

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

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

配置 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--前端交互 fetchAPI

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

原创 Vue--组件化开发

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

原创 Vue基础--常用特性

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

原创 Vue基础-本地应用

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

原创 Linux常用操作

原创 this 简单明了指向问题

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

原创 模块化与闭包

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

原创 npm install 安装出错

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

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

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

原创 Ajax学习--FormData对象

1.FormData 对象的作用模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式异步上传二进制文件2.FormData 对象的使用1.准备 html 表单<form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="

原创 Node.js异步编程 异步函数 async await 关键字

ES7中新增了异步函数语法，异步函数就是基于Promise对象的基础上进行封装，用来解决异步编程，可以让我们将异步代码写成同步的形式，让代码不再有回调函数嵌套，使代码变得清晰明了。1.什么是同步API，什么是异步API同步API：只有当前API执行完成后，才能继续执行下一个APIconsole.log('before'); console.log('after');异步API：当前API的执行不会阻塞后续代码的执行console.log('before');setTimeout(.

原创 Express框架学习

1. Express框架简介1.Express框架是什么Experss是一个基于Node平台的web应用开发框架，用于创建web应用使用 npm install express 命令进行下载2.Express框架特性提供简洁的路由定义方式对获取HTTP请求参数进行了简化对模板引擎支持度高，方便渲染动态HTML页面提供了中间件机制有效控制HTTP请求拥有大量第三方中间件对功能进行扩展2. Express框架中间件1.什么是中间件中间件就是一堆方法，可以接收请求作出响应.

原创 Gulp插件应用

第三方模块 Gulp：基于node平台开发的前端构建工具作用：项目上线时html css js文件的压缩合并如es6，less的语法转换公共文件抽离修改文件浏览器自动刷新1. gulp的使用使用npm install gulp 下载gulp文件在项目根目录下建立 gulpfile.js文件重构项目的文件结构 src 目录放置源代码文件 dist 目录放置构建后文件在gulpfile.js中编写任务在命令工具行中执行gulp任务2. gulp中提供的方法gulp.src(.

原创 利用js将手机号中间四位变成*号

前言：无意间留意到一个面试题，需求是利用js将手机号中间四位变成*号，简单记录一下。1. 利用字符串的substr方法substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。语法：str.substr(start[, length])参数start：开始提取字符的位置。length：可选。提取的字符数。 var tel = 15617076160; tel = "" + tel; var newTel = tel.substr(0,3) + "****".

原创 js学习笔记--ES6

前言 ：ES6新增了若干语法，例如：let 关键字、const 声明常量、数组以及对象解构赋值、箭头函数、剩余参数等；以及ES6的内置对象扩展，包括Array 的扩展方法、String 的扩展方法还有Set 数据结构等，今天这里只记录一下Let 关键字和箭头函数的经典面试题，想要了解更多请至码云...

原创 js学习笔记--常用正则表达式

主要记录一下js中常用的正则表达式正则表达式来源：菜鸟教程1. 校验数字的表达式 - 数字：^[0-9]*$ - n位的数字：^\d{n}$ - 至少n位的数字：^\d{n,}$ - m-n位的数字：^\d{m,n}$ - 零和非零开头的数字：^(0|[1-9][0-9]*)$ - 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$ - 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$ - 正数、负数、和小数：^(\.

原创 js学习笔记--ES5新增的方法

ES5中新增的部分方法1. 数组方法1. forEach（） 用来遍历数组语法：有三个参数，参数一是数组元素，参数二是数组元素的索引，参数三是当前遍历的数组// forEach 迭代(遍历) 数组 var arr = [1, 2, 3]; var sum = 0; arr.forEach(function(value, index, array) { console.log('每个数组元素' + value);

原创 js学习笔记--闭包的应用

闭包的应用什么是闭包：闭包（closure）指有权访问另一个函数作用域中变量的函数，一个作用域可以访问另外一个函数的局部变量闭包的作用：延长变量的作用范围1. 利用闭包的方式得到当前li的索引号思路：页面中定义一个li列表获取li的集合，进行遍历，为每个li绑定点击事件，打印当前li的索引在循环内，创建立即执行函数，立即执行函数内部是包裹着点击事件的，自执行函数的参数是for循环变量代码块：<body> <ul class="nav">