20180114 前端开发周报-前端开发博客

JS写小游戏「跳一跳」外挂之上来自己动；WebSocket 协议：5 分钟从入门到精通；做一个可复用的 echarts-vue 组件（延迟动画加载）；Vue 后台模板 [Vue admin] SanJi Boot Admin Iview；你不知道的前端算法之文字避让；基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)；2017 年节点——我的技术投资学习策略：超越前端、物联网、事件驱动；canvas绘制海报+二维码，满足绝大部分场景

1、JS写小游戏「跳一跳」外挂之上来自己动

adb 是 Andorid Debug Bridge ，可以将安卓手机打开 USB 调试模式，然后连接 USB 线到电脑，就可以通过 adb 执行调试命令。 adb 安装 mac 下面使用 brew 安装 brew cask install android-platform-tools windows 下面去搜索下载，然后放到环境变量里面去，保证命令行执行 adb 可以成功。测试连接成功使…
2、WebSocket 协议：5 分钟从入门到精通

一、内容概览 WebSocket的出现，使得浏览器具备了实时双向通信的能力。本文由浅入深，介绍了WebSocket如何建立连接、交换数据的细节，以及数据帧的格式。此外，还简要介绍了针对WebSocket的安全攻击，以及协议是如何抵御类似攻击的。二、什么是WebSocket HTML5开始提供的一种浏览器与服务器…
3、做一个可复用的 echarts-vue 组件（延迟动画加载）

在 vue 项目使用 echarts 的场景中，以下三点不容忽视：1. 可视化的数据往往是异步加载的；2. 若一个页面存在大量的图表（尤其当存在关系图和地图时），往往会导致该页面的渲染速度很慢并可能在几秒内卡死，产…
4、Vue 后台模板 [Vue admin] SanJi Boot Admin Iview

导读：很久没有写文章了,最近一直在忙,之前一直想着可以把SanJi Boot Security项目中的页面使用 Vue+webpack 进行重写,前几天算是阶段性的完成了这个计划,后期会随着SanJi Boot 的模块不断增多对其进行对应的升…
5、你不知道的前端算法之文字避让

本文作者：TalkingData 可视化工程师李凤禄编辑：Aresn inMap 是一款基于 canvas 的大数据可视化库，专注于大数据方向点线面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式；致力于让大数据可视…
6、基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)

在线地址:github.czero.cn/fancy 手机扫描二维码查看: 点击下载安卓apk安装包源码地址:https://github.com/czero1995/fancy-store 项目主架构使用的库 vue-cli (vue+webpack脚手架) vue-router(路由跳转) vuex(…
7、2017 年节点——我的技术投资学习策略：超越前端、物联网、事件驱动

软件开发不是一份稳定的工作：每年都会涌现一个又一个新的技术，每隔几年都会出现一些革命性的技术。尽管从代码、表现及差异上来看，新技术和旧的技术有一些概念上的相似，但是在使用的过程中，仍然是需要花费时…
8、canvas绘制海报+二维码，满足绝大部分场景

canvas_x 无需任何第三方依赖，轻型工具库。canvas绘制海报，生成带logo的二维码。也可生成编辑界面，用户自定义输入，一键生成等等项目地址 https://github.com/sayll/canvas_x 使用方法可直接通过script标签…
9、SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题(二)

当前后端分离时，权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块，现在权限管理模块已经做完了，我想通过5-6篇文章，来介绍一下项目中遇到的问题以及我的解决方案…
10、前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点，前端性能优化与可用性保障

前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点，前端性能优化与可用性保障作者：王下邀月熊编辑：徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分…
11、JS 中的闭包是什么？

本文为饥人谷讲师方方原创文章，首发于前端学习指南。大名鼎鼎的闭包！面试必问。请用自己的话简述什么是「闭包」。「闭包」的作用是什么。首先来简述什么是闭包假设上面三行代码在一个立即执行函数中（为…
12、Vue学习看这篇就够

Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别
13、谷歌工程师点赞中国程序员实现Node.js启动超4倍提速

