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

前端要以正确的姿势学习编译原理（上篇）；用JS搞了一个自动翻译，从此不再头疼看英文书了；20180522 前端开发日报；精读《现代 js 框架存在的根本原因》；搭建自己的脚手架—“优雅”生成前端工程；CSS网格与Flexbox；记一次XX前端面试；Query.js – 类SQL前端数据查询类库

前端要以正确的姿势学习编译原理（上篇）
用JS搞了一个自动翻译，从此不再头疼看英文书了小记：作为一个有追求的码农，“懒”，不一定是一个贬义词。有时候“懒”，才是进步的动力！背景经常遇到这样的情况，发现一本眼馋的技术书，却发现只有英文版。慢慢啃吗？真的很痛苦。于是灵光一闪，我需要这样一个小工具，点击运行可以批量的完成翻译任务。于是，去吧皮
【20180522 前端开发日报】码云推荐 | 基于 Vue 的延迟加载插件 vue-view-lazy；Safe.js 2.2.0 发布，增加class和name属性比vue快8倍；简单构建 ThinkJS + Vue2.0 前后端分离的多页应用；Redux + Immutable.js 性能优化；开箱即用的 Vue Webpack…详情→
精读《现代 js 框架存在的根本原因》1 引言深入思考为何前端需要框架，以及 web components 是否可以代替前端框架？原文地址，建议先阅读原文，或者阅读概述。 2 概述现在前端框架非常多了，如果让我们回答 “为什么要用前端框架” 这个问题，你觉…
搭建自己的脚手架—“优雅”生成前端工程我平时工作会做移动端H5多一些，所以我通过webpack搭建了自己的前端工程（ x-build ），主要是编译stylus、jade、es6，自适应解决方案，还有一些自己写的一些插件。做新的项目时，每次复制文件夹，然后修改package.json、README.md等，感觉很不“优雅”，想使用类似 vue-cli ，使用 vue init 的方式在…
CSS网格与Flexbox 几天前，我阅读了一篇关于CSS网格系统的文章。但作为开发人员，你真的不知道在你真正尝试之前有什么用处。所以让我们来尝试一下。我将创建两个基本设计。一个使用Flexbox，另一个使用网格系统。使用Flexbox构建布局实际上只是帮助你将两个项
记一次XX前端面试距离自己被外派(俗称外包)出去，已经过了快五个月，工作的话，很闲。人啊，一定保持好的习惯，懒惰是会上瘾，日常摸鱼，怀疑人生，我是谁，我在哪，我要干什么。中午吃饭的时候，收到了boss直聘的一条消息，XX发来一个信息，是一个前端职位，问我是否感兴趣，讲道理，我还是很诧异的，一是我BOSS直聘上的简历很久没更…
Query.js – 类SQL前端数据查询类库使用JavaScript实现的一个类SQL的用于在前端查询数据的类库。基本接口参考了thinkphp查询语法的实现。 Example Github 如何使用 // 支持 umd <script src="./build/query.js"></script> var data = [] // 数据 var query = new Query(data) 实例方法 range Descr…
JavaScript 工作原理之七－Web Workers 分类及 5 个使用场景原文请查阅这里，略有删减，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland 。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第七章。现在，我们将会剖析 Web Workers：我们将会综合比较不同类型的 workers，如何组合运用他们的构建模块来进行开发以及不同场景下各自的…
ES6 系列之 let 和 const块级作用域的出现通过 var 声明的变量存在变量提升的特性： {代码…} 初学者可能会觉得只有 condition 为 true 的时候，才会创建 value，如果 condition 为 false，结果应该是报错，然而因为变量提升的原因，代…
对Promise的深情，只好浅谈对Promise的深情，只好浅谈谢时间拈了眉头的霜花，谢沧桑喂饱思念的马，谢绵长情话投射了天涯，带我去探索Promise，让偶在红尘中，啊，不，在Promise中醉一下。回调的前世今生，让你再见不必害怕我相信当每个人遇到Promise的那一刻，在你身上产生了一种由内而发的情感，叫作承诺，叫作心动。那么，故…
JavaScript从初级往高级走系列————异步什么是单线程，和异步有什么关系什么是event-loop 是否用过jQuery的Deferred Promise的基本使用和原理介绍一下async/await(和Promise的区别、联系) 异步解决方案什么是单线程，和异步有什么关系单线程-只有一个线程，只做一件事。JS之所以是单线程，取决于它的实际使用，例如JS不可能同添加…
vuex其实超简单,喝完这3步,还有3步上一篇 vuex其实超简单,只需3步简单介绍了vuex的3步入门,不过为了初学者容易消化,我削减了很多内容,这一节,就是把少掉的内容补上, 如果你没看过上篇,请戳链接过去先看一下再回来,否则,你会觉得本文摸不着头脑. 纯属个人经验,难免有不正确的地方,如有
全双工通信的 WebSocket WebSocket 是一种网络通信协议。在 2009 年诞生，于 2011 年被 IETF 定为标准 RFC 6455 通信标准。并由 RFC7936 补充规范。WebSocket API 也被 W3C 定为标准。 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工(full-duplex)通讯的协议。没有了 Request 和 Response 的概念，两者地位完全平等，连接…
JavaScript深浅拷贝 ECMAScript中的数据类型可分为两种：基本类型：undefined,null,Boolean,String,Number,Symbol 引用类型：Object,Array,Date,Function,RegExp等不同类型的存储方式：基本类型：基本类型值在内存中占据固定大小，保存在栈内存中引用类型：引用类型的值是对象，保存在堆内存中，而 …
Vue单页及多页应用全局配置404页面实践这篇文章也发在我的博客，欢迎围观写在前面前后端分离后，控制路由跳转的责任转移到了前端，后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目，均采用vue作为基础框架，一个是SPA应用，另一个是多页应用，均由前端进行路由控制及
pwa+webpack，初探与踩坑 0.前言我们都知道pwa是一个新技术.，依靠缓存，离线了还能正常跑，而且秒开。我把以前原生写的小游戏迁移到react，再迁移到webpack+react，最后再升级到pwa。具体介绍不多说，我们开始撸吧。 1.webpack webpack攻略有很多，不啰嗦
在vue中使用jsx语法 JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析. 我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,…
腾讯 Node.js 基础设施 Tencent Server Web 正式开源经过六年的迭代与沉淀，腾讯Tencent Server Web (以下简称TSW)这一公司级运维组件于今日正式开源。TSW是面向WEB前端开发者，以提升问题定位效率为初衷，提供云抓包、全息日志和异常发现的Node.js基础设施。TSW每天为百亿次请求提供稳定服务，广泛应用在QQ空间、微视、微云、QQ音乐、全民K歌、腾讯云等三十多个重要业务当…
来，用ES6写个Promise吧本文采用es6语法实现Promise基本的功能, 适合有javascript和es6基础的读者，如果没有，请阅读 http://es6.ruanyifeng.com/ 回调函数在日常开发中，通常会使用ajax请求数据，拿到数据后，对数据进行处理。但是，假设你需要多次ajax请求数据，并且每次ajax请求数据都是基于上一次请求数据作为参数，再次…
《【React进阶系列】从零开始手把手教你实现一个Virtual DOM（一）》Virtual DOM则是将DOM再抽象一层生成的简化版js对象，这个对象也拥有DOM上的一些属性，比如id, class等，但它是完全脱离于浏览器而存在的。（by zach5078）
基于vue2.x视口懒加载解决方案 vue-view-lazy 基于vue的懒加载插件目的：图片或者其他资源进入可视区域后加载注意该插件依赖IntersectionObserver API，如需在较低版本浏览器运行，需要引入 polyfill 安装使用直接下载dist目录下的v
基于 Egg.js 框架的 Node.js 服务构建之用户管理设计前言近来公司需要构建一套 EMM（Enterprise Mobility Management）的管理平台，就这种面向企业的应用管理本身需要考虑的需求是十分复杂的，技术层面管理端和服务端构建是架构核心，客户端本身初期倒不需要那么复…
react-bind-once 了解一下？ react-bind-once react-bind-once是一个将JSX事件句柄的this自动绑定到组件实例的工具你还在构造函数里一一手动绑定吗？试试react-bind-once GitHub npm 安装 $ npm install react
详解动态规划01背包问题–JavaScript实现一开始在接触动态规划的时候，可能会云里雾里，似乎能理解思路，但是又无法准确地表述或者把代码写出来。本篇将一步一步通过作图的方式帮助初次接触动态规划的同学来理解问题。这一篇将以经典的 01背包问题为例子来讲解，最后通过纯 JavaScript 来实现，在 Sublime 上运行演示。当然如果不会 JavaScript 也一点关系都没…
jtalk第七期前端场–收获分享本次分享主要是三个主题吧，一个是阿里通信染陌大神渐进式pwa的入门级介绍，一个是有赞连成杰分享涉及前后端协作的技术产物zanProxy和zanApi的部分，一个是宋小菜–scott老师关于前端一些方法论的分享。然后我自己的话大概前端做了三年多一点，分享下自己的感受吧，有整理不对或者理解不对的，欢迎大家吐槽，我们从小…
Node.js EventEmitter解读 Node.js核心API基于异步事件驱动的架构，fs.ReadStream可以通过on()方式来监听事件其实都是由于继承了EventEmitter类，如下所示 const fs = require('fs'); const EventEmitter = req
JavaScript 常用特性解释 —— 类型、迭代器、生成器、同步/异步某些 JavaScript（ECMAScript）特性比其他的容易理解。生成器（Generators）看起来很奇怪——像 C/C++ 中的指针。类型（Symbols）看起来同时既像原语又像对象。这些特性都是相互关联，相互构建的。因此你不能脱离其他特性而只理解一个。因此在本文，我会涉及到类型、全局类型、迭代器、可迭代对象、生成器、异步/…
Jest-Vue-Report 最近一直再忙公司项目的优化与重构，在写ui组件库，有阵子没出来写写文章和大伙儿交流交流啦，自己还是比较喜欢和热爱代码或者黑科技的童鞋一起沟通沟通，说不定在沟通过程中会时不时某个点或者某个经历能和大家产生共鸣。小编一直是Vuejs和java的忠实粉丝，已经准备好了在全栈攻城狮的道路上一路走到黑，也希望…
React Native（Android）调用支付宝使用社区推荐的react-native-yunpeng-alipay插件，按照文档配置就行了，配置完毕，使用react-native run-android启动项目，可能会报错，报错信息是什么override无法覆盖（具体忘了），这时候找到报错那个文件，删除掉