Vanessa

2019-11-04 描述检测网站是使用移动设备还是使用台式机/笔记本打开的。提示使用正则表达式来检测 navigator.userAgent，以获取当前设备是移动设备还是台式机/笔记本代码 constdetectDeviceType=()=>/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.use

2019-11-01 描述返回当前页面的链接。提示使用 window.location.href 获取当前链接代码 constcurrentURL=()=>window.location.href;示例事件中心的调用：currentURL();//'https://hacpai.com/article/1572572694000?r=Vanessa'返回总目录每天 30 秒系列之 JavaScript 代码

2019-10-31CompositionAPICompositionAPI 是一组基于功能的附加的 API，他允许对组件之间的逻辑进行灵活的组合，他将组件属性中当前可用的机制公开为 JavaScript 函数。更多可查看 CompositionAPIRFCimport{ref,computed,onMounted}from'vue'exportdefault{setup(){constcount=ref(0

2019-10-30 描述使用 emit，on 和 off 方法创建一个发布/订阅(publish–subscribe)的事件中心。提示使用 Object.create(null)创建一个空的 hub 对象，他不需要继承来自 Object.prototype 的属性 emit，首先基于 event 参数找到数组中对应的一组操作，然后使用 Array.prototype.forEach()运行这组操作中的每一项，其参数都为 dat

2019-10-29 描述根据字符串（不需要添加到文档中）创建一个元素。如果给定的字符串包含多个元素，仅返回第一个。提示使用 document.createElement()创建一个新元素设置他的 innerHTML 等于作为参数提供的字符串使用 ParentNode.firstElementChild 返回第一个元素代码 constcreateElement=str=>{constel=document.cre

整理前端界的最新资讯，邀您一同探索新世界 TypeScriptTypeScript3.7RC 发布，支持可选链等功能特性 VueVue3 中让人激动的新特性 ElectronElectron9.0.0 升级注意事项 DenoDeno1.0 发布，与 Node 相比的 10 大优缺点 Deno 将永远支持 TypeScript 返回总目录每天 30 秒系列

2019-10-28 可选链 OptionalChaining 提案//之前 if(foo&&foo.bar&&foo.bar.baz){//...}//之后 if(foo?.bar?.baz){//...}空值合并 NullishCoalescing 提案//之前 letx=(foo!==null&&foo!==undefined)?foo:bar();//之后 letx=foo??bar();断言函数 Assert

2019-10-25 描述根据特定的范围、步骤和持续时间在指定的选择器上创建一个计数器。提示检查 step 是否符合要求，并进行相应的修改在 setInterval()中使用 Math.abs()和 Math.floor()的组合来对每一次绘制计数器的间隔时间进行计算使用 document.querySelector().innerHTML 来更新选中元素的值第四个参数 step 的默认值为 1 第五个参数 duration

2019-10-24 描述拷贝一个字符串到剪切板中。仅对用户操作的结果生效（如：内部 click 监听事件）。提示创建一个新的 <textarea> 元素，设置其 value 为提供的数据，并将他添加到 HTML 文档中如果页面中有元素被选中的话，使用 Selection.getRangeAt()来存储选中的值使用 document.execCommand('copy')将内容拷贝到剪切板从 HTML 文档中移除 <texta

2019-10-23 描述如果页面的底部可见就返回 true 否则返回 false。提示使用 scrollY，scrollHeight 和 clientHeight 来检测页面的底部是否可见代码 constbottomVisible=()=>document.documentElement.clientHeight+window.scrollY>=(document.documentElement.scrollHei

2019-10-22 描述将数组中的元素转换为 <li> 标签，并将他们添加到指定 id 的列表中。提示使用 Array.prototype.map()，document.querySelector()和一个内部匿名闭包来创建 html 列表内的标签项代码 constarrayToHtmlList=(arr,listID)=>(el=>((el=document.querySelector('#'+listID)),

2019-10-21 描述使用 JSON 或数组渲染一个内容可折叠的树视图。使用对象解构为特定的属性设置默认值使用 toggled 值来确定内容的初始化状态（展开/收拢）使用 React.setState()hook 创建 isToggled 状态变量，设置初始值为 toggled 属性返回一个 <div> 元素，他包裹着内容组件和用于切换组件 isToggled 状态的 <span> 元素基于 isParentToggled，isT

2019-10-18 描述渲染一个信息提示组件。使用 React.useState()hook 创建一个默认值为 false 的状态变量 show 返回一个包含了两个 <div> 的 <div> 元素，他们分别用于显示提示和传递给组件的 children 监听 onMouseEnter 和 onMouseLeave 方法，分别用于 show 变量的切换当然，你也可以直接使用 CSS 交互-信息提示来实现实现.tooltip{position

出发前准备 2 天中陆陆续续定了机票、民宿，看了攻略，做了如下计划（最后一天去免税店）。然而这次的计划和实际差了太多太多，但这并不重要，因为玩的很开心。这次住在离大东海很近的金茂海景花园，无论去哪个景点都有直达的公交。离海步行 5 分钟，游回来有洗衣机、烘干机，很方便。如果将来有钱了，要来一次豪游：走 VIP 通道，直升机接送，住岛上，住海底房，海上各种项目来 2+ 次。呃，还是算了，作为一个内心节俭的妇女，玩的开

2019-10-17 描述当鼠标移上时，显示相关的信息提示。HTML<divclass="tooltip"><spanclass="tooltippedtooltipped__n"aria-label="我是提示信息"> 上居中 </span><spanclass="tooltippedtooltipped__s"aria-label="我是提示信息"> 下居中 </span><spanclass="tool

2019-10-16 描述渲染一个可切换组件。使用 React.useState()hook 初始化一个默认值为 false 的状态变量 isToggleOn 使用一个 style 对象为不同状态下的组件单独保存他们的样式返回一个 <button> 来切换组件的 isToggledOn。当触发他的 onClick 事件时，就会基于 isToggleOn 的状态来显示相应的内容，并使用 style 对象中对应的 CSS 规则实现 functi

2019-10-15 描述渲染一个自动计数器组件。使用 React.useState()hook 初始化一个默认值为 0 的状态变量 ticker 定义一个 tick 方法，他将基于 interval 间隔进行增长，直到增长为 timer 定义一个 reset 方法，他将重置 ticker 为 0 并清除 interval 返回一个包含两个 <button> 元素的 <div>，其按钮分别调用 tick 和 reset 方法实现 functionTicke

2019-10-14 描述渲染一个 Tab 菜单及其视图组件。定义一个 TabItem 组件，可以传递给 Tab 且只接受 props.children 中通过函数名称认证的 TabItem，其余节点需要进行移除使用 React.useState()hook 初始化 bindIndex 状态变量的值为 props.defaultIndex 使用 Array.prototype.map 将收集的节点渲染为 tab-menu 和 tab-vie

想变为画家嘛？想在黑客和画家之间变来变去么？大概什么情况会触发你转变身份？很多年过去了，随着社区的成长，该服务已经停止。请挖坟的小伙伴们不要再进行打赏了，否则后果自负。

2019-10-13 描述渲染一个星级比率组件。定义一个组件，每颗星星都根据父组件的状态单独调用 Star 进行渲染显示在 StarRating 组件中使用 React.useState()hook 定义 rating 和 selection 状态变量，并分别初始化他们的值为 props.rating（如果无效或不支持时为 0）和 0 创建一个 hoverOver 方法，通过提供的 event 来更新 selected 和 rating 使用 A