近日，一位谷歌工程师Yang,Guo在其个人推特上连发多条推文，多次称赞阿里巴巴一位程序员的对开源技术Node.js的提速优化。从图中可以看出，他发贴表示“阿里巴巴的工作人员实现了Node.js引擎启动速度的2倍速优化”。随后他再次推文，表示这位程序员将优化效果做到了近4倍的提升，完全符合他的预期。这位Yang,G…
14、30s js代码片段翻译

这是对 github 上30s代码片段的翻译整理，由于作者的文档是通过脚本生成的，也就懒得去提pull了，整理了放到博客上供大家学习参考，后续会持续跟进翻译。 Array Array concatenation (合并参数) 使用 Array.conca…
15、WebVR开发——Web Audio实现3D音效
16、大前端工程师2017热门文章
17、用Vue自己造个组件轮子，以及实践背后带来的思考

前言首先，向大家说声抱歉。由于之前的井底之蛙，误认为Vue.js还远没有覆盖到二三线城市的互联网小厂里。现在我错了，从我司的前端技术选型之路便可见端倪。以太原为例，已经有不少公司陆续开始采用Vue.js作为他们公司前端的技术栈，前后端分离正搞得热火朝天，还有
18、用TypeScript来写推箱子游戏

先介绍下TypeScript TypeScript 是JavaScript类型的超集，可以编译成纯JavaScript，由微软开发。允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态
19、next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器，并用PM2守护程序

前端渲染：vue、react等单页面项目应该这样子部署到服务器貌似从前几年，前后端分离逐渐就开始流行起来，把一些渲染计算的工作抛向前端以便减轻服务端的压力，但为啥现在又开始流行在服务端渲染了呢？如vue全家…
《欲练JS，必先攻CSS——前端修行之路》今天我讲的主题是css，具体聊一下我大概的css学习历史，分享一些干货，希望这次分享对大家有所启发和帮助。（by 子慕大诗人）
从-1开始的ES6探索之旅02：小伙子，你对象咋来的？续篇 – 你的对象班（class）里来的？温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？温馨提示-再续：ES6简直了，放着不用简直令人发指！书…
22、为 React Native 撸一个原生导航框架

笔者去年 10 月份正式接触 ReactNative，因为公司有计划采用 RN 来实现新的业务。在此之前，笔者已有数年原生应用开发经验。在接触 RN 之初，深深地感觉到 RN 的导航框架 react-navigation 缺乏原生的质感。笔者于是寻找原生导航的
23、全新打包工具parcel零配置vue开发脚手架

parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上项目地址: https://github.com/w3c-king/parcel-vue 初始化项目 $ git clone https://github.com/w3c-king/parcel-vue.git 安装依赖 $ cd parce-vue $ npm install 其中 parcel-bundler 是主要的工具，对于…
24、iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ 处理静态资源

视频地址：https://www.cctalk.com/v/15114923882788 处理静态资源无非花开花落，静静。指定静态资源目录这里我们使用第三方中间件： koa-static 安装并使用安装 koa-static： {代码…} 修改 app.js，增加并…
25、5个经典的JavaScript面试基础问题

JavaScript程序员在IT领域中的需求量非常巨大。如果你非常精通JavaScript，你会有很多换工作、涨薪水的机会。但是在一家公司录用你之前，你必须顺利通过面试，证明你的技能。在本文中，我将向您展示5个关于JavaScript相关的问题，可以全面地测试面试者JavaScript技能和解决问题的能力。一起来看看这5个经典的JavaScript…
CSS效果篇–纯CSS+HTML实现checkbox的思路与实例checkbox应该是一个比较常用的html功能了，不过浏览器自带的checkbox往往样式不怎么好看，而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求，checkbox的自定义就被提出来了。这里对实现方法做个总结。 …
27、前端完整教程，0 基础到中级水平，包括面试指导

应读者要求，需要前端学习资料，今天给大家准备了一套完整的学习教程，内容只包括基础和中级，高级的不在本次分享。本公众号所分享的学习资料均来自网络和某宝购买，如有其他问题，请留言与我，以便做相应处理。前端待遇怎么样？上图来自拉勾网在北京的前端工程师招聘信息，从图中可以分析出这两点信息：…
28、从零开始搭建一个简单的基于webpack的vue开发环境

