一些 JavaScript 技巧

一、 && 和 || 逻辑运算符 例一 假设我们想返回一个变量的长度,但是我们不知道变量的类型。我们可以使用 if/else 语句来检查 foo 是可接受的类型,但是这可能会变得非常冗长。或运行可以帮助我们简化操作: 1return (foo || []).length 如果变量 foo 是 true,它将被返回。否则,将返回空数组的长度:...

Read More

2019前端面试押题

注意事项 『很多』公司面试题都是常年不更新的,『可能』你搜该公司往年的面经,就能猜到今年的题目。 很多面试官的知识也是常年不更新的,你不要答得太『偏激』,应该了解大众的想法。 本押题主要强调答题思路,具体答案都可以搜到(不要用百度) 技巧 遇到比较抽象的题目就具体化(举例),遇到比较具体的题目就抽象化(阐述) 抽象题目搜知乎,代码题目搜 Stackover...

Read More

单标签实现按钮涟漪效果

主要通过更换 css 上的 animation 来实现涟漪效果。但是大部分的实现方法会增加一个空白节点,所以想出通过操作伪元素的方案来做。代码如下在线体验1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556...

Read More

如何用js改变伪元素的样式?

在工作偶尔会遇到改变伪元素样式的场景,虽然也有很多解决方法,但是这个方法能让你像操作正常元素一样操作伪元素样式。 1234567891011121314151617181920212223242526272829function ruleSelector(selector) { function uni(selector) { r...

Read More

所以我是文科出身?

一篇新闻报道提到,美国就业行情最好的十种工作,八种是 STEM 岗位。 所谓 STEM,就是科学(Science)、技术(Technology)、工程(Engineering)、机械(Machine)的缩写。也就是说,就业最好的工作,80%是理工科岗位。这跟我的感觉一致,理工科的就业远远好于文科。 现在是信息社会,大量的工作都是技术岗,需要技术工人和工程师,...

Read More

Attrs 和 Listeners

这两个属性是 vue 2.4 版本之后提供的,它简直是二次封装组件或者说写高阶组件的神器。在我们平时写业务的时候免不了需要对一些第三方组件进行二次封装。比如我们需要基于 el-select 分装一个带有业务特性的组件,根据输入的 name 搜索用户,并将一些业务逻辑分装在其中。但 el-select 这个第三方组件支持几十个配置参数,我们当然可以适当的挑选几...

Read More

Vue-cli 安装 vue 方法

总是要上官网搜索vue-cli,上网速度太慢,记录于此。 Vue CLI >= 312345npm install -g @vue/cli# ORyarn global add @vue/clivue create my-app Vue CLI 2123npm install -g @vue/cli-init# vue init now wo...

Read More

关于Vue.prototype 和 vue.use()

首先,不管你采用哪种方式,最终实现的调用方式都是 1vm.api() 也就是说,两种方法,实现的原理都是在 Vue.prototype 上添加了一个方法。所以结论是“没有区别”。 再来说说 Vue.use() 到底干了什么。 我们知道,Vue.use() 可以让我们安装一个自定义的Vue插件。为此,我们需要声明一个 install 函数 1234567891...

Read More

如何选择开源许可证?

如何为代码选择开源许可证,这是一个问题。 世界上的开源许可证,大概有上百种。很少有人搞得清楚它们的区别。即使在最流行的六种—-GPL、BSD、MIT、Mozilla、Apache和LGPL—-之中做选择,也很复杂。 乌克兰程序员Paul Bagwell,画了一张分析图,说明应该怎么选择。这是我见过的最简单的讲解,只用两分钟,你就能搞清楚这六种许可证之间的最大...

Read More

谈谈css里面伪类和伪元素

目录(按 vscode 中的提示来) 伪元素一、 ::after 常用方法 二、 ::backdrop 设置某些全屏元素的背景例如视频的全屏后的背景(默认为黑色)我们可以改成这样或者配合 fullscreen API,看这里其对于背景的控制优先级小于 :fullscreen 三、 ::before 常用方法 四、 ::content 暂无 五、 :...

Read More