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

前端3大JS框架走势图：vue增长最快，react或被Preact 取代；区块链是如何工作的：用 JavaScript 演示；仿美团外卖的全栈项目(vue+node+mongodb)带支付->大三求实习；[基础向]Vue主要原理最简实现与逻辑梳理；JavaScript正则表达式学习笔记(二) – 打怪升级；vue.js源码- 剖析observer,dep,watch如何具体的实现数据双向绑定；澄清server push/websocket/sse的一些概念；js 深浅拷贝知多少

前端3大JS框架走势图：vue增长最快，react或被Preact 取代 Javascriptreport 近日发布了一篇文章来比较流行前端框架的走势。走势图是通过统计最新的数据，并与前一年的数据进行比较而生成。数据来源于 npm trends 的每日下载量。前端框架三巨头 React、Angular 和 Vue，虽然都很受欢迎，
区块链是如何工作的：用 JavaScript 演示原文：How does blockchain really work? I built an app to show you. 作者：Sean Han 译者：JeLewine 根据维基百科，区块链是：一个用于维护不断增长的记录列表的分布式数据库，我们称之为区块链。这听起来很棒，那它是如何工作的呢？为了说明区块链，我们将会…
仿美团外卖的全栈项目(vue+node+mongodb)带支付->大三求实习 2019届大三学生，前段时间一直想一个人单独开发一个较为完整的项目，在众多应用中，考虑之后选择了美团外卖来模仿，这段时间就利用课余时间进行开发，前端用vue+vuex+vue-router+axios，因为需要用到定位和支付等功能，需要后端配合，而且想要做真正数据交互，所以用express(基于nodejs的框架)做后台，数据库用NOSQL的mo…
[基础向]Vue主要原理最简实现与逻辑梳理 Vue的主要原理中主要用到了定义的这么几个函数Dep，Watcher，observer。我们来使用这几个函数简单的实现一下vue构造函数数据绑定和相互依赖部分，梳理一下它们之间的关系。省略了编译部分和proxy代理与其他的一些复杂逻辑。 Dep Dep是依赖类，简要实现为 class Dep { constructor () { // 放当时属性的观…
JavaScript正则表达式学习笔记(二) – 打怪升级本文接上篇，基础部分相对薄弱的同学请移步《JavaScript正则表达式学习笔记(一) – 理论基础》。上文介绍了 8 种JavaScript正则表达式的属性，本文还会追加介绍几种JavaScript正则表达式的属性(注意是非标准属性，但很好用)。一. 上文回顾本文会用到上篇文章部分内容，所以简单回顾下。 1.1 JavaScript正则表…
vue.js源码- 剖析observer,dep,watch如何具体的实现数据双向绑定 Vue双向数据绑定的核心和基础api是Object.defineProperty,其内部真正参与数据双向绑定流程的主要有Obderver、Dep和Watcher,基于defineProperty和发布者订阅者模式，最终实现数据的双向绑定。那么Obderver、Dep和Watcher是如何具体配合工作的呢？下面就来理一理。看此文章之前你需要对vue的双向数据绑定有一定的理解…
澄清server push/websocket/sse的一些概念 server push：有两个版本，http1的server push和http2的server push。 http1的server push:需要服务端代码，浏览器共同支持，简单说在浏览器发起请求后，服务端响应一个” Content-type: multipart/x-mixed-replace;boundary=– boundaryString — “的文档类型，然后由服务端代码循环推送内容…
js 深浅拷贝知多少最近在 vue 框架下写业务代码，不可避免地涉及到对象深浅拷贝的问题，趁机会总结记录一下。由于微信文章平台只能再重新编辑一次，以后文章有更新的话，会更新到我自己的个人博客，有兴趣的可以围观下：个人博客地址：blog.ironmaxi.com 内存的堆区与栈
js原型链新理解 // 对象都是由函数创建的 //var obj = { a: 10, b: 20 }; //var arr = ; var obj = new Object(); obj.a = 10; obj.b = 20; var arr = new Array(); arr = 5; arr = ‘x’; arr = true; 函数也是一种对象他也是属性的集合，你也可以对函数进行自定义属性。 …
websocketj–随时随地在Web浏览器中操作你的服务端程序
EventEmitter：从命令式 JavaScript class 到声明函数式的华丽转身新书终于截稿，今天稍有空闲，为大家奉献一篇关于 JavaScript 语言风格的文章，主角是函数声明式开发。我们对一个简易的，面向对象的 EventEmitter 系统，一步步改造为函数式风格。并结合实例来说明函数式的优秀特性。灵活的 JavaScript
ES6解决了什么问题 ECMAScript 6.0于2015 年 6 月正式发布了，成为JavaScript 语言的下一代标准。ES6增加的语言特性解决了哪些问题，会给开发者哪些便利，是本文主要探讨的问题。增加了对unicode字符的支持 ES5对字符的处理有限，无法很好地处理码
面试题：你能写一个Vue的双向数据绑定吗？在目前的前端面试中，vue的双向数据绑定已经成为了一个非常容易考到的点，即时不能当场写出来，至少也要能说出原理。本篇文章中我将会仿照vue写一个双向数据绑定的实例，名字就叫myVue吧。结合注释，希望能让大家有所收获。 1、原理 Vue的双向数据绑定的原理相
【2018年3月份GitHub上热门的Python项目】本篇文章为大家盘点了3月份最热门的Python 项目，让我们一起来看下吧！详见
关于ES6的Promise JavaScript的异步处理提到JavaScript的异步处理，也许很多人和我一样想到利用回调函数。例如： firstAsync(function(data){ //处理得到的 data 数据 //…. secondAsync
JavaScript 定时器知多少深剖定时器定时器类型 setTimeout: 指定xx时间后执行回调 setInterval: 指定每隔xx时间后定期执行 setImmediate: 和setTimeout(fn, 0)类似, 执行setTimeout(fn, 0)和setImmediate的顺序问题, 不同环境有差异 requestAnimationFrame: 跟着屏幕刷新而执行回调, 一般60HZ对应…
laravel + webpack + vue脚手架考虑 – 决定脚手架依赖这次的项目是一个管理后台，介于以下两点原因：这个项目最终会交由后端同学维护，所以前端相关流程应该尽量简单且最好基于后端同学熟悉的框架项目前端部分必须有较快的开发效率，不能沿用之前后端同学开发后台时的完全laravel、前后端完全耦合的方法（项目目录可能较为混乱、开发效…
react-router 源代码学习笔记前言使用 react-router 也有一段时间了，现在基于官方文档以及源码做一下总结。文章略长 ^_^ 如果有不正确的地方，请务必指正。 1. Router Router
ECMAScript 2016, 2017, 和2018中新增功能及示例以下是ECMAScript 2016, 2017, 和2018中新增功能的示例原文链接很难跟踪JavaScript(ECMAScript)中的新功能，更难找到有用的代码示例。因此，在本文中，我将介绍在ES2
使用让 JavaScript 安全且并发的 Web Workers Web Workers 提供了一种在浏览器单线程执行外运行 JS 代码的方式。单线程处理了包括页面内容展示，通过键盘、鼠标点击和其他装置的用户交互，以及对于 AJAX 请求响应的一些请求。事件处理和 AJAX 请求是异步发生的，可以作为一种通用浏览器展示代码路径之外的运行代码的方式，但是它们仍然在这一单线程内运行，并且必…
vue nextTick深入理解－vue性能优化、DOM更新时机、事件循环机制一、定义［nextTick、事件循环］ nextTick的由来：由于VUE的数据驱动视图更新，是异步的，即修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。 nextTick的触发时机：
基于 angular 实现的一个【组件懒加载功能】基于 angular 实现的一个【组件懒加载功能】我们常常会遇到这样一个问题，当我们使用一个第三方控件库的时候，我们只用到了其中 1 个或某几个组件，会连带一大堆无用的东西，造成体积臃肿不堪。又或者首页用到的组件较多，首页加载速度缓慢，这个时候，我们或许需
[WebAssembly 入门] 与 Webpack 联动 title: 与 Webpack 联动 date: 2018-4-6 19:40:00 categories: WebAssembly, 笔记 tags: WebAssembly, JavaScript, Rust, LLV
浅析TCP和nodejs中TCP的简单应用 emmmmmmm… tcp 我们应该都知道，tcp是一种网络协议。说起网络，在大学学计算机网络的时候，记得老师讲过网络一共分7层，这7层从上到下依次是物理层、数据链路层、网络层、传输层、会话层、表示层和应用层。我们来看张图： OSI是Open Sys
React Render Props 模式概述 Render Props模式是一种非常灵活复用性非常高的模式，它可以把特定行为或功能封装成一个组件，提供给其他组件使用让其他组件拥有这样的能力，接下来我们一步一步来看React组件中如何实现这样的功能。 React 组件数据传递 React中我们可以给一
webpack-loader详解 webpack-loader是什么？ loader是一个函数，有一个参数是源文件内容，有内部的this，最后的loader必须有返回值否则会报错：Final loader didn’t return a Buffer or String 原因：如果是处理
Webpack 源码解析 Webpack 作为前端领域最重要的构建工具,任何一个优秀的前端工程师必定需要对它有比较深入的了解。本系列文章会带您深入理解webpack的实现原理，阅读关键代码，并自己实现一些简单的功能。这个系列总共包括8篇文章，首先分析我们常用的一些loader，然后看webpack核心代码的工作流程，最后探讨HMR以及tree-shaking…
深入研究CSS字体度量及CSS 盒子这张图展示的是8种不同的字体，其中第一、第二个分别为 font-awesome图标、自定义的字体图标，其余字体依次为Avenir、Trebuchet MS、Arial、Helvetica、Hiragino Sans GB、STXihei。源代
JavaScript 单元测试框架：Jasmine, Mocha, AVA, Tape 和 Jest 的比较原文地址：JavaScript unit testing frameworks: Comparing Jasmine, Mocha, AVA, Tape and Jest 原文作者：Ben Harding 译文出自：掘金翻译计划本文永久链接：github.c