- 博客(52)
- 收藏
- 关注
RSS订阅原创 移动端和桌面端的前端预览pdf文件实现办法
前端实现预览pdf文件前期调研可以实现pdf文件预览的方式有< iframe >< embed >< object >PDFObjectvue-pdfPDF.jspdfh5需求：在移动端和桌面端，以及vue3.x中实现预览pdf文件前四种方案，均在移动端有问题，显示不出Vue-pdf：适用于vue2.x版本，vue3.x需要改一些源码(vue2.x项目推荐)Pdf.js：该插件推荐通过其中提供的viewer.html直接展示，功能强大，但是
2022-04-12 15:54:02
4428
2
原创 前端网页水印实现方法
前端网页水印实现方法前言目标技术分析实现方案首先生成一个水印将水印作为背景图检测水印变化，做出调整调用整体代码前言页面水印是一种数字保护，版权保护，知识产权保护的手段，为防止他人盗用，可以快速定位到个人目标提高安全性，不可以通过控制台修改隐藏水印前端水印不影响页面的正常使用前端水印的显示方式是页面整体旋转某个角度技术分析前端网页要整体显示水印，首先生成一个水印然后将水印作为背景图（重复显示这一个水印repeat）填充整个页面然后检测水印变化，如果变化重新生成。不会被隐藏。实
2022-03-08 16:58:08
4409
1
原创 js中对象的属性方法总结
对象属性和方法属性Object.prototype.constructor扩展：Object.defineProperty()扩展：Object.defineProperties扩展：Object.freeze Object.sealObject.prototype.hasOwnProperty()属性Object.prototype.constructor扩展：Object.defineProperty()Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或
2021-04-16 15:49:17
500
原创 JavaScript创建对象以及遍历对象的所有方法
遍历对象创建对象的4种方法1、使用字面量法创建对象2、通过new 一个对象 Object()方法来创建对象3、通过new 一个自定义的构造函数的方法来创建对象4、通过Object.create()方法来创建对象扩展：Object.defineProperty()扩展：Object.defineProperties扩展：Object.freeze Object.seal1、for...in创建对象的4种方法1、使用字面量法创建对象 var obj = {a: 1, b: 2}2、通过new 一个对象
2021-03-26 11:22:58
1419
原创 call，apply 和 bind用法区别以及手写js函数原生实现call，apply 和 bind
手写js函数原生实现call，apply 和 bind测试用例原生实现call纯ES5 实现callES6实现call调用测试用例原生实现apply纯ES5 实现applyES6实现apply原生实现bind纯ES5 实现bindES6实现bind使用call实现bind测试用例 var obj = { name: 'obj' } function test(...rest) { console.log(this.name) console.log(rest)
2020-12-30 16:00:26
446
原创 es5 7种继承方式
继承ES5 继承1、原型链继承2、借用构造函数继承3、组合继承原型式继承寄生式继承寄生式组合继承ES6 class继承class继承ES5 继承 // 定义一个父类 function Parent(name) { // 属性 this.name = name || 'parent' this.friends = ['xiaoli', 'red', 'blue'] // 实例方法 this.say = function() { console.log(this.name + '
2020-11-27 19:31:57
2502
原创 配置webpack的坑
1、css-loader后跟minimize告诉css-loader要开启 CSS 压缩，但是在css-loader的高版本中会报错 解决方案1，去掉minimize，使用其他的代替2、版本号降低，改成^0.28.4
2020-08-24 17:52:11
299
原创 箭头函数与普通函数的区别是什么？如何实现一个new
箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：1、函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。箭头函数没有 this，它会从自己的作用域链的上一层继承 this（因此无法使用 apply / call / bind 进行绑定 this 值）2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。4、不
2020-08-04 11:13:34
646
原创 vue create 报错 Unexpected end of JSON input while parsing near ...e89aff91d
vue 创建新项目报错问题npm ERR! Unexpected end of JSON input while parsing near '...e89aff91d5","size":10'npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\Qiyu Liu\AppData\Roaming\npm-cache\_logs\2020-06-05T08_21_49_356Z-debug.logER...
2020-06-05 16:38:37
754
原创 vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本
全局安装vue之后，查看vue版本出现的问题（在cmd可以正常查看，但是使用的powershell出现问题）vue : 无法加载文件 C:\Users\Qiyu Liu\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。所在位置 行:1 字符: 1+ vue -V+ ~~~ + Ca...
2020-06-05 14:37:23
2343
原创 页面的性能优化
一、资源压缩与合并1.html压缩2.css代码压缩3.js的压缩和混乱4.文件合并二、非核心代码异步加载异步加载的方式1、异步加载的方式异步加载的三种方式——async和defer、动态脚本创建2、异步加载的区别1)defer是在HTML解析完之后才会执行，如果是多个，按照加载的顺序依次执行2)async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关三、利用浏览器缓存四、使用CDN五、预解析DNS...
2020-05-29 11:47:00
274
原创 JavaScript 设计模式
JavaScript 设计模式https://juejin.im/post/5afe6430518825428630bc4d https://juejin.im/entry/5882e8c52f301e00698d4c4f#%E8%A3%85%E9%A5%B0%E8%80%85%E6%A8%A1%E5%BC%8F https://juejin.im/post/5cb534386fb9a0685727e1eb
2020-05-15 15:53:05
135
原创 防抖和节流 实现代码
https://juejin.im/post/5c87b54ce51d455f7943dddb#chapter-three-onehttps://www.cnblogs.com/momo798/p/9177767.htmlhttps://www.jianshu.com/p/c8b86b09daf0
2020-04-13 10:28:29
1358
原创 JS中的apply、call和bind的用法和区别
apply和call两种调用方式中的this指向，表现出来的特征就是：对象可以‘借用’其他对象的方法obj对象有一个方法fn,obj1想借用obj的方法fn,可以用obj.fn.apply(obj1)1、apply在使用apply方式使用一个函数时第1个参数为thisObject，调用时采用传入的thisObject代替函数体中this的指向 第2个参数传入一个数组，函数会用数组...
2020-04-07 14:37:35
284
原创 什么叫纯函数？
纯函数：就是一个函数的返回结果只依赖于它的参数，并且在执行过程中没有副作用，我们就把这个函数叫做纯函数。重点：函数的返回结果只依赖于它的参数// 不是纯函数，依赖了外部变量avar a = 1function add(b) { return a+b }add(1) // 2// 是纯函数function add(a, b) { return a+b }add(1, ...
2020-01-14 14:51:59
3802
原创 数组的操作(复制数组，合并数组，删除数组，数组去重，数组遍历及区别)
1、复制数组1）浅拷贝var arr = [1,2,3]// ES5var arr1 = arr.concat()var arr2 = [].concat(arr)var arr3 = arr.slice()// ES6var arr5 = [...arr]2）深拷贝JSON.parse(JSON.stringify(arr))2、合并数组var a...
2020-01-13 15:25:28
587
原创 js 数组对象的方法 常用API
改变原数组的ES5push() //向数组的末尾添加一个或多个元素，返回新数组长度语法：arr.push(element1[, ...[, elementN]])pop() // 用于删除并返回数组的最后一个元素 如果数组为空，返回undefined语法：arr.pop()unshift() //返回新数组长度shift() // 删除并返回数组的第一个元素 如果数...
2020-01-10 19:12:14
496
原创 vs code 使用的插件集合
1、Chinese(适用于 VS Code 的中文（简体）语言包)2、ESLint(检查代码规范的 需要配置东西)3、Git History4、SVN5、vue-helper6、filesize（显示效果图片 ）...
2020-01-06 17:01:10
273
原创 Promise
https://juejin.im/post/597724c26fb9a06bb75260e8从零开始写一个符合Promises/A+规范的promise:https://juejin.im/post/5b16800fe51d4506ae719bae#heading-0
2020-01-06 16:39:22
188
原创 使用qqface插件
1、http://kyo4311.github.io/jquery.qqface2、https://www.npmjs.com/search?q=qqface
2020-01-02 10:30:34
617
原创 模块化总结（CommonJS/AMD/CMD/ES6模块化）
参考文章：https://juejin.im/post/5aaa37c8f265da23945f365c#heading-0http://javascript.ruanyifeng.com/nodejs/module.htmlCommonJS规范http://es6.ruanyifeng.com/#docs/module-loader目前流行的js模块化规范有CommonJS、AMD...
2019-12-27 11:09:18
310
1
原创 js 构造函数/原型/原型链
构造函数当任意一个普通函数用于创建一类对象时，它就被称作构造函数https://www.cnblogs.com/wangyingblog/p/5583825.htmlhttps://juejin.im/post/5c6a9c10f265da2db87b98f3#heading-11原型__proto__原型链prototypehttps://juejin.im/po...
2019-12-12 19:18:10
202
原创 如何让（a == 1 && a==2 && a ==3）为true
1、利用Symbol.toPrimitive和闭包var a = { [Symbol.toPrimitive]: (function(){ var i = 1; return function() { return i++ } })()}2、利用valueOf和闭包var a = { ...
2019-12-05 14:29:28
229
原创 浏览器中输入URL到界面显示发生了什么
一次完整的HTTP事务是怎样的一个过程？浏览器中输入URL到界面显示发生了什么？1、输入地址 2、域名解析 3、发起TCP三次握手 4、建立TCP连接后发起HTTP请求 5、服务器响应http请求，浏览器得到html代码 6、浏览器解析html代码，并请求html代码中的资源（css,js,图片...） 7、浏览器对页面进行渲染呈现给用户1、输入地址在浏览器中输入网址的时候...
2019-11-29 17:44:34
421
原创 0.1 + 0.2 !== 0.3为什么？
1、JavaScript中数字的存储机制:采用的是IEEE754 双精度64位浮点数双精度(64位)浮点数的结构：(s) * (2 ^ e) * ( m )s: sign 符号位： 1bite: exponent 指数位： 11bitm:mantissa 尾数位： 52bit排列规则为：符号位S(1位，0为正数，1为负数)+阶码E(8位)+尾数M(52位)2...
2019-11-28 11:19:26
259
原创 Git（分布式版本控制系统）一些常用命令以及用法
Git常用命令create git clone // 克隆( clone an existing repository) git init // 初始化 (create a new local repository)local changes git status // 查看文件修改状态(changed files in your working directory) gi...
2019-11-27 15:36:37
213
原创 css 常用技巧 （单行溢出 和 多行溢出 字母太长不换行问题 移动端适配安全距离 两端对齐）
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;需要设置一个宽度，不能是行内元素 display: -webkit-box; -webkit-line-clamp: 3; // 多行 -webkit-box-orient: vertical;...
2019-11-22 18:27:12
2530
原创 面试题之常考：css 水平垂直居中 常见方法
已知宽高(指的是content的宽高)：html：<div class="box"> <div class="content"> 水平垂直居中 </div></div>css:1、利用position和margin(往上和左移动自身的一半)(外容器需要给定高度) .box{ ...
2019-07-26 18:42:22
332
原创 ES6新特性
var, let, const总结函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部 var存在提升，我们能在声明之前使用。let、const因为暂时性死区的原因，不能在声明前使用 var在全局作用域下声明变量会导致变量挂载在window上，其他两者不会 let和const作用基本一致，但是后者声明的变量不能再次赋值...
2019-06-25 22:32:55
122
原创 JS判断数据类型的方法
js的数据类型分为基本类型和引用类型两大类基本类型: string,number,boolean,undefined,null,symbol引用类型：object(function,array,regexp,date....)1、typeof对于基本类型，除Null返回object类型，其他均返回正确的数据类型对于引用类型，除function返回function类型，其他均返回...
2019-06-19 11:15:06
170
原创 使用CSS实现三列布局（左右固定宽度，中间自适应）六种方法
1、利用左右浮动，脱离文档流，中间元素正常，设置左右margin。元素顺序:left 、 right 、middle(middle要放在最后)如果窗口太小，右边元素会被挤到下一行<head><style> .box{ height: 200px; padding: 0 200px 0 100px; } .l...
2019-06-03 17:03:32
1792
原创 前端 js 深浅拷贝
1、深浅拷贝 我们了解到对象(引用)类型在赋值的过程中其实是复制了地址，从而会导致改变了一方其他也都被改变的情况。通常在开发中我们不希望出现这样的问题。let a = { age: 1}let b = aa.age = 2console.log(b.age) // 2 希望是1let a = { name: 'xxx', obj: { a...
2019-03-01 17:40:16
564
原创 判断当前页面的浏览器
//window.navigator.userAgent 属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型var ua = window.navigator.userAgent(); // var ua = navigator.userAgent.toLowerCase(); 可以用全是小写的形式判断是否是微信浏览器判断ua中是否含有M...
2019-02-15 11:02:04
507
原创 微信接入微信js sdk
接入微信js sdk说明文档和domehttps://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3https://www.weixinsxy.com/jssdk/#menu-location一、微信jssdk报错 config:invalid url dom...
2019-02-14 17:21:00
775
1
原创 react native 屏幕自适应 区分iOS和iPhoneX
import { Dimensions, PixelRatio, Platform } from 'react-native';export const deviceWidth = Dimensions.get('window').width;export const deviceHeight = Dimensions.get('window').height;const fon...
2018-10-31 10:37:40
1624
原创 react-native 离线打包
react-native bundle --entry-file index.ios.js --bundle-output./index.ios.jsbundle --platform ios --assets-dest ./ios --dev false重点关注几个选项：--entry-file：这个是你要打包的跟文件，通常是index.ios.js,注意路径不要错了，--bundle-...
2018-10-30 17:49:50
382
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人