![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
Rui012345
love web
展开
-
获取标签名
new Set([.../document.querySelectorAll('*')].map(v => v.tagName));new Set(Array.from(document.querySelectorAll('*')).map(v => v.tagName));原创 2019-11-04 10:43:06 · 268 阅读 · 1 评论 -
gulp自动化构建工具
目录gulp是什么?gulp安装gulp APIgulp.src(globs[, options])gulp.dest(path[, options])gulp.task(name[, deps], fn)gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])gulp API 实战常用gu...原创 2019-06-08 19:53:43 · 299 阅读 · 0 评论 -
Javascript实现方法 parse
//obj为引用,map的每个数组元素运行,每次都往深的改变引用类型obj的值,太大神了啊,怎么会想到如此简单的方法!!佩服!function parse(obj, str) { str.replace('[', '.').replace(']', '').split('.').map((ele) => obj = obj[ele.trim()]); return ob...原创 2019-07-01 15:16:12 · 1261 阅读 · 0 评论 -
实现动态加载一个 JavaScript 资源
(1)DOM创建元素(2)定义script标签的属性(3)onreadystatechange绑定资源加载成功的事件,利用readyState判断资源加载状态是否为加载成功或加载完成(4)onerror绑定资源加载失败的事件var script = document.createElement(“script”);var head = document.getEleme...原创 2019-07-01 15:30:53 · 454 阅读 · 0 评论 -
Javascript 数值增加千分位
三种方法:1.Number.toLocaleString()function comma(num){ return num.toLocaleString(); }console.log(commafy(12345678));//12,345,6782.暴力解法,每个数字存入数组,计数,每隔3个push一个千分位分隔符‘,’function commafy(num){ c...原创 2019-07-01 21:00:03 · 1032 阅读 · 0 评论 -
Webpack 懒加载
官方解释:懒加载或者按需加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。通俗来说就是,如果每次加载页面的时候都会某些代码块,会重复的请求,造成资源的浪费,影响网站性能。所以提出了懒加载的解决办法:...原创 2019-06-29 10:56:25 · 1293 阅读 · 0 评论 -
vue组建传参
一、父子组件传参vm.$emit( event, arg ) //触发当前实例上的事件【子传父】借助一个中转的父组件自定义函数,在子组件中利用 $emit 触发父组件的这个中转函数事件,传递的参数作为中转函数的参数传给父组件,子组件:login.vue<template> <section> <div class="login"> ...原创 2019-07-11 17:10:47 · 264 阅读 · 0 评论 -
JavaScript短小精悍的代码段
函数定义 数组的高阶函数reduce:arr.reduce(function(array,prev,cur,index){})prev:上一次调用的返回值,默认为0,可以使用reduce的第二个参数设置默认初始值。cur:当前的数组值 常用代码: 1.去重var array = [1,2,3,2,3,4];var diffarr = arr =>...原创 2019-08-02 21:19:19 · 150 阅读 · 0 评论 -
面试问题 没答上来的 记录一下
1.promise封装ajax2.事件属性方法 target currenttarget3.vue组件传参具体举例,导航栏。。。4.异步的方式5.获取宽度原创 2019-08-07 16:40:41 · 234 阅读 · 0 评论 -
js获取宽高
引用自https://www.cnblogs.com/chengzp/p/cssbox.htmlJS获取宽高通过JS获取盒模型对应的宽和高,有以下几种方法:为了方便书写,以下用dom来表示获取的HTML的节点。1. dom.style.width/height 这种方式只能取到dom元素内联样式所设置的宽高,也就是说如果该节点的样式是在style标签中或外联的CSS文件中...原创 2019-08-15 11:07:19 · 164 阅读 · 0 评论 -
Vue项目上传github
https://www.cnblogs.com/lalalagq/p/9916297.html转载 2019-08-25 15:43:57 · 158 阅读 · 0 评论 -
promise封装ajax
关于promise使用时的几点:使用方法:先创建一个promise对象new Promise(),根据业务需求判断执行成功或失败,成功调用resovle(),失败则调用reject()。 Promise对象的then(onFulfilled,onRejected)有两个参数,成功执行onFulfilled,失败执行onRejectd p.then(function(value...原创 2019-08-16 13:28:43 · 138 阅读 · 0 评论 -
面试知识点总结1(2019-8-30)
一、CSS定位(position属性)static:正常布局,即元素正常的流式布局top、right、left、bottom、z-index在static定位元素下无效relative:相对定位,处于文档流,是相对于其原本的位置来定位的,不影响其他div,,而relative定位的子元素会撑大父元素对table-*元素无效absolute:绝对定位,脱离文档流...原创 2019-08-30 17:06:41 · 229 阅读 · 0 评论 -
javascript 继承
原型、构造函数、实例的关系:每一个构造函数都有一个原型对象,每个原型对象都有一个指向构造函数的指针,实例包含一个指向原型对象的指针。将一个原型对象 = 另一个对象的实例,那么此时的原型对象将包含一个指向另一个原型对象的指针,另一个原型包含一个指向另一个构造函数的指针。 原型链继承: 实现方式将父类的实例赋值给子类的原型,即让子类的原型指向父类的原型,且父类的原型的construc...原创 2019-06-13 11:29:17 · 97 阅读 · 0 评论 -
FreeCodecamp中级javascript算法
1.比较两个数组,然后返回一个新数组,该数组的元素为两个给定数组中所有独有的数组元素。换言之,返回两个数组的差异。function diff(arr1, arr2) { var a1 = arr1.filter(function(item){ return arr2.indexOf(item)<0; }); var a2 = arr2.filter(function...原创 2019-05-29 15:21:31 · 173 阅读 · 0 评论 -
JavaScript闭包
闭包应用的两种情况即可——函数作为返回值,函数作为参数传递。闭包:函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性称为闭包。//函数作为返回值 输出15function fn(){ var max = 10; return function bar(x){ if(x > max){ console.log(x); } ...原创 2019-03-01 17:38:54 · 80 阅读 · 0 评论 -
异步
需要等待的情况都需要异步。 同步和异步的区别:同步会阻塞代码执行,而异步不会;alert是同步,setTimeout是异步 前端使用异步的场景:ajax异步、img加载、事件绑定 start end-()//ajax异步console.log('start')$.get('./data1.json',function (data1) { console.log(data1); //...原创 2019-03-01 18:56:00 · 100 阅读 · 0 评论 -
CSS多列等高(利用padding-bottom|margin-bottom正负值相抵)
css多列等高 布局方案浏览器兼容最好最简便的应该是 padding补偿法。首先把列的padding-bottom设为一个足够大的值,再把列的margin-bottom设一个与前面的padding- bottom的正值相抵消的负值,父容器设置超出隐藏.这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任 一列高度增加了,则父容器的高度被撑到它里面...原创 2019-03-06 09:45:04 · 1352 阅读 · 0 评论 -
Js
1.获取2017-06-10格式的当前日期 getMonth() 的返回值为0-11var dt = new Date()function formatDate(dt){ if(!dt){//加判断 dt = new Date(); } var year = dt.getFullYear(); var month = dt.getMonth() + 1; var date =...原创 2019-03-04 09:40:27 · 85 阅读 · 0 评论 -
json-server常见问题
json-server搭建本地测试服务器:mock数据(模拟后台数据)现在基本上都是前后端分离,前端是前端工程师,后端属于后端工程师,但是前后端交互是个必不可少的环节,一般用Ajax进行交互。还需要一些实验数据来支撑,就需要模拟数据。1..vue-cli的build的文件夹下没有dev-server.js文件,怎么配置mock数据因为最新版本的vue-cli已经放弃dev-serv...原创 2019-03-21 14:25:09 · 2036 阅读 · 0 评论 -
Vue——图片轮播组件
Notices: 这是我一个项目中的一个子组件,要展示的数据、图片地址等的都在父组件data中。所以后面的讲述都是基于从父组件获取的参数进行处理。(如需将这个SlideShow写成一个单独的主组件,将本文使用的data写在这个组件的data中)必备知识:写轮播页面:HTML+CSS vue-cli:创建项目 Vue基础:模板语法、计算属性、侦听器、渲染方式(条件渲染、列表渲染)、组件...原创 2019-03-21 15:28:40 · 11058 阅读 · 8 评论 -
阿里前端——电话面试题整理
一.元素居中我们需要让元素居中显示:1. 一段文本的水平居中text-align: center;2. 一张图片的水平居中父级:text-align: center;3. 一个块级元素的水平居中块级元素水平居中,使用 margin-right: auto; margin-left: auto;4. 单行文本的竖直居中单行文本的垂直居中,让 line-heig...原创 2019-03-25 15:33:15 · 5655 阅读 · 2 评论 -
Vue:json-server搭建本地模拟服务器
前端项目需要设定好数据接口以及数据的定义,剩下的就可以各自开发,最后集成测试。利用json-server快速搭建本地服务器模拟后台数据的请求。1.首先你的电脑中需要安装nodejs,建议使用最新版本,并且利用vue-cli初始化好项目,然后安装json servernpm install json-server --save2.提供json数据文件。 在项目static目录下...原创 2019-03-23 15:23:17 · 1216 阅读 · 0 评论 -
Vue项目易错点合集
1.vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件<router-link v-for="(item,index) in productdetailcontent" :key="index" :to="{ path: item.path }" tag='li' @click="showIndicator(in...原创 2019-03-31 17:56:08 · 326 阅读 · 0 评论 -
宽高都200px的div在浏览器窗口居中(水平垂直都居中)
1.fixed,从中间移动定位position:fixed;width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px第一行设置完:盒子的左上角的点,刚好处于浏览器页面中间,需要向左向上移动才可实现整体的居中,所以margin-left=负的盒子宽的一半,margin-top=负...原创 2019-04-10 10:13:54 · 1529 阅读 · 0 评论 -
CSS常用布局
目录1.品字布局(1)满屏品字布局(2)品字布局(每块都有固定宽高)2.去掉inline-block间隔的方法(1)移除标签空格(2)使用margin负值(3)font-size(4)使用letter-spacing(5)word-spacing1.品字布局(1)满屏品字布局<div style="margin:0 auto;height...原创 2019-04-10 10:55:02 · 128 阅读 · 0 评论 -
跨浏览器事件处理
事件处理程序事件就是用户或者浏览器要进行的某些动作,例如click、mouseover、load等。事件处理程序就是响应某个事件(动作)的函数。click的事件处理程序:onclick目录事件处理程序1.HTML事件处理程序2.DOM0级3.DOM2级事件处理4.IE事件处理性能优化下面每个的介绍一下: 1.HTML事件处理程序 优...原创 2019-05-21 11:04:41 · 122 阅读 · 0 评论 -
javascript实现凯撒密码
Freecodecamp上的一道算法题下面我们来介绍风靡全球的凯撒密码Caesar cipher,又叫移位密码。移位密码也就是密码中的字母会按照指定的数量来做移位。一个常见的案例就是ROT13密码,字母会移位13个位置。由'A' ↔ 'N', 'B' ↔ 'O',以此类推。写一个ROT13函数,实现输入加密字符串,输出解密字符串。所有的字母都是大写,不要转化任何非字母形式的字符...原创 2019-05-29 14:24:01 · 2299 阅读 · 0 评论