自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(153)
  • 资源 (18)
  • 收藏
  • 关注

原创 样式问题记录

遇到的样式问题的记录border 相关CSS问题-鼠标移入icon时(hover状态),会造成页面内容有上下移动的情况.icon-radius { border: 0.5px solid #dde0e1; &:hover { border: 0; }}问题:可以发现是因为border的变化,导致该ICON高度宽度发生变化,所以出现了上...

2019-08-06 21:29:20 88

原创 组件开发总结

插槽作用域插槽Menu子组件<ul :class="wrapClasses"> <li :class="itemClasses(item)" v-for="item in menuData.options" @click="getActiveItem(item)" :key="item.value"> <!-- :optio...

2019-08-06 21:14:00 87

原创 Vuex中注册模块的方式

在实际的项目应用中,如果把该项目中应用到的所有的state和mutation、Action等放置在全局的store中,会出现全局store内容过于庞大,并且变量名,方法名都很受限制,而vuex中的模块概念就恰好可以解决此问题下面就如何利用vuex中的模块概念,解决全局Store过于复杂问题,给出两种方式,静态注册和动态注册。首先我们创建的模块的名称为moduleA,如下moduleA.js...

2018-11-28 00:06:49 2283

原创 用CSS减少JavaScript代码量

用CSS减少JavaScript代码量写此篇博客的目的就是提醒自己和需要的人,在遇到某些需求的时候,可以通过灵活的CSS的样式去减少项目中JavaScript的代码量。现在假定有这样一个需求,在列表页面中,每次点击某一行,这个时候前端会向后端发出请求,请求该行所对应的模板,并将这个模板显示在详情弹窗,但有时候,这一行对应的不仅是一个模板,但是需要的只是其中之一,现在需要用前端代码去控制选取...

2018-07-17 23:44:34 266

原创 vue中对鼠标划过事件处理方式

vue中对鼠标划过进行处理鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mouse事件,如mouseover、mouseout、mouseenter、mouseleave,在之后我自己也通过这种方法进行了尝试。&lt;template&gt;...

2018-07-11 23:07:18 38473 1

原创 Linux系统下Node.js的版本升级

Linux系统下Node.js的版本升级昨晚想升级下Node的版本,先用sudo npm install -g n安装了n模块,之后使用sudo n stable命令的时候,报的是没有sudo这个命令。之后就在自己头疼脑热的情况下,不知看了哪个博客,把npm给删除了,后来发现在升级Node版本的时候,还是需要用到npm,所以,就需要安装一下了,安装命令如下: 查看npm安装的版本 ...

2018-07-09 23:51:33 895

原创 关于npm的报错

关于npm缺少asynckit的报错今天,在git bash中输入npm -v的时候,发现提示缺少模块然后我输入node -v,显示出了node版本,然后我将这个错误搜索了一下,搜索到的没有什么有效信息​ 后来我就想着因为npm是安装node的时候自带的,我就想着卸载下node,然后重新安装一次,结果我又碰到了问题,node没有办法删除,并且报出的错误码是2330,在网上一阵...

2018-04-19 11:34:46 1024

原创 Webpack

认识Webpack Webpack可以看作是模块打包机,做的事情就是,分析项目结构,找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言(Sass,TypeScript),并将其转换和打包为合适的格式以供浏览器使用,在3.0出现以后,Webpack还肩负了优化项目的责任--save 保存 --dev 开发环境打包:可以将多个Java...

2018-03-29 21:06:52 5398

原创 Vue的单页应用中如何引用单独的样式文件

Vue的单页应用中如何引用单独的样式文件问题描述对于.vue的文件来说,也是由结构、行为、样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式。下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分引入单独的样式...

2018-03-28 18:40:54 6204

原创 关于input兼容性的总结

一月快要结束了 O(∩_∩)O~input失去焦点的时候,如何取得input框的值需求描述:有这样一个表格(表格组件),表格中有几列中是包含input这个输入框的,之前使用的是v-model,现在需要添加一些校验,我想到的就是在input输入框失去焦点的时候,用个函数去处理,这个函数的形参包括,该行所在的下标,input框中的内容,那下面的问题就是关于如何得到input框内的内容

2018-01-26 17:53:15 1608

原创 CSS中的focus-within伪类选择器

:focus-within很容易让人联想到focus,区别就在于focus是对于当前元素,而:focus-within则是对于当前对象和当前对象子元素 MDN: The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has re

2018-01-22 18:45:29 802

原创 日常项目总结

总结Vue中给option增加点击事件问题描述:select下拉列表中,点击一个option之后,需要做一些指定操作,例如去请求一个接口,并且这个接口需要的数据来自这个option的value值解决过程:我开始的做法就是给option添加了@click="requestSomeThing(item.id)",结果发现我在点击了select的下拉框的时候,并没有去没有触发,之后就去上

2018-01-19 19:00:17 240

原创 常用的正则

常用的正则 以下为项目中使用过的,后面会不断的添加,也欢迎补充 将数字类型转化为货币的形式let val = '233443432314';let reg = /\d{1,3}(?=(\d{3})+$)/g;val = val.replace(/^(-?)(\d+)((\.\d+)?)$/, function (s, s1, s2, s3) { return s1

2018-01-12 18:20:15 209

原创 常用的CSS效果总结

遮罩层效果通过设置top、right、bottom、left为0,使得遮罩层覆盖整个可视区域如果页面中是有滚动条的,就涉及到需要给body增加overflow: ‘hidden’background-color: rgba(0, 0, 0 , 0.5) 使得背景颜色更加清晰<div id="bg-gray" class="bg" v-if="viewShowGrayBg"> <butto

2017-12-29 16:20:09 349

原创 Vue组件的书写形式

之前只是用过第三种方式去创建组件,最近接触到第一种写法的项目,所以写下了下面的内容使用script标签<!-- index.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div id='index-container'> </

2017-12-28 17:47:53 325

原创 Promise处理有依赖的连续请求

Promise处理有依赖的连续请求在没有接触到Promise之前,如果有这样的需求,先去前端需要异步去请求第一个接口,然后接收到返回的一些数据,然后利用得到的数据,去请求第二个接口,然后接收传回来的数据,然后去请求第三个接口,这个时候我自己写出来的代码一定是Ajax嵌套的一堆,写出来的代码可想而知,真的是太丑。我现在不敢说我对Promise有多懂,因为我离灵活应用它,还有距离,最近在看书,偶然看到了

2017-12-22 11:24:43 6294 1

原创 WebStorm添加注释模板

今天想给我的代码文件添加一些特定的注释,下面是具体的操作,当然不局限于下面的,可以添加更多你所需要的东西添加后的效果/** * @author Vao * @date 2017/12/21 * @Description:*/添加的过程我用的工具是WebStorm2017.2.3,点击File->Settings->Editor->live Templates,打开Settings的快捷键是

2017-12-21 20:54:23 11975 1

原创 点击页面关闭某个打开的列表

问题描述当点击“添加按钮”的时候,会显示一个列表,当再次点击“添加按钮”,这个列表就会关闭,这样做的话,交互性并不是那么良好,所以就需要修改一下啦……思路及解决办法增加的交互就是,在用户点击该页面的其他地方的时候,关闭这个列表,下面就是这个的具体实现 梳理下用的东西: 1. ref 来获取元素,可以参考这里 2. watch来监测showGoodsList变量的变化 3. 事件的添加方式,这

2017-12-06 11:50:07 417

原创 JavaScript逻辑运算符

从项目中看逻辑运算符“||”和“&&”今天,在项目开发中遇到一个问题,就这个问题本身而言,并不是很难,但觉得它的意义重大(哈哈,当然是对我而言),还是决定记录一番问题描述及初步解决简单描述下要求:就是上边有两个checkbox的选择框(上面的图是简易版),要实现的功能就是二者至少选择一个,而且交互性良好先说下我的思路,也是我get到的,这个时候是实现二者至少选其一的功能的,当时我也说不来自己是怎样鬼

2017-12-05 21:21:56 274

原创 Ajax的原生实现关于MIME类型的使用

问题描述下面的例子是一个Ajax的post请求的代码,这段代码在测试运行的时候,发现返回的状态码为400,服务器不能理解的请求,后来经过查看和修改,发现只需要将下面的代码稍微改造一下就好了原代码var send = function (url, params, fn) { var me = this; var xhr = null; var data = ''; fn

2017-11-20 16:57:36 1754

原创 调试的总结

之前,接触到的项目都不算复杂,大多数的项目也是我自己顺带写的后台,并没有相应的后端的相关接口的说明文档,现在,写项目的时候,都是看着产品写的PRD,然后结合后台给的相关接口的文档来进行开发,在前后端开发完毕之后,需要做的事情就是联调,在第一次初步联调的时候,就发现了自己的如下问题,特记录一下,以便提醒自己下次注意入参和出参必须注意联调的时候,发现“添加”这个功能,在调用后台接口之后报出了405的错误

2017-11-18 17:54:16 923

原创 jQuery源码之init函数的分析

jQuery源码之init函数的分析精妙处之一init在源码中最先出现的位置是jQuery定义的地方,如下所示var ... jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' //

2017-10-16 01:27:00 408

原创 ES6解构赋值

数组的解构赋值ES6中允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这称为解构赋值,在ES5中为变量赋值,只能直接指定值首先,有几个简单的例子1)左边和右边“模式匹配”,完全解构,按照对应的位置,为变量赋值let [a, b, c] = [1, 2, 3];console.log(a, b, c); //1 2 3//略微复杂一点的嵌套,但是也是模式匹配的let [foo, [[b

2017-10-11 16:50:58 1383

原创 ES6对于let和const的认识

ES5对于变量而言,没有块级作用域这一说,存在的是函数作用域,但是在ES6中,let和const是属于块级作用域的声明,需要先声明,再使用,有点想起当时使用VC的场景,哈哈哈~letlet的出现为JavaScript增加了块级作用域,使用let定义的变量,外层作用域是无法读取内层作用域的变量的暂时性死区if(true) { //TDZ开始 tmp = 'abc'; conso

2017-10-10 21:45:19 375

原创 认识浏览器

对于前端开发而言,最必不可少的工具就是浏览器,但是之前对于浏览器的了解只是停留在使用的层面,最近决定对于浏览器需要重新认识一下它,根据以前的使用和《WebKit技术内幕》这本书为大家做一下分享,当然在下面的说法中,也可能存在不详尽或者有误的地方,欢迎指正浏览器核心的种类浏览器的种类实在是太多,如IE、Firefox、Chrome、Opera等,但是浏览器内核的种类就比较少了,分别是Trident、G

2017-10-09 21:21:36 536

原创 进程与线程

程序:程序是一个静态的概念,是完成某个功能的指令集合一、进程进程是动态的,一般由程序、数据集合和进程控制块三部分组成,程序用于描述进程要完成的功能,是控制进程执行的指令集;数据集合是程序在执行时所需要的数据和工作区;进程控制块(PCB)包含进程的描述信息和控制信息,是进程存在的唯一标示进程具有的特征:动态性:进程是程序的一次执行过程,是临时的,有生命周期的,是动态产生的,动态消亡的并发性:任何进程都

2017-09-12 23:09:49 322

原创 JavaScript如何监听两个组合键

给文档添加事件onkeydown表示某个键盘按键被按下document.onkeydown = function(event) { //处理}在这里需要注意document, document 是一个文档对象,使用 document 对象可以对 HTML 文档进行检查、修改或添加内容,并处理该文档内部的事件,event对象(window.event);另一个就是Event对象,代表着事件的状态

2017-09-10 23:03:26 1646

原创 拼多多笔试

拼多多笔试 今天下午三点的笔试,前端方向70分钟,在这次的笔试中,也发现了一些自己以前没注意到的问题,决定把这些东西整理一下,注:以下内容完全来自于自己的回忆,如果有差错,还望指正“+”的问题第一个选择题是一个和“+”有关系的题目,首先,在JS中“+”是存在二义性的,就是它可以表示字符串的连接,也可以表示加号,进行以下尝试 1 + ‘3’ + ‘4’ “134” 1 + +’3

2017-09-02 17:22:39 1258

原创 笔试题积累

判断给定的一个字符串是否是合法IP 思路:对于给定的字符串,按照“.”进行分割,然后判断长度是否等于4,然后依次判断每一项是否在[0, 255]之间function judgMent(ip) { if(!ip) { throw Error('IP 不能为空'); } ip = ip.toString(); var ary = ip.split('.'); if(ary.len

2017-08-24 18:22:38 396

原创 今日头条前端面试总结

1.行标签都有哪些?特点?img、span、a、sub、sup、em、i、b、strong设置width、heigh不起作用margin、padding垂直方向不起作用,水平方向上有效2.img标签因为上面说了行元素设置宽高是不起作用的,所以才会被问到这个,我就解释了为什么它是行元素,因为在使用中,img元素中包含图片的话,它是按照一行排列的,下面的内容是我之后查阅得到的:img元素是可替换内联元素

2017-08-24 15:01:05 16668 3

原创 CSS3学习

CSS3学习最近在面试中,而CSS3目前成为我的一大问题,了解的太少,所以在面试中,碰到这样的问题,我就感觉到有点无力,只能说点相关的东西,但是总差那么一些,所以我决定开始积累有关CSS3的知识和问到的问题,此篇博客长期更新绘制正方形、三角形、扇形和饼状图transparent(透明色)、transform: rotate(0deg)(旋转)、clip属性剪裁clip: rect (top, rig

2017-08-22 16:48:00 767

原创 JavaScript—易犯错的题目

var arr = [];arr[0] = 0;arr[1] = 1;arr.foo = 'c';console.log(arr.length)运行结果为2,当时我想会报错,结果错了,数组的实例本身也是一个对象,可不要忘记typeof ary的结果可是object的,arr.length可以认为是arr的属性,那么同理,arr.foo也可以认为是给arr添加了一个属性foo,这个属性的值

2017-08-19 15:59:59 535

原创 面试题总结

这三道题,是我在面试中碰到的,希望对你有用题目一 比较两个参数是否相等 function diff() { …. } diff(1, 1); //true diff(1, ‘1’); //false diff({name: ‘123’}, {name : ‘123’}) //true diff({name: ‘123’}, {name : ‘678’}

2017-08-18 14:34:07 569

原创 网易笔试编程题详解

题目一 彩砖的问题解析:在答这道题的时候,我分析出,首先是和字母的种类数有关系的,当这个种类数为2的时候,它是存在的,而且结果是2,因为BBAA与AABB,当这个种类数为3或者大于3的时候,这个时候是不存在,因为,只要第三种和前两种相邻,这个结果就是大于1的,对于种类数为0和1的情况,我都认为是0(理解错误),在这一块,我犯了错误,题目中是“最多存在一对不同颜色的相邻砖块”,也就是说包含着一对都不存

2017-08-12 19:36:15 525

原创 值得思考的JavaScript代码

关于Javascript很经典的闭包问题与异步问题,希望你能仔细阅读相关内容问题一 请说明其输出结果for(var i = 0; i < 5; i++) { setTimeout(function() { console.log("inner", new Date().getTime(), i); }, 1000);}console.log("outer", new Date

2017-08-05 21:52:29 416

原创 定宽高的水平垂直居中

绝对定位和负magin值效果预览<div class="parent"> <div class="child"></div></div> div.parent { width: 400px; height: 400px; background: #EDEDED; position: relative;}div.child { width: 200px; heigh

2017-08-05 15:58:12 610

原创 不定宽高水平且垂直居中的实现方法

不定宽高水平且垂直居中的实现方法flex布局效果预览<div class="parent"><div class="child">水平垂直居中</div></div> div.parent { display: flex; justify-content: center; /*主轴对齐方式*/ align-items: center; /*交叉轴上如何对齐*/ backgrou

2017-08-05 12:09:29 677

原创 flex布局学习笔记

布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。新的方案—-Flex 布局,可以简便、完整、响应式地实现各种页面布局简要介绍flex(Flexible Box)的缩写,弹性布局,任何一个容器都可以指定为Flex布局,Webkit 内核的浏览器,必须加上-webkit前缀,但是设置为Flex布

2017-08-05 11:10:50 399

转载 深入理解css中position属性及z-index属性

原文链接在网页设计中,position属性的使用是非常重要的。有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难。position属性共有四种不同的定位方法,分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。第一部分:position: staticstatic定位是HTML元素的默认值,即没

2017-08-02 18:57:29 819

原创 搭建简单的mongodb服务器

搭建简单的mongodb服务器的步骤: cd /data/mongodb mkdir data mkdir log mkdir conf mkdir bin cp /usr/local/mongodb/bin/mongod bin/ cd conf/ vim mongod.conf ​ port =

2017-07-31 11:58:39 457

深度优先搜索算法—DFS

该代码是DFS算法的实现,讲解部分可以查看我的博客

2017-04-23

数据查询(本地数据)

利用本地数据查询,可以减少与后台交互的次数,提高效率

2017-04-09

广度优先搜索算法BFS

广度优先搜索算法—BFS的相关代码,包括循环队列的代码

2017-04-24

XSS的攻击及防御代码的简单演示

这个是XSS的攻击及防御代码的简单演示,利用Node搭建的

2017-04-25

Node.js对于MongoDB的操作DAO的封装

这是通过Node.js对于MongoDB的操作DAO的封装的代码

2017-07-30

虚拟DOM的实现

这是虚拟DOM简单实现的代码,理解时可以参考http://blog.csdn.net/dear_mr/article/details/72566716

2017-05-20

本地数据正反查询示例

2017-04-08

A-star算法

A*算法的实现

2017-04-06

jQuery实现滚动效果

利用jQuery分别实现了轮播效果,上下文字滚动效果

2017-04-11

C的线性表的实现

通过C语言实现的线性表,有顺序表结构和链式结构,以及链表合并的相关代码

2017-04-13

线性结构-串

包含串的常用操作,以及从串S中删除串T的代码

2017-04-16

数据结构-栈的实现

数据结构中栈的代码,以及汉诺塔的代码

2017-04-13

响应式的实例

这是响应式网站的Demo,可以作为学习响应式的参考

2017-05-15

jQuery插件-轮播

这是一个仿照jQuery封装出的一个关于轮播的插件

2017-04-11

表单验证的插件

利用jQuery和Bootstrap编写的表单插件,可扩展

2017-06-15

线性结构—队列

关于队列的代码,包括循环队列

2017-04-16

本地数据的正反查询(市县联动示例)

本地数据的正反查询(市县联动示例)

2017-04-09

本地数据的正反查询-市县级

本地数据的正反查询-市县级

2017-04-08

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除