在日常项目中经常会遇到需要对字符串补位的操作,比如
- 向前补0:例如日期,经常会需要
YYYY-MM-DD
的格式,
如果不使用日期库,直接获取月份和日期前面是没有0的,需要手动拼接字符串。
正巧今天要搞日历组件,前面缺一个0总感觉少了点感觉,当时懒得自己写补全了,想着百度一个吧,就搜到了张鑫旭大佬的这篇文章 《JS字符串补全方法padStart()和padEnd()简介》,然后就惊了,原来早在4年前 JS 就原生支持了前后补全了(我这几年在干嘛😢)
在日常项目中经常会遇到需要对字符串补位的操作,比如
YYYY-MM-DD
的格式,正巧今天要搞日历组件,前面缺一个0总感觉少了点感觉,当时懒得自己写补全了,想着百度一个吧,就搜到了张鑫旭大佬的这篇文章 《JS字符串补全方法padStart()和padEnd()简介》,然后就惊了,原来早在4年前 JS 就原生支持了前后补全了(我这几年在干嘛😢)
面试的时候也算是进场会遇到的一个题目了,结论就是 可以也不可以,看原始数据是什么结构的,也看你如何是操作的。
如果说数组元素是基本类型的,比如说是数字类型、字符串、布尔类型的,那么不管是用 .map()
还是 .forEach()
都是无法修改原数组的。
如果说是集合类型的,比如说数组、对象,那么直接操作内部的元素或者属性都是会修改原数组的。
重排会导致重绘,重绘不会导致重排 。
中文环境下面的 重排 会有另外一种称呼方式叫做 回流
。以前一直不理解为什么重排叫回流(直译的 reflow
),导致我在记忆的过程中我总是会把他们混在一起,分不清回流是重排还是重绘。
他们对应的含义我倒是分的还是比较清楚的。简单来说就是,牵扯页面布局的页面更新是重排,重绘就只是一些不影响布局的样式更新……
也算是经典面试题的一部分了,对于父子间的通讯很多时候的使用我都是限于 props
/$emit
来处理,或者 Vuex
/EventBus
这种方式,很少会用到 Provide
/Inject
来处理。其实这是一个很实用的跨级组件间通讯的方式。
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。
看文档中关于这对API的解释就可以看到,向其所有后代 注入一个依赖,所以在跨级组件间通讯,或者 单父多子组件间通讯就会很方便了。
简单的使用可以查看官方文档中的示例,我就不举例了,因为使用起来真的很简单。
最直白的(但是错误的)可以理解为 props
的强化版本,暴露一个可以无视子组件的嵌套层级属性来进行注入。
一个不幸的消息,最近我厂因为资金的问题凉凉了,所以我得开始重新找工作了,最近应该会分享一些和面试题有关并且我觉得有意思的内容,
😁 正巧今天面试的时候被问到的一个面试题我觉得就挺有意思的题目:
你如何判断一个变量是数组?
因为得知公司要解散的消息后比较仓促,也就没有好好刷面试题直接就出去面了(无缝衔接实属渣男了),所以被问道这还算是比较经典面试题的时候,下意识就回答了使用 typeof
来判断,但是想起来不对啊,数组他是对象类型嘛!
😱 卧槽,踩坑里了。
就马上补充了一句:“emmmm….好像用 typeof
不行,数组返回的是 Object
,应该可以通过原型链上的 constructor
来判断….噢,通过 instanceof
也可以!”
不出意料因为踩坑了,紧接着面试官就追问了一句 “还有其它的方式吗?”
考虑了5秒左右答 “没有了,暂时想不起来更多的方式。”,面试官回:“还有一种 isArray
可以判断”
以前一直没有考虑过这种问题,去判断一个对象是否为数组的场景。所以我觉得就还蛮有意思的,所以回来之后想看看还有哪几种方式可以判断是否为数组。
项目新增了一个过期提醒的需求,需要增加定时推送消息的功能,查看文档了解到消息推送可以选择两种推送方式,一种是 小程序订阅消息,另一种是 服务号模板消息。
最简单的肯定是小程序直接拉起订阅消息,不需要做很多的准备,在开放平台设置好订阅消息模板之后直接使用就可以了。
服务号订阅则会麻烦一些,需要从小程序跳转到公众号引导用户关注,然后绑定公众号的OpenID到账户上。
所以肯定是先尝试最简单的小程序订阅消息啦!
前几天写 flex 容器宽度被内容撑开的问题 查文章的时候,看到了一篇 flex:1 到底代表什么?,确实很多时候只是知道 flex:1
的作用,并不清楚他具体代表了什么。
和那篇帖子一样,我原先理解的也是 flex:1
应该是 flex:1 1 auto
的简写。因为设置了 flex:1
之后就可以让容器扩张了。既然 flex
的默认值是 0 1 auto
那么理所当然的就这样认为了。
看完了这个帖子之后发现其实并不是这样。
简写的 flex:1
其实是 flex:1 1 0%
,其中的 flex-basis
的值从默认值变成了 0%
,但是文章并没有说明为什么会这样。
确实这个东西不值得深入研究为什么,只需要知道和理解就可以了。
但,正好昨天在翻《CSS新世界》的时候看到了这部分内容!
在弹性布局中,一个
flex
子项的最终尺寸是基础尺寸(或内容尺寸)、弹性增长或收缩、最大最小尺寸共同作用的结果。
最终尺寸计算的优先级是:
最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸
- 基础尺寸由
flex-base
属性或width
属性,以及box-sizing
盒模型共同决定;- 内容尺寸最指最大内容宽度,当没有设置基础尺寸是会顶替基础尺寸的角色;
- 弹性增长指的是
flex-grow
属性,弹性收缩指的是flex-shrink
属性;- 最大尺寸主要受
max-width
属性限制;最小尺寸则比较复杂,受最小内容宽度、width
属性和min-width
属性共同影响。
很早之前就遇到过这个问题但没有整理,当时处理完问题之后就没有管了。昨天又遇到了同样的问题,因为嵌套的层次很深折腾了有2个小时,所以还是需要记录下来以免未来又忘了。
其实很简单,容器使用
width:0;flex:1;
即可解决问题。
但是稍微有点没有理解的是:为什么设置宽度为 0
时,使用 flex-grow:1
可以使容器放大,但是设置宽度为 100%
时,使用 flex-shrink:1
并不会让容器缩小。
今天小程序完成了一个新功能,在自测的时候发现了一个问题,小程序的返回按钮点击没反应了,一开始以为是模拟器的问题,结果使用实机测试同样复现了这个问题。
首页 => wx.navigateTo =>
新功能列表页 => wx.navigateTo =>
新功能添加页 => wx.redirectTo =>
新功能详情页 => 返回按钮 =>
新功能列表页 => 返回按钮 =>
首页
结果从 详情页 返回 列表页 之后,返回按钮点上去没反应了!!!页面中添加一个自定义按钮调用 wx.navigateBack
返回也不行。
监听了 wx.navigateBack
的 success
、fail
、complete
三个回调之后发现,success
和 fail
都不执行,只执行了 complete
的回调,输出为:
complete: {errMsg: "fail:navigateBack intercepted"}
副作用,是相对于主要作用的,并不只是“坏”作用
因为“药物的副作用”,一直以来都没有很好的理解编程中 “副作用” 一词,想当然的把它理解为了 一些“负面”的作用。
对于 “副作用
” 科书版的解答就是:
但是很笼统,对于已经有刻板影响的中文世界,还是很容易曲解的。
正巧今天在水群的时候提到了这个词,发现其实还有很多人和我有一样的问题,并没有很好的理解。