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

写一个 vuepress 主题；为 Node.js 应用建立一个更安全的沙箱环境；巧妙替换window.open被拦截的问题；前端构建工具发展及其比较；Hexo已经看腻了，来试试VuePress搭建个人博客；vue中.vue文件解析流程；为何 Canvas 内元素动画总是在颤抖？；一段关于国产芯片和操作系统的往事

写一个 vuepress 主题 vue 作者尤大发布了一个 vue 编写的博客系统 vuepress , 可以用来开发个人博客, 项目主页等等. 如果你还不了解它, 旁友, 赶紧点击链接了解一下跟其他的博客系统一样, 它提供了定制主题的功能, 于是我花了两天时间, 定制了一款博客的主题,
为 Node.js 应用建立一个更安全的沙箱环境有哪些动态执行脚本的场景？在一些应用中，我们希望给用户提供插入自定义逻辑的能力，比如 Microsoft 的 Office 中的 VBA，比如一些游戏中的 lua 脚本，FireFox 的「油猴脚本」，能够让用户发在可控的范围和权限…
巧妙替换window.open被拦截的问题 1.问题描述：账户的充值问题，在提交充值信息获取充值单号以后，再调取后台的接口，得到支付宝或者银行第三方的url进行支付！ 2.解决过程：方法一、直接在发送请求获得url后，用window.open打开； <a class="tijiao" @cl
前端构建工具发展及其比较本文前两部分摘自吴浩麟所著《深入浅出Webpack》1.2，版权归原作者所所有我们一定会感叹前端技术发展之快，各种可以提高开发效率的新思想和框架层出不穷。但是他们都有一个共同特点：源代码无法直接运行，必须通过转换后才能正常运行。构建工具就是做这件事，将源代码转换成可以执行的JavaScript、CSS、HTML 代码…
Hexo已经看腻了，来试试VuePress搭建个人博客 VuePress 先简单介绍一下VuePress，这是尤大在2018年4月份发布的一个新轮子。一个基于 Vue SSR 的静态站生成器，本来的目的是爽爽的写文档，但是我发现用来撸一个人博客也非常不错。这是VuePress的官方文档这是VuePress的
vue中.vue文件解析流程我们平时写的 .vue 文件称为 SFC(Single File Components)，本文介绍将 SFC 解析为 descriptor 这一过程在 vue 中是如何执行的。 vue 提供了一个 compiler.parseComponent(file, ) 方法，来将 .vue 文件解析成一个 descriptor： // an object format describing a single-file component. declare ty…
为何 Canvas 内元素动画总是在颤抖？来源： https://fanmingfei.com/posts/… 背景过年的项目中遇到一个问题让我百思不得其解，明明我的帧率保持在60帧，为何我的动画却一直抖动？我的场景是一个匀速直线运动的小姐姐。先上一个 Demo 在这个 Dem…
一段关于国产芯片和操作系统的往事中兴事件引发一片网络热议。什么“这次被美国卡住的芯，一万年也要搞出来”、“中国芯老炮：缺芯是因为缺钱”“国产操作系统，要靠BAT”……这种言论看得我胸痛。忍了几天，今天忍不住了。说说自己经历的一段往事。不知不觉写了一万字。分几个部分：辉煌开局、第一第二棒的困难、系统生态的…
JavaScript实现简单的双向数据绑定
Vue-详解设置路由导航的两种方法： <router-link :to="…"> 和router.push(…) 一、<router-link :to="…"> to里的值可以是一个字符串路径，或者一个描述地址的对象。例如： // 字符串 <router-link to="apple"> to apple</router-lin
浅谈js的内存与闭包主要结合了内存的概念讲了js的一些的很简单、但是又不小心就犯错的地方。结论：js执行顺序，先定义，后执行，从上到下，就近原则。闭包可以让外部访问某函数内部变量，而且会导致内存泄漏。 1.先说类型在ECMAscript数据类型有基本类型和引用类型，基本类型有Undefined、Null、Boolean、Number、String，引用类型有…
JS:解析forEach()、map()源码及浅谈两者之间的区别 var arr = Array.prototype.myForEach = function(fn){ var len = this.length; for(var i = 0; i < len; i ++){ fn(this ,i); } } arr.myForEach(function (ele, index){ console.log(ele, index); }) map() 源码解析 var arr = Array.protot…
VUE从零开始系列（初体验），呆萌小白上手VUE 热乎乎的第二篇来了，这几天有项目缠身，没有及时更新，在下实在抱歉介绍前一章我们介绍了脚手架的搭建，本章开始正式开发，废话不多说，我们直接开发一个后台管理系统，ui框架用神器 element ui ，api数据我们自己模拟，用 mock.js 。目录结构刚搭起的框架有一堆乱七八糟的文件和文件夹，我不认识它们…
ES6 实用开发技巧 Javascript – ES6 实用开发技巧本文只罗列出在 ES6 开发过程中相对实用的内容，并非一个高大全的文档，如果希望查阅详细的内容，可购买阮一峰老师所出版的 ES6 相关图书。另外阮一峰老师《ECMAScript 6 入门》一书在网上有对应的网站可
[JS性能优化]函数去抖(debounce)与函数节流(throttle) 这是个老生常谈的话题了，之所以还搬出来讲讲，原因之一是之前根本就没在意，近期面临的一些问题需要用到这两个小技巧；原因之二，这两个技巧带来的优化不小；原因之三，顺便复习一下闭包。开发中你可能会遇到下面的情况：监听 Window 对象的 resize ， scroll 事件拖拽时监听 …
使用 Envoy 作为前端代理 Envoy 是一款由 Lyft 开源的，使用 C++ 编写的 L7 代理和通信总线，目前是 CNCF 旗下的开源项目，代码托管在 GitHub 上，它也是 Istio service mesh 中默认的 data plane。本文将给出使用 Envoy 作为 service mesh 的数据平面的示例，应用使用 docker-compose 编排。特性 Envoy 包括如下特性： …
前端进阶：二进制数据的操控—-附项目代码引言：近期，工作中发现，有些前端小伙伴很少接触到二进制数据，所以将项目中二进制数据的应用和大家分享一下，适合入门了解，高手慎入，欢迎拍砖。项目背景：基于公司原有图形处理的二进制数据文件（公司自定义的二进制数据格式），实现Canvas绘图。话说：项目开始的时候我也是一脸懵逼，这么多技术难点需要攻…
JavaScript之内存泄漏【四】接着上文闭包，我们来聊聊内存泄漏，看完下面文章，你将了解到： 1、什么是内存泄漏 2、有哪些code会导致内存泄漏 3、如何规避内存泄漏一、探究内存泄漏之前，我们先了解下垃圾回收机制（GC）垃圾回收机制（GC）: 由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配…
一款基于Vue和Go的桌面端管理star项目应用前言: 自己star的repo已经有100多个了, 有一天自己翻了一下列表, 想起来有一堆东西自己也不知道为什么当初star了…(应该是跟风大佬2333), 不过, 我个人认为, 一般在github上star别人的项目无非有以下几点: 这个项目在当前或者
Vue还有这种骚操作？浅析几个新手常常忽略的API 一：实现子组件与父组件双向绑定的【sync】修饰符：一般来说，我们实现父子组件值的传递通常使用的是【props】和自定义事件【$emit】。父组件通过【props】将值传给子组件，子组件通过【$emit】将值传给父组件，父组件通过【$on】事件获取子组件传过来的值，如果说想要实现子组件修改父组件传过来的值，最容易的…
你不知道的 Vue 的图标组件封装一个图标组件，可以配置某一个图标，可以设置是否旋转，可以追加字体图标。特点简单实用，灵活可配。一个 Vue 的文件共有 class 封装一个图标组件首先从一个 vue 文件开始，其主要的结构就是一个 i 标签。最关键的就是这个 class 名的配置。有
Angular性能优化 – 再谈Angular 4脏值检测 Angular 4的脏值检测是个老话题了，而理解这个模型是做Angular性能优化的基础。因此，今天我们再来聊聊Angular 4脏值检测的原理，并看看性能优化的小提示。进入点 – Zone.js Angular 4是一个MVVM框架。数据模型（Model）转换成视图模型（ViewModel）后，绑定到视图（View）上渲染成肉眼可见的页面。因此，发现数据…
深入React高阶组件(HOC) 什么是HOC? HOC(全称Higher-order component)是一种React的进阶使用方法，主要还是为了便于组件的复用。HOC就是一个方法，获取一个组件，返回一个更高级的组件。什么时候使用HOC? 在React开发过程中，发现有很多情况下，组件
ECMAScript 2016、2017和2018新增功能示例 It’s hard to keep track of what’s new in JavaScript (ECMAScript). And it’s even harder to find useful code examples. So in this ar
Node.js的可伸缩性文章翻译子 Scaling Node.js Applications 你应该知道所有关于Node.js的可伸缩性可伸缩性并不是扩展Node.js应用的第三方包的性能，它是Node.js(Javascript运行时环境)的核心功能。Node.js取名为节点(Node)，这强调Node.js应用可以通过相互通信的分布式节点向外提供服务。你是否将你的Node.js应用部署…
从零开始做Vue前端架构（6）单元测试 & 代码覆盖率新的一年（噗，都快年中了）之前因为上家公司的经营出了问题，年前的大裁员，过了一个漫长的春节。之后加入了新公司，然后正好赶上一个很紧急的项目，忙成狗，因此好久没更新文章了。不过，我又回来啦！原文从零开始做Vue前端架构（6）单元测试 & 代码覆
用JS写个小灯控制器呗最近，因为一些不可描述的原因，我踩了个巨坑——JS控制单片机先上效果吧，由于不知道掘金怎么上传录像，就放微博啦，链接地址：微博分享正文作为一名端茶倒水、递烟递酒、擦窗扫地无所不能的全干打杂工，我是一点想法都没有，毕竟作为一名前端都算不上合格，更不用讲硬件这块了。单片机的开发一般都是…
[Video.js]隐藏和显示视频播放器控件原文链接： Hiding and Showing Video Player Controls 上周我决定解决一些围绕控制栏的悬而未决的问题，然后进入相关播放器更新的流程。我现在很幸运地有了一些时间，并且我会写一些关于它的更新。播放器控制栏的预期行为之一是，当用户在观看视频时处于非活动状态时，它会在几秒钟后淡出。以前，我们通过v…
【20180424 前端开发日报】Vue中的方法，属性计算和观察者；复习Vue中的方法,计算和侦听者；Modern Javascript Cheatsheet 简体中文版（持续更新中）；JS语句为什么不能以“function”与大括号开头；用CSS Houdini画一片星空；基于SVG路径运动的js…详情→
基于 HTML5 的 WebGL 3D 智能楼宇监控系统前言智能监控的领域已经涉及到了各大领域，工控、电信、电力、轨道交通、航天航空等等，为了减少人员的消耗，监控系统必不可少。之前我写过一篇 2D 的智能地铁监控系统广受好评，突然觉得，既然 2D 的这么受欢迎…
Vue SPA项目 + Sentry 实现前端错误监控前端监控是相对于后端监控而言的，以往的后端监控只能记录接口被请求之后所发生的错误，但是现在随着用户复杂度不断提高，很多错误是在后端接口被请求以前就发生的JS错误。对于这种错误，传统的后端错误监控是无能为力的，因此前端监控应运而生。为什么选择Sentry 最近想在公司的项目上部署前端监控，以主动捕捉用…