
前端
文章平均质量分 59
爱上彗星的尾巴
爱生活,爱工作,爱coding
展开
-
elementui table 排序
elementui sortmethod踩坑原创 2022-06-27 14:30:11 · 482 阅读 · 1 评论 -
零基础最详细html和css
1.除IE外通用写法类名或标签名::placeholder {color: red;}2.加兼容前缀写法css超出一行显示省略号:给定宽度(width:100px)、超出隐藏(overflow:hidden)、强制在同一行显示(white-space: nowrap)、省略号(text-overflow:ellipsis)——常见字体单位——1.em移动端常用的字体尺寸单位,相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前di原创 2021-05-12 09:10:59 · 1140 阅读 · 0 评论 -
前端高级工程师最全面试题-持续更新
1,promise.all 异常处理/**通常处理多个请求的时候我们会用Promise.all()方法。该方法指当所有在可迭代参数中的 promises 已完成,或者第一个传递的 promise(指 reject)失败时,返回 promise。但是当其中任何一个被拒绝的话。主Promise.all([..])就会立即被拒绝,并丢弃来自其他所有promis的全部结果。*/ var p1 = Promise.resolve(3).catch(function(err) { re.原创 2021-04-22 17:01:49 · 5917 阅读 · 0 评论 -
vue框架常见的问题和解决方法
最近使用vue进行前后端分离开发微信公众号,不断摸索踩坑之后,总结出如下几点vue项目开发中常见的问题及解决办法。定时器问题rem文件的导入问题Vue-Awesome-Swiper基本能解决你所有的轮播需求fastClick的300ms延迟解决方案组件中写选项的顺序列表进入详情页的传参问题。本地开发环境请求服务器接口跨域的问题axios封装和api接口的统一管理打包后生成很大的.map文件的问题UI库的按需加载如何优雅的只在当前页面中覆盖ui库中组件的样式2.列表进入详情页传.原创 2021-04-22 14:54:44 · 1167 阅读 · 0 评论 -
js封装函数方法
1,数组去重function unique1(arr) { return [...new Set(arr)]}function unique2(arr) { var obj = {}; return arr.filter(ele => { if (!obj[ele]) { obj[ele] = true; return true; } })}function unique3.原创 2021-04-20 13:28:53 · 352 阅读 · 0 评论 -
写这么骚的代码会不会被胖揍
写这么sao的代码,不怕被揍么?曾经,我接手了一份大佬的代码,里面充满了各种“骚操作”,还不加注释那种,短短几行的函数花了很久才弄懂。这世上,“只有魔法才能对抗魔法”,于是后来,翻阅各种“黑魔法”的秘籍,总结了一些比较实用的“骚操作”,让我们装X的同时,提升代码运行的效率(请配合健身房一起使用)。位运算JavaScript 中最臭名昭著的 Bug 就是 0.1 + 0.2 !== 0.3,因为精度的问题,导致所有的浮点运算都是不安全的,具体原因可详见《0.1 + 0.2不等于0.3?为什么Java原创 2021-03-17 14:43:18 · 145 阅读 · 0 评论 -
有哪些道理你后悔没有早点知道?
1、别人对你发脾气,不要硬碰硬。让他先发泄情绪,等他冷静下来了,会自然的感到愧疚。如果过后他还是无理取闹、变本加厉,你再反抗也不迟。2、玩笑归玩笑,但不要拿别人的缺点开玩笑。说者无心,但听的人就不一定觉得你在开玩笑。3、不要因为社会险恶就放弃你的善良,同时给你的善良加上同等分量的锋芒。4、往往第一个买你产品的是陌生人,而不会相信你能成功的反而是身边的人。在你没发迹之前,所有的低谷,你都会一个人走。在你发迹之后,所有好听的话,都要选择性的过滤。5、心地善良的人,总会从小细节去肯定他人.原创 2021-03-11 17:09:02 · 605 阅读 · 2 评论 -
antd的select下拉框因数据量大造成卡顿的解决方法
想要优化肯定要知道为什么会卡,初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿,于是想要不卡只能限制渲染的数据数量。先从后台拿到数据,保存到变量fundList中(作为数据源,永远不改动),然后取其中的前100条数据保存到fundList_中,用来下拉框的数据渲染{fundList_.map(item => <Option key={item.fund} value={item.fund}>{item.name}</Option>)}select组.原创 2020-11-19 13:31:25 · 1246 阅读 · 0 评论 -
几个时刻警醒自己或他人的忠告
一、在校期间,一定要好好学习,打扎实基础现在的培训班和网课满大街都是,好像学习编程成了一件很简单的事。但是等到工作中就会发现。工作中遇到的问题,往往不是直接编程可以解决,往往是一个复杂的体系,这时候,把现实问题转化成IT方案的能力就会变得极其重要。而这种能力,一定是建立在对整体的信息体系结构的理解上的。所以,那些数学,数据结构,计算机原理,网络基础,数据库基础,软件工程,看起来好像和早期的工作没用,但是他就埋藏在你的思维的深处,随着工作经验的增加和处理的问题复杂度的增加,这些知识就慢慢的浮现出来,产生价值原创 2020-09-16 15:23:25 · 434 阅读 · 0 评论 -
最强的element ui自定义表单验证
直接上代码<el-dialog title="新增学生" :visible.sync="addStudent" width="400px"> <el-form :model="addDate" :rules="addRules" ref="addForm"> <el-form-item label="账号" :label-width="formLabelWidth" prop="codeName">.原创 2020-08-03 13:43:45 · 319 阅读 · 0 评论 -
canvas裁切头像
#canvas画圆形图片brandPosster () {var diff1=60,diff2=30let data = this.data.infolet ctx = wx.createCanvasContext('c', this)let arr = [`${this.data.OSS_URL}/poster-bg.png`, data.logo, `${this.dat...原创 2020-04-26 00:25:16 · 450 阅读 · 0 评论 -
js之我工作中所使用的工具方法大全
获取url地址参数getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for(var i = 0; i < vars.length; i++) { var pair = vars[i].split("=");...原创 2020-02-13 14:54:40 · 314 阅读 · 0 评论 -
freemarker study
1,freemarker是一款模板引擎,一种基于模板的、用来生成输出文本的通用工具。类似模板引擎还有Velocity,Common Template等。对于java web开发来说,使用FreeMarker模板,可以将java代码从页面中分离出来。开发人员只需关注业务逻辑代码,而由页面设计人员去设计显示效果,两类人员各司其职,发挥其擅长的一面。FreeMarker注释:类似HTML的注释,用&...原创 2020-02-04 17:47:46 · 237 阅读 · 0 评论 -
h5音频播放问题
1,使用$event可以获取元素在页面上的位置,2,如何让h5音乐自动播放autoPlayAudio (id) { var video = document.getElementById(id)// video标签id=media if (window.WeixinJSBridge) { // eslint-disable-next-line n...原创 2020-01-20 15:27:01 · 305 阅读 · 0 评论 -
js之防抖与节流
浏览器的 resize、scroll、keypress、mousemove 等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低性能。所以需要对这类事件进行调用次数的限制。防抖(debounce)作用是在短时间内多次触发同一个函数,只执行最后一次,或者只在开始时执行。以用户拖拽改变窗口大小,触发resize事件为例,在这过程中窗口的大小一直在改变,所以如果我们在re...原创 2019-12-24 14:04:29 · 275 阅读 · 0 评论 -
mobile terminals touch event problems
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来。做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发。之后百度了一下这个问题,原因是主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不...原创 2019-12-19 09:38:32 · 167 阅读 · 0 评论 -
axios cancel repeated functions
axios如何取消重复请求javascript axios es6阅读约 9 分钟在开发中,经常会遇到接口重复请求导致的各种问题。对于重复的get请求,会导致页面更新多次,发生页面抖动的现象,影响用户体验。对于重复的post请求,会导致在服务端生成两次记录(例如生成两条订单记录)。如果当前页面请求还未响应完成,就切换到了下一个路由,那么这些请求直到响应返回才会中止。无论从用户体验或...原创 2019-12-17 18:23:31 · 425 阅读 · 0 评论 -
解决h5视频层级过高问题
h5 video层级太高如何解决项目中用到h5的video组件发现video的层级过高无法遮盖,所以查阅后加了一些字段 <video v-if='lessonObj.type==="video"' :src="lessonObj.liveLink" :poster="lessonObj.cover" controls class="topBanner" webkit-playsinl...原创 2019-12-15 22:10:37 · 5926 阅读 · 0 评论 -
ES6-rest
(1) Rest 参数接受函数的多余参数,组成一个数组,放在形参的最后,形式如下:function func(a, b, ...theArgs){ // ...}(2) Rest参数和arguments对象的区别:rest参数只包括那些没有给出名称的参数,arguments包含所有参数arguments 对象不是真正的数组,而rest 参数是数组实例,可以直接应用sort, ...原创 2019-12-11 20:15:16 · 255 阅读 · 0 评论 -
h5,vue ,elementui,vant组件项目踩坑
使用vue的v-html属性后.想改变富文本里面的样式,不能把样式写在scope里面想改变vant组件的样式只能用css语法去更改样式,同时注意层级关系原创 2019-12-02 10:11:53 · 3062 阅读 · 0 评论 -
elementUi合并单元格
<template> <div class="app-container region-container"> <el-row :gutter="20"> <el-col :span="24" class="right-col"> <!-- 右侧列表 --> <div>...原创 2019-11-22 23:07:25 · 474 阅读 · 1 评论 -
elementui设置当天之前的三个月可选
elementui设置当天之前的三个月可选pickerOptions1: { disabledDate (time) { let curDate = (new Date()).getTime() let three = 90 * 24 * 3600 * 1000 let threeMonths = curDate - t...原创 2019-11-21 17:50:24 · 1242 阅读 · 0 评论 -
vue实现搜索关键字高亮
Recently i got a development assignment,it is interesting,below is a effect picturewxml<view class="resultBox" wx:if='{{keyword}}'> <view wx:for='{{searchList}}' wx:for-item='ite...原创 2019-10-25 11:06:49 · 893 阅读 · 0 评论 -
vue + typescript 项目起手
安装vue-cli 安装ts依赖 配置 webpack 添加 tsconfig.json 添加 tslint.json 让 ts 识别 .vue 改造 .vue文件什么是typescript1,静态类型检查2,IDE 智能提示3,代码重构4,可读性静态类型检查可以避免很多不必要的错误, 不用在调试的时候才发现问题那接下来从 vue-cli 开始配置 ts,看看事实...原创 2019-10-22 10:19:20 · 888 阅读 · 0 评论 -
elementUi实现table表格拖拽效果
第一步需要安装一下sortable的依赖npm i -S vuedraggable使用:import Sortable from 'sortablejs';接下来是方法调用 drag() { const el = document.querySelectorAll('.el-table__body-wrapper > table > tbody')...原创 2019-10-21 10:59:58 · 1272 阅读 · 0 评论 -
VUE的echart图表实现自适应窗口大小变化
需求:在PC端开发含图表展示的页面时,需要考虑用户调整浏览器窗口大小后图表能够根据窗口大小自适应变化。废话不多说直接来代码吧html<template> <div class="dashboard-container"> <!-- <div class="dashboard-text">name:{{name}}</div&...原创 2019-10-17 14:32:14 · 891 阅读 · 0 评论 -
VScode使用教程大全,看完你一定会谢谢我的
作为前端开发的我,之前的开发过程中一直用的是Atom这一款IDE,再配上了好看的主题插件很nice,Atom的界面是真心好看,但是插件装多了你们真的不觉得卡吗,VS Code比Atom更加的流畅,比webstorm更轻量级。一次偶然换的工作后,项目组要求统一IDE,让我了解到了VS Code,这边简单介绍下VS Code日常开发的需求。VS Code精选主题主题插件安...原创 2019-06-21 13:44:56 · 140493 阅读 · 5 评论 -
jQuery的实现原理和核心
1、jQuery的实现原理 1)jQuery采用的是构造函数模式进行开发的,jQuery是一个类2)上面说的常用的方法(CSS、属性、筛选、事件、动画、文档处理)都是定义在jQuery.prototype上的 ->只有jQuery的实例才能使用这些方法2、选择器/筛选1)我们的选择器其实就是创造jQuery类的一个实例 ->获取页面中元素用的 jQuery(); -> $()$...翻译 2018-03-30 10:03:21 · 4126 阅读 · 0 评论 -
Angular2与Angular1的区别
整体上来说,Angular2变得更加简洁,最核心的概念只剩下一个,那就是组件Component,其它所有的一切都是围绕着Component展开的。从这一点来看,Angular2无疑是受到了React的强力影响,毕竟React的核心概念也只有一个,也是Component。所以,在使用ng2的时候,大家只要会写Component就行了,其它那些什么服务啊、路由啊、管道啊,都是些小工具而已。接下来罗列一...翻译 2018-03-30 10:06:48 · 426 阅读 · 0 评论 -
angularjs踩得坑
1. templateURL和路由之类的要在web server下运行。2. 使用模板replace设为true,模板里也要有相应的标签,否则不出现任何数据。3. 1.2版本之后,ngRoute模块独立。4.空的controller不定义会出错。5.Directive的link参数是有顺序的:scope,element,attrs,ctrl6.ng-repeat不能循环重复的对象。hack: ng...翻译 2018-03-30 10:10:38 · 178 阅读 · 0 评论 -
HTML5和CSS3新特性一览
1.HTML5 新元素HTML5提供了新的元素来创建更好的页面结构:标签描述<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<bdi>允许您设置一段文本,使其脱离其父元素的文本方向设置。<command>定义命令按钮,比如单选按钮、复选框或按钮<details>用于描述文档或文档某个部分的细节<dial...转载 2018-03-30 10:12:09 · 167 阅读 · 0 评论 -
浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应
一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下:<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1...转载 2018-04-02 11:15:00 · 192 阅读 · 0 评论 -
用vue.js和vue-router重构一个网站
拿了个以前的项目做练手,用了vue-cli,vue-router,vuex。主要还是想学习一下webpack和单文件组件的思想。不过代码写得其实挺匆忙,感觉还有很多地方还能改进,组件化思想还是不能很好的掌握。 github地址:https://github.com/fshwc/vuedemo-mpacc vue-lic和webpack很久以前我就看了webpack,但是因为还挺新的,大多资源都是英...转载 2018-04-03 13:37:48 · 438 阅读 · 0 评论 -
深入探讨JavaScript中的原型、原型链以及原型继承
原型在JavaScript中,任何函数都会有一个prototype属性,任意对象都有一个__proto__属性,都可以叫做原型。对于函数,它的prototype属性指向它的prototype对象,在这个对象上,通常有两个属性,一个叫constructor,一个叫__proto__。constructor指向的是该函数本身,是历史遗留产物,在下文讨论的原型继承中,这个属性也会使用到。而__proto...转载 2018-05-03 12:57:57 · 114 阅读 · 0 评论 -
简单理解Vue中的nextTick
一、示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用。模板<div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>转载 2018-05-17 13:44:34 · 367 阅读 · 0 评论 -
Flex 布局
Flex 布局教程:语法篇 作者: 阮一峰日期: 2015年7月10日网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案----Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了...转载 2018-05-17 13:47:10 · 146 阅读 · 0 评论 -
给小白解释下什么是web标准,可访问性和可用性
最近找工作发现有很多企业或者大部分面试要求都有要求面试者理解什么是web标准,可访问性和可用性,我随即搜阅了几篇文档,并以自己的理解写一下。 一、web标准 HTML、CSS、JavaScript这三者分离便是标准,WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标...转载 2018-05-14 17:29:05 · 819 阅读 · 0 评论 -
Class 的基本语法
JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Po...转载 2018-05-08 10:54:10 · 1040 阅读 · 0 评论 -
深入理解ES6箭头函数中的this
箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。1、何为定义时绑定我们来看下面这个例子:(1)var x=11;var obj={ x:22, say:function(){ console.log(this.x) }}obj.say();//c...原创 2018-05-08 11:17:09 · 135 阅读 · 0 评论 -
微信小程序使用字体图标
项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。第一步:下载需要的字体图标进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为:搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。...翻译 2018-05-28 09:04:48 · 1385 阅读 · 0 评论