- 博客(38)
- 收藏
- 关注
RSS订阅原创 JS实现New运算符
首先需要去搞懂new运算符背后的原理，当new Object()时具体发生了什么。举一个简单的例子：function foo(){}var obj = new foo()那么这句代码到底做了什么工作呢，可简述为以下创建一个空对象obj，它继承于foo.prototype 构造函数foo被执行，上下文（this）被指定给新的对象obj 返回新创建的对象obj由于foo中没有参数设置，所以忽略了参数传递的过程。通过这个简单的例子，new运算符的过程为创建一个新的对象 将构造
2020-08-05 19:15:50
428
原创 两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应
这三种布局其实都是大同小异，今天就全部总结成一篇文章。1.右定宽左自适应<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
2020-08-03 18:23:07
284
原创 上下定高中间自适应的三栏布局
共有四种实现方法，其原理与左右定宽中间自适应差不多，更多适用于移动端。 *{ padding: 0; margin: 0; } html, body{ height: 100%; } .layout{ height: 100%; } .layout article > div{ width: 100px; }1.flex布局 <!-- flex布局 --&g
2020-08-03 16:07:12
328
原创 vue实现打字机动画
想在自己的项目中用一下打字机的特效，之前用的是js写的，今天放到vue项目中试了一下，感觉还不错。<p class='typewriter'>{{typewriter}}</p>data () { return { typewriter: '', i: 0, timer: 0, str: 'Hi, i´m a web Designer' }}mounted () { this.typeing()
2020-07-28 16:59:54
1640
1
原创 Vue路由跳转报错“Avoided redundant navigation to current location“
在自己做项目的过程中遇到了一个这样的问题，使用this.$router.push()跳转会报错，但是不会影响页面。原因就是在使用vue-router进行路由跳转时，由于导航重复进而报错。解决：重写router原型中的push方法，在router下的index.js中添加const originalPush = Router.prototype.pushRouter.prototype.push = function push (location) { return original
2020-07-17 16:08:28
1722
1
原创 Vue中读取md文件
在Vue中读取本地的md文件。第一步：在Vue项目中安装依赖cnpm i markdown-loader html-loader --save第二步：打开build/webpack.base.config.js，在module下的rules中配置，配置成功后需要重启项目。 { test: /\.md$/, use: [ { loader: 'html-loader'}, { loader: 'markdow
2020-07-13 16:52:22
4027
2
原创 App.vue中全局引入less文件不显示问题
开发项目的时候遇到一个这样的问题，在App.vue中引入less文件但是只能在当前页面有效，无法全局生效。解决方法：在build文件夹下的utils.js中添加 less: generateLoaders('less').concat({ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/base/css/base.less')
2020-07-09 10:24:53
1488
1
原创 vue中循环图片不显示问题
在Vue中通常使用v-for来遍历一个数组或者对象，但在去循环一个图片数组时出现了一些问题结果却无法显示图片经过百度之后得到了一个解决方法，通过require去动态获取图片路径这样图片就可以完全显示了为什么会出现这样的问题呢，是因为我们在动态的获取图片路径时，这个路径会被解析成一个字符串，这样就无法显示原来的图片里。而require是CommonJS中的关键字，用来加载模块可以解析路径。根据参数的不同格式，require命令去不同路径寻找模块文件。 如果参数...
2020-07-07 12:04:51
2583
原创 cross-env
在webpack中设置环境变量会因为设备的不同而出现不同的方式，因此npm install cross-env可以做到统一。"build": "cross-env NODE_ENV=production webpack --config webpack.config.js","dev": "cross-env NODE_ENV=development webpack-dev-server ...
2019-12-07 18:44:03
125
原创 Webpack学习之搭建Vue项目
一.配置环境由于npm是基于node环境，所以要先安装node。创建文件夹在VScode中打开并打开终端（快捷键：shift+ctrl+`），输入指令：npm init //初始化一个项目npm install webpack vue vue-loader//安装webpack,vue,vue-loader初始化的工作就已经完成。二.构建项目项目目录1.创建sr...
2019-12-04 20:34:44
124
原创 Web Storage学习（一）
Web Storage提供了存储器的缓存机制，使得浏览器可以安全地存储键值对。基本概念:1. Storage类型：提供了访问特定域名下的会话存储或本地存储的功能。方法：clear(): 删除所有项。getItem(name): 根据指定的name获取对应的值。setItem(name，value):为指定的name设置相应的值。removeItem(name):删除name对应的...
2019-10-14 23:51:25
169
原创 封装判断数据类型方法的函数
首先用typeof判断数据类型共有六种情况：<script> var a = null; var b; var c = 1; var d = "abc"; var e = true; var f = function(){ }; var g = ["1","2"]; var h = { a ...
2019-10-11 21:48:29
618
原创 webpack学习之自动编译代码
对于每次代码发生改变时都要去手动运行，根据webpack官方文档总结出二种自动编译代码的方法。webpack`s Watch Mode webpack-dev-server使用webpack`s Watch Mode在package.json中添加用于启动观察模式的npm script脚本"watch": "webpack --watch"运行npm run watch就会编...
2019-10-10 21:23:33
230
原创 ES6之数组的flat(),flatMap()
数组的成员还是数组时，Array.prototype.flat（）用于将嵌套的数组“拉平”，编程一维数组。该方法返回一个新的数组，对原数据没有影响。[1, 2, [3, 4]].flat()// [1, 2, 3, 4]flat（）默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat（）方法的参数写成一个整数，表示想要拉平的层数，默认为1.[1, 2, [3, [...
2019-10-09 21:49:37
644
原创 let，const，var的区别
let是ES6新规定的一种声明变量的方法，用来取代ES5中var命令，消除var声明变量的不合理，不严谨之处。const用来声明常量。let使用规则1.let声明的变量不存在变量提升的问题，必须遵循 "先声明，后使用"否则会报错。但用var声明不会出现报错。2.let声明的变量，存在块级作用域。let声明的变量只在所声明的代码块内有效，块级作用域{}，包括if和for3.let不允...
2019-08-20 19:24:15
3492
原创 把一个URL解析成一个对象
第一种方法：原生JSvar url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2";var str = url.split("?")[1];var item = str.split("&");var obj = {};for(var i=0;i<item.length;i++){ var...
2019-08-20 19:21:44
767
原创 JS中的数组去重
var arr = [1,2,5,8,6,3,2,1];//1.运用set结构特点：存储的数据没有重复的，结果为对象，再用Array.from()转换成数组var set = new Set(arr);console.log([...new Set(arr)]);//[1, 2, 5, 8, 6, 3]console.log(Array.from(set));//[1, 2, 5, ...
2019-08-20 11:07:23
130
原创 JS中的数据类型
一.数据类型1.原始数据类型：Null，Undefined，Boolean，String，Number2.引用数据类型：Object，Array，Function二.面试常考1.Null和Undefined的区别Undefined：未定义，表示一个变量不含值，非人为因素Null：空对象，用来清空变量，人为因素相同点：if判断中都将会被转换成false不同点：...
2019-08-16 21:27:06
102
原创 JS中数组的方法
1.创建方法var arr = [1,2,3];//字面量 var arr = new Array(1,2,3)//构造函数实例化2.join（）数组转字符串arr.join('')//以''里的分隔符链接成字符串 console.log(arr.join(''));//1233.push（），pop（），shift（）和unshift（）添加和删除arr.push(4)...
2019-08-16 21:19:55
79
原创 CSS单位
1.px：绝对单位，页面按照精确像素展示2.em：相对单位，相对于当前元素大小来计算3.rem：相对单位，相对于<html>元素大小来计算4.vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%5.vh：viewpoint height，视窗高度，1vh等于视窗高度的1%6.vmin：vw和vh中的较小者7.vmax：vw和vh中的较大者...
2019-08-14 11:09:57
90
原创 DOM0级事件和DOM2级事件
DOM0级事件分为两种，一种是在标签内添加执行语句:<button id = "button1" onclick="console.log('123')">点击</button>一种是定义执行函数<button id="button1">点击</button><script>var btn = document....
2019-08-13 19:55:45
298
原创 CSS实现多种图案
1.圆形原理：上下左右都是圆角且为宽高一半 .circle{ width: 100px; height: 100px; background-color: red; border-radius: 50%; }2.椭圆形原理：块级元素为宽高比为2:1的矩形，border-radius为宽度的一半除以高...
2019-08-13 10:35:32
217
原创 左右定宽，中间自适应三栏布局
三栏布局（左右定宽，中间自适应）方法一：圣杯布局.box1{ padding: 0 150px 0 200px;}.main1,.left1,.right1{ float: left; height: 100px; position: relative;}.main1{ width: 100%; background-color: ...
2019-08-07 22:36:57
103
原创 左侧定宽，右侧自适应两栏布局
CSS两栏布局（左侧定宽，右侧自适应）方法一：float + margin-left/*css*/.left1{ width: 100px; background-color: red; float:left;}.right1{ background-color: green; margin-left: 100px;}//HTML&l...
2019-08-07 18:11:12
129
原创 元素常见的居中方式
1.行内文字居中，未设置高度，定位，浮动的情况下失效 text-align：center，水平居中 line-height: 行高，垂直居中2.表格内元素的居中 text-align：center，水平居中 vertical-align：middle，垂直居中3.元素水平居中，父元素和居中元素设置宽 使用外边距：margin：0 auto；...
2019-08-06 15:23:30
121
原创 选择器的优先级
选择器的类型1. * （通配符选择器）：获取所有子元素2. 类型选择器（标签名选择器）：获取所有该种元素3. 类名选择器 （.class）：获取所有具有该种类名的元素4. id选择器（#id）：获取所有具有该id值得元素5. 组合选择器：选择器之间用空格隔开6. 后代选择器：从父元素一直到子元素选择器，如#div ul li7. 群组选择器：具有相同样式的选择器，用逗号...
2019-08-06 14:14:35
272
原创 定位详解
position的六种属性及特点1.static：无定位元素出现在正常流中 没有设置定位方式时，默认为static，按照文档的流式定位，将元素放在一个合适的位置 在不同的分辨率下采用流式定位能够很好地自适应，去得相对较好的布局效果流式布局就是页面元素的宽度按照屏幕的分辨率进行调整，而页面的整体布局不变2.inherit：继承父元素3.relative：相对定位4.a...
2019-08-05 17:18:52
112
原创 float（对块级，行内，内联块元素的影响），如何清除浮动
浮动的影响浮动会使块级元素和内联元素具有内联块元素的特点，块元素可以一行显示，内联元素可以设置宽高。使得元素脱离文档流，按照浮动的方向移动，遇到父级边界或者相邻浮动元素停住：float：left / right / none，子元素脱离文档流，结果会使父元素高度崩塌清除浮动1.为父元素设置高度 优点：兼容性好 缺点：高度未知，可能会导致子元素换行2.ov...
2019-08-05 15:48:32
1261
原创 二维数组中的查找
题目：在一个二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排列。请完成一个函数，输入这样一个二维数组和一个整数，判断数组中是否含有该整数。例如：行列都是递增，在数组中查找7，找到返回1，找不到返回01 2 8 92 4 9 124 7 10 136...
2019-08-05 11:22:50
111
原创 标签嵌套规则，以及HTML转义
1.标签嵌套规则有些标签是固定的嵌套规则，比如ul包含li，ol包含里，dl包含dd和dt 块级元素与块级元素平级，内联元素与内联元素平级 块级元素可以包含内联元素和某些块元素，内联元素不可以包含块级元素只能包含其他内联元素 有几个特殊的元素只能包含内联元素，不能包含块级元素。例如：h1~h6，p，dt 块级元素不能放在p标签 li标签可以包含div标签，因为li和div标签都是装载...
2019-08-05 10:28:25
219
原创 DOM操作影响页面的性能（重排重绘）
1.页面的渲染过程（1）Javascript：通过JS实现动画效果或者操作DOM实现交互（2）Style：计算样式，如果样式有改变将重新计算，并返回给DOM（3）Layout：根据DOM的样式，重新布局（重排）（4）Paint：在多个渲染层上，对新的布局重新渲染（重绘）（5）Composite：将绘制好的多个渲染层合并，显示到页面上在页面生成时，至少进行一次布局和渲染，...
2019-08-03 21:11:00
3849
1
原创 DOM结构（DOM树）
DOM文档类型DOM（Document Object Model）主要用于HTML文档和XML文档的内容进行操作。DOM描绘了一个层次化的节点树，通过节点的操作，来实现对文档内容进行增删改查。1.DOM（Document Object Model）：文档对象模型文档：HTML文档 文档对象：页面中的元素 文档对象模型：对象被组织在一个树形结构中，用来表示文档中对象的标准模型就叫DO...
2019-08-03 15:57:39
7104
原创 ！Doctype的作用，严格模式和混杂模式的区别，以及如何触发两种模式
！Doctype的作用1.<！DOCTYPE>声明叫做文档类型DTD，它的作用就是用来标识浏览器使用哪种文档类型，让浏览器知道以何种方式解析文档。2.必须位于HTML文档的第一行，处于<html>标签之前，但是不属于HTML文档标签。3.声明文档的解析类型（document.compatMode），是为了避免浏览器的怪异模式。严格模式和混杂模式的区别，以及如...
2019-08-03 14:26:26
468
原创 数组中的重复数字
题目一：找出数组中的重复数字长度为n的数组里所有数字都在0~n-1的范围为内，某些数字是重复的，试找出任意一个重复数字。例如长度为7的数组{2，3，1，0，2，5，3}，对应重复的数字就应该是数字2或者数字3.第一种方法：可以对这个无序数组进行排序，然后就很容易得出重复的数字，排序一个长度为n的数组时间复杂度为O(nlogn)排序：输出：这样可以找到所有的重复数...
2019-07-26 16:51:53
94
原创 常见元素的属性特点
块级元素：独占一行；不可解析换行符；可设置宽高和上下边距；不设置宽度的情况下和父元素保持一致；<p><div><h1>~<h6><ol><ul><strong>行内元素：多个元素可以一行显示；解析换行符；元素的宽高和上下边距不可设置；不设置宽度的情况下，默认为内容的宽度不可改变；<span&g...
2019-07-25 23:01:48
382
原创 CSS中display为flex和inline-flex的区别
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局。display: flex 将对象作为弹性伸缩盒显示display: inline-flex 将对象作为内联块级弹性伸缩盒显示flex效果：没有为父元素设置宽度，所以父元素的宽度为100%，而高度则是由子元素撑开，既高...
2019-06-20 10:22:34
5203
原创 《提问的智慧》读后感
在读完《提问的智慧》后，自己总结了一些如何去做一个明智的提问者： 1.在提问题之前尽可能的去通过谷歌，百度搜索你所遇到问题。在一般情况下都会遇到解答，甚至是很完美的解答瞬间帮你解决所遇到的问题 。 2.若很直白的没有找到想要的答案，可以再去搜索这个问题的关键点，依照这个关键点的问题去寻找最接近正确答案的解决方案。 3.在提问时，最好通过一些相关资料将这个问题了解清楚并说明...
2018-10-06 20:09:31
137
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人