自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

sanlyshi's front-end road

stay foolish ,stay hungry

  • 博客(182)
  • 收藏
  • 关注

转载 第一性原理

如果5年前有人跟你说,他要造无人驾驶汽车,还要挖一条能跑超音速高铁的隧道,再弄出个能自由往返的火箭,把100万人移民到火星上。你一定会以为这个人是个异想天开的疯子!但是,这些荒诞的梦想真的正在一步步实现,这个人就是特斯拉的CEO——埃隆·马斯克。马斯克涉足的领域之宽令人咋舌:从在线支付,到无人汽车、超级隧道、太阳能、航天技术、火星移民。Zip2,Paypal,SpaceX,SolarCity,Hyperloop,TESLA,这一串令人头晕目眩的公司背后都有马斯克的身影。其中,Spac

2022-04-08 09:53:18 4156

原创 思想形成人的伟大

思想形成人的伟大。人只不过是一根苇草,是自然界最脆弱的东西;但他是一根能思想的苇草。用不着整个宇宙都拿起武器来才能毁灭,一口气、一滴水就足以致他死命了。然而,纵使宇宙毁灭了他,人却仍然要比致他于死命的东西更高贵得多;因为他知道自己要死亡,以及宇宙对他所具有的优势,而宇宙对此却是一无所知。因而,我们全部的尊严就在于思想。正是由于它而不是由于我们所无法填充的空间和时间我们才必须提高自己。因此,我们要努力好好地思想;这就是道德的原则。能思想的苇草——我应该追求自己的尊严,绝不是求之于...

2020-10-27 16:13:06 391

原创 Prepare the handwritten code

【代码】Prepare the handwritten code。

2024-05-16 17:26:34 104

原创 websocket

【代码】websocket。

2024-05-10 18:35:04 118

转载 前端qiankun从搭建到部署

微前端qiankun从搭建到部署的实践 - 掘金

2024-04-11 17:58:32 67

原创 【微前端】single-spa 到底是个什么鬼

以上就是 singles-spa 文档里的所有内容了(除了 SSR 和 Dev Tools,前者用的不多,后者自己看一下就会了,不多废话)。single-spa 文档就这些了嘛?没错,就这些了。文档好像给了很多“最佳实践”,但真正将所有“最佳实践”结合起来并落地的又没多少。比如文档说用 Shadow CSS 来做子应用之间的样式隔离,但是 single-spa-leaked-globals 又不让别人在一个 url 上挂载多个子应用。感觉很不靠谱:这里行了,那里又不行了。

2023-10-16 14:07:59 1084

原创 Markdown常用语法介绍

由于Markdown的语法基本都是用的符号表示,所以当需要直接输出某些特定的符号的时候,就必须使用反斜杠的转义作用了,使用方法很简单,跟大部分的编程语言的用法一样,只需要在特定的符号前面加上一个反斜杠就可以了,例如输出\本身,就需要使用\\来表示了。第二个部分是表示列的对齐方式,有左对齐、居中对齐和居右对齐三种类型,直接看例子吧, --- 表示了默认的左对齐, :--- 表示 左对齐 , ---: 表示 右对齐 , :---: 表示居中对齐。

2023-08-15 17:05:21 1638

原创 轻松学会 React 钩子:以 useEffect() 为例

这很合理,由于副效应不依赖任何变量,所以那些变量无论怎么变,副效应函数的执行结果都不会改变,所以运行一次就够了。实际使用中,由于副效应函数默认是每次渲染都会执行,所以清理函数不仅会在组件卸载时执行一次,每次副效应函数重新执行之前,也会执行一次,用来清理上一次渲染的副效应。上面的例子是错误的写法,副效应函数里面有两个定时器,它们之间并没有关系,其实是两个不相关的副效应,不应该写在一起。每次渲染都执行,这时可以使用它的第二个参数,使用一个数组指定副效应函数的依赖项,只有依赖项发生变化,才会重新渲染。

