20180114 前端开发周报

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

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

    adb 是 Andorid Debug Bridge ,可以将安卓手机打开 USB 调试模式,然后连接 USB 线到电脑,就可以通过 adb 执行调试命令。 adb 安装 mac 下面使用 brew 安装 brew cask install Android-platform-tools windows 下面去搜索下载,然后放到环境变量里面去,保证命令行执行 adb 可以成功。 测试连接成功 使...

  2. 2、WebSocket 协议:5 分钟从入门到精通

    一、内容概览 WebSocket的出现,使得浏览器具备了实时双向通信的能力。本文由浅入深,介绍了WebSocket如何建立连接、交换数据的细节,以及数据帧的格式。此外,还简要介绍了针对WebSocket的安全攻击,以及协议是如何抵御类似攻击的。 二、什么是WebSocket HTML5开始提供的一种浏览器与服务器...

  3. 3、做一个可复用的 echarts-vue 组件(延迟动画加载)

    在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的;2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可能在几秒内卡死,产...

  4. 4、Vue 后台模板 [Vue admin] SanJi Boot Admin Iview

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

  5. 5、你不知道的前端算法之文字避让

    本文作者:TalkingData 可视化工程师李凤禄编辑:Aresn inMap 是一款基于 canvas 的大数据可视化库,专注于大数据方向点线面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式;致力于让大数据可视...

  6. 6、基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)

    在线地址:github.czero.cn/fancy 手机扫描二维码查看: 点击下载安卓apk安装包 源码地址:https://github.com/czero1995/fancy-store 项目主架构 使用的库 vue-cli (vue+webpack脚手架) vue-router(路由跳转) vuex(...

  7. 7、2017 年节点——我的技术投资学习策略:超越前端、物联网、事件驱动

    软件开发不是一份稳定的工作:每年都会涌现一个又一个新的技术,每隔几年都会出现一些革命性的技术。尽管从代码、表现及差异上来看,新技术和旧的技术有一些概念上的相似,但是在使用的过程中,仍然是需要花费时...

  8. 8、canvas绘制海报+二维码,满足绝大部分场景

    canvas_x 无需任何第三方依赖,轻型工具库。canvas绘制海报,生成带logo的二维码。也可生成编辑界面,用户自定义输入,一键生成等等 项目地址 https://github.com/sayll/canvas_x 使用方法 可直接通过script标签...

  9. 9、SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(二)

    当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异。笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案...

  10. 10、前端每周清单第 46 期: 2017 Node.js / GraphQL / Vue.js 盘点,前端性能优化与可用性保障

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

  11. 11、JS 中的闭包是什么?

    本文为饥人谷讲师方方原创文章,首发于 前端学习指南。 大名鼎鼎的闭包!面试必问。请用自己的话简述 什么是「闭包」。 「闭包」的作用是什么。 首先来简述什么是闭包 假设上面三行代码在一个立即执行函数中(为...

  12. 12、Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别

  13. 13、谷歌工程师点赞中国程序员 实现Node.js启动超4倍提速

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

  14. 14、30s js代码片段 翻译

    这是对 github 上30s代码片段的翻译整理,由于作者的文档是通过脚本生成的,也就懒得去提pull了,整理了放到博客上供大家学习参考,后续会持续跟进翻译。 Array Array concatenation (合并参数) 使用 Array.conca...

  15. 17、用Vue自己造个组件轮子,以及实践背后带来的思考

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

  16. 18、用TypeScript来写推箱子游戏

    先介绍下TypeScript TypeScript 是JavaScript类型的超集,可以编译成纯JavaScript,由微软开发。允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作比如静态

  17. 19、next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    前端渲染:vue、react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如vue全家...

  18. 《欲练JS,必先攻CSS——前端修行之路》今天我讲的主题是css,具体聊一下我大概的css学习历史,分享一些干货,希望这次分享对大家有所启发和帮助。 (by 子慕大诗人 ) ​​​

    欲练JS,必先攻CSS——前端修行之路
  19. 从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(class)里来的?温馨提示:作者的爬坑记录,对你等大神完全没有价值,别在我这浪费生命温馨提示-续:你们要非得看,我也拦不住,但是至少得准备个支持ES6的Chrome浏览器吧?温馨提示-再续:ES6简直了,放着不用简直令人发指! 书...
  20. 22、为 React Native 撸一个原生导航框架

    笔者去年 10 月份正式接触 ReactNative,因为公司有计划采用 RN 来实现新的业务。在此之前,笔者已有数年原生应用开发经验。在接触 RN 之初,深深地感觉到 RN 的导航框架 react-navigation 缺乏原生的质感。笔者于是寻找原生导航的

  21. 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 是主要的工具,对于...

  22. 24、iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 处理静态资源

    视频地址:https://www.cctalk.com/v/15114923882788 处理静态资源 无非花开花落,静静。 指定静态资源目录 这里我们使用第三方中间件: koa-static 安装并使用 安装 koa-static: {代码...} 修改 app.js,增加并...

  23. 25、5个经典的JavaScript面试基础问题

    ​​​ JavaScript程序员在IT领域中的需求量非常巨大。如果你非常精通JavaScript,你会有很多换工作、涨薪水的机会。但是在一家公司录用你之前,你必须顺利通过面试,证明你的技能。在本文中,我将向您展示5个关于JavaScript相关的问题,可以全面地测试面试者JavaScript技能和解决问题的能力。一起来看看这5个经典的JavaScript...

    5个经典的JavaScript面试基础问题
  24. CSS效果篇--纯CSS+HTML实现checkbox的思路与实例checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了。这里对实现方法做个总结。 ...
  25. 27、前端完整教程,0 基础到中级水平,包括面试指导

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

  26. 28、从零开始搭建一个简单的基于webpack的vue开发环境

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

  27. 29、npm 发布 2017 JavaScript 框架报告:React 占主导地位

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

  28. 30、ES6函数与Lambda演算

    缘起 造了一个轮子,根据GitHub项目地址,生成项目目录树,直观的展现项目结构,以便于介绍项目。欢迎Star。 repository-tree 技术栈: ES6 Vue.js Webpack Vuex lodash GitHub API 应用涉及到了

  29. ES6中的代理模式-----Proxy 什么是代理模式 代理模式(英语:Proxy Pattern)是程序设计中的一种设计模式。 所谓的代理者是指一个类别可以作为其它东西的接口。代理者可以作任何东西的接口:网络连接、内存中的大对象、文件或其它昂贵或无法复制的资源。 著名的代理模式例子为引用
  30. 32、我在使用 React Native/Redux 开发中犯过的 11 个错误

    译文一篇,React Native 项目开发经验总结。

  31. #前端技术#

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

    详见: 2018 年前端有哪些领域、技术值得关注,哪些技术会兴起,哪些技术会没落,一些预测给予大家参考。 ​​​ 1.前言2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家起到一个参考作用!下面提及的技术,只是建议大家关注,也不是建议大家全部的都

    2018 前端值得关注的几个趋势
  32. 34、分享:一篇webpack配置基础绝好文章

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

  33. 35、深入理解JS引擎的执行机制

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

  34. 36、前端跨域解决方案汇总

    关于跨域的文章,之前分享过很多,来看看这篇前端跨域解决方案,由简及深介绍各种存在的跨域请求解决方案,包括 document.domain, location.hash, window.name, window.postMessage, JSONP, WebSocket, CORS #前端开发博客# ​​​

    前端跨域解决方案汇总
  35. 37、关于 Parcel 你所需要知道的一切:时下火爆的快速 Web 应用打包器

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

  36. 38、2018-01-05 探索Vue高阶组件

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

  37. 39、[跳一跳] Nodejs + Opencv 版

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

  38. 40、HTTP/2 幕后原理

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

喜欢这篇文章的朋友,欢迎收藏、分享、评论,帮我上热门,你的支持,是我每日更新的动力!

喜欢前端的朋友可以点击关注一下我微博,每日分享精彩的前端文章!

原文:20180114 前端开发周报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-weekly-20180114.html)