自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

ChpeShy的博客

生命不息 奋斗不止

原创 前端基础系列--3.前端继承的几种方式

放弃死记硬背,一步一步理解继承。一、构造器继承最简单的一种,继承构造器属性:function Parent() { this.name = 'Parent';}function Child() { Parent.call(this); this.age = 12;}这个方法是很简单,但是很明显只能继承构造器属性,那么原型属性想继承怎么办呢?...

2019-10-18 10:41:56 158

原创 VueSSR的一些理解和详细配置

概念流程图这是具体的流程图,如何实现,后续配置会详解编译图解结合上面的流程图来理解编译的过程图,因为服务端渲染只是一个可以等待异步数据的预渲染,最终用户交互还是需要Client entry生成的js来控制,这就是为什么需要两个entry文件,但是拥有同样的入口(app.js)的原因。串联server和client的枢纽就是store,server将预渲染页面的sotre数据放入windo...

2019-07-19 21:28:08 3418 3

原创 前端基础系列--2. 变量提升与作用域那些事

上一篇:1. 浏览器缓存一、前言尽管通常JS被归类为 ”动态“ 或 ”解释执行“ 语言,但事实上他是一门编译语言。但与传统的编译语言不同,JS不是提前编译的,编译结果也不能在分布式系统中进行移植。解释执行: 存在一个解释器,对于JS来说,浏览器的JS引擎就是一个解释器,对预编译后的JS代码进行解释执行,解释一行,执行一行,这个过程中不会生成中间文件。 编译执行:对于平台无法识别的带...

2019-06-26 22:18:00 56

原创 前端基础系列--1. 浏览器缓存了解下

一、浏览器缓存分类强缓存:浏览器从本地缓存获取,不需要发起服务器请求协商缓存:发起一次服务器请求,服务器判断缓存是否过期,如果未过期返回304,浏览器从本地缓存读取;如果过期,返回对应资源,状态码为200浏览器访问资源流程:1. 判断本地是否有缓存,没有缓存则请求服务器重新获取;2. 有缓存,判断是否是强缓存,如果是强缓存则直接返回200,不请求服务器。3. 如果是...

2019-06-24 17:19:19 49

原创 Flutter系列--1. 热加载失败问题记录

问题描述:Error connecting to the service protocol: HttpException: Connection closed before full header was received, uri =http://127.0.0.1:59440/ft14oIxI2GQ=/ws解决办法:降低安卓模拟器的版本,目前测试使用android 8.1是没问题...

2019-06-23 15:20:34 726

原创 webpack学习--流程篇

webpack流程小解这篇主要小小的介绍webpack的强大的强大的强大的强大的编译过程。前言在介绍正式编译过程之前,首先明确webpack是一个事件流驱动的组件,通过事件注册和事件触发完成整个编译过程。其中事件流的实现主要是依赖Tapable插件,Tapable的实现也很简单。//函数只有一个是参数,私有属性_plugins,用于记录注册的事件,事件名:回调函数functio...

2019-06-14 17:21:17 96

原创 webpack学习--基础篇

一、概念webpack作为前端构建工具,本质上也是基于node实现的一个工具类。下面官网这张图很好的介绍了webpack的本质:根据定义的入口,从入口开始,逐级深入,将所有依赖文件通过一定规则编译成浏览器可以识别的文件。二、基础配置webpck有基础配置可以分为4类:entry(入口),output(出口),loader(加载器)和plugins(插件)。参考文档:web...

2019-06-14 15:51:11 60

原创 NodeJS -- 异步I/O

一、NodeJS概述: Node是一个提供Chrome环境运行Javascript的平台,用于构建高速、可伸缩的网络程序。主要优势前后端编程语言、环境统一 I/O高性能 I/O并行机制其主要应用场景有:前后端编程语言环境统一 高性能I/O用于实时应用 并行I/O使得使用者可以更高效地利用分布式环境 并行I/O,有效利用稳定接口提升Web渲染能力 ...

2019-03-21 21:29:26 331

原创 vue子组件修改父组件的三种方法

       一直使用$emit触发父组件的事件方法来实现改变父组件的值,导致把其他方法都给忘了。特别来整理下,加深下印象吧。1. $emit('event', val) 最常用的一种方法,父组件通过v-on绑定一个事件,在事件中修改自己的值,子组件通过$emit触发该事件在子组件MobileMessage中:这种方法有个好处就是可以在父组件的事件里面做一些额外的处理,...

