自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

我的博客

学无止境

  • 博客(131)
  • 论坛 (1)

原创 前端国际化方案总结

综述:总结下再国际化方案实践中遇到的问题,加深理解1.项目背景描述 目前项目是使用ant design vue 来开发的,需要引入国际化方案,研究后决定使用I18n方案。2.需要修改的代码块3.目前还需要考虑的问题默认语言是否可以通过获取当前地理位置信息,帮助用户自主选择?还是做一个语言选择提示窗? 如果引入数十种语言,各种语言占用的文本空间是不同的,怎样保证良好的可读性?在多种ui组件中都能适应?4....

2020-06-16 15:28:25 111

转载 10分钟彻底搞懂Http的强制缓存和协商缓存

综述:这篇文章写的确实不错,分享一下浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。所以根据上面的特点,浏览器缓存有下面的优点:减少冗余的数据传输 减少服务器负担 加快客户端加载网页的速度浏览器缓存是Web性能优化的重要方式。那么浏览器缓存的过程究竟是怎么样的呢?在浏览器第一次发起请求时,本地无缓存,向web服务器发送请求,服务器起端响应请求,浏览器端缓存。过程如下:在第一次请求时,服务器.

2020-06-02 20:49:45 205

原创 vue-cli3 配合 webpack 配置详解(vue.config.js)

综述:vue-cli3.0配置总结,与webpack搭配使用参考文章:https://blog.csdn.net/Hampton_Chen/article/details/88931567 https://recomm.cnblogs.com/blogpost/103348651.组件全套配置及说明module.exports = { // 部署应用时的基本 URL baseUrl: process.env.NODE_ENV === '...

2020-05-29 18:55:50 1101

原创 大型系统嵌套方案探究及思考

综述:自己做的前端SPA页面需要被其他系统嵌入,特此做一些技术选型,这种微前端技术将多个不同的技术栈的小系统拼凑在一起,构成了一个对外统一的系统,大型迭代系统中非常重要。1.使用iframe嵌套当接入的子系统过多时,系统的系能肯定会下降,父子,子子系统之间的沟通很麻烦,数据无法共享。2.系统自己打包,并将其打成一个js文件挂载到dom结构上。这种是否会引入过多的资源呢?如何和CICD持续集成打包无缝拼接到一起使用呢?子系统的按需加载策略是否能实现?3.使用阿里的qiankun解决方案.

2020-05-15 10:19:40 91

原创 软件开发人员经验总结

1.积极主动,对于模糊的需求一定要刨根问底,不然最后坑的就是自己,不要因为别人的工作不到位而连累到自己。2.对于多版本的开发,一定要做好代码版本的管理和维护,知道每次发版本要发哪些内容,在发版本前的2天不要再去合并进去未通过测试的代码。3.和测试人员的沟通,要尽量保证自己的代码质量高,减少测试人员的压力。也是对自己负责,对于需求文档要仔细阅读。4.工作中的沟通方式非常重要,一定要做好情...

2020-05-02 08:50:55 295

原创 软件开发工具分享

1.EOLINKERAPI Studio 5开箱即用的API研发管理方案,0代码实现API自动化测试,免费的API管理平台。2.码云一个开源的管理代码库的工具,类似于github,还不收费,这上边还能管理任务和bug.对于初创团队十分好用。3.fastMock 平台前端自定义编写接口,mock数据...

2020-03-15 21:42:48 83

原创 前端工程化探究

综述:十分有必要深究的一个方向,对于提高前端的工作的效率和规模化十分有必要,前端应用越来越复杂,需要建立一套综合性的规范来帮助前端工程的开发和高效。1.什么是前端工程化? 前端应用越来越复杂,如果还用刀工火种时代的维护文件的方式来开发前端应用,对于大型,多团队开发来说十分不便。2.前端工程化需要做的主要工作?构建,审查,测试,部署四个方面的工作。关注性能,稳定性,可用性,可...

2020-01-20 11:04:30 111

转载 WebSocket 与 Socket.IO

综述:在做小程序和电视端互动项目时,也使用了socket.io十分重要的内容。最近小组在做一个智慧交通的项目,其中有个 “分享屏幕” 的功能,即一个 client 能够将自己当前的页面分享到另外一个 client,针对这个需求,我们利用了 WebSocket 技术,具体说是Socket.IO。1. 什么是 WebSocket提到 WebSocket,我首先会想到 “及时通讯” 和...

2019-10-07 09:02:20 115

原创 一个问题引起对正则表达式的思考?

