Griffin23

Griffin23 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

Griffin23 赞了回答 · 4月6日

解决关于面试网红题 a == 1 && a == 2 && a == 3 的问题

因为比较操作符在比较数字的时候如果比较的对象非数字,则会调用该对象的Symbol.toPrimitive方法,不存在继续调valueOf方法,不存在继续调toString方法,proxy的get操作拦截的是对象的属性访问,所以当比较proxy和数字时相当于转换为a[Symbol.toPrimitive]() == 1;所以get需要返回一个函数
image

关注 5 回答 5

Griffin23 回答了问题 · 3月24日

可否通过url给页面传入个css,改变页面样式?

服务端渲染。

关注 7 回答 6

Griffin23 回答了问题 · 3月24日

解决js 如何移除带参数的监听事件

var handler
function genHandler(cb) {
    return function() {
        execScrollBottomFun(cb)
    }
}

function execScrollBottomFun (cb) {
    。。。
}

export function execScrollBottomCb (cb) {
    handler = genHandler(cb)
    window.addEventListener('scroll', handler);
}

export function removeExecScrollBottomCb (cb) {
    window.removeEventListener('scroll', handler);
}

关注 6 回答 5

Griffin23 赞了文章 · 2月24日

纯CSS免费让网站拥有暗黑模式切换功能

作者:JowayYoung
仓库:GithubCodePen
博客:官网掘金思否知乎
公众号:IQ前端
特别声明:原创不易,未经授权不得转载或抄袭,如需转载可联系笔者授权

前言

暗黑模式这个概念最早起源于MacOS系统Mojave,提供浅色主题深色主题两种皮肤供用户选择,深色主题就是我们常说的暗黑模式。为了眼睛健康,笔者在手机、平板和电脑上都选择了暗黑模式

皮肤主题

随着苹果官方逐渐要求各大系统平台都得适配暗黑模式,所以笔者也探索出一种应该是市面上最低成本网站暗黑模式适配方案

认识笔者的朋友应该都知道笔者是一位重度CSS发烧友,当然这次也是使用纯CSS实现这个方案。是的,不加任何一段JS,侧面再次证明CSS的强大。

思路

思路很简单,使用一个按钮来回切换主题样式。按钮未选中则切换到浅色主题,按钮选中则切换到深色主题。可用:checked+打辅助完成这个任务。

  • :checked:选项选中的表单元素
  • +:元素相邻的同胞元素

使用<input>模拟按钮,当按钮处于选中状态时触发:checked,通过+带动后面相邻的网站主体<div>进入暗黑模式,选中状态取消时则退出暗黑模式

<body>
    <input class="ios-switch" type="checkbox">
    <div class="main">网站主体</div>
</body>

更多选择器的功能和分类请回看笔者这篇文章《可能是最全最易记的CSS选择器分类大法》

切换按钮

打算设计一个美观的按钮,可是没有特别思路,就打开iPhone,把设置里的切换按钮用纯CSS实现一番。

尺寸和颜色都是与iPhone切换按钮一致。思路是使用<input>模拟按钮,声明appearance:none将其默认外观抹去,使用::before模拟背景区域,使用::after模拟点击区域,在触发:checked后添加一些小动画进行修饰,近乎完美地实现了iPhone切换按钮

切换按钮

