2020年04月_渣渣前端

原创 springAOP学习笔记

springAOP是面向切面编程，它一共有6个概念①JoinPoint（连接点）所谓连接点是指那些被拦截到的点，在spring中这些点指的是方法，因为spring只支持方法类型的连接点②PointOut（切入点）所谓切入点是指我们要对哪些JoinPoint进行拦截的定义③Advice通知/增强，拦截到JoinPoint之后所做的事情就是通知，通知的类型有前置通知，后置通知，异常通知，环...

2020-04-24 21:35:00 243

原创 koa实现图片防盗链

所谓图片防盗链，就是为了防止其他域名下的网页使用原网页的图片，它们是通过判断referer和host两个请求体字段来判断的，例如在这个pic1.me网站下显示的是原本的图片，到了pic2.me就是另一张图片，而且他们图片路径是一样的。下面就通过代码来实现一下//app.jsconst koa=require('koa')const Router=require('koa-router')...

2020-04-22 20:36:45 394

原创 cglib动态代理

cglib动态代理和jdk代理不一样，它不需要代理类实现接口，所有的非final方法都可以被代理，它有一个方法拦截器MethodInterceptor，就是对方法进行增强的，下面来看看//需要被代理的类public class Customer { public void buy(int x){ System.out.println("买了一本书,"+x+"元"...

2020-04-21 00:25:24 217

原创 vue父子组件传值

vue父子组件传值其实有挺多种方法的，下面就来介绍一下1.props传值//父组件<child text="xx">//子组件props:{text:{type:String,required:true,//是否必传default:"yy"//默认值}}//或者使用数组，不加类型校验props:['text']2.$emit传值//父组件<...

2020-04-20 21:41:26 239

这是一道常见的面试题，下面就来说一下：1.首先是dns的域名解析，浏览器会先查找自身的缓存记录，看有没有和url对应的ip地址，如果有返回，如果没有或者已经过期，则会去hosts文件中找，widows是在在C:\Windows\System32\drivers\etc下面，操作系统缓存可以通过ipconfig/displaydns命令查看。如果操作系统或者hosts文件都没有记录或者记录已经过...

2020-04-20 14:37:48 377

原创 jdk动态代理

动态代理实际上就是建立一个代理类，对需要被代理的类的方法进行增强，动态代理分为jdk代理和cglib代理，jdk代理的类必须实现一个接口，下面就来看看//接口public interface Service { void buy(int a);}//类public class ServiceImpl implements Service { public voi...

2020-04-19 21:00:02 252

原创 localstorage引发的思考

