8 John的WEB前端学习日记

尚未进行身份认证

我要认证

暂无相关简介

等级
TA的排名 9k+

小程序文字自动换行

<!-- 文字 --> <view class='list-content'> <text class='title'>{{index+1}}.{{item.title}}</text> <view class='more'> <text class='author'>作者:{{item.au...

2020-04-14 12:00:43

有以下 3 个判断数组的方法,请分别介绍它们之间的区别和优劣Object.prototype.toString.call() 、 instanceof 以及 Array.isArray()

1. Object.prototype.toString.call()每一个继承 Object 的对象都有toString方法,如果toString方法没有重写的话,会返回[Object type],其中 type 为对象的类型。但当除了 Object 类型的对象外,其他类型直接使用toString方法时,会直接返回都是内容的字符串,所以我们需要使用call或者apply方法来改...

2020-03-03 16:46:30

js实现深度优先遍历和广度优先遍历

什么是深度优先和广度优先其实简单来说 深度优先就是自上而下的遍历搜索 广度优先则是逐层遍历, 如下图所示1.深度优先2.广度优先两者的区别对于算法来说 无非就是时间换空间 空间换时间深度优先不需要记住所有的节点, 所以占用空间小, 而广度优先需要先记录所有的节点占用空间大 深度优先有回溯的操作(没有路走了需要回头)所以相对而言时间会长一点深度优先采用...

2020-02-29 23:48:02

Vue修饰符

为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫啥名字) 表单修饰符填写表单,最常用的是什么?input!v-model~而我们的修饰符正是为了简化这些东西而存在的 .lazy ...

2020-01-13 10:30:39

使用 git tag 为项目打标签

查看项目的标签 ,使用用的是 git tag 。在当前提前的这个点上打个标签 git tag v0.1。git show 会显示这个 tag 指向的那个 commit ,git show v0.1。添加一个有注释的 tag ,git tag -a v0.1 -m '注释',加上一个 -a 参数,标签的名字是 v0.1 ,后面再用一下 -m 参数,设置一条注释内容。查看项目在 v0.1 的时...

2020-01-08 19:36:29

git中Please enter a commit message to explain why this merge is necessary.

Please enter a commit message to explain why this merge is necessary.请输入提交消息来解释为什么这种合并是必要的git 在pull或者合并分支的时候有时会遇到这个界面。可以不管(直接下面3,4步),如果要输入解释的话就需要:1.按键盘字母 i 进入insert模式2.修改最上面那行黄色合并信息,可以不修改3.按...

2020-01-08 18:58:00

CSS伪类选择器nth-child 选择3的倍数个元素写法

CSS伪类选择器nth-child 选择3的倍数个元素写法web开发中,经常有对列表的3倍数列表项单独设置样式的需求。ul li:nth-child(3n+3) {color: #ccc;}上面的css是干什么用的,它就是在无序列表里面选择是3倍数的列。也就是第3个,第6个,第9个等等。...

2019-12-24 18:31:23

JavaScript new Date()在Safari上的坑

问题描述我们经常用yyyy-MM-dd HH:mm:ss格式表示日期,如2018-11-11 00:00:00,在js开发中也经常会把此格式字符串格式化为javascript Date类型,如new Date('2018-11-11 00:00:00'),不幸的是此操作在Safari浏览器(不论是Mac还是iPhone)上会报错,返回Invalid Date。如下图所示 在Mac S...

2019-12-13 14:47:20

Vue使用jsPdf将页面导出成pdf文件

1 、我们要添加两个模块①第一个.将页面html转换成图片npm install --save html2canvasnpm install jspdf --save②第二个.将图片生成pdf2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.我个人习惯放在('src/components/utils/htmlToPdf')在将要导出的页...

2019-11-20 19:56:10

vue 父子组件的生命周期顺序

一、加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted二、子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated...

2019-09-10 14:38:41

http和http2的主要区别

1,二进制传输http2采用二级制传输,相对于http1的文本传输安全性要高2,多路复用http一个链接只能提交一个请求,而http2能同时处理无数个请求,可以降低连接的数量,提高网络的吞吐量。3,头部压缩http2通过gzip与compress对头部进行压缩,并且在客户端与服务端各维护了一份头部索引表,只需要根据索引id就可以进行头部信息的传输,缩小了头部容量,间接提升了传输...

2019-09-07 16:22:33

Vue子组件调用父组件的方法

Vue中子组件调用父组件的方法,这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import c...

2019-09-03 22:03:43

详解vue的diff算法

前言我的目标是写一个非常详细的关于diff的干货,所以本文有点长。也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的那一小块do...

2019-08-31 18:00:55

grid网格布局

前言现在我们大家在实际的开发中,可能用的最多的就是flex布局,当然还有浮动和定位,除此之外,这两年一直听到网格布局是趋势,即grid布局,但是项目中没有太多的应用,所以特此总结一下,希望对大家也对我自己有帮助。给大家一个直接的效果体验一下:网格布局:就是一个容器内部由一个个的项目组成,是一个二维布局,接下来,我们就会围绕 容器 和项目 来介绍网格布局,目录...

2019-07-29 09:48:15

react jsx事件获取event对象

文章目录文章参考一、使用bind函数获取event对象二、 箭头函数获取event对象三、使用高阶函数获取event对象文章参考React学习–JSX与react事件下面我根据使用难易的顺序做了下面三个例子一、使用bind函数获取event对象react事件参数的传递通过绑定来实现,在传递时,绑定的this在前,参数在后,在定义函数时,事件对象e要放在最后/** * 删...

2019-06-24 10:26:27

开发 react 应用最好用的脚手架 create-react-app

在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧。大家都是用webpack + es6来结合react开发前端应用。这个时候,我们可以手动使用npm来安装各种插件,来从头到尾自己搭建环境。比如:npm install react react-dom --savenpm install babel babel-loader bab...

2019-06-20 16:07:42

vuex中mapState、mapMutations、mapAction的理解

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用mapState辅助函数帮助我们生成计算属性。// 在单独构建的版本中辅助函数为 Vuex.mapStateimport { mapState } from 'vuex' export default { // ... computed: mapState({ ...

2019-06-12 11:41:46

同源策略、跨域解决方案

1、先来说说什么是源• 源(origin)就是协议、域名和端口号。以上url中的源就是:http://www.company.com:80若地址里面的协议、域名和端口号均相同则属于同源。以下是相对于http://www.a.com/test/index.html的同源检测• http://www.a.com/dir/page.html----成功• http://www.chil...

2019-06-06 18:29:23

TCP三次握手和四次挥手

TCP有6种标示:SYN(建立联机)ACK(确认)PSH(传送)FIN(结束)RST(重置)URG(紧急)一、TCP三次握手 第一次握手 客户端向服务器发出连接请求报文,这时报文首部中的同部位SYN=1,同时随机生成初始序列号seq=x,此时,TCP客户端进程进入了 SYN-SENT(同步已发送状态)状...

2019-06-03 16:12:14

全面解析Vue.nextTick实现原理

vue中有一个较为特殊的API,nextTick。根据官方文档的解释,它可以在DOM更新完毕之后执行一个回调,用法如下:// 修改数据vm.msg='Hello'// DOM 还没有更新Vue.nextTick(function(){// DOM 更新了})尽管MVVM框架并不推荐访问DOM,但有时候确实会有这样的需求,尤其是和第三方插件进...

2019-05-17 09:09:08

查看更多

勋章 我的勋章
  • 勤写标兵Lv1
    勤写标兵Lv1
    授予每个自然周发布1篇到3篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。