<input class="ios-switch" type="checkbox">
.btn {
    border-radius: 31px;
    width: 102px;
    height: 62px;
    background-color: #e9e9eb;
}
.ios-switch {
    position: relative;
    appearance: none;
    cursor: pointer;
    transition: all 100ms;
    @extend .btn;
    &::before {
        position: absolute;
        content: "";
        transition: all 300ms cubic-bezier(.45, 1, .4, 1);
        @extend .btn;
    }
    &::after {
        position: absolute;
        left: 4px;
        top: 4px;
        border-radius: 27px;
        width: 54px;
        height: 54px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(#000, .3);
        content: "";
        transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
    }
    &:checked {
        background-color: #5eb662;
        &::before {
            transform: scale(0);
        }
        &::after {
            transform: translateX(40px);
        }
    }
}

请戳这里查看在线演示与源码。

暗黑模式

还记得4月4日那次全网开启悼念模式吗?笔者发表了一篇文章《一行代码全站进入悼念模式》,巧妙地使用filter这个强大的CSS属性。

html {
    filter:grayscale(1);
}

真的是一行代码,本次也不例外,一行代码全站进入暗黑模式

html {
    filter: invert(1) hue-rotate(180deg);
}

filter的兼容性不差,各位同学可放心使用,还有一些细节地方需注意,本文就不重复讲解了,详情可回看《一行代码全站进入悼念模式》

filter是一个非常神奇的属性,能将Photoshop一些基础的滤镜效果应用到网站上。笔者平时非常喜欢使用filter,在笔者的CodePen上有许多纯CSS特效都使用了filter,细心的同学可能会发现笔者特别喜欢使用hue-rotate()这个函数结合CSS变量动态生成过渡颜色,详情请回看《妙用CSS变量,让你的CSS变得更心动》

本次的暗黑模式使用到两个滤镜函数:invert()hue-rotate()

  • invert():反相,反向输出图像着色,值为0%则无变化,值为0~100%则是线性乘子效果,值为100%则完全反转
  • hue-rotate():色相旋转,减弱图像着色,处理非黑白的颜色,值为0deg则无变化,值为0~360deg则逐渐减弱,值超过360deg则相当绕N圈再计算剩余的值

invert()简单理解就是黑变白,白变黑,黑白颠倒hue-rotate()简单理解就是冲淡颜色。为了确保主题色调不会改变,将色相旋转声明为180deg比较合理。

依据上述分析的思路,当按钮处于选中状态时使用+连带后面的同胞元素也进入选中状态。若同胞元素无背景色需声明background-color:#fff,否则无法让滤镜效果起效,为了让这个同胞元素在使用滤镜效果时过渡得更自然,声明transition:all 300ms

.ios-switch {
    ...
    &:checked {
        ...
        & + .main {
            filter: invert(1) hue-rotate(180deg);
        }
    }
}
.main {
    background-color: #fff;
    transition: all 300ms;
}

CodePen上为了更好地展示效果,就使用<iframe>引入我们最爱的掘金社区,免费为其增加暗黑模式切换功能😉。同时在排版上做了少量修改,请戳这里查看在线演示与源码。

暗黑模式

优化

细心的同学可能会发现,怎么图片都变成照B超的感觉了。

缺陷

按照设计原则来说,换肤只针对组件,像一些媒体类型的元素,例如背景、图片、视频等,都是不能直接处理的,需保持其原样。既然暗黑模式是使用了滤镜的反相和色相旋转实现,那么对这些媒体元素再次使用滤镜的反相和色相旋转就能复原了。使用过Photoshop滤镜的同学应该会更清楚。

img,
video {
    filter: invert(1) hue-rotate(180deg);
}

还有一个问题,背景怎样处理?众所周知,背景是使用background系列属性进行声明的,因此无法通过特定的选择器进行标注。但是,可换种思路处理,就是给有背景的元素加上一个特定类名,将其包含到上述规则里即可。

通过Chrome DevTools查看掘金社区的网站源码,发现这些头像、缩略图和展示图都有一些特定类名,将其特定类名添加到规则里。

img,
video,
.avatar,
.image,
.thumb {
    filter: invert(1) hue-rotate(180deg);
}

在通用网站里,这个类名可自行定义,最可行的方法就是定义一个特定类名.exclude。不使用滤镜效果的元素统统加上.exclude

.exclude {
    filter: invert(1) hue-rotate(180deg);
}

改造

上述为了方便演示代码,在CodePen Demo里使用<iframe>引入我们最爱的掘金社区。由于无法对<iframe>进行样式声明,所以转移到掘金社区上,通过Chrome DevTools直接改造。

Chrome浏览器里按F12Cmd+Alt+I打开Chrome DevTools,分析网站的HTML结构。

<body>
    <div id="__nuxt">...</div>
</body>

<body>里插入切换按钮

<body>
    <input class="ios-switch" type="checkbox">
    <div id="__nuxt">...</div>
</body>

把以下SCSS代码转换成CSS代码插入到<head>新建的<style>里。推荐一个在线SASS转CSS工具网站,复制以下代码到网站里直接转换,完成后再贴到<style>里。

.btn {
    border-radius: 31px;
    width: 102px;
    height: 62px;
    background-color: #e9e9eb;
}
.ios-switch {
    position: relative;
    appearance: none;
    cursor: pointer;
    transition: all 100ms;
    @extend .btn;
    &::before {
        position: absolute;
        content: "";
        transition: all 300ms cubic-bezier(.45, 1, .4, 1);
        @extend .btn;
    }
    &::after {
        position: absolute;
        left: 4px;
        top: 4px;
        border-radius: 27px;
        width: 54px;
        height: 54px;
        background-color: #fff;
        box-shadow: 1px 1px 5px rgba(#000, .3);
        content: "";
        transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
    }
    &:checked {
        background-color: #5eb662;
        &::before {
            transform: scale(0);
        }
        &::after {
            transform: translateX(40px);
        }
        & + #__nuxt {
            filter: invert(1) hue-rotate(180deg);
            img,
            video,
            .avatar,
            .image,
            .thumb {
                filter: invert(1) hue-rotate(180deg);
            }
        }
    }
}
#__nuxt {
    background-color: #fff;
    transition: all 300ms;
}

