- 博客(46)
- 收藏
- 关注
RSS订阅
原创 2020前端开发最新面试题总结
1.数组去重//indexOf判断下标实现var arr = [1,1,5,2,8,5,8,2,1,3];var newArr = [];for (var i = 0;i<arr.length;i++){ if(arr.indexOf(arr[i])===i){ newArr.push(arr[i]) }}console.log(newArr)//es6实现//set结合拓展运算符使用 const set = new Set([1,2,3,4,4]);console.log
2020-10-11 20:26:48
735
3
原创 一次性搞懂微信小程序的生命周期
小程序的生命周期分两块，分为应用的生命周期和页面的生命周期。应用的生命周期大致有四个：onLaunch: 监听小程序初始化。onShow:监听小程序的显示，就是从后台进入前台。onHide:监听小程序隐藏，就是从前台进入后台。onError:监听返回错误的函数，比如api调用失败时返回的错误信息。页面的生命周期大致有五个：onLoad:监听页面加载。onReady:监听页面初次渲染完成。onShow:监听页面显示。onHide:监听页面隐藏。onUnload:监听页面卸载。...
2020-10-07 20:54:43
437
原创 vue组件传值详解
vue组件传值面试常问1.父子传值：父传子：在父组件的子组件标签上通过v-bind绑定要传递的数据，然后在子组件内部通过props接收。// 父组件<select-list :dataList="dataArr" @parentReceive="changeVal"/> // 子组件props: ['dataList'] 子传父：在子组件中定义一个方法，然后在方法里面通过this.$emit进 行 传 递 ( emit进行传递(emit进行传递(emit有两个参
2020-10-05 20:26:53
554
原创 AJAX简单实现(jq实现和原生实现)
jq的实现方法：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button>点击</button> </body> <script src="js/jquery-2.1.4.min.js"></script&g
2020-10-04 21:29:12
2066
4
原创 DOM操作增删改查分别对应的请求方法
DOM操作增删改查分别对应的请求方法HTTP动词表示增删改查资源， GET：查询，POST：新增，PUT：更新，DELETE：删除GET 用来获取资源，POST 用来新建资源（也可以用于更新资源）PUT 用来更新资源，DELETE 用来删除资源。比如我们要对一些用户进行DOM操作：我们知道：GET 获取一个资源 POST 添加一个资源 PUT 修改一个资源 DELETE 删除一个资源就可以这样写：get /users/{userId} 获取userId
2020-10-04 10:08:31
955
1
原创 JQuery操作DOM常用API总结(必行)
JQuery简介jQuery是一个javaScript库，极大地简化了JavaScript编程。JQuery包含以下特性：HTML元素获取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTML DOM遍历和修改AJAXUtilitiesJQuery安装：可以使用CDN的引入方式，也可以使用npm下载JQuery语法：jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()
2020-10-03 16:32:06
461
1
原创 JavaScript操作DOM常用API总结(重点)
JavaScript操作DOM常用API总结节点创建型api（4个） 就是用来创建节点的createElement():通过传入指定的标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签(IE8以下的浏览器不支持自定义标签)。例如: 创建一个div元素var div = document.createElement("div")//要注意的是：使用createElement创建的元素并不属于html文档，它只是被创建出来，并没有添加到html中，要调用appendChil
2020-09-29 21:38:47
230
原创 前端面试问题之性能优化问题(必行)
前端面试问题之性能优化问题首先要明白我们性能优化的目的是什么？1. 从用户角度而言:优化能够让页面加载更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。2. 从服务商角度而言:优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。性能优化可以从以下几个方面入手：1.在页面内容方面可以减少http请求次数最简单的就是将css放在页面的最上面，在文档head内加载你的样式表，这样做的好处是：提高网页的渲染性能，避免网页出现白屏或者是没有样式的内容。与此对应的就是将scrip
2020-09-24 20:09:43
682
原创 前端面试问题之兼容问题
兼容问题一般都是面试必问问题，今天搞明白！！！浏览器兼容问题一：不同浏览器的标签默认间距不同出现问题：当我们布局的时候，在不加样式控制的情况下，各自默认的margin和padding差异较大。解决方案： 在css开头中使用通配符*，设置各个标签的margin和padding值为0，就可以了。浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。出现问题：常见症状是IE6中后面的一块被顶到下一行。解决方案：在float的标签样式控制中加入 d
2020-09-23 22:04:06
2214
1
原创 前端面试问题之找不同
让我们一起找不同吧！！！1.src和href的区别？src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。2.sessionStorage和localStorage的区别?sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远
2020-09-22 21:49:55
399
2
原创 css3新增伪类选择器详解
css3新增伪类选择器详解：第一类：:first-child 当前元素的父元素的第一个子元素就是它本身:last-child 当前元素的父元素的最后一个子元素就是它本身第二类：:nth-child() 匹配父元素下指定子元素，在所有子元素中排序第n:nth-last-child() 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数第三类：:first-of-type() 匹配父元素下指定子元素，在同类子元素中排序第一个:last-of-type
2020-09-21 21:41:17
490
原创 小程序支付流程
小程序支付流程：上图！今天在b站上看到了小程序支付流程的视频，看着繁琐，其实前端要做的仅仅是调一个接口，剩下的操作就是后台和微信后台的事情了。支付流程大致是这样：首先用户通过触发下单按钮，调用下单支付的接口，接着小程序端向服务端请求下单，服务端需要先针对小程序进行用户认证，并生成内部订单。小程序端向服务端请求支付，服务端调用统一下单API，获取prepay_id。当拿到prepay_id后，服务端马上进行本地存储操作，以便复用。然后接下来就是要再次签名(安全)。服务端将最终需要请求微信支付的参数返
2020-09-20 22:10:56
188
原创 vue路由守卫（一张图搞清）
Vue路由守卫主要分为，全局路由守卫、路由独享守卫、组件内部守卫。常常用来拦截页面，比如新用户下单时未登录时弹出登录页面，比如一些页面需要使用token值来进行操作，判断没有token值就弹出登录或者跳到登录页面，重新获取token…导航守卫就是来干这个的...
2020-09-18 21:33:21
175
原创 面试必问的新增问题 @zj-zhangjie
面试必问的新增问题：一场秋雨一场寒，陌生人：天凉加衣，注意身体 ！！！css3新增CSS3 是层叠样式表（Cascading Style Sheets）语言的最新版本。新增颜色样式属性：增加 opacity 属性，还有 hsl()， hsla()， rgba() 和 rgb() 函数来创建 <color> 值。 它还将 currentColor 关键字定义为合法的颜色值。transparent 颜色目前是真彩色 (多亏了支持 alpha 通道) 并且是 rgba(0,0,0,0.0)
2020-09-16 20:41:12
183
原创 面试必问的新增问题@zj-zhangjie
今天，天气阴，下雨，有彩虹！！！说一下面试必问的新增问题：h5新增：布局方面的标签<template></template> 通过 JavaScript 在运行时实例化内容的容器。<section></section> 定义文档中的一个章节。<article> 定义可以独立于内容其余部分的完整独立内容块。<aside> 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。<header&g
2020-09-15 21:05:29
175
原创 用正则去除字符串多余的空格@zj-zhangjie
今天是个好日子 吃了烤肉拌饭 15块钱 有点小贵 够我在工地干一天 加油 ！！！今天做项目，遇到的需求是要把字符串中的空格去掉，总结了以下方法(正则篇）： // 第一种方法:去掉所有空格 \s表示查找空格带上加好表示连续的空格 var str1 = 'a b c de' str1 = str1.replace(/\s+/g,'') console.log(str1) // 第二种方法:去掉字符串两头空格 var str2 = '
2020-09-14 22:07:35
3488
原创 前端常见面试题(Javascript方面) @zj-zhangjie
前端常见面试题(Javascript方面)1. 列举你知道的强制类型转换和隐式类型转换？强制转换：parseInt()、parseFloat()、Number()、String()、.toString()、Boolean()隐式转换：加（例外：不能是算式中，而需要加在变量前）减乘除及取余，!!2.split() 、join() 的区别?前者是切割成数组的形式，后者是将数组转换成字符串。3. 数组方法pop() push() unshift() shift()?push()尾部添加、pop
2020-09-11 22:00:13
159
原创 元素水平垂直居中的方法@zj-zhangjie
元素水平垂直居中的方法第一种：通过绝对定位的方式 absolute + 负margin首先知道子元素的宽高，给子元素设置top：50%；left：50%，但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。借助外边距的负值，负的外边距可以让元素向相反方向定位,通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了优点：比较好理解，兼容性好缺点：需要知道子元素的宽高第二种：也是通过绝对定位的方式 absolute + margin auto这个是需要将
2020-09-10 00:14:01
168
原创 原生js图片懒加载代码实现 @zj-zhangjie
原生js图片懒加载是真对项目页面图片过多，加载慢，增强用户体验感的最佳解决方案什么是懒加载？懒加载顾名思义突出一个“懒”字，懒字就是拖延的意思，说白就是延迟加载。比如我们进入一个新的页面进行加载的时候，这个页面很长超过了屏幕可视区域的时候，那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。为什么要用懒加载？懒加载是一种优化网页性能的一种方式，它极大的提高了用户的体验。举个栗子：就拿图片来说，一个网站，单个网页的页面上“图片”是构成页面主体的一个极大部分，但是在现
2020-09-08 22:15:20
215
原创 后台管理系统-------登录功能@zj-zhangjie
后台管理系统-------登录功能实现（element-ui）登录页面代码（login）:<template> <div class="login"> <el-form :model="userinfo" :rules="loginRules" label-position="right" class="el_box" label-width="60px" > <el-f
2020-09-07 23:59:00
1652
原创 ECMAScript是什么？ ES6新增特性有哪些？@zj-zhangjie
ECMAScript是什么？首先，javaScript的组成包括：ECMAScript,DOM和BOM1. ECMAScript:javascript核心语法，不依赖平台例如：定义变量，if,switch,for,数组Api,字符串API,正则Api.....2. DOM:(Document Object Model)针对浏览器标签操作 例如：获取id，获取类名，获取标签名 注：操作真实DOM，引起重绘和回流-->才引出虚拟DOM 重绘： 主要指页面颜色的改变，不影响DOM的空间
2020-09-04 20:10:30
287
原创 异步解决方案之promise、async/await（详解）@zj-zhangjie
promise和async/await都是es6的新增特性，都是处理异步问题的好办法。Promise是干什么的？1、主要用于异步计算2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果3、可以在对象之间传递和操作promise，帮助我们处理队列Promise 对象用于表示一个异步操作的最终完成 (或失败), 及其结果值.先用代码简单实现一下： function waiting() { return new Promise((resolve, reject)
2020-09-03 22:56:12
1286
1
原创 js闭包，原型链，继承的理解
闭包：成为闭包的两个条件：闭包=函数+词法作用域词法作用域：即以变量声明定义的位置为参照，如果当前位置没有定义，就会访问父级定义的位置//广义上闭包：var a=1000;function fn1() { alert(a)}fn1()平时工作中用到的闭包狭义上闭包：1.函数内嵌套函数2.子函数引用了父函数的相关变量闭包使用场景：常用来封装组件和插件，比如：表单操作和倒计时功能等等。闭包特点：长期驻留在内存中，可以缓存数据，可以隔离作用域，避免全局污染。具体实现：//
2020-09-02 21:01:21
323
原创 Vue项目搜索历史功能（详细）
Vue项目搜索历史功能（详细）看效果图：html代码：<template> <div class="qqq"> <!-- 顶部搜索框 --> <div class="search"> <!-- 返回上一步 --> <div @click="back"> <img src="../assets/img/left.png" /> </div&g
2020-09-02 20:22:48
2297
3
原创 vue报错解决
vue报错解决：翻译过来是:大概意思就是 模板在渲染的时候，读取对象中的某个对象的属性值时，这个对象不存在，所以返回undefined。就是在渲染的时候，出现的三层表达式在listBottom中取attr[0]数组中的小标为0的对象还不存在，再在这个对象中取其他值自然会报错，但是渲染完成后，listBottom中的值加载好了，自然可以取到，这也就解释了为什么界面正常显示，但开发者工具会报错的原因。解决方法：在上面一个div中添加v-if判断条件，如果listBottom.attr取不到，则不加
2020-09-01 23:13:28
1046
原创 call,apply,bind区别 new的实现 防抖节流
call，apply， bind的区别及实现原理？首先，三者有一个共性，就是 都是用于改变this指向的区别：1.根据传参方式不同call传参时用逗号分隔的形式传参函数名.call(目标对象,参数1,参数2,...参数n)例如：getName.call(obj,'王五',25,'北京')apply参数用数组的形式传递函数名.apply(目标对象,[参数1,参数2,...参数n])例如：getName.apply(obj,['王五11',25,'上海'])bind用逗号形式传参g
2020-08-31 22:56:46
231
原创 vue生成二维码分享功能
vue生成二维码分享功能生成二维码听起来很难，其实也很简单先看一下效果：效果就是这个样子首先给要分享的dom一个点击触发事件 <!-- 分享 --> <div class="rightimg" @click="share"> <img src="../assets/img/share.png" /> </div>然后在vant-ui框架里找到合适组件 （遮罩层）直接复制过去就可以，不要的东西删掉
2020-08-28 23:23:31
1285
4
原创 javaScript常见的数组方法(必行)
javaScript常见的数组1.push() 末尾添加，返回长度，改变原数组push()方法可以向数组后添加一个新的元素，并返回新数组的长度。 var a = [1,2,3]; var b = a.push(4); console.log(a);//[1,2,3,4] console.log(b);//42.unshift() 首部添加，返回长度，改变原数组unshift()可以向数组前添加一个或多个元素，并返回新的长度。var a = [2,3,4];va
2020-08-27 22:58:41
134
原创 混入mixin
mixin:选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。适用场景：主要用于需要对多个组件中相同的方法或数据的抽离步骤：第一步：创建mixins JS文件//import { getUserList} ‘@/http/’var GetUserDataMixIn = {d
2020-08-26 21:12:40
164
原创 router-link结合v-for使用（跳转详情）
router-link结合v-for使用：今天实现列表页跳转到详情页 我没有用编程式导航 用的router-link实现跳转<template> <div class="jingpin"> <div class="jingpinclass">{{battleList[1].channel_info.name}}</div> <router-link class="jingpinbox" v-for="(ele,index) in
2020-08-24 22:28:38
1735
1
原创 vue中axios接口数据封装和使用
vue-axios接口数据封装和使用方法：在src文件夹下新建http文件夹可以看见里面有三个子文件. env.js api.js request.jsenv.js里面搭建环境：export default { //开发环境 dev: { baseUrl: "https://localhost:8080" }, //测试环境 test: { baseUrl: "https://test.365msmk.com" },
2020-08-21 23:39:11
819
原创 vue组件传值
vue组件传值：1.父传子：在父组件的子组件标签上通过v-bind绑定要传递的数据，然后在子组件内部通过props接收// 父组件<select-list :dataList="dataArr" @parentReceive="changeVal"/> // 子组件props: ['dataList'] 2.子传父：在子组件中定义一个方法，然后在方法里面通过this.emit进行传递(emit进行传递(emit进行传递(emit有两个参数(自定义事件名称，要传递的
2020-08-20 22:28:57
121
原创 vue-tabbar切换
今天说一下vue-tabbar页面切换，样式改变：（当然办法有很多，这只是我的实现方法）首先，我在views视图文件夹下新建五个vue文件，分别是我要切换的页面，再建一个vue页面，把那五个vue文件合在这里面，我们尽量不要在App.vue里面操作。这里FirstPage.vue文件，就是我的总页面。接下来是在router下路由配置，这一步很重要：import Vue from "vue";import VueRouter from "vue-router";// 首页import Hom
2020-08-19 23:12:33
1112
原创 vue-cli安装bug解决
今天安装vue-cli的时候，碰到几个恶心的坑首先 网速一定要到位！！！按照官网正常操作 操作步骤：一步一步下来 小黑板创建项目的时候，出现一个bug这个是npm装的，一直报错 我换了淘宝镜像，几次之后，还是这样，最后用了cnpm安装，成了。然后快安装成功的时候，又出现一个报错：错误信息： Error: Can’t find Python executable “python”, you can set the PYTHON env variable说是python怎么的，解决方法：n
2020-08-18 20:50:44
202
原创 webpack环境搭建
webpack是什么？webpack 是一个现代 JavaScript 应用程序的静态模块打包器 webpack稳定版本：v4.44如何使用webpack搭建前端环境1.安装node.js（尽量使用npm）2.创建项目目录并初始化package.json,会默认创建package.json文件安装命令：npm init -y3.安装webpack和webpack-cli脚手架安装命令：npm install webpack webpack-cli --save-dev简写：npm i we
2020-08-17 23:15:47
139
原创 javaScript加深理解
首先切记一句话：函数也是对象创建函数的几种方式：1.函数声明：// function 函数名(){// }例：function fn(){ }2.函数表达式：// var 函数名 = function(){// }例:var fn = function(){ }3.构造函数创建：// var 函数名 = new function(){// }例:var fn = new function(){}函数声明和函数表达式的区别：1.函数声明调
2020-08-15 00:28:30
77
原创 微信小程序搜索功能系列 一套全
今天说一下小程序首页的搜索功能吧这个搜索功能我是建了一个组件，用组件写的：上代码：wxml代码<view class="search"> <input placeholder="输入搜索关键词" type="text" class="search_input" data-value="value" bindconfirm="search"></input> <image src="/assets/search.png" class="search
2020-08-13 23:12:43
3821
1
原创 前端面试题
前端常见面试题：rgba()和opacity的透明效果有什么不同？opacity作用于元素，以及元素内的所有内容的透明度。rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果）rgba和opacity的效果对比SASS、LESS是什么？大家为什么要使用它们？它们是CSS预处理器。它是CSS上的一种抽象层。它们是一种特殊的语法/语言编译成CSS。例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数。LESS 既可以在客户
2020-08-13 00:38:34
131
原创 微信小程序登录授权流程(必行)
今天用自己的话理解的说一下小程序登录注册流程:下面我来解释一下：在登录按钮触发事件：先注册 要用wx.login获取code 因为注册接口要用到code值，它会返回一个code值接着用小程序内置的api方法 wx.getuserinfo，会返回iv和加密值code ，iv， 加密值都得到了，调用注册接口，成功以后，跳到登录调用登录接口 登陆成功以后会返回三个值 openid ，token，uid接着把token和uid存储到本地用户一进来就刷新页面 onShow刷
2020-08-11 23:53:25
2122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人