2018-10-31 10:28:43 5092

原创 vue单页面通过prerender-spa-plugin插件进行SEO优化

prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化,如果是后台请求的数据需要做SSR处理,例如商品详情页,可使用Vue SSR,详细参考我的另一篇博客:VueSSR的一些理解和详细配置一、前言 之前虽然一直有看过SEO相关的文章,但是一直没去实践过,然后突然技术总监要求要对咱们的官网做个SEO的优化。于是才正式动手搞这玩意。地址:火石创造官网...

2018-08-07 13:39:40 9908 7

原创 vue-cli生成的配置文件解析(1)

一、前言      已经一个月没写博客了。。。这一个月一直在加班,幸好手上的项目一阶段也算完了,这周末也有点空闲时间了,于是好好把项目的配置文件给解读了一遍。这篇文章就先来解读vue-cli生成的配置文件中的dev-server.js吧。      从package.json中可以看到如下片段,dev模式是编译的就是dev-server.js文件,那么这个文件做了哪些配置呢?"dev...

2018-07-28 22:39:59 135

原创 javascript的数据类型之基本类型和引用类型

不知道在初学js的同学对下面的代码有没有疑惑:var a = [1,2,3];var b = a;b.push(4);console.log(a); // [1,2,3,4]var c = 1;var d = c; d =2;console.log(c); // 1为什么这两段代码会有不一样的结果?在第一段中,明明修改的b,为何a也改了?这就是基本类型和引用类型的区别了。一、概念   ...

2018-06-26 21:13:39 78

转载 border-radius详解

在平时工作中border-radius这个属性,一直拷贝的ui的设计值,用的最多的也是border-radius:50%这个属性。竟然一直没去深入了解过其特性。惭愧惭愧,在此认真读了下张鑫旭大神的这边博客:地址。以下做个总结。一、border-radius的属性值border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;其中分别对...

2018-06-21 22:11:41 112

原创 vue2.0探索之路--vuex使用场景和集成

 emmm...一直在犹豫要不要写这篇博客,因为觉得这些内容官网已经介绍的很详细了,再复述一遍貌似没太多意义。后面想了下,不复述、总结,如何加深自己的印象和理解呢,毕竟老年人,记性越来越差了。所以,开始吧。一、概述   vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。二、使用场景  我相信很多人...

2018-06-19 15:45:46 9664 1

原创 css中offsetTop, offsetHeight,clientHeight,scrollTop,scrollHeight的区别

一、前言元素大小平时在开发中或多或少都有用到,时常在各种属性中犹豫不决,不知道该用哪个,现在来对偏移量(offsetTop),客户区大小(clientTop),滚动大小(scrollTop)和确定元素大小(getBoundingClientRect().top)做个总结。二、分析offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。这句话主要的点在于包含元素,包含元素的...

2018-06-11 21:57:26 1184 2

原创 前端性能优化

一、前言        随着现在网站越来越酷炫,各种图片,资源库,动画等等用的越来越多,在用户视觉和功能的提升的同时,性能也成为一个必须考虑的点。有人说“一个网站打开时间超过8s,网民就会流失70%以上。”,这种说法我觉得不是很正确的,除非是非常重要、必须要使用的网站,否则超过5s我基本直接关了,体验太差。所以,用户“忍让”是有极限的,要想把握更多的用户,增强用户体验,性能优化是必不可少的一环。二...

2018-05-26 13:01:05 74

转载 CSS--层叠上下文

张鑫旭大神的文章:http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

2018-05-14 09:20:26 270

原创 CSS3--通过Animation实现简单的手指点击动画

源码:https://github.com/ChpShy/single-play-demo/tree/master/Animation效果图:html结构:<body> <div class="wrapper"> <div class="circle"></div> <div class="fi

2018-05-13 19:12:16 6916

原创 webpack--关于CommonsChunkPlugin拆分模块的应用

官网介绍:http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/下面代码的源码见:一、介绍CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存起来到缓存中供后续...

2018-05-08 21:36:54 2736

原创 javascript模块化开发

commonJS2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程。这标志"Javascript模块化编程"正式诞生。因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限;但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程。NodeJS是commonJS规范的实现,webpack 也是以...

2018-04-27 10:53:02 81

