20190127 前端开发日报-前端开发博客

JavaScript中纯函数是什么；JavaScript 判断 iPhone X Series 机型；从零实现Vue的组件库（十）- Select 实现；基础中的基础，JavaScript中的值和引用；2019年JavaScript中的计算机科学：链表；用 JavaScript 和 Emoji 做地址栏动画；Vue 的小奇技（第一篇）：提高大型数据列表的性能；Go WebSocket 简单使用

JavaScript中纯函数是什么纯函数是程序函数式编程语言中原子构建块（最简单的可重用代码构建块）。简单和易测试性的特点使其备受推崇。本文将提供一个快速检测列表，用于判断一个函数是否为纯函数。检测列表一个函数必须满足如下两点才能被称之为“纯的”：相同的输入总是返回相同的输出不产生副作用让我…
JavaScript 判断 iPhone X Series 机型 iPhone X 底部是需要预留 34px 的安全距离，需要在代码中进行兼容。现状对于 iPhone X 的判断基本是这样的： // h5 export const isIphonex = () => /iphone/gi.test(navigator.userAgent) && window.screen && (window.screen.height === 812 && window.screen.width === 375); 复制代码这在之前是没问题的…
从零实现Vue的组件库（十）- Select 实现当选项过多时，使用下拉菜单展示并选择内容。 Select 组件主要特点在于：数据双向绑定，下拉列表变动时，选中项如何回显；单选、多选的区分，以及对应处理。 1. 实例代码 <fat-select v-model="inputValue"> <fat-option v-for="item in opti…
基础中的基础，JavaScript中的值和引用原文地址： medium.com/dailyjs/bac… 前几天忽然发现github上有一个大热门项目 —— “ 33 concepts every JavaScript developer should know ”，目前已经将近25000个Stars。这个项目旨在帮助前端开发者掌握33个JavaScript基础概念。按作者话说，这些概念并不是开发所必需的，但它们是引导你通向前端大…
2019年JavaScript中的计算机科学：链表早在2009年，我就挑战自己一年内坚持每周写一篇博客文章。我曾经读到过，坚持发表文章是为博客带来流量的最好的方法。基于我的所有文章的理念，一周发表一篇文章看起来是一个很实际的目标，而事实上我缺少了博客文章的52个理念。（译者注：不太清楚这里的意思，查阅到 52 Ideas For Blog Posts 这篇文章比较符合语境）我…
用 JavaScript 和 Emoji 做地址栏动画原文地址： Animating URLs with Javascript and Emojis 原文作者：Matthew Rayfield 译者： Wpeach 你可以在地址栏使用 emoji（和其它图形 unicode 字符），这看着很棒，但是好像没人这么做，为什么呢？也许 emoji 对于正常的网络平台来说太过异国情调了？或许是他们因为害怕不利于SEO？不管什么原因…
Vue 的小奇技（第一篇）：提高大型数据列表的性能特别声明：本文是作者Alex Jover 发布在VueDose 上的一个系列。版权归作者所有。译者在翻译前已经和作者沟通得到了翻译整个系列的授权。为了不影响大家阅读，获得授权的记录会放在本文的最后。嗨，大家好！欢迎来到 VueDose 的第一篇文章。我已经准备好在 VueDose 上开启这段旅程，来帮助像你一…
Go WebSocket 简单使用 WebSocket在 HTML5 游戏和网页消息推送都使用比较多。WebSocket 是 HTML5 的重要特性，它实现了基于浏览器的远程socket，它使浏览器和服务器可以进行全双工通信。 WebSocket 具体的特性和 http 的区别这里就不多说，可以去自己查一下。 Go 官方没有提供对 WebSocket 的支持，必须选择第三方提供的包。《Go Web …
JavaScript是如何工作的:存储引擎+如何选择合适的存储API这是专门探索 JavaScript 及其所构建的组件的系列文章的第 16 篇。如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作的：深入V8引…
从零实现Vue的组件库（十二）- Table 实现代码 <fat-table :data="tableData"> <template slot-scope="{ item }"> <fat-table-column label="姓名">{{ item.name }}</fat-table-column> <fat-table-column label="日期">{{ item.date }}</fat-table-column>…
从0开始使用webpack搭建react工作流很多人想搭建一套属于自己的前端工作流，最开始的时候我们的工作流萌芽是从写一个项目的时候，拷贝以前写过的一个项目文件夹改完直接使用开始的，后来使用了grunt和gulp，再到webpack,每一个前端人员想掌握如何书…
Vue 的小奇技（第二篇）：衡量 Vue 应用的运行时性能特别声明：本文是作者Alex Jover 发布在VueDose 上的一个系列。版权归作者所有。译者在翻译前已经和作者沟通得到了翻译整个系列的授权。为了不影响大家阅读，获得授权的记录会放在本文的最后。在上一篇文章中我们谈到了如何提高大型列表数据的性能，但是我们没有测试过这个小技巧到底带来多少的性能优化。 …
腾讯X5内核 WebView 实践总结本篇文章是基于腾讯X5内核 WebView 实践的总结篇，较上篇文章更为完整，具体。 onPageFinished() 回调时机通过 WebView 的回调函数，分析 onPageFinished() 回调时机加载某个网址的Android端回调监测如下： shouldOverrideUrlLoading time: 1519274808392 onPageStarted: time: 1519274808561 // 16…
vue-router 一些容易被忽略的知识点本文适用于对 Vue.js 和 vue-router 有一定程度了解的开发者除特殊说明，vue-router 版本为 3.0.2
JS 死循环的手动终止以及代码熔断方法最近工作中遇到了一些死循环导致的页面卡死问题，经过 trouble shooting 和代码修复解决了问题，在此也顺便整理了一下 JS 死循环的手动终止以及代码熔断方法。被死循环卡死的页面你是否遇到这样的场景，在你执行了页面上某个动作后，一些怪异的事情发生了：页面卡死了，点击页面上任何按钮，或者是尝试滚…
vue组件文档（.md）中自动导入示例（.vue）在写组件库文档的时候，会把示例代码粘贴到文档里，这样做有一个很恶心的地方：每次组件迭代或修改示例都需要重新修改文档中的代码片段。长年累月，苦不堪言。
记一次Vue动态渲染路由的实现背景: 公司打算做一个(cms),最开始前端参照 vue-element-admin 的思路,验证了前端鉴权的可能性,大佬写的代码思路清奇,值得学习,后来考虑诸多因素,接口安全性前端鉴权的难度以及项目的复杂度,最后选择采用后端渲染动态路由的形式使用的是Vue+Element的后台管理模板 github 思路参考了一下文章 Vue 动态路由…
3分钟教你写精炼的 React Components最近在做一些梳理，把平时记录的一些笔记和实践整理成完整的短篇技术文章。这篇主要说一下如何精简你的React Components
那些花儿，从零构建Vue工程(webpack4) 从零搭建Vue开发环境：webpack4 + vue-loader + koa2 + babel-loader v8 + Babel v7 + eslint + git hooks + editorconfig 从2009到2019社会在不断进步技术也在不断进步我们当然也不能落后 “不积跬步无以至千里，不积小流无以成江海” 先开始webpack基本构建创建一个工程目录 vue-structure mkdi…
《如何以及为什么React Fiber使用链表遍历组件树》在本文中，我将参考Andrew Clark的笔记，对Fiber中一些特别重要的概念进行详细说明。（by 阿里云翻译小组——照天）
对JavaScript中的异步函数进行异常处理及测试这个话题已被反复提起过几百次，不过这次让我们从TDD（Test-Driven Development）的角度来回答它。
【20190126 前端开发日报】JS计算误差小谈；十五分钟，学习 Webpack；如何优雅地向别人介绍高端大气上档次的 Git；如何使用Git提高研发团队工作效率？；web 应用常见安全漏洞一览；说说分层测试中 …详情→
酷狗音乐- Vue / React 全家桶的两种实现两个月前用 Vue 全家桶实现过一次酷狗音乐，最近又用 React 全家桶重构了下，最终成果和 Vue的实现基本一致，放个图：
使用 Travis + GitBook + GitHub Pages 优雅地发布自己的书作者: 一波不是一波转载请注明出处并保留原文链接（ #48 ）和作者信息。这篇文章教你怎么用 gitbook + travis 在 github pages 上优雅地发布书籍。模板: https://github.com/riskers/gitbook-template/tree/master 效果: https://riskers.github.io/gitbook-template/ …
React 模式（中文版） React 模式（中文版） on Github 目录函数组件 (Function component) 属性解构 (Destructuring props) JSX 中的属性展开 (JSX spread attributes) 合并解构属性和其它值 (Merge destructured props with other values) 条件渲染 (Conditional rendering) …
Hooks API 在 Vue 中的实现分析作者: 长峰初次听到 React Hooks，是在其刚发布的那几天，网上铺天盖地的文章介绍它。看字面意思是「React 钩子」，就想当然地理解应该是修改 React 组件的钩子吧。React 延伸的概念非常多，高阶组件、函数式、Render Props、Context、等等。又来了一个新概念，前端开发已经够复杂了！近两年一直用 Vue，觉得 React …
在 Flutter 使用 Redux 来共享状态和管理单一数据 React 生态里广为人知的 Redux 状态管理，其实在 Flutter 中也能适用，它能很好的处理单一数据和状态共享，在一定程度上对于分割项目之间复杂的业务有一定的积极作用，可阅读可维护也能做的很不错。对于使用过 React 的前端开发来说 Redux 的概念肯定熟记于心了，不过我还是要简单说一些东西，只有这样我们才能更好的进…
Script 标记的 defer 和 async 属性说明 Script 标记的 defer 和 async 属性可能会显著影响页面加载的性能，总结说明一下。没有标记 defer 或 async 时浏览器立即停止 HTML 渲染，同步获取并执行脚本文件，然后再继续渲染后续的 HTML 内容。 <header> <script src="app.js"></script> </header> 除非特殊…