综述:将一个大位数,三位加一个逗号实现1.不了解正则的话只能当做字符串处理了,十分繁琐2.实际的正确答案是Number.prototype.formatNum = function() { const str = this.toString(); const reg = /(?=(\B)(\d{3})+$)/g return str.repla...

2019-09-29 21:06:29 60

原创 电脑运行卡顿,只需三步轻松解决

综述:挺好用的解决电脑卡顿的方法1.win+R打开电脑的运行界面,输入cmd2.点击搜索输入cmd,右键以管理员身份运行,输入chkdsk即可。3.完毕之后,在里面输入sfc /scannow ,点击确定,自动开始运行,运行完请重新开机。4.电源设置那边一定要设置为高性能的,不要选择节能模式,严重影响电脑性能...

2019-09-07 16:42:09 9459 4

原创 基于Vue实现音乐APP项目资料分享

综述:挺好的资料,分享下共同提高1、从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理:https://juejin.im/post/5a6547d0f265da3e283a1df71.262、Front-end-Web-Development-Interview-Question:https://github.com/paddingme/Front-end-Web-Develo...

2019-08-28 20:54:47 558 1

原创 如何升级一个element-ui组件

综述:目前项目需要实现基于element-UI的前端组件,希望进一步提高组件的可用性1.以element-UI中的tabs标签组件为例进行分析,组件使用流程;在node_module中的element-UI中的package存放了基于vue语法实现的一个个组件,在实际使用的时候将这些.vue组件全部进行编译,产生了lib文件,这里才是真正可以引用到项目中使用的组件。为了修改elem...

2019-08-15 17:40:49 1148

转载 grid网格布局介绍

综述:很好用的布局方式,flex布局只是在纵向将页面进行了划分。是一维的布局,grid不仅仅有纵向的还有横向的划分属于二维的页面布局方案。一、概述网格布局(Grid)是最强大的 CSS 布局方案。它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。上图这样的布局,就是 Grid 布局的拿手好戏...

2019-08-12 17:15:04 201

原创 docker 技术学习和应用

综述:将各种资源整合到一个大型的软件包中,可以快速的调用,避免各种环境的搭建的麻烦Docker 入门实战Docker 是一个开源的应用容器引擎,基于Go 语言并遵从Apache2.0协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接...

2019-08-12 15:39:41 31

原创 基于python/nodejs实现自动化测试

1.在ops系统的接口使用pageCode+opCode进行改造的过程中,通过fiddler工具,拦截ops系统中的所有发出的Ajax请求,收集每个请求发出的参数,进行评价;2.为了评估pageCode+opCode的正确性,根据url找到数据库中对应的menu_id的值,如果这个集合内存在pageCode+opCode的值,就说明是正确的;十分的高效。3.其实就是通过fiddler工具获...

2019-08-12 14:50:10 94

转载 后端开发工程师需要掌握的内容

1. 语言相关1.1 Java核心知识点 Java的类加载机制 JVM相关:JVM内存模型和结构,GC原理,性能调优 泛型 集合体系 异常体系 IO体系 多线程编程 反射 Servlet 推荐数据 《Java编程思想》 《Effective Java》 《深入理解Java虚拟机》 1.2 Shell、Python等脚本语言介绍...

2019-08-06 20:03:13 661

原创 webpack 相关知识总结

综述:虽然使用webpack很长时间,但是下边的这些问题还是需要总结下,以加强认识和理解为什么要总结 webpack 相关的问题?随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如 react 的 jsx 代码必须编译后才能在浏览器中使用;又如 sass 和 less 的代码浏览器也是不支持的。 而如果摒弃了这些开发框架,那么开发的效率将大幅下降。在众多前端工...

2019-07-20 22:37:45 142

原创 typeScript学习笔记

综述:typeScript很重要,是js的一个超集,主要提供了类型系统和对ES6的支持参考链接:https://ts.xcatliu.com/basics/primitive-data-types1.什么是 TypeScriptTypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub...

2019-07-18 20:16:22 158

原创 App 性能测试主要指标及测试方法

综述:了解一个APP性能测试的主要方面,为APP开发打好基础1.性能指标响应时延 启动时长 内存分析 CPU分析 流量测试 电量测试(在各种情况下APP的耗电量的测试) 弱网测试(在网络不好的情况下APP的运行情况)2.什么是流量测试流量测试基本概念目前的网络类型包含2G\3G\4G\wifi,其中还有不同运营商的区分,我们在APP的使用中经常遇到大资源,重复请求...

2019-07-17 19:27:32 1557

原创 压力测试工具jmeter详解

综述:一个挺好用的工具介绍,对于接口的压力测试十分有用参考链接:https://blog.csdn.net/u012111923/article/details/807051411.工具介绍前置条件:必须已经安装了jdkjmeter loadrunner(收费软件且公司内网不能使用,直接放弃了)2.下载安装说明下载地址:http://jmeter.apache.org/...

2019-07-09 19:26:16 420

原创 vue中的keep-alive组件实现缓存并动态清除功能实现

综述:一个需要细细品味和分析的问题,当前有三个页面a=>b=>c,需要从c到b时,使用缓存数据,因此引入了keep-alive组件,但是第二次从a到c时,依然还是缓存数据,就需要清除缓存数据了;由此引发一个问题,实现一个路由组件,页面跳转的时候,前进动态获取数据,后退使用缓存,这个功能该怎样实现?1.方案一使用sessionStorage等绘画层存储方法保存数据2.方案...

2019-07-03 19:58:22 1719 4

原创 javaScript中实现继承的六种方法

综述:很经典的问题,总结下。参考链接:https://github.com/mqyqingfeng/Blog/issues/161.原型链继承。通过构建构造函数,在构造函数的原型链上添加属性和方法扩展其功能。通过new 构造函数实例化,实现继承。function Father(){ this.name="dad name"}funciton Son(){ thi...

2019-06-25 11:54:40 369

原创 前端问题汇总-第八篇

1.强制缓存和协商缓存?参考链接:https://blog.csdn.net/zl399615007/article/details/84534884浏览器在请求某一资源时,会先获取该资源缓存的header信息,判断是否命中强缓存(cache-control和expires信息),若命中直接从缓存中获取资源信息,包括缓存header信息,本次请求就不会与服务器进行通信。如果没有命中强缓...

2019-06-25 11:22:02 115

原创 全局替换对象中的特定字符的方法总结

1.使用JSON.stringify(data,replacer)函数处理方法 const ifNullReplacer = function (key, value) { if (value === 'IFNULL') { value = '' } return value } const tes...

2019-06-21 11:43:40 160

原创 Webpack-dev-server的proxy用法(请求转发解决跨域问题)

前言如果你有单独的后端开发服务器 API,并且希望在同域名下发送 API 请求 ,那么代理某些 URL 会很有用。 解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~)在webpack.config.js中配置下面简单介绍一下五个经常使用的场景使用一:mmodule.exports = { //... devServer: { ...

2019-06-19 19:10:34 4806

转载 前端各阶段应掌握的技能(学习方向指导)

转载链接:https://www.zhihu.com/question/39721183/answer/83536633综述:当不知道自己的学习方向时,可以看看这个进阶路线,比较推荐的学习过程应该是以兴趣为驱动的,用搜索做辅助:1. 我想做一个个人网站,或者给我们团队或者小组做一些介绍页面。怎么做?搜索发现要学习:HTML、CSS。2. 发现一个网站设计的好漂亮,交互真赞,动画效...

2019-06-10 09:20:37 228

原创 基于canvas实现一个多分支流程图组件

综述:使用canvas实现了一个多分支流向图,总结下主要的实现思路,有需要的朋友可直接使用,假设如果不使用canvas来绘制,使用svg来绘制该怎样来实现?1.效果展示2.实现思路解析需求分析一个流程图,主要由横线,空心圆,空心圆中的实心圆三部分组成,并且随着状态的变化能控制其颜色可以支持多分支,多分支中还包括奇数个分支和偶数个分支,实现思路上两者稍微不同核心思路说明...

2019-06-07 17:47:15 2236 8

原创 javascript设计模式与开发实践

综述:基于javascript设计模式与开发实践(曾探著)一书所写,算是学习笔记吧,16种常见设计模式简述。先将设计模式的概念讲清楚,便于初学者学习,代码很基础,有一个概念很重要。示例代码下载链接:http://www.ituring.com.cn/book/1632 ---随书下载1.设计模式的概念和设计原则1.1设计模式的概念 设计模式一套被反复使用、思...

2019-06-04 09:58:06 1099

原创 前端异常监控实现方案介绍

综述:前端页面是最贴近用户的,异常监控并上报很重要参考文档:https://cdc.tencent.com/2018/09/13/frontend-exception-monitor-research/ https://juejin.im/post/5b53218cf265da0f9313a3deJS 异常处理对于 Javascript 而言...

2019-06-04 09:47:18 710

原创 在线模拟ajax请求—fastmock平台(mock神器)

综述:一个挺好用的模拟ajax请求的平台,对于开发有极大的帮助作用官方说明文档:http://fmdocs.fastmock.site/book/1.要解决的问题fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求,你可以用fatmock实现项目初期纯前端的效果演示,也可以用fastmock实现开发中的数据模拟从而实现前后端分离。在使用fastmock之前,你...

2019-06-02 16:24:59 3134

原创 PWA(Progressive WEB APP)渐进式web应用介绍

综述:将所学的知识主要内容记录下,加深理解和印象1.pwa技术产生的背景目前native app由于不能跨平台,需要多次发版,开发成本高,产生了hybrid App开发模式 基于web APP存在的依赖应用商店,不能缓存使用应用,不能主动向客户端推送消息等问题产生了pwa技术2.pwa技术的核心内容web APP manifest(APP户口本,定义图标,可以直接添加到桌面)...

2019-06-02 15:51:42 300

原创 对于后端同事的几个vue问题的解答

前言:开始学习vue,后端同事问了几个问题,在这里总结一下,谈谈自己的理解,针对人人开源的那个网站的前端demo文件进行说明,人人网是一个非常好的前后端模板下载网站演示地址:http://fast.demo.renren.io 账号密码:admin/admin 前端下载地址:https://github.com/daxiongYang/renren-fast-vue 前端部署文档:h...

2019-05-30 17:24:08 238

原创 前端性能监控解决方案介绍

综述:后端异常监控方案很多,前端却不多,获取页面在大量用户主机上的性能表现为系统的性能优化指明了方向,是一个非常重要的知识点,主要实现思路是通过浏览器为我们提供的performanceAPI来获取各个部分的加载时间,找到系统的薄弱环节为什么监控用(上)户(帝)说,这个页面怎么这么慢,还有没有人管了?!简单而言,有三点原因:关注性能是工程师的本性 + 本分; 页面性能对用...

2019-05-30 15:20:09 1683 3

原创 使用npm安装包本地快速启动前端项目方法

综述:很好的一个快速启动服务的方法1.步骤说明npm i -g serve2.在powershell中cd到希望启动的项目目录下3.输入以下命令serve4.访问窗口显示的链接即可5.如果是移动端,配合前端组件,生成二维码,扫描即可访问...

2019-05-22 20:42:32 1964

原创 前端面试经验分享

核心:前期准备,简历,自信,实力,态度,语言表达 2018-091.简历制作简历要有特点,将博客,GitHub,自己的作品链接,还有电子版本的简历链接直接写上去,很重要。特长描述,工作经历,岗位职责,技能描述,项目经历描述,每一个项目都要能讲的非常的清楚,布局合理,逻辑清晰;2.技术面试对于自己掌握的知识点一定要表现出非常自信,不能表现的没有底气,尽可能将面试官引导到自己...

2019-05-15 15:02:41 3530 3

原创 拖拽和拉伸div元素功能分析与实现

综述:综合考察对于元素的拖动相关API的使用和逻辑思维能力,非常有用的一个实现思路,后期可以将其封装成一个可以复用的组件积累下来1.实现拖拽和四个方向拉伸元素的实现方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>j...

2019-05-08 20:51:37 805

原创 二叉树数据结构及中,前,后序遍历实现

综述:基于二叉树数据结构实现排序,,在百度搜索排序的时候,如果使用冒泡排序,会存在很大的性能问题,如果使用二叉树排序,性能将有大的提高。课程链接:https://www.imooc.com/video/157441.实现一个二叉树数据结构function BinaryTree(){ var Node=function(key){ this.key=...

2019-05-04 21:56:20 88

转载 Service Worker 简介

背景:如何让网页的用户体验做到极致随着 Web 的快速发展,用户对站点的体验期望值越来越高,前端工程师有时候为了几十毫秒的速度优化而费劲心思,消耗大量时间。想要让自己的产品在无数产品中脱颖而出,就必须提升产品的性能和体验。在时间成本高昂的今天,响应速度的提升是开发者不得不面对的话题。前端工程师有很多性能优化的手段,包括 CDN、CSS Sprite、文件的合并压缩、异步加载、资源缓存等等。...

2019-04-29 17:31:38 86

原创 如何渲染几万条数据但不卡主页面之 requestAnimationFrame

综述:window.requestAnimationFrame API在动画方面有非常大的应用价值,当初fangjing在做动画组件的时候,就是使用的这个API实现的,效果还是不错的,百灵中的歌词实现动画使用setInterval()循环遍历实现,在性能不好的盒子上动画顺滑度并不好,使用这个方法实现动画的话,效果是否会更好呢?这里给提供了一种可以借鉴的思路。1.如何渲染几万条数据并不卡主页...

2019-04-29 17:20:31 1121

原创 前端面试题-刷完这篇就够了

这是一篇十分经典的面试 问题汇总https://blog.csdn.net/weixin_33795743/article/details/880217481.使用MySQL实现一个分页功能sql?select * from student order by id desc/asc limit 0,3select * from student order by id ...

2019-04-26 19:11:29 761

空空如也

一套HTML,怎样实现其在pc和移动端都能自适应

发表于 2019-04-03 最后回复 2019-07-12

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