原创 vue按需加载实现

按需加载:1. 将重量级路由内容单独生成一个或者多个js文件,而不是全部放在app.js中;2. 路由访问时再去加载对应的代码块。webpack打包会自动将所有依赖的JS代码打入一个文件,如果工程特别大,依赖的内容特别多的话,就会导致该文件特别的大,而大文件加载会导致性能不是特别的好。此时按需加载就显得尤为重要。参考:点击打开链接未按需加载生成的目录:app.js: 这个是项目代码的集合;mani...

2018-04-25 21:48:12 4659

原创 JS实现鼠标经过和离开图片放大缩小效果

参考:艺龙官网实现。要点:闭包理解;轮询器的清除;以下为部分代码,所有代码见github(ImageEffect文件夹):源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte

2018-04-21 14:36:21 4224

原创 vue2.0探索之路--vue的生命周期

vue的生命周期分为8个阶段,beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->beforeDestroy->destroyed。在vue从  实例化开始  到   组件改变  再最后到  组件销毁  都可以通过对应的钩子函数所监听,以下贴出一个组件的示例代码:impor...

2018-04-18 12:47:58 89

原创 前端进行图片压缩并传入后台

步骤:1. 将图片转成image对象;2. 压缩成设置的最大尺寸;3. 通过canvas转成base64码;4. 后台(此处是java)进行base64解码存储。以下上具体代码。所有代码见:github客户端:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...

2018-04-18 02:20:43 5123

原创 css三栏布局实现6种方法总结

三栏布局介绍:左边固定300px,右边固定300px,中间自适应,下面通过6种方法来实现该布局,欢迎补充~~~~1. flex方式,实现简单,支持ie10+:css代码:.content-flex { display: flex; text-align: center; line-height: 200px; ...

2018-04-13 20:55:30 143

原创 箭头函数中的this指向

普通函数:this指向分为4种情况,1. obj.getName();//指向obj2.getName();//非严格模式下,指向window,严格模式下为undefined3. var a = new A();   a();//指向A本身4.getName().apply(obj);//指向obj箭头函数:箭头函数本身是没有this和arguments的,在箭头函数中引用this实际上是调用的是...

2018-04-01 16:48:12 3668

原创 点击菜单实现内容局部刷新

原理: 利用window.addEventListener("popstate", function(e) {});方法监听浏览器url的变化,判断当前的url动态局部刷新内容区域。(发现不太喜欢打字描述,还是直接贴代码好了。。。未来的我啊,回顾这段代码应该能看懂吧。)<!DOCTYPE html><html><head> <title>...

2017-06-25 21:46:31 10978 4

原创 前端学习 -- clear:both的测试

前端学习 – clear:both的测试clear:both这个属性从字面上的理解其实就是清除所有样式,但它主要还是用来清除div框的浮动的(其他作用还没发现)。 清除div框的浮动这个概念我之前一直没理解什么意思。然后通过测试,终于明白了。下面直接上图理解。首先代码层级结构如下:其中div1和div2都给了float:left和宽度属性。由于没有给高度和overflow属性,...

2017-05-21 08:59:02 312

原创 日常记录20170118----关于java对象实现序列化

之前一直没明白序列化的作用和哪些时候该序列化,网上查了一些资料总结了一下,有错误之处敬请指出。1、实现序列化的作用:实现了Serialzable接口的对象,可将他们转换成一系列字节,并可以以后完全恢复原来的样子。这一过程亦可通过网络进行。这意味着序列化机制能自动补偿操作系统间的差异。换句话说,可以现在windows机器上创建一个对象,对其序列化,然后通过网络发给一台unix机器,然后那里准确无误地...

2017-01-18 10:49:44 142

原创 日常记录20170112----去除字符串前面所以的0

通过正则表达式:String str  =  "0000000016015358";String str1 = str.replaceAll("^(0+)","") ;

2017-01-12 17:13:30 167

原创 was8.5和aop的问题:JVMVRFY013 违反类装入约束

一、错误日志:Error 500: javax.servlet.ServletException: java.lang.VerifyError: JVMVRFY013 违反类装入约束 类=org/springframework/aop/aspectj/MethodInvocationProceedingJoinPoint,方法=getSourceLocation()Lorg/aspectj

2017-01-04 11:46:16 4466 1

提示
确定要删除当前文章?
取消 删除