自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Liu

学前端

  • 博客(34)
  • 收藏
  • 关注

原创 Git权威指南阅读笔记(一)

Git初始化

2023-01-31 16:28:08 11

原创 CSS画直角梯形

我们最终的实现目标是一个带圆角的直角梯形,无法直接画出,但我们可以画出一个矩形后面拼接一个平行四边形。平行四边形可以利用CSS transform属性的skewX函数画出,如下图。最后利用transform属性的translateX函数将平行四边形移到合适位置就可以实现我们的需求。想做这样一个pk进度条的效果。

2022-09-28 14:51:30 354

原创 webpack打包追加时间戳

iOS始终从缓存中读取同名资源,导致无法加载浏览器中最新版本,所以只要确保每次新打包生成的文件名不同就可以解决。在开发H5时发现由于iOS无法手动清除软件缓存(除非卸载重装),导致新版本上传后页面始终无法更新。在vue.config.js文件中加入以下配置。

2022-09-08 17:47:55 1180

原创 vant2表单组件Field在iOS上校验出错

在安卓手机上可以正常校验,但iOS系统无论输入几个字符都会提示错误,原因可能是iOS输入法会输入特殊字符。需要校验用户的输入,长度超出进行错误提示,所以使用了正则表达式进行校验,代码如下。

2022-09-08 17:36:48 365

原创 《代码整洁之道》——阅读笔记(1)

