- 博客(25)
- 收藏
- 关注
RSS订阅原创 html中src和href的区别
href：href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理（但是浏览器渲染页面的时候会因为css资源未加载完成而停止渲染，因为浏览器的渲染需要CSS样式树）。src：src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。当浏览器
2022-05-22 11:49:14
245
原创 mouse鼠标事件
mouseover和mouseenter都是鼠标移到元素身上就触发，区别是1、mouseover经过自身盒子触发，经过子盒子也触发，拥有冒泡特性2、mouseenter只经过自身盒子触发，没有冒泡特性mouseenter不会冒泡，搭配鼠标离开事件mouseleave同样不会冒泡!1.mouseover与mouseout成对，mouseenter与mouseleave成对（连它们都成对了。。。默默画个圈）2.mouseover触发优先级高于mouseenter，mouseout触发优先级高于mous
2021-12-21 00:16:19
2930
原创 图片转为base64
将图片转换为Base64编码，可以让你很方便地在没有上传文件的条件下将图片插入其它的网页、编辑器中。 这对于一些小的图片是极为方便的，因为你不需要再去寻找一个保存图片的地方。将图片转换成base64编码的，在web网上一般用于小图片上，不仅可以减少图片的请求数量（集合到js、css代码中），还可以防止因为一些相对路径等问题导致图片404错误。引言假设一个应用场景：由于某些特殊原因从服务端请求到图片路径，要求通过该路径获取对应图片的 base64 dataURL。在这个场景中，我们首先推断该图片路径是可
2021-09-27 16:57:32
6029
原创 CSS权重1
1、!important，加在样式属性值后，权重值为 100002、内联样式，如：style=””，权重值为10003、ID选择器，如：#content，权重值为1004、类，伪类和属性选择器，如： content、:hover 权重值为105、标签选择器和伪元素选择器，如：div、p、:before 权重值为16、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0上面这段权重划分大家是最熟悉不过了，可能到这里还有人说我神经病，这没毛病啊。确实啊，正常情况下我
2021-07-05 16:29:04
127
转载 使用js高效地将扁平的数据转换成树形结构（对象形式）
当我们需要将一维数组转换成一个多层结构的时候，最简单但是最慢的就是使用多个for循环嵌套，但是这样做有一些缺点，那就是效率太低，而且有多少层就需要用多少个for，现在我们可以使用一种高效的手段将一维的扁平数组转换成一个多层级的菜单结构。一维数组中每一个元素必须要包含以下属性：1.拥有一个唯一的id2.拥有一个parent_id,这个id指向父级的id扁平数组实例：var menu_list = [{ id: '1', menu_name: '设置', menu_
2021-06-27 18:06:52
676
原创 nodejs的require模块及路径查找
在nodejs中，模块大概可以分为核心模块和文件模块。核心模块是被编译成二进制代码，引用的时候只需require表示符即可，如(require(‘net’))。文件模块，则是指js文件、json文件或者是.node文件。在引用文件模块的时候后要加上文件的路径：/…/…/xxx.js表示绝对路径、./xxx.js表示相对路径(同一文件夹下的xxx.js)，…/表示上一级目录。如果既不加/…/、…/又不加./的话，则该模块要么是核心模块，要么是从一个node_modules文件夹加载。对于加载模块时既没指
2021-06-17 23:40:08
1040
转载 前端接收二进制文件流（使用blob对象）
前端在做管理系统开发时经常遇到的需求：下载文件入Excel，World，zip处理方式有两种：1.后端生成下载地址，前端调用2.后端返回二进制文件流，前端转换后下载本文主要介绍第二种在向后端发起请求时，需要在请求中加上responseType: 'blob'这样在返回data中可以得到一个浏览器可以解析的blob数据通过以下代码，可以将二进制数据转化为可下载文件，并通过a标签下载文件let blob = new Blob([res], { type: 'application/vnd.
2021-06-17 16:55:29
4344
原创 JavaScript中valueOf、toString的隐式调用
每个对象的toString和valueOf方法都可以被改写，每个对象执行完毕，如果被用以操作JavaScript解析器就会自动调用对象的toString或者valueOf方法，举栗子：//我们先创建一个对象，并修改其toString和valueOf方法 var obj={ i:10, valueOf:function(){ console.log('执行了valueOf()');.
2021-06-08 22:43:42
265
原创 javascript--简单明了区分escape、encodeURI和encodeURIComponent编码方式
1.escape和它们不是同一类简单来说，escape是对字符串(string)进行编码(而另外两种是对URL)，作用是让它们在所有电脑上可读。编码之后的效果是%XX或者%uXXXX这种形式。其中ASCII字母、数字、@*/+，这几个字符不会被编码，其余的都会。最关键的是，当你需要对URL编码时，请忘记这个方法，这个方法是针对字符串使用的，不适用于URL。事实上，这个方法我还没有在实际工作中用到过，所以就不多讲了。2.最常用的encodeURI和encodeURIComponent对URL编码
2021-06-04 11:20:12
168
原创 vue-proporty-decorator使用Filter
template> <div>{{msg | filterA}}</div></template><script lang="ts">@Component({ filters: { addWorld: (value: string) => `${value} world`, },})export default class App extends Vue { private msg = 'Hello' // fi
2021-06-01 15:36:44
609
原创 vue 中使用element-ui的menu选中项高亮的问题
vue 中使用element-ui的menu选中项高亮的问题在使用element中的menu组件时，根据官方文档，可以设置给el-menu设置router属性为：true，给el-menu-item设置index的值为路径，就可以实现点击导航跳转到指定路由。这样做虽然能实现跳转，但是，若刷新浏览器，则导航会跳转到默认的选中项，而不是我们离开时的导航。 百度时大部分回答是将default-active属性设置为：$route.path，这样页面重新渲染时就会选中当前的路由了。可是，解决了刷新的问题，还有
2021-05-08 21:11:45
2139
2
转载 npm link的基本用法
如果我们想自己开发一个依赖包，在多个项目中使用它，如果直接发布到官网上固然可以，但如果修改则会非常麻烦，而且不利于在多个项目中使用。npm link命令可以帮助我们实现这个事情假如我们开发一个名为allenModule95的依赖包。首先需要在该依赖包下运行npm init命令，并编写index.js文件module.exports = { name: "allenModule95Name", sayHello: function(){ console.log("h
2021-04-15 13:40:35
346
原创 vue生命周期注解
vue生命周期注解：beforeCreate：在这个钩子函数内，初始化了 inject、props、methods、data、computed、wacth、provied；所以在这个钩子里还不可以使用 this；beforeDestory：在这个钩子内还可以使用 this；destoryed：在这个钩子内是不可以使用 this 的，实例已经在 beforeDestory 被销毁；activated：这个钩子一般配合着 keep-alive 来使用，用 keep-alive 进行组件的缓存，再
2021-04-09 16:50:40
102
原创 javascript--函数柯里化
话不多说，直接抛出疑问，函数柯里化是什么，有什么作用？Currying 的重要意义在于可以把函数完全变成「接受一个参数；返回一个值」的固定形式，这样对于讨论和优化会更加方便。直接看题实现一个add方法，使计算结果能够满足如下预期：add(1)(2)(3) = 6;add(1, 2, 3)(4) = 10;add(1)(2)(3)(4)(5) = 15;...............
2021-03-31 13:48:42
202
原创 vue项目中使用svg图标
参考文档：https://juejin.im/post/59bb864b5188257e7a427c09一、配置1.安装依赖：npm install svg-sprite-loader --save-dev2.配置build文件夹中的webpack.base.conf.js，主要在两个地方添加代码，如下图所示exclude: [resolve('src/icons')],复制代码{ test: /\.svg$/, loader: 'svg-sprite-lo
2021-03-11 11:42:00
202
原创 base64格式数据的加密与解密
window.atob() 与window.btoa()可以实现对base64格式的数据进行解码和编码，其兼容性是主流浏览器，IE10及以上。window.atob(encodedStr)只可以解码用btoa方法编码的字符串。window.btoa()：将ascii字符串或二进制数据转换成一个base64编码过的字符串,但该方法不能直接作用于Unicode字符串<script> var str = 'RUNOOB' var enc = window.btoa(str
2021-03-08 16:14:23
535
原创 Object.defineProperty
1. 定义属性的两种形式//1var obj = {};obj.name = ‘ming’;//相当于Object.defineProperty(obj,‘name’,{value : ‘ming’,writable: true,configurable: true,enumerable: true})//2Object.defineProperty(obj,‘name’,{value: ‘ming’})//相当于Object.defineProperty(obj,‘name’,
2021-01-23 18:21:17
120
原创 用json-server模拟后台数据
1.安装json-servercnpm install json-server -g2.新建一个data文件夹3.在data中创建一个datajson的文件{“data”:[]}4.启动json-serverjson-server data.json控制台会输出一下信息表名json-server启动成功Loading data.jsonDoneResourceshttp://localhost:3000/dataHomehttp://localhost:3000Type s
2020-12-04 12:12:54
394
转载 讲讲 Cookie、Session、Token、JWT之间的区别
什么是认证（Authentication）通俗地讲就是验证当前用户的身份，证明“你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功）互联网中的认证：用户名密码登录邮箱发送登录链接手机号接收验证码只要你能收到邮箱/验证码，就默认你是账号的主人什么是授权（Authorization）你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像
2020-11-01 10:33:37
206
原创 详解React的虚拟DOM与diff算法
什么是虚拟DOM当我们更新了state中的值的时候，React会去调用render()方法来重新渲染整个组件的UI，但是如果我们真的去操作这么大量的DOM，显然性能是堪忧的。所以React实现了一个Virtual DOM(虚拟Dom)，组件的真实DOM结构和Virtual DOM之间有一个映射的关系，React在虚拟DOM上实现了一个diff算法，当render()去重新渲染组件的时候，diff会找到需要变更的DOM，然后再把修改更新到浏览器上面的真实DOM上，所以，React并不是渲染了整个DOM树，V
2020-10-19 21:14:35
496
原创 正向代理和反向代理通俗解析
正向代理也就是平常说的代理，他的工作原理就像一个跳板。简单的说,我是一个用户,我访问不了某网站,但是我能访问一个代理服务器,这个代理服务器呢,他能访问那个我不能访问的网站,于是我先连上代理服务器,告诉他我需要那个无法访问网站的内容,代理服务器去取回来,然后返回给我。从网站的角度,只在代理服务器来取内容的时候有一次记录。结论就是，正向代理，是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转
2020-10-14 19:11:10
2055
2
转载 Object.prototype.toString方法判断数据类型
在 JavaScript 里使用 typeof 来判断数据类型，只能区分基本类型，即 “number”，”string”，”undefined”，”boolean”，”object”，“function”，“symbol” (ES6新增)七种。对于数组、null、对象来说，其关系错综复杂，使用 typeof 都会统一返回 “object” 字符串。要想区别对象、数组、函数单纯使用 typeof 是不行的，JavaScript中,通过Object.prototype.toString方法，判断某个对象值属
2020-10-06 23:29:13
853
原创 Object.setPrototypeOf()方法
1.Object.setPrototypeOf()，为现有对象设置原型，返回一个新对象接收两个参数：第一个是现有对象，第二是原型对象。2、new 命令通过构造函数新建对象实例的过程，其本质是将实例的原型，指向了构造函数的prototype属性，然后在实例上执行构造函数//构造函数function Person(name) { this.name = name;}// var p = new Person("zhenglijing");//等同于将构造函数的原型对象赋给实例对象p的属性
2020-10-02 11:59:00
6812
原创 Vue事件总线（EventBus）使用介绍
初始化假设你有两个Vue页面需要通信： A 和 B ，A页面 在按钮上面绑定了点击事件，发送一则消息，想=通知 B页面。 通知的地方用$emit(同时传参)B页面中用on接收 {{msg}}
2020-09-12 13:11:16
125
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人