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

高效开发 Web 单页应用解决方案；Safe.js 3.0.0 发布，史上最大更新增加6项功能；快速介绍几个JS函数；v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具；JS事件循环，了解一下?；Node-Web-Console——基于 Node.js 的网页版 shell；如何优雅地上报前端监控日志；Promise 源码：实现一个简单的 Promise

高效开发 Web 单页应用解决方案于 2017 年初，有在 Github 建立并维护一个项目： Vue Boilerplate Template ，欲成就一款开箱即用 Vue + Webpack 的脚手架模版；其目标与宗旨是：根据以往经验提供一些参考，对于如何构建中大型 Vue 项目。这蛮久以来，有坚持维护更新，各项主要依赖库，基本都保持着同步升级；记载这篇文章，即是对关于它的设计做下更…
Safe.js 3.0.0 发布，史上最大更新增加6项功能昨天刚刚发布2.3.0版本，今天又发布了3.0.0版本，这是要和红薯版本帝死磕的节奏啊！那么我们来看一下这次safejs的更新又更新了哪些内容：增加safeIn方法增加safeIn替身_方法增加onchange事件去除-import关键字删除safeUse方法，调用方法不用safeUse了，直接使用即可增加safePl…
快速介绍几个JS函数 JS中函数是一等公民，地位相当高。本文介绍快速介绍三个函数： throttle debounce compose 节流和去抖函数当某些事件频繁触发造成不断执行DOM操作或资源加载等行为，这时你可能就会想到用节流和去抖函数来处理。 throttle 节流函数节流函数就是预先设定一个执行周期，当调用动作的时刻大于等于执行周期则…
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具在使用echarts生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts的出现正是为了解决这个痛点。基于Vue2.0和echarts封装的v-charts图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松
JS事件循环，了解一下? 在理解事件循环之前，我总会遇到一些奇奇怪怪的问题：比如明明已经调接口拿到了数据，可是跟在调数据之后的操作却没有正常执行；又或者不知道为啥，代码里非得加个 setTimeout 才能正常跑通；特别是在运用Promise的时候，更是有各种问题百思不得解。遇上问题要解决，更要知道问题产生的原因，这样才能hold住全场！废…
Node-Web-Console——基于 Node.js 的网页版 shell Node-Web-Console（以下简称 NWC）是一个基于 Node.js 开发的网页版 shell 应用，其想法来源于实验室 SDN 相关项目的一次组会讨论，需求大致是在网页中嵌入 shell，然后实现从前端页面展示的网络拓扑中直接进入虚拟机节点进行简单的管理。具体实现上则参考了 web-console ，一个基于世界上最好的语言开发的项目。先…
《如何优雅地上报前端监控日志》页面在用户那里运行，如果10%的用户页面出现问题而自己本地没有办法重现？如何先一步了解到前端出现的问题，而不是等用户反馈？能不能像查看服务端日志一样来定位前端页面运行的问题？（by 阿里巴巴国际UED团队）
Promise 源码：实现一个简单的 Promise Promise 是 ES6 新增的一个内置对象，它是用来避免回调地狱的一种解决方案。从以前一直嵌套传回调函数，到使用 Promise 来链式异步回调。Promise 究竟是怎么实现，从而达到回调函数“扁平化”？接下来就来一步步实现一个简单的 Promise。开始发车了… 执行步骤先来看一个使用 Promise 的简单例子： var p =…
React 同构应用 PWA 升级指南前言最近在给我的博客网站 PWA 升级，顺便就记录下 React 同构应用在使用 PWA 时遇到的问题，这里不会从头开始介绍什么是 PWA，如果你想学习 PWA 相关知识，可以看下下面我收藏的一些文章：您的第一个 Progressive Web App 【Service Worker】生命周期那些事儿【PWA学习与实践】…
基于VUE自定义指令实现按钮级权限控制前言：关于权限的那些事！！！路由权限可参看这位大神写的，很全面==> 手摸手，带你用vue撸后台系列二(登录权限篇) 思路：登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能…
vscode-recipes (VS Code 调试主流前端框架的基本姿势,微软出品) A collection of recipes for using VS Code with particular technologies. Technology Scaffolding Tools
Nuxt.js 基础入门教程 Vue 开发一个单页面应用，相信很多前端工程师都已经学会了，但是单页面应用有一个致命的缺点，就是 SEO 极不友好。除非，vue 能在服务端渲染（ssr）并直接返回已经渲染好的页面，而并非只是一个单纯的 <div id="app"></div> 。 Nuxt.js 就是一个极简的 vue 版的 ssr 框架。基于它，我们可以快…
【js中小数四舍五入和浮点数的研究】toFixed可以实现小数四舍五入，但有时候却不正确，1.335.toFixed(2)=1.33，使用提升倍数然后除以倍数有时候也有问题，35.41 * 100 = 3540.9999999999995，本文讲怎么解决这些。 #前端开发博客#
Redux-thunk快速入门前言最近刚刚完成了毕业答辩，我的毕设内容是基于React系列技术栈开发的一个类似Instagram的Web App，戳此看看。开发完后,我惊奇的发现：咦，之前就听说有个叫做redux-thunk的东西，我怎么没用到？业务场景太简单了？于是大概研究了下。。概
js技巧：十几行的代码实现vue.watch 最近忙得狗一样，有一段时间没有更新了，虽然是僵尸博主，但是有点小收获还是要来唠叨一下的。相信很多的用vue的人都知道vue双向绑定的原理建立在，给属性绑定了getter和setter，在属性被改变的同时触发视图的再渲染。而本期也是借助这两个内置方法实现vu
Node.js 流：你需要知道的一切 https://medium.freecodecamp.org/node-js-streams-everything-you-need-to-know-c9141306be93medium.freecodecamp.org Node.js 中的流（stream）出了名的难处理，甚至难以理解。我要给你一个好消息 – 这种情况不会再有了。过去的几年中，开发者创建了大量的包（package），唯一个的目的就是让流的处…
关于vue-router那些事要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，…
Google 的 Git v2 带来颠覆性性能提升？恐怕未必作者简介王振威，CODING 创始团队成员之一，多年系统软件开发经验，擅长 Linux，Golang，Java，Ruby，Docker 等技术领域，进两年来一直在 CODING 从事系统架构和运维工作前言最近 Google 发布了一篇文章，描述了对 Git 的一个传输协议的更新，引起了国内技术圈的不小规模的轰动（相关文章…
前端不止：Web 内容的无障碍性网民统计报告根据2017年7月份发布的第40次中国互联网络发展状况统计报告：截至 2017 年 6 月，中国网民规模达 7.51 亿，中国手机网民规模达 7.24 亿，中国网民中农村网民占比 26.7%，规模为 2.01 亿。截至 2017 年 6 月，中国网民通过台式电脑和笔记本电脑接入互联网的比例分别为 55.0% 和 36.5%…
RxJS 6发布，改进了性能和模块化 RxJS团队宣布RxJS 6.0发布。6.0改进了模块化方法和平滑迁移性能、为简化升级而添加了反向兼容软件包，并为TypeScript用户提供了代码迁移。 rxjs-compat软件包提供了一个版本间的兼容层，用于实现从RxJS 5…
一个简单的JavaScript函数式编程教程前言 4月初在北京的时候，徐昊同学表示我们公司的同事们写的文章都太简单，太注重细节，然后捡起了芝麻丢了西瓜，于是我就不再更新博客（其实根本原因是项目太忙）。上周和其他几个同事一起参加“Martin Fowler深圳行”的活动，我和同事扎西贡献了一个《FullStack Language JavaScript》，一起的还有杨云（江湖人称大魔头…
【20180524 前端开发日报】你不知道的Vuejs – 状态管理；Promise不会？？看这里史上最通俗易懂的Promise；前端开发：手机真机调试；使用 Css 获取用户密码；Promise不会？？看这里！！！史上最通俗易懂的Promise！！！；React 16 加载性能…详情→
React 快速上手 – 05 组件渲染控制 React 快速上手 – 05 组件渲染控制本质上讲，本章还是说 JSX ，作为一个组件关键是渲染，所以我作为一个重点，单独写一章，方便大家理解上有个重点。理论上来说，渲染分两种方式 JSX React.createElement （我在本
Vue全家桶打造自适应 web 音乐播放器虽然全网上 Vue 仿饿了么、xx音乐的项目一大堆，但是我还是厚着脸皮来了，毕竟我也稍微标新立异，PC端为主，移动端为辅打造的 web 音乐播放器，所以说大佬们关爱下，毕竟我这个播放器刚从韩国回来！！！模仿QQ音乐网页版界面，采用flexbox和position布局； mmPlayer虽然是响应式，但主要以为PC端为主，移动端只做相应…
JavaScript中的类型判断，了解一下？在前端项目中，谁还没有被对象类型错误坑过？ typeof操作符通过typeof操作符获取操作数的类型： typeof undefined; // undefined typeof []; // object typeof '123'; // s
通过 GitHub V4 API 来了解 GraphQL 前几天看到一篇名为现代后端开发者必备技能的博客. 其中有一个条目提到了 GraphQL, 称它为REST 2.0, 再加上之前偶然间看到最新版的 Github API 使用了 GraphQL, 便想了解一下它到底是个什么东东. GraphQL 是 Graph Query Language 的简称, 在 Github 官方文档中指出了 GraphQL 的几个特点: A …
如何选择-Web-前端模板引擎 Web 模板就在那里无论你是否直接使用模板引擎, Web 模板一直都在, 不在前端就在后端. 甚至可追溯到超文本标记语言 HTML 标准正式确立之前. 服务器端的模板引擎我所知道最早的 Web 模板引擎是 PHP, 正式诞生于 1
JavaScript 是如何工作的：对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适原文地址：How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript 原文作者：Alexand
如何将 Vue 组件转成 React 组件？ vue-to-react ️ Try to transform Vue component(jsx syntax) to React component. It is under d
vue-to-react：Vue 组件转 React 组件 ️ Try to transform Vue component(jsx syntax) to React component. It is under developing, so it’s not stable now. The 1st stable version will come soon and be released v1.0.0. Preview screenshots Install Prerequisites: Node.js (>=8.0) and NPM (>=5.0)…