前端
文章平均质量分 51
shanesco
这个作者很懒,什么都没留下…
展开
-
获取浏览器的DPI 移动端
调用window.devicePixelRatio方法 即可获取浏览器的DPI值是多少 再移动端适配中 常用原创 2021-03-08 13:13:55 · 888 阅读 · 0 评论 -
JS中 innerHTML和createElement的区别
在DOM节点操作中,innerHTML和createElement都可以实现创建元素。它们实现的功能类似,但是效率却相差很大1. innerHTML字符串拼接方式function fn() { var d1 = +new Date(); var str = ''; for (var i = 0; i < 1000; i++) { document.body.innerHTML += '<div style="width:100px; height原创 2021-03-03 10:27:08 · 858 阅读 · 0 评论 -
深入浅出前端本地储存
引言2021 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案: Cookie Web Storage (LocalStorage) IndexedDB 这些方案就是如今应用最广、浏览器兼容性最高的三种前端储存方案今天这篇文章就聊一聊这三种方案的历史,优缺点,以及各自在今天的适用场景文章在后面还会提出一个全新的,基于 IndexedDB 的,更适合现代前端应用的前端本地储存方案GoDB.jsCookieCookie 的历史Cookie 早在.转载 2021-02-20 14:43:20 · 309 阅读 · 0 评论 -
关于前端IndexedDB的使用且和Cookie、Web Storage 的区别
// 打开了名为 pku 的数据库,如果不存在,浏览器会自动创建 const request = window.indexedDB.open('pku'); var db; // 全局 IndexedDB 数据库实例 // 在版本改变时触发 首次连接数据库时,版本从 0 变成 1,因此也会触发,且先于 onsuccess request.onupgradeneeded = function(event) { db = event.target.result; con.原创 2021-02-20 14:37:32 · 112 阅读 · 0 评论 -
JS 根据数组中对象的某一key进行大小排序
function createComparisonFunction(name){ return function(object1,object2){ if(object1 > object2){ return 1 }else if(object1 < object2){ return -1 }else{ return 0 } }}let d.原创 2021-02-19 15:53:32 · 1681 阅读 · 1 评论 -
JS中的深拷贝思路
深拷贝1,新建变量 判断传入对象是数组还是OBJECT 根据传入对象的constructor === Array 来判断2,判断传入对象是否是object类型 根据typeof判断 不是的话直接返回传入对象 (因为是基本类型 不会存在指针)3,如果是object类型的 进行for in循环4,循环中 判断属性 是否为对象 是的话 进行嵌套 不是的话 直接 = 就好了 deepcopy(obj){ let newobj = obj.constructor === Array ? ..原创 2020-12-11 14:29:35 · 258 阅读 · 2 评论 -
es6 Symbol 类型学习、操作符学习
Symbol(符号)是 ECMAScript 6 新增的数据类型。符号是原始值,且符号实例是唯一、不可变的。 符号的用途是确保对象属性使用唯一标识符,不会发生属性冲突的危险。 尽管听起来跟私有属性有点类似,但符号并不是为了提供私有属性的行为才增加的(尤其是因为 Object API 提供了方法,可以更方便地发现符号属性)。相反,符号就是用来创建唯一记号,进而用作非字符串形式的对象属性。// 创建全局符号let s = Symbol.for('foo');console.log(Symbol.原创 2020-11-25 14:57:22 · 134 阅读 · 1 评论 -
String 类型学习
字符串的特点ECMAScript 中的字符串是不可变的(immutable),意思是一旦创建,它们的值就不能变了。要修改 某个变量中的字符串值,必须先销毁原始的字符串,然后将包含新值的另一个字符串保存到该变量,如 下所示: let lang = "Java";lang = lang + "Script";这里,变量 lang 一开始包含字符串"Java"。紧接着,lang 被重新定义为包含"Java"和"Script" 的组合,也就是"JavaScript"。整个过程首先会分配一个足够容原创 2020-11-23 14:30:50 · 117 阅读 · 0 评论 -
使用IIS发布前端项目时 如何设置反向代理
再IIS上发布好web项目后,1、点击站点功能视图---> Url重写---> 添加入站规则如上设置后Url重写的结果其实就是下面的web.config文件<?xml version="1.0" encoding="utf-8"?><configuration> <!-- To customize the asp.net core module uncomment and edit the following section. ..原创 2020-11-05 14:40:59 · 508 阅读 · 0 评论 -
关于防抖debounce和节流throttle
最近又用到了防抖和节流这两个方法,平时都是直接调用的方法 也没太注意实现的原理 今天就好好的了解一下!!首先防抖 中有三个类型 分别是 规定时间内点击最后一次结束时才触发、点击第一次就触发,规定时间内不再触发、以及根据传入是否立即执行来进行触发,首先是非立即执行的版本function debounce(fn,time){ let time = time || 500; let timeout; return function(){ let that = this; let arg原创 2020-09-04 10:39:40 · 159 阅读 · 0 评论 -
angular使用jsencrypt插件
1.首先在angular项目里边安装jsencrypt模块npm install --save jsencrypt2.引入使用import * as JsEncryptModule from 'jsencrypt';export class RsaUtil { constructor() { } public getSignStr(timestr: string) { let publicKey = '-----BEGIN PUBLIC KEY--转载 2020-09-03 09:11:14 · 623 阅读 · 0 评论 -
正则表达式中?=和?:和?!的理解
要理解?=和?!,首先需要理解前瞻,后顾,负前瞻,负后顾四个概念:// 前瞻:exp1(?=exp2) 查找exp2前面的exp1// 后顾:(?<=exp2)exp1 查找exp2后面的exp1// 负前瞻:exp1(?!exp2) 查找后面不是exp2的exp1// 负后顾:(?<!exp2)exp1 查找前面不是exp2的exp1举例:"中国人".replace(/(?<=中国)人/, "rr") // 匹配中国人中的人,将其替换为rr,结果为 中国r转载 2020-08-18 17:16:18 · 220 阅读 · 0 评论 -
把nodejs项目部署在服务器上
forever和pm2的区别:forever 管理多个站点,每个站访问量不大,不需要监控。pm2网站访问量比较大,需要完整的监控界面。使用forever的命令:[plain]view plaincopynpminstallforever-g[plain]view plaincopyforeverstartapp.js使用pm2的命令:[plain]view plaincopynpminstallpm2-g[plain...转载 2020-08-04 13:37:36 · 1117 阅读 · 0 评论 -
Page Visibility API
document.visibilityState这个 API 主要在document对象上,新增了一个document.visibilityState属性。该属性返回一个字符串,表示页面当前的可见性状态,共有三个可能的值。hidden:页面彻底不可见。 visible:页面至少一部分可见。 prerender:页面即将或正在渲染,处于不可见状态。其中,hidden状态和visible状态是所有浏览器都必须支持的。prerender状态只在支持"预渲染"的浏览器上才会出现,比如 Chrom转载 2020-08-04 09:35:50 · 199 阅读 · 0 评论 -
js中 关于export default 和 export 区别
export default 和 export 区别:export与export default均可用于导出常量、函数、文件、模块等 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用 在一个文件或模块中,export、import可以有多个,export default仅有一个 通过export方式导出,在导入时要加{ },export default则不需要export default 和 export 的主要区别 在于对原创 2020-07-01 13:47:01 · 2283 阅读 · 0 评论 -
在VUE中使用axios之如何引入
首先要安装axios包npminstall--saveaxiosvue-axios然后在vue中的main.js中 引入axiosimportaxiosfrom'axios'importVueAxiosfrom'vue-axios'Vue.use(VueAxios,axios)引入之后 就可以在组件中使用了。 this.axios.get('https://yesno.wtf/api') .then(function(respon...原创 2020-06-30 14:18:51 · 1938 阅读 · 0 评论 -
关于Lodash的用法
什么是Lodash?Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。Lodash 消除了处理数组的麻烦,从而简化了 JavaScript、 数字、对象、字符串等。它的模块化方法非常适合: 迭代数组,对象和字符串 操作和测试值 创建复合功能 如何在vue中使用Lodash 、首先 npm i lodash -S其次在main.js 中import _ from 'lodash'Vue.prototype._ = _;..原创 2020-06-30 14:09:51 · 473 阅读 · 0 评论 -
angular 局域网访问 angular 预加载功能
angular 局域网访问本地项目 想让其他同局域网的同事访问 可以通过以下代码来实现如果 你平时启动项目 用 ng serve 那只需变更为 ng serve--host xxx.xxx.xxx.xxx (xxx 为本地ip)若果你是用 ng start 则如图所示angular 预加载功能在routing-module.ts文件中 引入import { PreloadAllModules } from '@angular/router';然后在imports中...原创 2020-06-04 11:14:07 · 291 阅读 · 0 评论 -
关于 VUE打包后 在nginx上发布时 刷新报404 的解决方法
在nginx的nginx.config文件中 添加try_files $uri $uri/ /index.html;然后重启即可正常刷新访问。原创 2020-05-14 17:01:38 · 478 阅读 · 0 评论 -
有关git 的一些用法
git checkout -b <可自定义的本地分支的名称> origin/<分支名> ,此时就创建了一个本地的新分支,并且代码是从远程新分支下下来的。切换本地仓库 git checkout <本地分支的名称> 即可。git branch 看所有本地的 加个 -a 看所有的。git branch<自定义的本地分支的名称> 创建一个...原创 2020-05-08 13:37:35 · 118 阅读 · 0 评论 -
angular 中关于同级组件数据传输 以及数据变化时 触发事件
首先 新建一个servicesimport { EventEmitter, Injectable } from '@angular/core';import { Subject } from 'rxjs';export class Book { name: string; price: number;}@Injectable({ providedIn: 'root',...原创 2020-05-07 16:22:43 · 627 阅读 · 0 评论 -
关于ng-alain 9.0测试版本新建项目无法使用路由复用问题
在 ng-alain新版本中 在shared.module.ts中 作者 默认取消掉了import{DelonABCModule}from'@delon/abc'; 的引入这样会导致在按照文档进行路由复用的时候,无法正常使用。 会提示找不到 reuse-tab 这个组件 这时候 只要把DelonABCModule 这个整体 或者ReuseTabModule 这个引入到share...原创 2020-04-27 09:54:36 · 550 阅读 · 3 评论 -
关于Promise的一些知识 转自MDN
Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝,返回的 promise就会解决或拒绝。var promise1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, 'one');});var promise2 = new Pr...转载 2019-01-29 15:44:13 · 514 阅读 · 0 评论 -
关于Promise 中Promise.all()方法的使用
Promise.all(iterable) 方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);如果参数中 promise 有一个失败(rejected),此实例回调失败(reject),失败原因的是第一个失败 promise 的结果。一个页面聊天系统,我们需...原创 2019-02-14 15:55:43 · 8314 阅读 · 1 评论 -
关于angular http请求的操作
首先要引入 http import { HttpModule } from '@angular/http';imports: [ BrowserModule, HttpModule ],然后在构造函数如注入httpconstructor( private http: HttpClient ) { }然后http请求的调用①:带参数的post(一定要使用URLSearch...原创 2018-07-24 15:41:03 · 1944 阅读 · 3 评论 -
关于js中的selection对象使用笔记以及光标定位
IE:document.selection FireFox:window.getSelection() document.selection只有IE支持,window.getSelection()也只有FireFox和 Safari支持,都不是标准语法。 selection 对象 ------------------------------------------------...原创 2018-03-27 11:43:02 · 6593 阅读 · 2 评论 -
js 网页复制时 添加版权
先贴上自己的代码```const addCopyright = () => { const genCopy = () => { return [ '', '', '作者:shanesco是一个大帅比', '链接:https://blog.csdn.net/qq_21436667', '来源:shanes的博客', '著作权归作者所有...原创 2018-03-27 11:30:12 · 930 阅读 · 0 评论 -
关于gulp的入门教程
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、...原创 2018-03-16 14:34:53 · 126 阅读 · 0 评论 -
移动端设置margin-top 超过100%
给子元素margin-top时,若这个子元素前面没有其他内容,这个margin-top值会应用到父元素上解决方案,给父元素设置:beforebody:before{ content: ""; display: table; /*或者display: inline-block;*/}...转载 2019-02-21 16:34:06 · 466 阅读 · 0 评论 -
如何升级typescript版本
今天新建angular项目时 遇到了 项目无法编译的状况后来经过各种查询 提示可能是需要升级typescript的版本 故查询到了如何升级typescriptnpm install -g typescript...原创 2019-01-30 15:42:23 · 14091 阅读 · 0 评论 -
关于es6的一些基础知识
箭头函数(常用)ES6 允许使用箭头(=>)定义函数箭头函数对于使用function关键字创建的函数有以下区别 箭头函数没有arguments(建议使用更好的语法,剩余运算符替代) 箭头函数没有prototype属性,没有constructor,即不能用作与构造函数(不能用new关键字调用) 箭头函数没有自己this,它的this是词法的,引用的是上下文的t...原创 2019-02-13 15:25:02 · 176 阅读 · 0 评论 -
ES6语法知识
前言ECMAScript 6.0(简称ES6),作为下一代JavaScript的语言标准正式发布于2015 年 6 月,至今已经发布3年多了,但是因为蕴含的语法之广,完全消化需要一定的时间,这里我总结了部分ES6,以及ES6以后新语法的知识点,使用场景,希望对各位有所帮助本文讲着重是对ES6语法特性的补充,不会讲解一些API层面的语法,更多的是发掘背后的原理,以及ES6到底解决了什么问题...转载 2019-02-13 15:31:35 · 255 阅读 · 0 评论 -
关于angular form 表单 赋值的问题
之前不是很了解form表单 , 每次 弹窗从新打开时 都是选择 从新group一个 表单,如下所示this.validateForm = this.fb.group({ userName: [null, [Validators.required]], password: [null, [Validators.required]], remember: [...原创 2019-05-17 10:36:44 · 3540 阅读 · 0 评论 -
关于如何使用rxjs
import { interval } from 'rxjs';// Create an Observable that will publish a value on an intervalconst secondsCounter = interval(1000);// Subscribe to begin publishing valuessecondsCounter.subscr...原创 2019-06-03 13:41:55 · 188 阅读 · 0 评论 -
ng-zorro图标问题
看到好多人留言 再补充一下 如果你在图标库看到的标签是<i nz-icon nzType="folder-open" nzTheme="outline"></i> 这个的 那你就要在 style-icons-auto.ts 这个文件中引入FolderOpenOutline 以及在export constICONS_AUTO中也加入FolderOpenOut...原创 2019-06-04 15:14:14 · 1521 阅读 · 4 评论 -
每日一学之 关于 setTimeout和
setTimeout(function(){ console.log('set1')})var p = new Promise(function(resolve,reject){ resolve()})setTimeout(function(){ console.log('set2'); new Promise(function(resolve,reject){ resolv...原创 2019-07-31 15:20:27 · 103 阅读 · 0 评论 -
关于js的
var a = [1];function f(a){ a[100] = 3; a = [1,2,3]}f(a);console.log(a)引用类型函数传参传的是指针的值。直接对其属性操作的话。改变的是指针指向的地址的值。所以值会变。函数里面第二个a。是赋值。相对于把a指向了另一个地址。所以原来的a指向的值不会改变所以 结果是 [1,empt...原创 2019-07-31 15:23:29 · 73 阅读 · 0 评论 -
活动抽奖页面
//抽奖数据,以英文逗号分隔 var alldata =“王云,耿良,宦俊,王静,程骏,孙林,杨?璞,周耘,赵宏,孙浩宇,张巨龙,刘怡升,袁正凯,任亚林,张强,宋紫东,王妤,焦恒桂,冯娉,王笛,徐超,严精赢,陈丹,黄婷,黄佳,童丽华,赵慧芳,李翰林,茹东雄,朱霆钧,宋胄,叶根福,章元杰,陈仕杰,刘冬,耿震,顾连轩,蒋霞君,沉丹丹,闻杰,谢泽慧,许佩兰,林洁,张慧俊,孟岚,顾诗辰,吕佳琳,颜琳,...原创 2018-01-30 09:52:24 · 981 阅读 · 0 评论