- 博客(216)
- 收藏
- 关注
RSS订阅原创 vscode工具使用
(2) 通过json配置文件方式设置，ctrl+shift+p, 选择Open Settings(JSON)(1) 通过可视化界面的方式设置，File -> Preferences -> Settings。快捷键：ctrl + , (<)打开 ctrl + F4 关闭。在这个settings.json文件中，可以写一些设置选项，这些设置选项。安装chinse Lagnuage插件。
2023-06-03 23:07:09
959
原创 排序和搜索-基础
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>排序</title> </head> <body> <script type="text/javascript"> //reverse()逆序、 sort()默认升序： 返回的是...
2020-12-13 22:30:37
197
原创 函数表达式总结
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>函数表达式的应用</title> </head> <body> <script type="text/javascript"> // 一、声明式（变量会提升，可以先使用再赋值） ...
2020-12-13 11:40:53
647
原创 继承总结（创造对象、原型链、组合继承、 寄生组合式继承）
创造对象： 工厂模式： function createPerson(name,age){ var o=new Object(); o.name=name; o.age=age; o.sayName=function(){ console.log(this.name) ...
2020-11-22 23:30:50
217
原创 localStorage设置过期时间
众所周知，前端三大缓存，cookie，sessionStorage，localStorage，cookie空间太小，一旦大了，会消耗流量，只适合存一些登录会话信息，而sessionStorage的过期时间就是关闭浏览器，是个临时会话窗口，但是，最近这个差点把我坑了，就是sessionStorage只能在同一标签下共享，加入你把网址复制粘贴到新打开的标签页里面，你会惊喜的发现，what？居然不共享，这不坑爹呢吗？咳咳。。还有就是localStorage了，这个好处就是存储空间大，长时间保存，同一浏览器，标签页
2020-10-09 23:57:24
1094
1
原创 登录过期--localStorage加sessionStorage实现7天登录过期
localStorage实现7天登录过期实现原理：存localStorage比较初始登录时存在缓存的时间戳和现在进入页面的时间戳，然后用sessionStorage去判断不勾选但是登录了的状态精简版function isPastDue() { // 过期时间7天 var time = 604800000; //1000*60*60*24*7; var storage = window.localStorage; var oldTimestamp = storage.g...
2020-10-09 23:49:41
1818
1
原创 vue中登录记住密码 --使用sessionStorage
sessionStorage和localStorage比较二者区别sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。localStorage和sessionStorage操作localStorage和sessionStora
2020-10-09 23:45:36
750
原创 vue登录记住密码-cookie使用
功能详解：用户登录时，勾选记住密码，系统会将登录信息存入浏览器cookie中，下次登录时系统会自动将信息回写在输入框中（默认设置保存时间为3天，此处需要将密码进行加密处理，以提高安全性）1.定义页面元素，v-model绑定变量2.3.引入vue的加密组件 CryptoJS，执行这条命令，系统会自动安装npm install crypto-js安装成功后，还需在登录页面引入组件4.定义操作cookie的三个方法，后面需要用到，代码我贴出来 /*****...
2020-10-09 23:36:39
1325
原创 js平时有可能用到的的函数工具-上
1.数组去重复duplicate(arr,type){ var newArr = []; var tArr = []; if(arr.length == 0){ return arr; }else{ if(type){ for(var i = 0; i < arr.length;i++){ if(!tArr[arr...
2020-10-09 22:39:48
374
转载 vue项目实现路由按需加载几种种方式
为什么需要懒加载？ 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时vue异步组件 es提案的import() webpack的require,ensure()1 . vue异步组件技术 ==== 异步加载vue-router配置.
2020-09-27 22:48:35
5352
转载 vue-router如何响应路由参数的变化（watch监听|导航守卫）
什么是路由参数的变化当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。监测路由参数变化的方法（watch监听|导航守卫）方法一watch监听：watch: { // watch的第一种写法$route (to, from) {console.log(to)console.log(from)}},wa...
2020-09-26 20:13:22
6614
转载 vue-router传递参数方法（3种）
第一种：get方法传递值<router-link :to="{path:'/test',query: { userId: 123,userName:'xia' }}">跳转</router-link>或<router-link :to="{name:'test',query: { userId: 123,userName:'xia' }}">跳转</router-link>接收值（页面刷新的时候不会消失）this.$route.que
2020-09-26 20:02:44
7660
1
原创 浏览器上输入一个个网址发生了什么？
总结：在浏览器中输入网址--》进行DNS查询，将域名解析出具体的IP--》浏览器发送请求至服务器--》浏览器向重定向后的地址发送请求--》服务器处理http请求--》服务器返回http响应--》浏览器请求样式以及图片文件，用以渲染界面并显示给用户一次完整的网络通讯：https://blog.youkuaiyun.com/hla199106/article/details/46791939第一步：首先你得在浏览器中输入网址，比如输入www.baidu.com。其中www为主机，baidu为域名，com为...
2020-09-16 14:13:04
925
原创 html网页渲染过程
整个渲染的过程其实就是将URL对应的各种资源，通过浏览器渲染引擎的解析，输出可视化的图像。渲染模块：从图中可以看出，一个渲染引擎大致包括HTML解释器、CSS解释器、布局和JavaScript引擎。HTML解释器：解释HTML语言的解释器，本质是将HTML文本解释成DOM树（文档对象模型）。CSS解释器：解释样式表的解释器，其作用是将DOM中的各个元素对象加上样式信息，从而为计算最后结果的布局提供依据。布局：将DOM和css样式信息结合起来，计算它们的大小位置等布局信息，形成..
2020-09-16 11:17:49
810
原创 原型链----看懂_proto_和prototype
文章目录1. 前言 2. _ _ proto _ _ 属性 3. prototype属性 4. constructor属性 5. 总结提示：不要排斥，静下心来，认真读完，你就搞懂了！(可以先看一下最后的总结部分再回过头来完整看完)1. 前言 作为一名前端工程师，必须搞懂JS中的prototype、__proto__与constructor属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点，__prot..
2020-09-15 16:18:39
675
原创 vue3--介绍
Vue3.0来了，一起来看看尤大大说了啥众所周知，前端的技术一直更新的特别快，特别是框架这块。4月21号晚，Vue作者尤雨溪在B站直播分享了 Vue.js 3.0 Beta 最新进展，想必大家都有去观摩吧？那我们今天一起来回顾下尤大大的分享:关于Performance当我们项目功能越来越多、模块规模一步步扩大，这个时候性能考量是非常重要的，那么 Vue.js 3.0 Beta 在性能上给我们带来了哪些惊喜呢？ 重写了虚拟Dom实现（且保证了兼容性，脱离模版的渲染需求旺盛）
2020-09-15 11:26:12
8491
原创 webpack基础--核心概念
核心概念（6个核心概念）Entry：入口，Webpack执行构建的第一步从Entry开始，可抽象成输入Module：模块，在Webpack里一切皆模块，一个模块对应一个文件，Webpack从配置的Entry开始递归的找出所有模块Chunk：代码块，一个Chunk有多个模块组合而成，用于代码合并和分割Loader：模块转换器，用于将模块的原内容按照需求转换成新内容Plugin：扩展插件，在Webpack构建流程中的特定时机注入扩展逻辑，来改变构建结果或做我们想要的事情Output：输
2020-09-13 23:32:47
234
原创 加密与解密--charCodeAt()
// 三、自定义加密和解密方法 //步骤， 1.确定有一个算法实现字符与加密数值之间的转换， 2.定义一个密钥 var toCode =function(str){ var key="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"；//定义密钥 var len=key.length; var a=key.split("");//把秘钥字符串转为数组 var s="",b,b1,b2,b3...
2020-09-13 20:40:12
718
1
原创 加密与解密--charCodeAt()
//二Unicode编码//利用字符串的charCodeAt()方法对字符串进行自定义编码document.write("中中");//中中 其中20013为“中”的Unicode，浏览器 显示需要加&# ;var toUnicode = String.prototype.toUnicode=function(){ var _this=arguments[0]||this;//如果存在参数使用静态方法调用参数值，否则作为字符串对象...
2020-09-13 20:31:58
1246
原创 加密与解密--- escape()、 unescape() ；encodeURI() 、decodeURI() ； encodeURIComponent() 、decodeURIComponent
<script type="text/javascript"> //加密和解密是使用字符串的高级操作 //JavaScript全局有6个编码和解码的方法，直接调用这些方法可以达到加密和解密的目的 escape()、 unescape() ；encodeURI() 、decodeURI() ； encodeURIComponent() 、decodeURIComponent()//1、escape()、 un...
2020-09-13 20:30:55
759
原创 RSA加密
<script src="/static/js/libs/jsencrypt.js"></script><script src="/static/js/libs/jsbn.js"></script> //markjs把文本变成html<script src="/static/js/libs/marked.js" type="...
2020-09-13 19:55:04
148
原创 HTML5动画----canvas基础8（图片操作与图片压缩）
前端JS利用canvas的drawImage()对图片进行压缩：https://blog.youkuaiyun.com/qq_43043859/article/details/90600563[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)：https://blog.youkuaiyun.com/weixin_34177064/article/details/85944037...
2020-08-16 23:20:48
868
原创 HTML5动画----canvas基础7（嵌入图像）
嵌入图像：drawImage()<script type="text/javascript">//1.确定图像的来源2.使用drawImage()将图像绘制到canvas中//一、图片的来源有4种：//1.页面内的图片：已知图片元素的ID,可通过document.images集合、document.getElementsByTagName()方法或getElementById（）获取该图片元素//2.其他canvas元素：document.getElementsByTagName(.
2020-08-16 23:17:29
445
原创 HTML5动画----canvas基础6（3创建阴影、绘制文字）
创建阴影：<script type="text/javascript"> function draw(){ var ctx=document.getElementById("myCanvas").getContext('2d'); //设置阴影 ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ...
2020-08-16 23:11:38
218
原创 HTML5动画----canvas基础6（2定义颜色和样式、绘制图案）
定义颜色和样式：context.fillStyle 和 context.strokeStyle//填充和轮廓的颜色：context.fillStyle="red" context.strokeStyle="dark"; //线型：线条的粗细、端点样式、两线段连接处样式、绘制交点的方式lineWidth,lineCap,lineJoin,miterLimit function draw(){ var ctx = document.g...
2020-08-16 23:08:20
327
原创 HTML5动画----canvas基础6（1绘制渐变）
线性渐变：ctx.createLinearGradient(x1,y1,x2,y2); <script type="text/javascript">//1.线性渐变：lineargradient=ctx.createLinearGradient(x1,y1,x2,y2); x1,y1为线性渐变的起点，x2,y2为线性渐变的终点 // lineargradient.addColorStop(position,color); //定义色标的位置并上色 func...
2020-08-16 22:54:09
356
原创 HTML5动画----canvas基础5（组合与裁切）
组合：context.globalCompositeOperation属性<canvas id="myCanvas" width="300" height="200" style="border: 1px solid;"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var con...
2020-08-16 22:48:45
160
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人