2023-07-26 10:55:17 738

原创 react路由

<React-Router>超全react路由知识点(跳转、传参、子路由、重定向等)_react router 跳转_moanmu的博客-CSDN博客

2023-07-12 17:27:37 138

原创 yarn的基本使用

使用Homebrew安装yarn 如果不熟悉Homebrew,请。如果你使用nvm来管理node版本的话,使用以后命令安装。

2023-07-12 10:44:52 119

转载 什么是前台、中台、和后台?

在传统的前台-后台架构中,各个项目相互独立,许多项目都在重复发明同样的功能,让项目本身变繁琐,也让开发效率变低。面向内部运营人员的管理系统、配置系统,如:电商配置后台的商品管理、订单管理、会员管理、财务管理等。也包括服务端各种实时响应用户请求的业务逻辑,如:商品查询、订单系统等。整合某种通用能力提供给前台,包括业务中台、技术中台、数据中台、算法中台。算法平台:为各个项目提供算法,如推荐算法、搜索算法等。如:支付、商品管理、营销、用户、搜索、交易中心等。如:用户画像、数据可视化、日志分析等。

2023-02-27 09:40:09 4875

原创 angular 随笔而记

如果没有 ​ngForm ​这个属性值,​itemForm ​引用的值将是 HTMLFormElement 也就是 ​​ 元素。而 ​Component ​和 ​Directive ​之间的差异在于 Angular 在没有指定属性值的情况下,Angular 会引用 ​Component​,而 ​Directive ​不会改变这种隐式引用(即它的宿主元素)。而使用了 ​NgForm ​之后,​itemForm ​就是对 ​NgForm ​指令的引用,可以用它来跟踪表单中每一个控件的值和有效性。

2023-02-25 10:17:26 430

转载 angular 中 rxjs map, flatMap/mergeMap, switchMap区别

rxjs map, flatMap/mergeMap, switchMap区别

2023-01-10 08:54:14 530

原创 通过webpack解决浏览器兼容问题

这里记录一下我们如何通过webpack来实现兼容。

2022-12-29 20:29:39 2406

转载 vue3.0新特性

v3新特性

2022-10-30 18:56:33 6391

转载 一站式搞明白webpack中的打包情况,代码分割

打包情况,代码分割

2022-10-28 14:26:18 1400

转载 详解XSS和CSRF

https://www.cnblogs.com/zhouyyBlog/p/14505961.html

2022-10-28 10:40:48 1790

转载 面试准备:浏览器缓存策略之 强缓存与协商缓存

面试准备:浏览器缓存策略之 强缓存与协商缓存

2022-10-11 09:24:15 546

原创 当我真正开始爱自己

当我真正开始爱自己, 我才认识到,所有的痛苦和情感的折磨, 都只是提醒我:活着,不要违背自己的本心。 今天我明白了,这叫做“真实”。 当我真正开始爱自己, 我才懂得,把自己的愿望强加于人, 是多么的无礼,就算我知道,时机并不成熟, 那人也还没有做好准备, 就算那个人就是我自己。 今天我明白了,这叫做“尊重”。 当我开始爱自己, 我不再渴求不同的人生, 我知道任何发生在我身边的事情, 都是对我成长的邀请。 如今...

2022-05-26 16:52:51 145

转载 Vue scss 引入变量报错

转载地址:Vue scss 引入变量报错_老谭TYH的博客-CSDN博客_scss 引用变量报错

2022-03-31 14:11:12 2370

转载 理解CSS3 transform中的Matrix(矩阵)

转载自:理解CSS3 transform中的Matrix(矩阵) « 张鑫旭-鑫空间-鑫生活

2022-03-15 14:58:35 112

原创 CSS动画 animation与transition

  一、区分容易混淆的几个属性和值  先区分一下css中的几个属性:animation(动画)、transition(过渡)、transform(变形)、translate(移动)。  CSS3中的transform(变形)属性用于内联元素和块级元素,可以旋转、扭曲、缩放、移动元素,它的属性值有以下五个:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix;  transform(变形)是CSS3中的元素的属性,而translate只是transfo