都8102年了，现在还来谈webpack的配置，额，是有点晚了。而且，基于vue-cli或者create-react-app生成的项目，也已经一键为我们配置好了webpack，看起来似乎并不需要我们深入了解。不过，为了学习和理解webpack解决了前端的哪些痛点，还是有必要从零开始自己搭建一个简单的开发环境。本文的webpack配置参考了vue-cli…
29、npm 发布 2017 JavaScript 框架报告：React 占主导地位

npm 的联合创始人兼首席运营官 Laurie Voss 近日发布了 2018 年的第一个 JavaScript 现状报告，这一系列报告包含三部分，将会提供 JavaScript 发展趋势和实践的完整回顾。第一部分讲述了 2017 前端框架的现状，第二部分将讲述 React 的生态系统，第三部分将对后端框架进行讲述。目前，第二和第三部分尚未发布。 Lau…
30、ES6函数与Lambda演算

缘起造了一个轮子，根据GitHub项目地址，生成项目目录树，直观的展现项目结构，以便于介绍项目。欢迎Star。 repository-tree 技术栈： ES6 Vue.js Webpack Vuex lodash GitHub API 应用涉及到了
ES6中的代理模式—–Proxy 什么是代理模式代理模式（英语：Proxy Pattern）是程序设计中的一种设计模式。所谓的代理者是指一个类别可以作为其它东西的接口。代理者可以作任何东西的接口：网络连接、内存中的大对象、文件或其它昂贵或无法复制的资源。著名的代理模式例子为引用
32、我在使用 React Native/Redux 开发中犯过的 11 个错误

译文一篇，React Native 项目开发经验总结。
#前端技术#

33、2018 前端值得关注的几个趋势

详见： 2018 年前端有哪些领域、技术值得关注，哪些技术会兴起，哪些技术会没落，一些预测给予大家参考。 1.前言2017悄然过去，2018已经来到。人在进步，技术在发展。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。下面就我个人的判断进行一个预测判断，希望能对大家起到一个参考作用！下面提及的技术，只是建议大家关注，也不是建议大家全部的都
34、分享：一篇webpack配置基础绝好文章

Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其他框架开发的应用也有很多在使用Webpack。当我第一次看到Webpack的配置文件时，它看起来非常的陌生，我非常的疑惑。经过一段时间的尝试之后我认为这是因为Webpack只是使用了比较特别的语法和引入了新的原理，因此会让使用者感到疑惑。…
35、深入理解JS引擎的执行机制

深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2点: (1) JS是单线程语言…
36、前端跨域解决方案汇总

关于跨域的文章，之前分享过很多，来看看这篇前端跨域解决方案，由简及深介绍各种存在的跨域请求解决方案，包括 document.domain, location.hash, window.name, window.postMessage, JSONP, WebSocket, CORS #前端开发博客#
37、关于 Parcel 你所需要知道的一切：时下火爆的快速 Web 应用打包器

这是一次试翻，之后会每两周翻译一篇文章（练习英语阅读）。原文： https://medium.freecodecamp.org/all-you-need-to-know-about-parcel-dbe151b70082 真的吗？又是一个打包器或者说构建工具？完全正确，进化和创新的结合为你带来了。( https://parceljs.org/) Parcel 有什么特别之处以…
38、2018-01-05 探索Vue高阶组件

高阶组件( HOC )是 React 生态系统的常用词汇， React 中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins ，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说…
39、[跳一跳] Nodejs + Opencv 版

游戏中，小人蓄力时长决定弹跳距离，成功跳到下一个墩子，即加分。目标即获取小人位置，获取目标点位置然后计算距离。在做的过程中，发现，人物弹跳方向为斜向30度，未跳到中心点的情况下，偏移位置似乎不会导致游戏失败。于是游戏目标简化为搜索小人位置，与搜索墩子中心点横坐标。墩子中心点横坐标，与墩…
40、HTTP/2 幕后原理

“  HTTP/2 的首要目标是改善 Web 应用程序用户的体验。作为一个二进制协议，它拥有包括轻量型、安全和快速在内的所有优势。HTTP/2 保留了原始 HTTP 协议的语义，但更改了在系统之间传输数据的方式。这些复杂细节主要由客户端和服务器管理，