类名和对象名应该是名词或名词短语;方法名应是动词或动词短语,属性访问器、修改器和断言应该加上get、set、is前缀。如:fetch、retrieve、get;选择指明了计量对象和计量单位的名称,选择体现本意的名称。以数字系列命名(a1, a2, ……

2022-09-05 17:22:04 41

原创 canvas-drag.js?1674:101 Uncaught DOMException: Failed to execute ‘drawImage‘ on ‘CanvasRenderingCont

确保执行drawImage时图片已加载完成。

2022-08-17 17:46:00 154

原创 H5 touch事件处理

touch事件处理

2022-08-16 16:58:25 236

原创 H5导航栏被IOS系统状态栏覆盖问题解决

而env()和constant()函数有个必要的使用前提,H5网页设置viewport-fit=cover的时候才生效,小程序里的viewport-fit默认是cover。index.html文件中添加以下代码。导航栏容器设置CSS属性。

2022-08-16 15:07:14 707

原创 多行文字整体垂直居中

单行文字垂直居中设置文字line-height等于包裹文字的容器的height多行文字垂直居中div { //容器属性 display: table; text-align: center; margin: 20px auto;}span { //文字属性 display: table-cell; vertical-align: middle; width: 400px; height: 300px;}...

2022-03-31 10:34:41 45

原创 框架源码中的小技巧

1.在函数中传入window或this目的:减少作用域链的查询Vue传入this是为了兼容node,node中没有window而是global2.函数中传入undefinedundefined是一个变量,可以进行赋值;null是关键字不能赋值,也不需要查询作用域链3.defineProperty使属性不可更改将属性在原型链直接挂载vue.prototype.$router,属性可以随意修改;使用Object.defineProperty(vue.prototype, "$router", {

2021-11-05 08:56:46 34

原创 ES5类式继承

1. 默认模式function Parent () { this.name = 'p';}Parent.prototype.say = function () { console.log('hello');}function Child () {}Chid.prototype = new Parent();var p = new Parent();var c = new Child();p.hasOwnProperty('name');//truec.hasOwnProperty

2021-03-31 15:48:07 24

原创 js函数柯里化

柯里化处理函数function currying(fn) { var store_arg = Array.prototype.slice.call(arguments, 1);//取出参数 return function() { var new_arg = Array.prototype.slice.call(arguments, 0), args = store_arg.concat(new_arg); return fn.apply(null,args); } }柯里化的使用

2021-03-31 09:10:02 28

原创 js代码编写规范

一些js编写规范

2021-03-30 15:45:24 120

原创 ES5对象

ES5中的继承1. js有两种类型的对象原生的(Native)包括:内置对象(日期Date,数组Array等)、用户自定义对象(var o = {})主机的(Host)包括:windows和DOM对象2. ECMAScript5 特性增加了一些新的内置对象、方法和属性,增加了strict模式...

2021-03-30 14:18:59 80

原创 节点的nodeType属性

节点的nodeType属性:数值常量和字符常量节点类型数值常量字符常量Element(元素节点)1ELEMENT_NODEAttr(属性节点)2ATTRBUTE_NODEText(文本节点)3TEXT_NODEComment(注释节点)8COMMNET_NODEDocument(文档节点)9DOCUMENT_NODEDocumentType(文档类型节点)10DOCUMENT_TYPE_NODEDocumentFragmen

2021-03-28 17:38:02 695

转载 js检测不同设备的方法

参考:https://blog.51cto.com/antlove/1923385/* 是否是android */ function isAndroid(){ var userAgent = window.navigator.userAgent; if(/android/i.test(userAgent)) { return true; } return false;};/* 是否是IOS */function isIOS(){ var userAgent = window.nav

2021-03-25 23:08:54 153

原创 BFC

参考文章:https://segmentfault.com/a/1190000016721094什么是BFCBlock Formatting Context,中文直译为块级格式上下文。BFC就是一种布局方式,在这种布局方式下,盒子们自所在的containing block顶部一个接一个垂直排列,水平方向上撑满整个宽度(除非内部盒子自己建立了新的BFC)。两个相邻的BFC之间的距离由margin决定。在同一个BFC内部,两个垂直方向相邻的块级元素的margin会发生“塌陷”。BFC特性内部的Box

2021-03-25 23:05:32 19

原创 html文件中script标签defer属性和async属性的区别

script标签的使用分三种情况1.没有defer或async属性浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载。2.async属性如:<script async src="index.js"></script>表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行。3.defer属性如:<script defer src="index.js"

2021-03-25 21:02:51 126 1

原创 js如何区分数组和对象

1.调用constructor{}.constructor //返回object[].constructor //返回Array2.调用instance of[] instance of Array //true{} instance of Array //false3.Object.prototype.toString.call()Object.prototype.toString.call([]) //["object Array"]Object.protot

2021-03-25 20:54:47 27

转载 JavaScript内置对象

标准内置对象分类值属性这些全局属性返回一个简单值,这些值没有自己的属性和方法。InfinityNaNundefinedglobalThis函数属性全局函数可以直接调用,不需要在调用时指定所属对象,执行结束后会将结果直接返回给调用者。eval()uneval()isFinite()isNaN()parseFloat()parseInt()decodeURI()decodeURIComponent()encodeURI()encodeURIComponent()已废弃es

2021-03-25 20:50:06 23

转载 js原型链的理解

1.分清函数和对象function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // KevinPerson 就是一个构造函数,我们使用 new 创建了一个实例对象 person2.prototype每个 函数 都有一个 prototype 属性每一个JavaScript 对象 (null除外)在创建的时候就会关联另一个对象,这个对象就是我们所说的 原型,每一

2021-03-23 16:13:55 55

原创 js 遍历方法总结

1、for(可计算长度)例: for(let i=0;i<len;i++){ console.log(arr[i]); }2、forEach(不支持return)例:let arr = [1,2,3,4,5];arr.forEach( (v,i) => { console.log(v,i);},this);第二个参数的用法:3、for in(循环键名,一般用来遍历对象)数组的私有属性也会被遍历,所以一般我们不会用这个方法遍历数组let arr = [1

2021-03-23 15:05:12 170

原创 Angularjs添加video设置动态src

遇到问题:在angularJs中为了避免安全漏洞,一些ng-src或者ng-include都会进行安全校验,因此常常会遇到ng-src无法使用。解决方法:使用$sce服务把地址变成安全的、授权的链接常用方法:$sce.trustAs(type,name);$sce.trustAsHtml(value);$sce.trustAsUrl(value);$sce.trustAsResourceUrl(value);$sce.trustAsJs(value);具体实现:.html<

2021-03-19 17:19:56 497

原创 js闭包的应用

防抖function debounce(fn: Function, delay: number) { let timer: number; //借助闭包 return function () { if (timer) { clearTimeout(timer); } timer = setTimeout(fn, delay); }; } function showTop() {

2021-03-09 13:30:24 31

原创 js变量的重复声明

var的重复声明1.使用var语句多次声明一个变量是合法的,不会造成任何错误.2.如果重复使用的一个声明有一个初始值,那么它担当的不过是一个赋值语句的角色.3.如果重复使用的一个声明没有一个初始值,那么它不会对原来存在的变量有任何的影响.例:var a = 100;function fn() {alert(a); //undefined 变量提升var a = 200;alert(a); //200}fn();alert(a); //100var a; //情况3alert(a)

2021-03-09 13:20:49 925

原创 防抖和节流

防抖***个人理解:***防止抖动。规定时间内若事件重复触发则重新计时。代码实现:function debounce (f, wait) { let timer return (...args) => { clearTimeout(timer) timer = setTimeout(() => { f(...args) }, wait) }}节流个人理解: 控制流量。规定时间内事件只能响应一次,若重复触发不反应计时也不会重置。代码实

2021-03-09 11:02:53 34

原创 js中this指向

this指向1. 普通函数this指向window function fn() { console.log(this) }; fn();//window2. 构造函数this指向调用它的实例 function Star() {}; Star.prototype.a = function() { console.log(this)}; var obj = new Star(); obj.a();//obj3. 对象的方法调用var o = { fn: function()

2021-01-11 13:45:23 50

原创 vue+ts+vue-property-decorator报错:Uncaught RangeError: Maximum call stack size exceeded

Vue项目使用ts及插件vue-property-decorator时报错:Uncaught RangeError: Maximum call stack size exceeded出错原因:没有定义组件name解决方法:import { Component, Vue } from "vue-property-decorator";@Component({ name:'MyTable'})export default class Table extends Vue {}...

2021-01-11 09:31:45 277

原创 Vue项目ts踩坑之iview

vue项目中使用ts引入iview不能正常显示样式按官网提示导入iview(版本3.1.0)index.tsimport iView from 'iview';import 'iview/dist/styles/iview.css';Vue.use(iView);编译可以通过,如图:js项目中这样的配置显示正常,如图:ts项目中的样式没有起效,如图:...

2021-01-04 15:33:22 526

原创 Vue报错:Module parse failed: Unexpected character ‘‘ (1:0)

vue项目引入iview,使用webpack打包时报错:`Module parse failed: Unexpected character '' (1:0)` 解决方法在webpack.config.js的module.rules中加入:{ test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader'}...

2021-01-04 09:02:06 1935

原创 js报错:“RangeError: invalid array length“

js报错:"RangeError: invalid array length"的处理方法翻译: 无效的数组长度可能出现的场景:当创建一个长度为负数或者长度大于等于232 的 Array 或者 ArrayBuffer 时。当设置 Array.length 属性为负数或者长度大于等于232 时。当你使用构造函数来创建一个数组的时候,你可能想使用字面值的形式,第一个参数会被解释为数组的长度。如下: [this.enthusiasm + 1].join("!"); //正确 Array

2020-12-30 13:47:34 12721

原创 iview Table组件和Page组件实现分页

iview官网Page组件的属性如下<template> <div class="list"> <div> <Table border :columns="columns12" :data="tabledata"> <template slot-scope="{ row }" slot="name"> <strong>{{ row.name }}</strong&g

2020-12-29 15:51:37 437

转载 CSRF攻击

CSRF(跨站点请求伪造)原理及过程用户使用浏览器输入个人信息请求登录受信任的网站A;在用户信息通过验证后,网站A产生Cookie信息并返回给浏览器,此时用户登录网站A成功,可以正常发送请求到网站A;用户未退出网站A之前,在同一浏览器中访问网站B;网站B接收到用户请求后,返回一些攻击性代码,对网站A进行某些操作;网站 A 并不知道该请求其实是由 B 发起的,所以会根据用户的 Cookie 信息以用户的权限处理该请求,导致来自网站B 的恶意代码被执行,此过程用户并不知情。检测抓取一个正常请

2020-12-29 15:11:58 300

原创 css

css相关问题防止文本过长引起换行overflow:hidden文本中的换行被显示为tab或空格white-space: pre-wrap

2020-12-29 13:10:37 20

空空如也

空空如也

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

TA关注的人

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