2022-02-11 17:04:15 5257

原创 js blob base64 file 的相互转换

file和base64file文件转换为base64,得到base64格式图片var reader = new FileReader();reader.readAsDataURL(this.files[0]);reader.onload = function(){ console.log(reader.result); //获取到base64格式图片};12345base64转换为filefunction dataURLtoFile(dataurl, filename)...

2022-01-19 16:24:07 591

原创 JS共享传参

目录导航一、概念 按值传递 VS. 按引用传递 按共享传递 call by sharing 二、实例解析 探究JS值的传递方式 按共享传递 call by sharing 基本类型的不可变(immutable)性质 一、概念  我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference)。在计算机科学里,这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传..

2021-12-06 17:07:00 386

原创 看懂复杂的 TypeScript 泛型运算

对于从 JavaScript 转来的 TypeScript 的初学者来说,一开始无脑用一个新的 interface规定一切的方式确实很过瘾。但是,当不得不尝试提高函数或组件的通用性时,使用泛型成了必须的选择。当尝试阅读一些用 TypeScript 开发的库的源码时,可能会被各种尖括号包裹的复杂泛型运算搞的晕头转向。本文的目的在于对泛型中的常见关键词和用法进行介绍,并且尝试用一定数量的例子来方便理解泛型。在 TypeScript中, type和 interface关键字中在多数情况下功能是相同的,..

2021-11-17 15:43:12 577

转载 typescript各类符号

