- 博客(33)
- 收藏
- 关注
RSS订阅原创 在线把 json 转换成 ts 类型 - @cyly/json2ts
Github: https://github.com/ChpShy/json2ts体验地址：https://chpshy.github.io/json2ts/index.html介绍在项目慢慢接入vue3之后，面临了一个问题，要不要定义 ts 类型呢，还是快乐的做一个 as 开发人员。用吧，类型太多，定义起来开发效率太低；不用吧，很多提示又没了，而且以后别人维护起来，不利于代码阅读(全是any)。本着负责任(装逼)的态度，还是想着加上。但是后端接口返回的咋办呢？他们倒是有接口文档，但是有些字段实在是
2022-04-03 12:32:57
6325
3
原创 webpack5.x源码解析
以下内容基于webpack@^5.12.3版本简略流程图文末有详细流程图本次收获对webpack的整体流程有了一个全面的理解理解了compiler、compilation、chunk到底是个啥整体设计模式、插件使用时机和分工都是值得学习的webpack函数这快的代码比较简单就不贴了，讲下大致流程归一化options，将部分配置转换成webpack需要的格式创建context上下文，取的是process.cwd()创建compiler实例初始化流插件初始化用户配置的插件，.
2021-01-28 16:26:55
956
原创 前端基础系列--3.前端继承的几种方式
放弃死记硬背，一步一步理解继承。一、构造器继承最简单的一种，继承构造器属性：function Parent() { this.name = 'Parent';}function Child() { Parent.call(this); this.age = 12;}这个方法是很简单，但是很明显只能继承构造器属性，那么原型属性想继承怎么办呢？...
2019-10-18 10:41:56
1979
原创 VueSSR的一些理解和详细配置
概念流程图这是具体的流程图，如何实现，后续配置会详解编译图解结合上面的流程图来理解编译的过程图，因为服务端渲染只是一个可以等待异步数据的预渲染，最终用户交互还是需要Client entry生成的js来控制，这就是为什么需要两个entry文件，但是拥有同样的入口(app.js)的原因。串联server和client的枢纽就是store，server将预渲染页面的sotre数据放入windo...
2019-07-19 21:28:08
9040
3
原创 前端基础系列--2. 变量提升与作用域那些事
上一篇：1. 浏览器缓存一、前言尽管通常JS被归类为 ”动态“ 或 ”解释执行“ 语言，但事实上他是一门编译语言。但与传统的编译语言不同，JS不是提前编译的，编译结果也不能在分布式系统中进行移植。解释执行： 存在一个解释器，对于JS来说，浏览器的JS引擎就是一个解释器，对预编译后的JS代码进行解释执行，解释一行，执行一行，这个过程中不会生成中间文件。 编译执行：对于平台无法识别的带...
2019-06-26 22:18:00
145
原创 前端基础系列--1. 浏览器缓存了解下
一、浏览器缓存分类强缓存：浏览器从本地缓存获取，不需要发起服务器请求协商缓存：发起一次服务器请求，服务器判断缓存是否过期，如果未过期返回304，浏览器从本地缓存读取；如果过期，返回对应资源，状态码为200浏览器访问资源流程：1. 判断本地是否有缓存，没有缓存则请求服务器重新获取；2. 有缓存，判断是否是强缓存，如果是强缓存则直接返回200，不请求服务器。3. 如果是...
2019-06-24 17:19:19
281
原创 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
1307
原创 webpack学习--流程篇
webpack流程小解这篇主要小小的介绍webpack的强大的强大的强大的强大的编译过程。前言在介绍正式编译过程之前，首先明确webpack是一个事件流驱动的组件，通过事件注册和事件触发完成整个编译过程。其中事件流的实现主要是依赖Tapable插件，Tapable的实现也很简单。//函数只有一个是参数，私有属性_plugins，用于记录注册的事件，事件名：回调函数functio...
2019-06-14 17:21:17
277
原创 webpack学习--基础篇
一、概念webpack作为前端构建工具，本质上也是基于node实现的一个工具类。下面官网这张图很好的介绍了webpack的本质：根据定义的入口，从入口开始，逐级深入，将所有依赖文件通过一定规则编译成浏览器可以识别的文件。二、基础配置webpck有基础配置可以分为4类：entry(入口)，output(出口)，loader(加载器)和plugins(插件)。参考文档：web...
2019-06-14 15:51:11
193
原创 NodeJS -- 异步I/O
一、NodeJS概述： Node是一个提供Chrome环境运行Javascript的平台，用于构建高速、可伸缩的网络程序。主要优势前后端编程语言、环境统一 I/O高性能 I/O并行机制其主要应用场景有：前后端编程语言环境统一 高性能I/O用于实时应用 并行I/O使得使用者可以更高效地利用分布式环境 并行I/O，有效利用稳定接口提升Web渲染能力 ...
2019-03-21 21:29:26
599
原创 vue子组件修改父组件的三种方法
一直使用$emit触发父组件的事件方法来实现改变父组件的值，导致把其他方法都给忘了。特别来整理下，加深下印象吧。1. $emit('event', val) 最常用的一种方法，父组件通过v-on绑定一个事件，在事件中修改自己的值，子组件通过$emit触发该事件在子组件MobileMessage中：这种方法有个好处就是可以在父组件的事件里面做一些额外的处理，...
2018-10-31 10:28:43
18664
原创 vue单页面通过prerender-spa-plugin插件进行SEO优化
prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化，如果是后台请求的数据需要做SSR处理，例如商品详情页，可使用Vue SSR，详细参考我的另一篇博客：VueSSR的一些理解和详细配置一、前言 之前虽然一直有看过SEO相关的文章，但是一直没去实践过，然后突然技术总监要求要对咱们的官网做个SEO的优化。于是才正式动手搞这玩意。地址：火石创造官网...
2018-08-07 13:39:40
13121
11
原创 vue-cli生成的配置文件解析(1)
一、前言 已经一个月没写博客了。。。这一个月一直在加班，幸好手上的项目一阶段也算完了，这周末也有点空闲时间了，于是好好把项目的配置文件给解读了一遍。这篇文章就先来解读vue-cli生成的配置文件中的dev-server.js吧。 从package.json中可以看到如下片段，dev模式是编译的就是dev-server.js文件，那么这个文件做了哪些配置呢？"dev...
2018-07-28 22:39:59
439
原创 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
150
转载 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
1437
原创 vue2.0探索之路--vuex使用场景和集成
emmm...一直在犹豫要不要写这篇博客，因为觉得这些内容官网已经介绍的很详细了，再复述一遍貌似没太多意义。后面想了下，不复述、总结，如何加深自己的印象和理解呢，毕竟老年人，记性越来越差了。所以，开始吧。一、概述 vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。二、使用场景 我相信很多人...
2018-06-19 15:45:46
12812
2
原创 css中offsetTop, offsetHeight,clientHeight,scrollTop,scrollHeight的区别
一、前言元素大小平时在开发中或多或少都有用到，时常在各种属性中犹豫不决，不知道该用哪个，现在来对偏移量(offsetTop)，客户区大小(clientTop)，滚动大小(scrollTop)和确定元素大小(getBoundingClientRect().top)做个总结。二、分析offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。这句话主要的点在于包含元素，包含元素的...
2018-06-11 21:57:26
2757
2
原创 前端性能优化
一、前言 随着现在网站越来越酷炫，各种图片，资源库，动画等等用的越来越多，在用户视觉和功能的提升的同时，性能也成为一个必须考虑的点。有人说“一个网站打开时间超过8s，网民就会流失70%以上。”，这种说法我觉得不是很正确的，除非是非常重要、必须要使用的网站，否则超过5s我基本直接关了，体验太差。所以，用户“忍让”是有极限的，要想把握更多的用户，增强用户体验，性能优化是必不可少的一环。二...
2018-05-26 13:01:05
151
转载 CSS--层叠上下文
张鑫旭大神的文章：http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
2018-05-14 09:20:26
409
原创 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
12766
原创 webpack--关于CommonsChunkPlugin拆分模块的应用
官网介绍：http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/下面代码的源码见：一、介绍CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续...
2018-05-08 21:36:54
3592
原创 javascript 模块化的那些事
commonJS2009年，美国程序员Ryan Dahl创造了node.js项目，将javascript语言用于服务器端编程。这标志"Javascript模块化编程"正式诞生。因为老实说，在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块，与操作系统和其他应用程序互动，否则根本没法编程。NodeJS是commonJS规范的实现，webpack 也是以...
2018-04-27 10:53:02
253
原创 vue按需加载实现
按需加载：1. 将重量级路由内容单独生成一个或者多个js文件，而不是全部放在app.js中；2. 路由访问时再去加载对应的代码块。webpack打包会自动将所有依赖的JS代码打入一个文件，如果工程特别大，依赖的内容特别多的话，就会导致该文件特别的大，而大文件加载会导致性能不是特别的好。此时按需加载就显得尤为重要。参考：点击打开链接未按需加载生成的目录：app.js： 这个是项目代码的集合；mani...
2018-04-25 21:48:12
8620
原创 JS实现鼠标经过和离开图片放大缩小效果
参考：艺龙官网实现。要点：闭包理解；轮询器的清除；以下为部分代码，所有代码见github(ImageEffect文件夹)：源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte
2018-04-21 14:36:21
7226
原创 vue2.0探索之路--vue的生命周期
vue的生命周期分为8个阶段，beforeCreate->created->beforeMount->mounted->beforeUpdate->updated->beforeDestroy->destroyed。在vue从 实例化开始 到 组件改变 再最后到 组件销毁 都可以通过对应的钩子函数所监听，以下贴出一个组件的示例代码：impor...
2018-04-18 12:47:58
169
原创 前端进行图片压缩并传入后台
步骤：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
6153
原创 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
414
原创 箭头函数中的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
7525
1
原创 点击菜单实现内容局部刷新
原理： 利用window.addEventListener("popstate", function(e) {});方法监听浏览器url的变化，判断当前的url动态局部刷新内容区域。(发现不太喜欢打字描述，还是直接贴代码好了。。。未来的我啊，回顾这段代码应该能看懂吧。)<!DOCTYPE html><html><head> <title>...
2017-06-25 21:46:31
14223
4
原创 前端学习 -- clear:both的测试
前端学习 – clear:both的测试clear:both这个属性从字面上的理解其实就是清除所有样式，但它主要还是用来清除div框的浮动的（其他作用还没发现）。 清除div框的浮动这个概念我之前一直没理解什么意思。然后通过测试，终于明白了。下面直接上图理解。首先代码层级结构如下：其中div1和div2都给了float:left和宽度属性。由于没有给高度和overflow属性，...
2017-05-21 08:59:02
550
原创 日常记录20170118----关于java对象实现序列化
之前一直没明白序列化的作用和哪些时候该序列化，网上查了一些资料总结了一下，有错误之处敬请指出。1、实现序列化的作用：实现了Serialzable接口的对象，可将他们转换成一系列字节，并可以以后完全恢复原来的样子。这一过程亦可通过网络进行。这意味着序列化机制能自动补偿操作系统间的差异。换句话说，可以现在windows机器上创建一个对象，对其序列化，然后通过网络发给一台unix机器，然后那里准确无误地...
2017-01-18 10:49:44
189
原创 日常记录20170112----去除字符串前面所以的0
通过正则表达式：String str = "0000000016015358";String str1 = str.replaceAll("^(0+)","") ;
2017-01-12 17:13:30
257
原创 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
6019
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人