首先来说一下localStorage是本地存储，容量大小为5m，缓存期限是无限久，即使浏览器关闭它也还存在，除非手动删除。下面用它来模拟cookie的功能，让它也具有过期时间 function save(id,data){ var date=new Date() var time=24*1000*60*60; localStorage.set...

2020-04-18 22:43:42 368

原创 Spring注解@Component，@Value，@Scope，@PostConstruct和@PerDestory

@Component相当于在xml文件中创建了bean，@Value可以为bean元素属性注入基本数据类型，@Scope是用于指定作用范围，@PostConstruct是bean初始化时的方法，@PerDestory是bean销毁时的方法，再通过代码看下//新建一个Stu接口public interface Stu { public void get();}//新建一个Stu...

2020-04-18 09:32:38 1029

原创 Spring三种注入方式

spring有三种依赖注入的方式，第一种是构造方法注入<bean id="bean" class="Test1.Per"> <constructor-arg name="username" value="xx"></constructor-arg> <constructor-arg name="arr"> &lt...

2020-04-16 15:10:29 244

原创 spring创建bean的三种方式

spring创建bean有三种方式：默认构造函数，静态方法和实例方法，下面就来看下首先先创建一个Stu接口以及它的实现类StuImplpackage Test1;public interface Stu { public void get();}public class StuImpl implements Stu { public void get(){ ...

2020-04-16 10:43:25 290

原创 css字体特效

css属性中有一个background-clip，用于设置绘图的背景，它的值可以是content-box,padding-box,border-box,text,其中text就是把颜色绘制到文字上，还有一个属性是text-fill-color，它也是设置对象中文字的填充颜色，和color作用一样，它的优先级比color大，还有就是他的兼容性不太好，只适用于谷歌。靠这两个属性我们就可以设置好看的字体...

2020-04-14 19:54:03 830

原创 Spring控制反转

spring控制反转（ioc）是为了降低对象之间的耦合性，在没使用ioc之前都是在a对象内部new一个b对象去使用，这样对象之间的耦合性太高，控制反转就是为了降低对象之间的耦合性，所有对象的控制权都交给了第三方容器IOC，由IOC来帮忙创建及注入依赖对象首先新建一个Student接口及其实现类//接口public interface Student { void get();...

2020-04-14 17:32:44 278

原创 maven的setting.xml文件

<?xml version="1.0" encoding="UTF-8"?><!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work...

2020-04-14 16:57:42 256

原创移动端画1px线

移动端的像素比（devicePixelRatio）是指手机的物理像素和逻辑像素的比值，物理像素又称设备像素，一个物理像素是显示器（手机屏幕）上最小的物理显示单元。逻辑像素，也可以认为是计算机坐标系中的一个点，这个点代表一个可以由程序使用的虚拟像素（css像素），然后相关系统转换为物理像素。如果我们设置了边框为1px，那么在像素比为2的手机上边框就会显示为2px。下面来说一下如何处理首先可以使用...

2020-04-12 16:58:07 510

原创删除链表的倒数第n个节点

给定一个链表: 1->2->3->4->5, 和 n = 2.当删除了倒数第二个节点后，链表变为 1->2->3->5.先遍历一次链表，求出链表的长度，然后再用链表长度减去n，如果为0，则是删除第一个节点，否则找到链表要删除节点的前一个节点，让它的next等于要删除节点的nextvar removeNthFromEnd = function(...

2020-04-11 15:42:54 372

原创半小时上手前端测试框架jest.js

首先初始化npm，然后安装jest.js，可以用npm install jest-cli,也可以是yarnaddjest-cli，我使用的是npm，然后编写测试函数。例如//sum.jsfunction sum(a,b){ return a+b;}module.exports=sum//sum.test.jsconst sum=require('./sum');...

2020-04-11 14:34:24 618

原创 react之dangerouslySetInnerHTML

在react中为了不让别人注入恶意的代码，它都不会自动识别带有标签的字符串，例如这样export default class Test extends Component{ constructor(props){ super(props) this.state={html:'<div>213</div>'} } ...

2020-04-11 00:17:53 750

原创 base64编码原理

我们知道在ascii码表中，对应的符号都有相应的ascii码值来表示，例如A是65，a是97，base64也有对应的编码表，它的符号是A-Z,a-z,0-9,+和/组成。加起来一共是64个。一个字节是8bit，base64编码时会先选择3个字节，把他们转成二进制码，就是24bit，然后它会把这三个字节分成四组，每组6bit，然后在每组前面加上两个0，再转成十进制数，然后在base64中寻找对应的符...

2020-04-10 23:41:43 288

原创 vue的keep-alive

vue的<keep-alive>主要是对组件进行缓存，在跳转到其他页面再跳回来时组件还是一样的状态，避免组件重新渲染，它是一个抽象组件，不会渲染到页面。下面来看下应用//index.jsexport default new Router({ routes: [ { path: '/', name: 'HelloWorld', co...

2020-04-09 00:48:52 504

原创求多个数组的交集

首先是把每个数组去重，然后将他们合并，合并后数组元素的个数等于原来的数组个数，这个元素就是数组的交集 function fn(...rest){ for(var i=0;i<[...rest].length;i++){ rest[i]=Array.from(new Set(rest[i])) ...

2020-04-08 10:37:31 1979

原创 nginx缓存

web缓存服务器位于客户端和源服务器之间，当客户端访问一个url时，web缓存服务器就会向源服务器发送请求，并保存这次的响应信息，当下一次客户端再访问这个url时就会直接从缓存服务器中获取，不用再项源服务器发送请求nginx有永久缓存和暂时缓存两种、nginx提供的nginx_store会将响应内容缓存到本地，除非手动删除，不然永久有效server{ listen 80; ...

2020-04-07 10:46:10 664

原创 nginx负载均衡

负载均衡就是将负载分摊到多个操作单元上执行，从而提高服务器的可用性和响应速度，带给用户更好的体验。nginx负载均衡有四种方式：轮询，加权轮询，ip_hash，第三方模块。轮询是nginx负载均衡默认设置的，每个请求按照时间顺序逐一分配到不同的后端服务器，如果有服务器宕机，则会剔除 server { listen 81; server_name localhost; locati...

2020-04-07 09:47:39 294

原创 webpack性能优化（6）

有一种技术叫离线缓存，就是断开网络还能显示页面内容，它有两种方法，一种是appcache，不过它性能不好，已经被w3c废弃了，还有一种就是serviceWorker，它属于PWA（渐进式web应用）的一种功能。首先要下载sw-precache-webpack-plugin，即npm isw-precache-webpack-plugin或者yarnaddsw-precache-webpa...

2020-04-06 23:33:01 541

原创 js装饰器

浏览器目前还不支持直接使用装饰器语法，需要下载几个包：@babel/core @babel/preset-env @babel/cli @babel/plugin-proposal-decorators,然后再新建一个.babelrc文件{ "presets": ["@babel/preset-env"], "plugins": [["@babel/plugin-propos...

2020-04-06 19:00:23 266

原创 webpack性能优化（5）

上篇说到了happypack可以让webpack分成多个子进程去打包代码，然后再将结果返回给主进程，其实压缩代码的时候也可以使用多进程，这样也可以提高构建速度，而webpack-parallel-uglify-plugin就做到了这一点const path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugi...

2020-04-06 14:49:02 226

原创 webpack性能优化（4）

我们知道js是单线程的，在打包大型项目的时候，，只有一个一个的处理任务，速度比较慢，HappyPack可以将打包任务分解给多个子线程去执行，然后再将执行结果返回给主进程，提高webpack构建速度const path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugin');const HappyPack...

2020-04-05 00:12:44 226

原创 nginx跨域

首先在nginx根目录的html目录下新建一个index.html文件<!DOCTYPE html><html><head> <meta charset="UTF-8"><title>Welcome to nginx!</title><style></style></he...

2020-04-03 22:17:33 206

原创手写JSON.stringify和JSON.parse

window.JSON={ parse:function(str){ return eval('('+str+')'); }, stringify:function(str){ if(typeof str=='number'){ return String(str) } ...

2020-04-03 16:19:12 703

原创 webpack性能优化（3）

webpack插件中有一个DllPlugin，它可以打包出一个个单独的动态链接库文件，一个动态链接库可以包含多个模块。那么它为什么可以提高构建速度呢？因为包含大量复用的动态链接库只需编译一次，在之后的构建中被动态链接库包含的模块不会被重新编译，而是直接使用动态链接库的代码。首先新建一个webpack_dll.config.js文件const path=require('path');con...

2020-04-03 10:53:04 207

原创 nginx学习笔记（2）

今天学了nginx配置虚拟主机，有3种方式，在windows下修改nginx.conf文件。首先是基于端口号配置 server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log ma...

2020-04-02 16:42:02 515

原创 webpack性能优化（2）

webpack有一个配置项是optimization，它会分析入口文件中有没有共用的代码，有的话会单独打包成一个chunkconst path=require('path');const HtmlWebpackPlugin=require('html-webpack-plugin');module.exports={ entry:'./src/index.js', ...

2020-04-01 21:54:38 234

原创 preload和prefetch，dns-prefetch

首先，这三个都是link标签的rel属性值。preload是让浏览器提前加载指定的资源，加载后先存放在内存中，不会立即执行，需要的时候再执行。这样可以让加载和执行分离开来，提前加载指定的资源，不会阻塞渲染和document的onload事件，对跨域的文件使用preload要加上crossorigin属性，preload还有as属性，可以设置资源加载的优先级，还可以设置资源加载完的回调函数onloa...

2020-04-01 21:12:23 749

原创 nginx学习笔记（1）

nginx启动命令：在linux中系统中在nginx安装目录下的bin目录里输入命令行./nginx即可，windows直接点击nginx.exe文件。nginx终止命令：在linux中系统中在nginx安装目录下的bin目录里输入命令行./nginx -s stop即可，windows中在安装目录下输入nginx.exe -s stop即可nginx配置文件main：控制用户子进...

2020-04-01 00:28:00 238

原创 webgl配置纹理

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>Draw quad with texture</title> </head> <body onload="main()"> ...

2020-04-01 00:10:27 363

dtbk123的博客