!非空断言操作符在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言,x! 将从 x 值域中排除 null 和 undefined 。typescriptfunction myFunc(maybeString: string | undefined | null) { const onlyString: string = maybeString; // Error const ignoreUn.

2021-11-01 11:35:40 579

转载 await不能用在forEach中?

不知道你是否写过类似的代码: functiontest(){ letarr=[3,2,1] arr.forEach(asyncitem=>{ constres=awaitfetch(item) console.log(res) }) console.log('end') } ...

2021-10-27 15:44:10 2763 2

原创 mac mysql navcat

mac上搭建mysql环境配置和Navicat连接mysqlmac上搭建mysql环境配置1、下载mysql for mac:MySQL :: Download MySQL Community Server (Archived Versions)注意:mysql版本要和你的MAC版本保持一致2、一路傻瓜式点击下一步此处选择“Use Legacy Password Encryption”,否则使用navicat连接mysql的时候,会报无法加载身份验证的错误。3、环境配置.

2021-10-26 09:57:05 173

原创 chrome调试

1.Elements    1.选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件    2.在 Element 选项卡中可以修改html  2.断点在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断点, 在循环中需要断点时比较有用 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信.

2021-10-20 14:52:35 352

转载 ThreeJS中的点击与交互——Raycaster的用法

基础概念坐标系我们的手机屏幕是二维的,但是我们展示物体的世界是三维的,当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建,而转化为屏幕坐标展示在我们眼前,则需要经历多道矩阵变化,中间webGL替我们操作了许多事情。世界坐标系:在webGL中,世界坐标系是以屏幕中心为原点(0, 0, 0),且是始终不变的。你面对屏幕,你的右边是x正轴,上面是y正轴,屏幕指向你的为z正轴。长度单位这样来定:窗口范围按此单位恰好是(-1,-1,-1)到(1,1,1)。 屏幕坐标系:web...

2021-09-02 14:15:08 1739

原创 前端设计模式

最近对各种设计模式挺感兴趣,无论是架构设计还是代码优化都有可能用到,所以,每天掌握一个锻炼一下编码思维。废话不多说,直入正题。对前端编程来说,尤其是vue的使用者们,观察者模式是最常用而且最挂在耳边的,所以,不妨从这个开始搞起。下面的话这段带色的话,可以忽略,不影响后续阅读,仅做了解用:设计模式总体来说设计模式分为三大类:创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行

2021-07-16 16:13:32 294

原创 JS基础-一个完美的递归函数

一、什么是递归函数 二、完美的递归方法三、总结一、什么是递归函数 递归函数是在一个函数内通过名字调用自身的情况。二、完美的递归方法 写法一:/**方法说明:递归阶乘函数*/function test(num){ if(num <=1){ //递归停止的条件,必须得需要 return 1; } else{ //调用递归 retu...

2021-07-16 14:57:01 161

转载 JavaScript 内存泄漏

一、什么是内存泄漏?程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。有些语言(比如 C 语言)必须手动释放内存,程序员负责内存管理。char * buffer;buffer = (char*) malloc(42);// Do s..

2021-07-16 14:53:31 103

转载 浅析 Tree Shaking

当 Javascript 项目达到一定体积时,将代码分成模块会更易于管理。但是,当这样做时,我们最终可能会导入实际上未使用的代码。Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。我们来举个例子,下面是一个简单的 Javascript 文件,命名为mathUtils.js,主要实现了基础的数学运算。export function add(a, b) { console.log("add"); return a + b;}export fun...

2021-07-13 11:08:19 130

转载 webpack的out.libraryTarget属性

https://blog.csdn.net/frank_yll/article/details/78992778

2021-07-08 14:26:17 110

原创 canvas rotate中心点问题

ctx = document.getElementByIdx_x_x_x('canvas').getContext('2d');ctx.fillStyle = "rgb(250,0,0)";ctx.save();ctx.translate(50,50);//这个translate(50,50)发生在rotate()之前,其目的是将旋转点从默认点(0,0),移动到(50,50),下面紧跟着的rotate就是按照这个点来转//rotate方法的旋转点完全是按照...

2021-06-24 17:54:30 1327

转载 前端之Vue项目如何做单元测试

关于单元测试,最常见的问题应该就是“前端单元测试有必要吗?”,通过这篇文章,你将会了解单元测试的必要性,以及在Vue项目中如何能够全面可靠的测试我们写的组件。单元测试的必要性一般在我们的印象里,单元测试都是测试工程师的工作,前端负责代码就行了;百度搜索Vue单元测试,联想词出来的都是“单元测试有必要吗?”“单元测试是做什么的?”虽然我们平时项目中一般都会有测试工程师来对我们的页面进行测试“兜底”,但是根据我的观察,一般测试工程师并不会覆盖所有的业务逻辑,而且有一些深层次的代码逻辑测试工程师在不了解.

2021-06-23 17:02:02 2496

转载 三种前端实现VR全景看房的方案!

前言事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信息点,点击之后可以呈现更多信息(视频,图文等)...image.png我第一反应是用3D引擎,因为我不久前刚用three.js做过一个BMW的在线展厅,基本把three.js摸熟了。2021-06-03 11_01_41.gif会另写一篇文章教大家用threejs做这个[BMW在线DIY],感兴趣的小伙伴请关注...

2021-06-21 17:17:10 5365 2

原创 一个简单的switch开关

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>简单美观switch开关</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><style> htm...

2021-03-16 18:04:29 164

转载 何谓敏捷开发

敏捷开发(agile development)是非常流行的软件开发方法。据统计,2018年90%的软件开发采用敏捷开发。但是,到底什么是敏捷开发,能说清的人却不多。本文尝试用简洁易懂的语言,解释敏捷开发。一、迭代开发敏捷开发的核心是迭代开发(iterative development)。敏捷一定是采用迭代开发的方式。那么什么是"迭代开发"呢?迭代的英文是 iterative,直译为"重复",迭代开发其实就是"重复开发"。对于大型软件项目,传统的开发方式是采用一个大周期(比如一年...

2021-03-12 09:24:49 2891

前端思维导图整理,敬请下载共享

前端思维导图整理,敬请下载共享

2023-10-10

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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