完成后发现切换按钮没有出现,可通过position:absolute将其绝对定位到想要显示的位置。

.ios-switch {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99999;
    outline: none;
}

或在<div id="__nuxt">里任意地方创建一个<label>,通过声明<input class="ios-switch" id="toggle" hidden><label for="toggle">互相绑定,将<input>的触发区域转移到<label>上。具体怎样实现,可参照笔者这个纯CSS标签导航栏实现。

若觉得讲解有点乱,可稍作整理,三步完成上述操作。

打开掘金社区网站

F12Cmd+Alt+I打开Chrome DevTools

<head>里插入<style>

为了方便复制粘贴,笔者将上述分析得出的CSS代码进行压缩。

<style>.btn,.ios-switch::before,.ios-switch{border-radius:31px;width:102px;height:62px;background-color:#e9e9eb;}.ios-switch{position:relative;appearance:none;cursor:pointer;transition:all 100ms;}.ios-switch::before{position:absolute;content:"";transition:all 300ms cubic-bezier(0.45,1,0.4,1);}.ios-switch::after{position:absolute;left:4px;top:4px;border-radius:27px;width:54px;height:54px;background-color:#fff;box-shadow:1px 1px 5px rgba(0,0,0,0.3);content:"";transition:all 300ms cubic-bezier(0.4,0.4,0.25,1.35);}.ios-switch:checked{background-color:#5eb662;}.ios-switch:checked::before{transform:scale(0);}.ios-switch:checked::after{transform:translateX(40px);}.ios-switch:checked + #__nuxt{filter:invert(1) hue-rotate(180deg);}.ios-switch:checked + #__nuxt img,.ios-switch:checked + #__nuxt video,.ios-switch:checked + #__nuxt .avatar,.ios-switch:checked + #__nuxt .image,.ios-switch:checked + #__nuxt .thumb{filter:invert(1) hue-rotate(180deg);}#__nuxt{background-color:#fff;transition:all 300ms;}.ios-switch{position:absolute;right:0;top:0;z-index:99999;outline:none;}</style>
<body>里插入<input>
<body>
    <input class="ios-switch" type="checkbox">
    <div id="__nuxt">...</div>
</body>

就这样,一个纯CSS的实现方案就能让网站瞬间拥有暗黑模式切换功能,有没有又对CSS刮目相看了。

三步操作

总结

整个纯CSS实现方案围绕着:checked+filter三个点进行,缺一不可。看似简单,若不是常用CSS做特效也很难想象出区区三个点打辅助也能完成一个这么强大的功能。

<body>
    <input class="ios-switch" type="checkbox">
    <div class="main">网站主体</div>
</body>
.ios-switch {
    ...
    &:checked {
        ...
        & + .main {
            filter: invert(1) hue-rotate(180deg);
            img,
            video,
            .exclude {
                filter: invert(1) hue-rotate(180deg);
            }
        }
    }
}
.main {
    background-color: #fff;
    transition: all 300ms;
}

相比于CSS+JS实现方案而言,无需维护一整套暗黑模式样式代码,无需操作DOM,没有了往常复杂的操作。除非要做一整套高度定制的暗黑模式才需一个CSS+JS实现方案,否则用该方案即可。

本方案具有以下特点。

  • 纯CSS实现,简单高效,逼格更高
  • 几乎没有维护成本,快速迭代
  • 充分利用滤镜效果,兼容性好

试试无妨,完成了觉得效果不错就赶紧找你老板加薪去😜,哈哈!

对于笔者而言,CSS是一门天马行空的语言,说它简单也行说它困难也行。若你很喜欢CSS,想了解更多纯CSS特效,可回看笔者往期的文章,也可浏览笔者个人官网的纯CSS特效专辑,保证满足你的眼球。

最后,笔者很好奇我们最爱的掘金社区会不会采纳这种纯CSS实现的换肤方案,各位掘友怎样看呢?

结语

❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更多高质量文章

关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔

  • 关注后回复资料免费领取学习资料
  • 关注后回复进群拉你进技术交流群
  • 欢迎关注IQ前端,更多CSS/JS开发技巧只在公众号推送

查看原文

赞 24 收藏 14 评论 2

Griffin23 赞了回答 · 2020-11-12

解决前端如何全局校验后端返回的数据

这应该让后端统一返回的格式吧

关注 8 回答 7

Griffin23 赞了回答 · 2020-11-12

解决动画移除操作是异步的吗?

因为你代码执行是同步的,在代码正在执行的时候,浏览器不会渲染,等你的代码执行完毕,.transition 已经加上了,这个时候才开始渲染,自然有动画。

如果你想没有动画,那就需要给当主线程让出一个空闲,让浏览器先有时间渲染,然后再执行你的代码;比如,你可以通过任务队列(此处为setTimeout),给浏览器让出一个空闲。

function move() {
  console.log(111)
  ttt.className = ''
  ttt.style.left = '200px'
  setTimeout(()=>{
    ttt.className = 'transition'
  })
}

关注 1 回答 1

Griffin23 回答了问题 · 2020-11-12

解决前端如何全局校验后端返回的数据

关注 8 回答 7

Griffin23 赞了文章 · 2019-11-13

奇葩 AI 异闻录丨人类真是太好玩儿了!!!

大家好,今天给大家看点儿有意思的「宝贝」。

clipboard.png

但在看之前想先和大家讨论一下,大家对现阶段 AI 的看法是什么?(欢迎在评论区留言,观点独到的有礼物相送)

我是觉得已经慢慢步入正轨了。从最开始怕被人工智能抢走我们的工作,到全民嘲讽「人工智障」,再到人工智能就是「人工+智能」,在不断的调侃当中,AI 技术其实已经有了很多落地的技术,在实际生活中辅助我们的生活,推动着社会的发展。

2017 年,被定义为「人工智能元年」。当时我写了一篇文章,主要是 diss 了一拨儿「Fake AI」,觉得科技公司成天不干正事儿,就琢磨着搞一些骗人的把戏。

但今天和大家分享的,就比较轻松了,是一些「乍一看无用的奇葩 AI 产品」,毕竟科技并不全是冷冰冰的,很多时候真的很有趣~

科技的发展,有的时候不就是「无聊+瞎折腾」的产物么?

正文开始:


No.1丨机械尾巴 - Arque

日本 Keio university 的研究人员开发了一种机器人尾巴 —— 「Arque」,人类可以佩戴它来改善平衡。

clipboard.png

这条「智能尾巴」之所以设计成这个亚子,是运用了仿生学的原理,如猎豹的尾巴能使其在跑动和攀爬时保持平衡。安装在人身上的 Arque”能像钟摆一样摇动,当人类倾斜身体时,尾巴向反方向移动”。

clipboard.png

Arque 由互锁的塑料椎骨组成,它们使用基于弹簧的结构来处理剪切力和切向力。每个椎骨关节由一个中心板组成,中间由另外四个保护板围绕,这些板通过弹性绳连接在一起。内部结构使用了四个气动人造肌肉,这些人造肌肉使用压缩空气根据所驱动的肌肉在八个方向上提供力。

使用者佩戴了可穿戴的人体追踪器,该追踪器确定使用者的近似重心,然后提示尾巴移动并相应地进行自我调整,以作为矫正平衡。

该团队设想了该设备的多种潜在用途,包括将其与传感器结合或将其与脑部信号链接以创建假肢。它还设想在穿戴者探索虚拟世界时,将尾巴用作游戏设备来增强用户体验。

但我觉得这个尾巴加入真的能发展到「随心所欲」,那我们不就相当于有了第三只手?那我觉得实际生活中的应用场景就很多了,但有一个问题:

我们人类的祖先本来有尾巴?为什么随着进化没有了呢?我们现在借助科技的力量,再把尾巴接回去,是如虎添翼?还是画蛇添足?

产品官网:
https://www.designboom.com/te...

clipboard.png

”像这样的尾巴,给我来三条!“

No.2丨带摄像头的智能 AI 马桶

大家应该都知道我国的大爷大妈喜欢去日本买马桶盖这件事,但我相信,这款带摄像头的智能 AI 马桶,一定不会那么受欢迎...

试想一下,当你坐在马桶上思考人生的时候,有一双眼睛,并且还是智能的眼睛在默默的看着你...啧啧啧...

clipboard.png

上图就是我们说的 「AI 马桶」,由日本著名的建材家电品牌 LIXIL发布,其最大的特点是内置摄像头可以检测排便状况,借此改善老年人起居质量。

这款马桶在马桶圈背面安装了图像传感器,使用者排便时,马桶会立即对大便进行图像识别,形状识别分成 7 个阶段、大小识别分成 3 个阶段。

clipboard.png

这是一张有味道的图片

据悉,对大便的判定标准参考了国际指标,正在与相关医生合作,共同完善评判标准。官方表示,在开发过程中,与员工合作收集了约 3000 张图像,而马桶的识别准确率可能高达 80%(你们辛苦了...)。

这款马桶主要针对需要护理的老年人,或者患有老年痴呆的患者,帮助医护人员更好地去判断这些用户的身体状况。以往医护人员往往只能通过目视来记录判断这些老年患者的排便状况,AI 马桶则进一步简化了这个过程。目前 LIXIL 尚未确认是否将 AI 马桶进行商业化。

在今年 3 月份的上海 AWE 展会上,松下也搞了一款可以检测人体排泄物的一体机,能读取 PH 值、潜血、肌酐等 7 大常规数据。据说国内某知名品牌透露,该企业也在研发可「尿检」智能马桶,将很快对外公布。

估计以后「AI」智能马桶,或许会跟现在的冲洗、加热功能一样,成为智能马桶的「标配」。体检的时候再也不用拿个小壳自己提供素材了,其实也挺好的~

不过带摄像头这件事儿,我可能需要缓一缓,先给自己做一做心理工作...

clipboard.png

No.3丨百万美元打造的「AI真佛」

日本人对佛教有着痴迷般的狂热,并且这种狂热并没有随着科技的发展减弱,而是进一步推动了佛教的发展。

为了激发年轻人和外国人对日本佛教的兴趣,拥有 400 年历史的高台寺与大阪大学合作开发出了一款「AI 真佛」Mindar,并且正式投入了日常的工作中,进行授业布道。

clipboard.png

这个 6 英尺高的机器人造价达 100 万美元,全身大部分由硅和铝制成,以 Kannon(日本怜悯之神)的形象建造,可以念诵「心经」。这也是世界上第一个将精神和科学领域融合在一起的机器人神灵。

有一部电影不知道大家看没看过,影片的名字叫《人类灭亡报告书》。其中有一个故事讲得和这个事情类似。

一个寺院引入了一台机器人,用来做一些日常清洁打扫的工作,但可能因为佛祖显灵,这个机器人慢慢的衍生出了自己的意识,「立地成了佛」。想想还是挺可怕的,一个懂佛法的机器人,在一个信奉佛法的国家...

clipboard.png

除了佛像之外, 日本奈良大学还有另一项佛系研究,别网友戏称为:「寻找你的真命天佛」。

首先通过 AI 解码佛像表情,来判断不同佛像的情绪和年龄,作为匹配的图片素材库。用户上传自己的照片,就能找到跟你情绪最匹配的那只佛像。

clipboard.png

网站链接在这里! https://www.nara-u.ac.jp/budd...

能做出这样的佛系研究,官网上也给出了相关的解释:

信徒们认为佛像的表情完全是由个人的心境决定,传统上佛像不应拥有年龄、情感、性别等标签。在制造佛像的时候,工匠们也会被告知不能给予佛陀任何带有人性的面部表情。因此,基于信仰等因素,对佛陀情感内容解读的最好不要是人类。

不要人类那还能是谁?只能是靠爱(AI)啊!

技术层面上,这个研究组利用了微软的 AI 系统 Cognitive Services,通过 Face API 把愤怒、恐怖、喜悦、中立、悲伤等 8 个表情数值化,以此分析其倾向。他们对日本全境的 216 个佛像进行了情绪分析,并发表了佛像的推定年龄和表情等分析的调查结果。

带领 18 名学生进行此次研究的教授 Sekine 说道“如果说任由世人判断佛陀是一种亵渎,那么也许把这一过程委托给人工智能是非常公允的。”

clipboard.png

No.4丨knock! 老板来啦!

「社畜」这个词大家都知道,是我们经常挂在口头的自嘲用语,但不一定知道这个词最早起源于日本,随后在东亚世界逐渐流行。

作为一名合格的「社畜」,免不了和老板之间的斗智斗勇。

日常工作中,总有一些老板或者领导借着「体恤民情」、「调节气氛」的由头,默默地走到员工身后看大家有没有摸鱼。

不摸鱼还叫上班么?但被老板看到摸鱼拿估计也就不用上班了。有些技巧娴熟的人能够快速切换屏幕,但手快不意味着表情波澜不惊,有时手忙脚乱可能制造出“此地无银三百两”的效果。

怎么办呢?一位日本程序员决定编写一个程序,一劳永逸。

处理过程并不复杂,总共分为三步:

1.注意注意!不明人物正在靠近!

clipboard.png

2.目标已靠近,人脸识别功能开启,正在与素材库图片进行匹配!

clipboard.png

3.目标识别为「老板」,请立即停止摸鱼,屏幕已自动切换!

clipboard.png

就是这么简单,会点简单的 Python 、有个网络摄像头就能实现。

不多介绍了,好东西懂的自然懂,GitHub 上有源代码: github.com/Hironsan/Bos

No.5丨机器学习助攻撩妹

除了工作,机器学习在我们的生活中也有很广泛的应用场景。

比如,撩妹?

Twitter 主上一位叫 imajo 的日本小哥就做了这样一个有点浪漫的机器学习项目,打个响指就让房间灯光变成粉色的视频,获得了很多赞和转发,广受好评!之后,这位无私的技术同学在一篇博客中详细论述了这个 AI 项目,希望造福更多人。

这个程序比老板识别器还要简单,只有两步:

clipboard.png

1.识别响指声音;
2.灯泡变光。

根据这位同学的技术博客,他的逻辑是想要检测出响指声,自然会想到先要检测出单发音(一瞬间突然变大的声音),但容易出现的问题是,响指声能够和其他单发音的脉冲长得差不多,如何让程序学会只在打响指的时候再开灯呢?

小哥使用了频谱分析来提取打响指和敲桌子两种单发音的不同,如下图经过频谱分析处理后可以发现更显著的差异:

clipboard.png

不仅如此,他为广大单身狗操碎了心,文末介绍了本程序的实际应用场景:

本产品请在将女生带回家,进入暧昧气氛的时候使用。

1.正当俩人聊到无话可聊,气氛突然进入暧昧状态,打一个响指
2.单发音频谱分析提取声音特征
3.机器学习对响指进行识别判断
4.然后电灯泡从白色变成了暧昧粉色,送上助攻
5.之后……就交给你自己发挥了

他也坦言:实际上感觉这就是一个没多大意义的东西。但是做一些好像完全没有什么意义的东西,享受制作过程也是攻城狮们的快乐之一啊。

链接:
https://qiita.com/imajoriri/i...


结 语

总结来看,其实这些看似奇怪的机器人或系统,其实并非突发奇想的无聊产物,还是有明确使用场景的,只不过在我们大众看来,可能不是那么「刚需」。

例如开头我们提到的「尾巴机器人」,就是日本老龄化日趋严重下的产物;数百万造的佛和「寻找真命天佛」,都与宗教信仰有关;打响指换灯光,也能为推动人类繁衍声息做出贡献...

很多时候,科技的进步就是在一个个无聊的想法或者为了偷懒产生的念头中诞生,你觉得呢?

clipboard.png

查看原文

赞 6 收藏 1 评论 1

Griffin23 提出了问题 · 2019-04-14

es6 symbol的出现是针对什么场景?

假如我有个对象放在工具(util.js)里面

let symbol = Symbol('whatever');
export let obj = {
    [symbol]() {
        console.log('log');
    },
    say() {
        console.log('say');
    }
}

我想要在组件里面使用这个方法,比如使用say(),我可以直接import obj,然后obj.say()。
如果我想要使用[symbol]的这个方法,岂不是还要将symbol export,然后import symbol和obj,再去执行obj[symbol]()。
这样岂不是更复杂了?

关注 2 回答 2

认证与成就

  • 获得 4 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-01-21
个人主页被 385 人浏览