笔记
文章平均质量分 59
开心市民小杨儿
这个作者很懒,什么都没留下…
展开
-
webpack优化前端性能
一、webpack来优化前端性能首先,用webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运行快速高效。压缩代码:删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUhlifyPlugin来压缩JS文件,利用cssnano(css-loader?minimize)来压缩css利用CDN加速:在构建过程中,将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参原创 2022-03-26 22:00:44 · 3417 阅读 · 0 评论 -
webpack详解
一、什么是webpack1、官方解释:从本质上来讲,webpack是一个现在的javaScript应用的静态模块化打包工具。(从两点概括这句话即模块和打包)下面来说一下模块和打包的概念!2、前端模块化:前端模块化的一些方案:AMD、CMD、CommonJS、ES6(浏览器不能识别它们,但是webpack可以做它们的底层支撑,方可进行模块化开发)ES6之前,要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发并且在通过模块化开发完成了项目后,还需要处理模块化间的各种依赖,并且将原创 2022-03-24 21:38:55 · 61892 阅读 · 3 评论 -
前端知识体系(Vue2.0)
1、css预处理器:Sass、Less什么是css预处理器?css预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为css增加一些编程的特性,将css作为目标生成文件,然后开发者就只要使用这中语言进行css的编码工作。转化成通俗移动的话来说就是“用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的css文件,以供项目使用”SASS:基于Rbuy,通过服务器处理,功能强大,解析效率高,需要学习Ruby语言,上手难度高于LESS。LESS:基于NodeJS,通过客户端原创 2022-03-21 21:32:43 · 1731 阅读 · 0 评论 -
JavaScript运行机制
一、单线程js是单线程,一个任务完成之后才能执行另一个任务。二、同步与异步:1、计时器(setTimeout,setInterval)2、ajax3、读取文件同步异步区别:注:同步程序执行完成后,执行异步程序。图中上面是同步的,下面是异步的。三、process.nextTick与setImmediate方法两个函数的执行顺序如下:1、同步2、nextTick3、异步4、setImmediate(当前事件循环结束执行)例子:setImmediate(()=>{ con原创 2022-03-10 20:45:23 · 654 阅读 · 0 评论 -
原型与原型链
一、原型对象的基本概念1、每一个对象都有它的原型对象2、它可以使用自己原型对象上的所有属性和方法let cat = { name: '喵喵'}//在cat原型上加了一个eat方法cat.__proto__.eat = function(){ console.log("吃鱼")}//此时cat对象就可以调用eat方法cat.eat();//吃鱼二、获取原型的方法1、是通过对象的__proto__(两个下划线)获取2、是通过构造函数的prototype属性拿到原型3、ES6通过类原创 2022-03-08 20:39:05 · 249 阅读 · 0 评论 -
回调地狱和Promise对象
一、回调地狱例子1://获取奶茶的方法function getTea(fn){ setTimeout(() => { fn("奶茶") },500)}//调用获取奶茶的方法getTea(function(data){ console.log(data)//奶茶})//获取火锅的方法function getHotpot(fn){ setTimeout(() => { fn("火锅") },800)}//调用获取火锅的方法getHotpot(function原创 2022-03-07 20:29:42 · 196 阅读 · 0 评论 -
JS防抖和节流
一、防抖1、概念: 当用户触发时间过于频繁,只要最后一次事件的操作//实现:input框输入0.5秒后,控制台进行打印input输入内容//这样就实现了防抖的预期<html><style><input type="text"></style><scprit>let inp = document.querySelector("input");let t = null;inp.oninput = function(){ //如果原创 2022-03-07 17:08:33 · 291 阅读 · 0 评论 -
js闭包基本概念及应用
一、闭包概念:函数嵌套函数,内部函数就是闭包。1、闭包的经典例子:(如下)*function outerFun(){ let a = 10; function innerFun(){ console.log(a); }//a可访问外部函数变量的 return innerFun;}let fun = outerFun();fun();//打印102、注:但正常情况下,函数执行完成,内部变量会被销毁(销毁:释放内存空间)例子:function fun(){ let a = 10;原创 2022-03-07 10:48:42 · 252 阅读 · 0 评论 -
箭头函数与普通函数的区别,ES6中好用的模板字符串
一、箭头函数与普通函数的区别普通函数:例子://函数声明的写法 function fun(){ reurn 100;}//或者函数表达式的写法const fun = function(){ return 100;}console.log(fun());//100箭头函数()中定义参数,如果只有一个参数,可以不写括号;{ } 中写函数体,如果函数体中只有返回值,可以不写return(写法2)const fun =() =>{ return 100;}//上面函数的另原创 2022-03-05 21:21:40 · 151 阅读 · 0 评论 -
如何使用ES2015中的let和const、js解构赋值的使用方法
一、ES6新特性1、let(定义变量,有块级作用域) const(定义常量,不能修改)介绍letlet和var的区别//var定义的变量没有块级作用域的概念//let定义变量有块级作用例子:if(true){ let a = 10;}console.log(a);说明:此时不能输出a的的值,由于let有块级作用域,属于局部变量。虽然在if语句中使用var定义a时可以输出,但之后开发我们还是会弃用var选用let。介绍const例子1:const a = 10;a原创 2022-03-05 19:39:12 · 509 阅读 · 0 评论 -
CSS渲染原理,优化策略
一、css渲染原理(Cascading Style Sheets)在介绍css渲染原理之前,我们简明扼要介绍一下页面的加载过程和浏览器渲染过程,有助于更好理解后续css渲染原理。1.1页面的加载过程和浏览器渲染过程1.1.1页面加载过程要点如下:浏览器根据DNS服务器得到域名的IP地址向这个IP的机器发送HTTP请求服务器收到、处理并返回HTTP请求浏览器得到返回内容(其实就是一堆HTML格式的字符串,因为只有HTML格式浏览器才能正确解析,这是W3C标准的要求。接下来就是浏览器的渲染过程原创 2021-10-30 15:19:43 · 3042 阅读 · 1 评论 -
BFC、IFC概念的布局规则、形成方法、用处
1、Formatting ContextFormatting Context(格式化上下文):是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系、相互之间的作用。...原创 2021-10-29 22:08:29 · 607 阅读 · 0 评论 -
css动画
一、transition语法值描述transiton-durationtransition效果需要指定多少秒或者毫秒才能完成transition-property指定CSS属性的name,transition效果transition-timing-function指定transition效果的转速曲线transition-delay定义transition效果开始的时候transition中文意思为过渡的意思,顾名思义,它就是专门做过渡动画的,比如一些原创 2021-10-25 20:43:47 · 506 阅读 · 0 评论 -
经典面试布局
介绍两个经典布局:一、圣杯布局和双飞翼布局简单介绍一下:这两种布局作为经典的三栏式布局是面试中的常客。两种布局都是两边两栏宽度固定,中间栏宽度自适应。 在HTML结构上中间栏在最前面保证了最先渲染中间提升性能(因为这两种布局都比较老,在现在浏览器中这点性能优化效果并不是很大),并且兼容性良好。两种布局的实现方法前半部分相同,后半部分的实现各有利弊,下面详细介绍一下两者的区别:二、圣杯布局首先,既然是三栏式布局我们需要3个div: <header>圣杯布局</header&g原创 2021-10-25 14:40:56 · 192 阅读 · 0 评论 -
移动端适配
一、移动端适配的必要性一般设计稿都按照375的尺寸设计。但是,现在每个手机都有不同的物理分辨率,导致每台设备的逻辑分辨率不尽相同,从而使375的设计稿还原基本是不可能的。(因为一个左右布局,如果左边写死,右边自适应,每个设备的右边所展示的内容大小就不尽相同,这就表现出来移动端适配的必要性)二、基本概念接下来我们来一起看几个概念:2.1 屏幕尺寸是以屏幕对角线的长度来计量的,计量单位为英寸。2.2 像素从计算机技术的角度来解释,像素是硬件和软件所能控制的最小单位。他指显示屏的画面上表示出来的最小原创 2021-10-22 21:18:55 · 458 阅读 · 0 评论 -
javaScript split()方法
定义和用法split()方法用于把一个字符串分割成字符串数组语法:stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。返回值一个字符串数组。该数组是通过在separator指原创 2021-10-19 15:07:52 · 316 阅读 · 0 评论 -
JS命名空间
命名空间namespace(某些语言中叫package),是一个在静态语言中常见的概念。它可以帮助我们更好地整理代码,并可避免命名冲突。举一个栗子,如果有两个人都叫小明,我们很难区分和引用这两个人。但如果我们在他们前面加上命名空间,比如:北京的小明和上海的小明,那么区分起来就容易的多了,也不会因为重名而找错人了。但是,JS中并不提供原生的命名空间支持。在JS中创建的任何对象都默认是全局对象。在现代的大规模JS开发中,不采用命名空间会造成非常糟糕的命名方式,比如用前缀命名函数和变量,导致代码丑陋不可读。当原创 2021-10-19 14:39:51 · 231 阅读 · 2 评论 -
采购项目总结
采购项目圆满结束,下面我将会对这次出现的问题、对应解决方法以及成长收获做一下简要的阐述。问题一:在此项目中,我负责后台系统几个界面的开发。由于第一次接触SMPE框架,对其不了解,导致排期过程中无法对自己开发时间进行合理的预估,并且开发前浪费大量的时间对其进行熟悉,大大耽误开发效率也影响自己的学习时间。解决方法:确定开发前快速阅读框架代码,通过询问张凯杰了解该框架各个模块功能和用法,在一天左右的时间对其进行大致了解,不影响界面的开发时间。问题二:项目中遇到一些动态表头数据渲染、合并单元格等未接触原创 2021-09-22 21:14:25 · 162 阅读 · 0 评论 -
springcloud
Spring Cloud是一系列框架的有序集合,她可以实现服务发现注册、配置中心、消息总线、负载均衡、断路器、数据监控。服务注册发现(Eureka)相当于zookeeper,好处是服务调用方不直接依赖于服务提供方,保证服务高可用服务降级(Hystrix)可以保证某个服务提供方的异常不会影响整体系统的稳定。数据监控(Zuul)Zuul 是在云平台上提供动态路由,监控,弹性,安全等边缘服务的框架 相当于网关配置中心(Archaius)配置管理API,包含一系列配置管理API,提供动态类型化属性、原创 2021-05-30 11:13:10 · 48 阅读 · 0 评论 -
java反射
反射是框架设计的灵魂(使用的前提条件:必须先得到代表的字节码的Class,Class类用于表示.class文件(字节码))一、反射的概述JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。要想解剖一个类,必须先要获取到该类的字节码文件对象。而解剖使用的就是Class类中的方法.所以先要获取到每一个字节码文件对应的Class类型的对象.以上的总结原创 2021-05-09 15:26:58 · 76 阅读 · 0 评论 -
Java #{}和${}区别
介绍 MyBatis中使用parameterType向SQL语句传参,parameterType后的类型可以是基本类型int,String,HashMap和java自定义类型。在SQL中引用这些参数的时候,可以使用两种方式#{parameterName}或者${parameterName}。#{} #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号。例如:order by #{parameterName} //或取Map中的value#{Key}也是一样操作。假设传入参数原创 2021-05-02 14:32:24 · 279 阅读 · 0 评论 -
设计模式
设计模式(design pattern)设计模式,是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 是对面向对象设计中反复出现的问题的解决方案使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。Java设计模式贯彻的原理是:面向接口编程,而不是面向实现。其目标的原则是:降低耦合,增强灵活性。设计模式分类:一、创建型模式创建型模式是用来创建对象的模式,抽象了实例化的过程,帮助一个系统独立于其关联对象的创建、组合和表示方式。所有的创建型模式都有两原创 2021-04-18 16:39:25 · 65 阅读 · 0 评论 -
Java IO流
IO流IO流基础字节流字符流Properties字符通向字节对象的流打印流IO流基础表格 输入流 输出流字节流 InputStream OutputStream字符流 Reader Writer字节流所有都需要抛出异常OutputStream:抽象类,表示输出字节的所有的超类。FileOutputStream把内存中的数据写入到硬盘的文件当中。FileOutputStream(String name);//创建一个向具有名称的文件中写入数据的输出文件流FileOutputS原创 2021-04-05 12:04:31 · 66 阅读 · 0 评论 -
什么是Springboot
springboot的介绍每当我学习新的框架时,都会分为三部分,它是什么?有什么用?怎么用?,当然今天我也会以这种方式介绍springboot首先它是什么?它其实就是基于spring的一个框架其次它有什么用?再说它有什么用之前,我们可以先回想一下我们之前开发中的问题?第一:配置文件太多,太过于复杂,第二:依赖的版本太多,而且容易冲突,第三:部署的项目还需要外带tomcat,这多麻烦啊,极大拉低了我们的开发效率,一天啥也没干,尽搞这些环境配置了。所以我们可以用到springboot来解决上述问题。原创 2021-03-21 12:28:33 · 105 阅读 · 0 评论 -
泛型介绍
当将一个对象放入集合中,集合不会记住此对象的类型,当再次从集合中取出此对象时,改对象的编译类型变成了Object类型,但其运行时类型任然为其本身类型。List list=new ArrayList();list.add(new Random());list.add(“asd”); //list并没有识别"abc"是字符串类型,而是当作Object进行处理String str=list.get(0);//语法错误,需要编程实现类型转换注意:问题1进行数据的强制类型转换之前必须进行类型判断,Class原创 2021-03-14 08:33:45 · 139 阅读 · 0 评论 -
linux介绍
一、Linux是什么:1、整个计算机系统可以分为硬件和软件两大部分。毫无疑问,Linux运行于计算机之上,肯定是属于软件。为了让计算机系统更好的分配计算机资源,因此在硬件和各种应用程序之间,便有了操作系统的概念。而Linux正是操作系统这样一种软件。他支持多用户,多任务,可以运行在多进程,多cpu的主机上。并且具有稳定,免费,开源,安全性高等特点。2、并不是所有的机器都可以不经改版而可以直接运行Linux系统。众所周知,操作系统直接向下面向的是计算机硬件Linux,在开发过程要参考不同硬件的功能函数。而原创 2021-03-08 16:07:22 · 99 阅读 · 0 评论 -
Spring IOC和AOP基本原理
一、IOC(Inverse of Control)控制反转1.依赖注入DI(dependency injection)所谓依赖,从程序的角度看,就是比如 A 要调用 B 的方法,那么 A 就依赖于 B,反正 A 要用到 B,则 A 依赖于 B。所谓倒置,你必须理解如果不倒置,会怎么着,因为 A 必须要有 B,才可以调用 B,如果不倒置,意思就是 A 主动获取 B 的实例:B b = new B (),这就是最简单的获取 B 实例的方法(当然还有各种设计模式可以帮助你去获得 B 的实例,比如工厂、Loca原创 2021-02-21 11:01:55 · 1070 阅读 · 0 评论 -
举例说明——xiaopiu切换状态使用技巧
如何让一个页面集合从界面外飞进去界面内?第一,我们需要对此小集合进行状态设置,选中该集合,点击右上角加号,出现状态1标题栏,第二,我们便可以通过拖拉该集合进行状态1形态的改变,例如我的原始态是该集合在页面内,状态1是该集合被拖拉在在页面外第三,选中该集合点击事件后会出现以下状态再次点击添加事件,由于这个事件类型属于状态的切换,因此选择事件类型为定时,之后进行以下设置,如下:最终就可完成集合状态的切换功能。希望能帮到大家。...原创 2021-01-20 22:39:54 · 2469 阅读 · 1 评论 -
循环依赖
什么是循环依赖?顾名思义,循环依赖就是A依赖B,B又依赖A,两者之间的依赖关系形成了一个圆环,通常是由于不正确的编码所导致。Spring只能解决属性循环依赖问题,不能解决构造函数循环依赖问题,因为这个问题无解。接下来我们首先写一个Demo来演示Spring是如何处理属性循环依赖问题的。Talk is cheap. Show me the code第一步:定义一个类ComponentA,其有一个私有属性componentB。package com.tech.ioc;import org.spri原创 2021-01-10 11:37:51 · 1412 阅读 · 0 评论 -
java配置
1、Java配置类装配bean既然是通过Java代码来装配bean,是需要我们自己通过配置类来声明我们的bean。我们先通过@Configuration注解来创建一个Spring的配置类,该类中包含了bean的创建细节——1.1、 导入jar包或引用maven:spring-aop-5.0.14.RELEASE.jar 点这里如果是maven工程,代码如下:org.springframeworkspring-test5.3.2test1.2、 写一个生成Bean的类文件(类似于xml文原创 2020-12-20 13:08:48 · 276 阅读 · 1 评论 -
java进阶
一、File 类概述文件 和 目录路径名 的抽象表达形式Java中把文件或者目录(文件夹)都封装成 File对象我们要去操作硬盘上的文件,或者文件夹只要找到 File这个类即可File类对象,只是路径名的 抽象表示形式,即使该文件在操作系统上并不物理存在,也可以创建这个路径所表示的File对象构造方法File(String pathname):通过给定 路径名字符串 转换为 抽象路径名 来创建一个新 File 实例windows中的路径或文件名不区分大小写,但是最好别这样,跨平台可能原创 2020-12-13 16:35:31 · 77 阅读 · 0 评论 -
反射
一、反射的概述JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制。要想解剖一个类,必须先要获取到该类的字节码文件对象。而解剖使用的就是Class类中的方法.所以先要获取到每一个字节码文件对应的Class类型的对象.以上的总结就是什么是反射反射就是把java类中的各种成分映射成一个个的Java对象例如:一个类有:成员变量、方法、构造方法、包等等信原创 2020-12-06 16:37:26 · 68 阅读 · 0 评论 -
springboot 核心
spring boot如何简化spring应用的搭建的呢?其实就是通过利用pom文件的继承机制,预定义依赖包版本+根据应用场景,抽取依赖包,并封装,利用pom的传递依赖,完成完整的依赖包引入。我们分三部分来分析spring boot。1,spring boot依赖版本管理;2,spring boot 启动器;3,spring boot 启动过程,组件整合生效过程。1,spring boot 依赖版本管理我从一个简单的spring boot pom文件来看一下。先看看spring boot 的pom配置原创 2020-11-29 10:42:42 · 139 阅读 · 0 评论 -
springboot特性
Spring Boot 特性使用 Spring 项目引导页面可以在几秒构建一个项目方便对外输出各种形式的服务,如 REST API、WebSocket、Web、Streaming、Tasks非常简洁的安全策略集成支持关系数据库和非关系数据库支持运行期内嵌容器,如 Tomcat、Jetty强大的开发包,支持热启动自动管理依赖自带应用监控支持各种 IED,如 IntelliJ IDEA 、NetBeansSpring Boot 这些特性会给我们研发带来非常大的优势,下面我们可以分开来介绍:原创 2020-11-22 13:12:33 · 257 阅读 · 1 评论 -
springboot被错误使用的注解
在 Spring Boot 中集成通用 Mapper 时,写过下面的代码:@Configuration@AutoConfigureAfter(MyBatisConfig.class)public class MyBatisMapperScannerConfig {//其他}这种用法我参考的 mybatis-spring-boot-starter。由于在我自己这个例子中可以良好的运行,因此我以为 @AutoConfigureAfter 真正起作用了,否则怎么不报错呢。但是在很长一段时间内,好多人原创 2020-11-08 13:36:35 · 169 阅读 · 0 评论 -
sping和springboot区别
1、概述:对于 Spring 和 SpringBoot 到底有什么区别,我听到了很多答案,刚开始迈入学习 SpringBoot 的我当时也是一头雾水,随着经验的积累、我慢慢理解了这两个框架到底有什么区别,我相信对于用了 SpringBoot 很久的开发人员来说,有绝大部分还不是很理解 SpringBoot 到底和 Spring 有什么区别,看完文章中的比较,或许你有了不同的答案和看法!原创 2020-11-01 13:59:06 · 761 阅读 · 0 评论 -
List、Map、Set
一、List、Map、Set三个接口,存取元素时,各有什么特点?(1)Set集合的add有一个boolean类型的返回值,当集合中没有某个元素时,则可以成功加入该 元素,返回结果为true;当集合中存在与某个元素equals方法相等 的元素时,则无法加入该元素, 取元素时只能用Iterator接口取得所有元素,在逐一遍历各个元素;(2)List表示有先后顺序的集合,调用add()方法,指定当前对象在集合中的存放位置;一个对象可 以被反复存进集合中;每调用一次add()方法,该对象就会被插入集合中一次,其原创 2020-10-25 13:38:39 · 182 阅读 · 0 评论 -
SpringBoot
在过去的两年时间里,最让人兴奋、回头率最高、最能改变游戏规则的东西,大概就是Spring Boot了。Spring Boot提供了一种新的编程范式,能在最小的阻力下开发Spring应用程序。有了它, 你可以更加敏捷地开发Spring应用程序,专注于应用程序的功能,不用在Spring的配置上多花功 夫,甚至完全不用配置。实际上,Spring Boot的一项重要工作就是让Spring配置不再成为你成功路上的绊脚石。一、自动配置以往,在任何的spring项目中,你都会找到Java配置或一大堆的XML配置文件,它们原创 2020-10-18 12:01:36 · 109 阅读 · 0 评论 -
ESLint
官网上告诉我们,ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具,哦,所以我们可以知道,ESLint 就是一个工具,而且是一个用来检查代码的工具。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不原创 2020-09-13 09:32:48 · 124 阅读 · 0 评论 -
vue生命周期理解
可以理解vue生命周期就是指vue实例从创建到销毁的过程,在vue中分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。一、创建(实例)1、beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el)使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用2、created:实例已经创建,仍然不能获取DOM节点(有data,没有el)使用场景:模板渲染成html前调用,此时可以获取data和methods原创 2020-09-06 10:34:38 · 162 阅读 · 0 评论