- 博客(55)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 技术架构之术
1、结构性特征易理解、可复用、可移植、可扩展、可配置、可维护、可测试2、运行时特征可靠性、稳定性、高安全、可伸缩、易用性、可用性、高性能、可观测3、交付性特征高效率、高适配、标准化、灵活性、易定制、统一性、开放性。
2023-10-19 20:15:40
120
原创 window.open和window.location.href的区别是什么
总之，window.location.href适合在当前浏览器窗口或标签页中进行简单的页面跳转，而window.open适合在新的浏览器窗口或标签页中打开一个新的页面。1. window.open会打开一个新的浏览器窗口或标签页，而window.location.href会在当前浏览器窗口或标签页中重定向到目标URL地址。2. window.open可以设置窗口属性，如窗口大小，位置，标题等，而window.location.href只能设置目标URL地址。
2023-09-08 19:48:16
1568
1
原创 dangerouslySetInnerHTML，React中显示html代码
当用户输入或者获取到的数据是一段HTML代码的时候，dangerouslySetInnerHTML就可以把这一段代码变成HTML，然后插入到某个地方。
2023-08-03 18:58:09
602
原创 推荐的截图工具，超级好用的几款小工具
Snippaste：主要用于贴图Faststone capture：小巧、全能，截图、录屏首选Fireshot：网页留存好帮手
2023-06-29 11:23:35
849
原创 微服务架构和分布式架构的区别
微服务架构和分布式架构的区别有：1、含义不同；2、概念层面不同；3、解决问题不同；4、部署方式不同；5、耦合度不同。其中，含义不同指微服务架构是一种将一个单一应用程序开发为一组小型服务的方法，每个服务运行在自己的进程中，而分布式系统是若干独立计算机的集合。
2023-06-27 17:00:56
412
原创 职场人被降职后应该如何应对
但是又和我说我是小组长，要我带大家，给我提要求。虽然，薪资不变级别不变，而且工作少了2/3，看起来性价比提升了，但是人走茶凉的滋味确实不好受，应该如何调整心态呢？要做的工作，汇报对象都发生了变化。——职场里，难有能说真话的人，要么考验人性，要么利益冲突。因此，尽可能少的去散播负能量，去议论是非，去抱怨不公。——职场里，看人下菜碟也是正常，所以尽可能深呼吸，不要玻璃心。控制好自己的表情，情绪，做低调，冷静，稳重的打工人。——既然下来了，那就面对现实，姿态放低，态度放好，不结仇，广结善缘，毕竟风水轮流转。
2023-05-06 03:20:52
1892
原创 CSS文件中的图片Referer判断差异
分析可能是苹果手机上的浏览器中，a.CSS样式中的b.jpg背景图片的样式referer来源是站点的主域名地址，而其他设备浏览器却会把图片的referer来源更改为样式文件的路径。页面资源和页面引入资源的来源是都是站点的主域名地址，但是CSS文件中的图片资源的referer来源变成了样式文件路径。当前端项目打包部署上OSS上，并且OSS上设置了防盗链的配置，就会导致CSS文件中引入的图片文件访问不了。在开发的过程中，通常，页面会引用了样式文件也会引入图片，同时样式文件给我们的页面也会设置背景图片。
2023-04-23 17:05:58
121
原创 前端3D开发，你需要了解的知识汇总
前端基础语言基础：要对html/css/javascript有一定了解；目前很多项目也使用typescript来代替javascript；大概了解vue/react/jquery等，WebGL项目一般都是一个前端项目的一部分，所有会结合前端框架进行传输和交互。工程化：项目运行环境搭建，一般选择node.js环境或者搭建apache环境；项目规范化；项目测试等。WebGL/Canvas/SVG：Canvas画布，html的一个元素，支持2D和3D绘图；
2022-10-25 10:03:24
2161
原创 windows下node版本管理工具nvm
1、下载nvmhttps://github.com/coreybutler/nvm-windows/releases2、使用nvm2.1. 查看安装过的node版本打开cmd 或者 git bash 窗口都行。输入 nvm list 可以查看你本地安装好了的node版本。2.2. 安装某个node版本使用 nvm install [arch] 安装某个版本的node。version表示你要安装的版本号；arch（可选）指定安装32位或64位版本（默认为系统arch）。2.3. 使用某个
2022-02-02 11:53:36
1584
原创 Web前端面试题集锦
喜马拉雅音频学习地址：http://m.ximalaya.com/album/41688615目录待更新：已完成：JS中for of和for in的区别ES6中常见语法package. json中版本管理，～和^的区别JS中有哪些数据类型CSS中的BFCCSS盒模型讲讲JS中的事件机制闭包及其应用浏览器中的HTTP缓存讲一下httpsJS中的作用域JS中的原型和原型链...
2021-08-02 19:27:52
68
原创 JS取URL中的参数
平时写前端逻辑，很多时候会遇到，需要取url中参数的情况，这个时候我们可能会取url后面的参数一顿匹配。1、通过serach取到参数// http://127.0.0.1/index?id=999&name=888const {serach = ''}=window.location;// 取到的值就是 ?id=999&name=8882、匹配取参数平时普通的办法，就是取到的值通过正则匹配到id和name。如下。const getvl=(name) => {
2021-03-04 09:53:17
414
1
原创 不错的学习网站
深度剖析：如何实现一个 Virtual DOM 算法https://github.com/livoras/blog/issues/13
2021-02-05 11:44:06
67
原创 ES6中常用语法
ECMAScript 6.0（也可以称为ECMAScript2015），ECMAScript 6.0简称 ES6，是 JavaScript 语言的标准。出来的时间已经很久了，但是我们在工作中，有时候也不会使用。今天我们就来介绍一下。1、块级作用域（let、const）块级作用域，就是有{}括号中可用范围，不像之前var定义的变量都是函数作用域。let定义的变量可以改变值，const定义的都是静态变量，不可以修改的。但是像数组，只对数据进行push操作的话，也可以定义成const的。2、模版字符串
2021-01-10 18:02:48
5288
2
原创 如何写出优雅的React代码Clean Code vs. Dirty Code
如何写出优雅的React代码Clean Code vs. Dirty Code不要写重复的代码// Dirtyconst MyComponent = () => ( <div> <OtherComponent type="a" className="colorful" foo={123} bar={456} /> <OtherComponent type="b" className="colorful" foo={123} bar={456} /
2020-12-04 17:06:19
489
转载 可复制的沟通力
1、沟通力为什么重要？提升社会竞争力；加速事业的成功；人际关系的润滑剂。2、沟通的三大要素明确的沟通目标；善用语气语调；用肢体语言为沟通加分。3、好的沟通该具备以下特点准确的表达了自己的感受；表达时要直接精确；用温柔缓慢深沉的声音。4、沟通的原则（1）沟通的真实性。（2）沟通的完整性。（3）沟通的时效性。（4）沟通的同一性。（5）沟通的目标性。5、如何记住沟通目标：你要为自己创造什么？你要为对方创造什么？你要为你们的关系创造什么？第三章 沟通高手都善于掌控情绪6、学会处理情绪和信息
2020-12-04 14:08:23
1340
原创 电脑初始化，前端开发要做的事
不管是新入职公司，还是换新电脑，这种情况下，都会涉及到，电脑被初始化了，我们需要安装一堆新的环境。安装node环境1、安装node环境。这时候会自动安装上npm环境。就可以通过npm 安装其他的依赖了。要是涉及到node版本管理，就需要安装nvm，在mac电脑上安装上就能用，很方便。windows电脑上支持的好像不太好。我用的windows安装上之后不好使。2、通过npm 安装typescript。3、安装cnpm。安装软件1、开发工具vscode，去官网下载对应的版本安装上就可以了。然后在v
2020-11-20 14:51:58
155
原创 如何过不焦虑的人生
焦虑有积极影响也有消极影响。焦虑可以让你打破舒适圈，突破自己。我到底怎么了，我在担心什么？转成自己真正要做的是什么。把我该在怎么办，转成我将怎么办？即要去做，也不要太执着。情绪，1.0版本是引发的；2.0版本是自己创建出来的。我们是情绪的主人，可以自己控制的。保持身体健康。三个方式，饮食健康，定期锻炼，保持充足的睡眠。快乐，主要取决于环境。我们自己是情绪的主人，而不是情绪的奴隶。要保持身体的健康。《头脑特功队》，《别对我撒谎》，两部电影。如何做出最佳的选择？决策三步走。第一步，去掉无用的选项
2020-10-24 22:43:43
115
原创 JS中有哪些数据类型
ES5中， 6种：Number、String、Boolean、undefined、object、NullES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。本质上是一种唯一标识符，可用作对象的唯一属性名，这样其他人就不会改写或覆盖你设置的属性值。谷歌67版本中还出现了一种 bigInt。Javascript 中的任意精度整数，可以安全存储和操作大整数。（但是很多人不把这个做为一个类型）。JS的基本类型和引用类型有哪些呢？基本类
2020-10-23 22:47:43
147
原创 对CSS中的BFC的理解
CSS中的BFC详解一、何为BFC二、形成BFC的条件三、BFC的特性四、实践是检验真理的唯一标准（1）解决外边距合并问题（2）制作自适应宽度的布局（3）清除元素内部浮动一、何为BFCBFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件1、浮动元素，float 除 none 以外的值2、定位元素，position（absolute，fixed）3、display 为以
2020-10-16 13:39:02
198
原创 说一下https
https是一种安全版的http，传输的数据是通过 TLS（安全传输层协议）或其前辈 SSL（安全套接层）加密的。显而易见，https比http更加安全，那这种安全是怎么实现的呢？先了解一下加密算法，对称加密和非对称加密。对称加密加密和解密都是使用的同一种密钥。优点：算法公开、计算量小、加密速度快、加密效率高，适合加密比较大的数据。缺点：交易双方需要使用相同的密钥，也就无法避免密钥的传输，而密钥在传输过程中无法保证不被截获，因此对称加密的安全性得不到保证。非对称加密加密和解密需要使用两个不同
2020-10-09 13:45:06
277
2
原创 作用域和闭包理解
作用域作用域为可访问变量，对象，函数的集合。局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。闭包闭包可以让你从内部函数访问外部函数作用域。function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName;}
2020-09-10 18:31:59
357
原创 讲讲JS中的事件机制
1.addEventLsteneraddEventListener拥有userCapture参数，当该参数为true时执行事件捕2.attachEvent3.内联事件写法οnclick=“xxx()”前两种实际上是相同的函数在不同浏览器的写法而已。两者都是为元素注册事件，但是有区别：i.addEventLstener符合W3C标准，因而大部分浏览器会支持attachEvent是IE专有，在IE9以下浏览器中得使用他，IE9+已经转而支持addEventLstener，放弃了attachEve
2020-09-10 18:02:54
256
原创 js中箭头函数和this
1、箭头函数理解箭头函数内的this对象，就是定义时所在的对象，而不是使用时所在的对象。function foo() { setTimeout(() => { console.log('id:', this.id); }, 100);}var id = 21;foo.call({ id: 42 });// id: 42上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执
2020-09-10 17:55:50
2861
原创 对JS中原型的理解：原型，原型链
原型其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象，所有对象实例可以共享它所包含的属性和方法。原型链1）原型链解决的主要是继承问题2）每个对象拥有一个原型对象，通过 proto 指针指向其原型对象，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一层一层，最终指向 null(Object.proptotype.__proto__指向的是null)。这种关系被称为原型链(prototype chain)，通过原型链一个对象可以拥有定义在其他对象中的属性和方法3）构
2020-09-10 15:52:42
155
原创 css中垂直居中方法总结
1、verticle-align:middledisplay：inline-block2、display:flex3、display:table-cell已知父元素高度通过transform实现CSS垂直居中position:relativetransform: translateY(50%);
2020-09-10 12:37:22
110
原创 对VUE双向绑定的理解
说一下VUE双向绑定的原理？答：vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。通过Object.defineProperty()来实现数据劫持，这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。代码演示：defineProperty的用法var Book = {}//var name = '';//第一个参数：定义属性的对象。//第二个参数：要定义或修改的属性的名称。//第三个参数：将被定义或修改的属性描述符。Object.define
2020-09-07 23:30:10
211
原创 浏览器本地存储(Application\Storage\Cache)
浏览器本地存储1．Application Cache应用程序缓存（manifest）2． Web Storage（Session Storage和Local Storage）3． 数据库（Web SQL Database和Indexed Database）4． Cache Storage1．Application Cache应用程序缓存（manifest）为了支持Web App离线而开发的应用程序缓存（Application Cache，App Cache）。该缓存类似于浏览器缓存，都是进行文件缓存，而
2020-07-22 18:41:02
3016
原创 浏览器缓存（强缓存和协商缓存）
1、概念浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。2、优点减少了冗余的数据传输，节省了网费减少了服务器的负担，大大提升了网站的性能加快了客户端加载网页的速度3、两种缓存机制强缓存不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码； 并且Size显示from disk cache或from memory cache
2020-07-10 19:12:27
236
原创 适合程序员写PPT的工具
提供对于各种语言代码的语法高亮，多种高亮风格选项，友好的代码展示体验，让程序员写PPT更加得心应手。https://ppt.baomitu.com/
2020-07-02 15:58:20
380
原创 前端项目中用vue-i18n实现国际化
1、在项目中安装国际化包的依赖npm i vue-i18n --save2、配置文件作为独立的i18n文件，在main.js中引入。要是国际化文件不多，建议用非异步方式引入。异步方式引入，一次只加载一种国际化包lang/index.jsimport Vue from 'vue';// import Cookies from 'js-cookie'import VueI18n from 'vue-i18n';Vue.use(VueI18n);class I18n extends
2020-06-08 18:50:31
1555
原创 CSS之flex弹性盒子布局
CSS之flex弹性盒子布局1、简介2、基本概念3、父容器属性 6个3.1 flex-direction属性决定主轴的方向3.2 flex-wrap 主轴上排不下怎么换行3.3 flex-flow 上面两个属性的简写3.4 justify-content 子容器在主轴上的排列对齐方式3.5 align-items 子容器在侧轴上的排列对齐方式3.6 align-content4、子容器属性 6个4.1 order 排列顺序。数值越小，排列越靠前4.2 flex-grow 放大比例4.3 flex-shri
2020-06-02 15:49:40
302
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人