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

使用 Web3 和 Vue.js 来创建你的第一个以太坊去中心化应用程序（第三部分）；vue技术分享-你可能不知道的7个秘密；Webpack 4进阶–从前的日色变得慢，一下午只够打一次包；Javascript面向对象与继承；2018年4月前端开发者超实用干货大合集；CSS3动画实战之多关键帧实现无限循环动效的时间间隔；前端工程师为什么要学习编译原理？；基于 Koa.js 的 Node.js MVC 框架

使用 Web3 和 Vue.js 来创建你的第一个以太坊去中心化应用程序（第三部分）大家好，欢迎来到本系列的最后一部分。如果你还没进入状况，那么我告诉你，我们将为以太坊区块链创建一个简单的去中心化应用程序。您可以随时查看第 1 和第 2 部分！使用 Web3 和 Vue.js 来创建你的第一个以太坊中心化应用程序（第一部分）使用 Web3 和 Vue.js 来创建你的第一个以太坊中心化应用程序（第…
vue技术分享-你可能不知道的7个秘密前言本文是vue源码贡献值Chris Fritz在公共场合的一场分享，觉得分享里面有不少东西值得借鉴，虽然有些内容我在工作中也是这么做的，还是把大神的ppt在这里翻译一下，希望给朋友带来一些帮助。一、善用watch的immediate属性这一点我在项目中也是这么写的。例如有请求需要再也没初始化的时候就执行一次，然后监…
Webpack 4进阶–从前的日色变得慢，一下午只够打一次包从前的日色变得慢，车，马，邮件都慢，一生只够爱一个人 — 《从前慢》近期在团队项目里把Webpack升级到4.4.1，过程中发现现存的升级文档十分有限，踩了不少坑，好在升级之后提升
Javascript面向对象与继承众所周知，Javascript是一门面向对象的语言，如果说针对面向对象来发问的话，我会想到两个问题，在js中，类与实例对象是如何创建的，类与实例对象又是如何实现继承的。面向对象如何声明一个类 ES5中，还没有类的概念，而是通过函数来声明；到了ES6，有了class关键字，则通过class来声明 // 类的声明 var Anima…
【2018年4月前端开发者超实用干货大合集】今天的这期开发者干货合集当中，整合了许多 PHP 相关的资源，那么，让我们一起来看看还有些什么吧→
CSS3动画实战之多关键帧实现无限循环动效的时间间隔题目有点绕，源起最近一个项目中所需的一枚loading图标。SVG+CSS3动画做了那么多，真正应用在项目中的机会少之又少，所以，抓住一切机会，即使loading也不能放过，用系统自带菊花有辱我这一年的修炼。在最后完美做成的过程中，解决了两个问题，第一，是非等
前端工程师为什么要学习编译原理？本文首发于 http://CSDN.NET《程序员》杂志 2017 年 12 月刊前言普遍的观点认为，前端就是打好 HTML、CSS、JS 三大基础，深刻理解语义化标签，了解 N 种不同的布局方式，掌握语言的语法、特性、内置 API。再学习
基于 Koa.js 的 Node.js MVC 框架 0. 简介项目名：基于 Koa.js 的 Node.js MVC 框架。仓库地址：https://github.com/zhaotoday/koa-mvc-framework。
Node.js 可读流和可写流 Node.js操作按需数据使用sream API接口， stream 是一个数据集，数据可能不能马上全部获取到，他们在缓冲区，不需要在内存中。适合处理大数据集或者来自外部的数据源的数据块 Node中很多内建模块实现了流式接口：上面的列表中的原生Node.js对象就是可读流和可写流的对象。有些对象是可读流也是可写流，如T…
彻底搞懂 JS 中 this 机制彻底搞懂 JS 中 this 机制摘要：本文属于原创，欢迎转载，转载请保留出处：https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规则绑定规则的优先级绑定例外扩展：箭头函数 this 是什么 …
如何在 Vue 中优雅地使用 CSS Modules？ CSS Modules 为每一个局部类赋予全局唯一的类名，这样组件样式间就不会相互影响了。如： /* button.css */ .button { font-size: 16px; } .mini { font-size: 12px; } 它会被转换为类似这样： /* button.css */ .button__button–d8fj3 { font-size: 16px; } .button__mini–f90jc { font-size: 12…
Promise原理解析 Promise是异步编程的一种解决方案，比回调函数和事件更合理更强大。原生的promise用法如下： let p=new Promise(function(resolve,reject){ resolve(‘成功’); //reject(‘失败’); }); p.then(function(data){ console.log(data); },function(err){ console.log(err); }); Promise实例中…
vue cli 平稳升级webapck4 应该是parcel出来以后，webpack团队意识到其配置确实有点复杂，不太容易上手。so, webapck4 开始支持0配置启动。不过，万变不离其宗，webpack4的0配置也只是支持了默认entry 和 output而已，即默认entry为./src,默认output为/dist。模式选择mode mode有两个可选项，production & development。作为必选…
【2018年3月份GitHub上最热门的Java项目】又到了揭晓 3 月份最热门 Java 开源项目排名的时候了，一起来看看本月的热门项目都有哪些。详见
JavaScript：从Callback到Async的发展过程——实例演示阅读时间： 12 minutes 文章类型：理论知识 & 案例演示案例需求：用JavaScript实现，3个小球先后运动，完成接力赛跑案例源码：见文章最后引言：前端开发中，异步处理必不可少；过去，我们经常用回调函数来完成异步处理，因此也经常产生回调地狱（ callback hell ）；今天，我们用实例来对比异步处理的方…
面试官: 你了解前端路由吗? 基于hash的前端路由实现基于hash的前端路由升级基于H5 History的前端路由实现前言前端路由是现代SPA应用必备的功能,每个现代前端框架都有对应的实现,例如vue-router、react-router。我们不想探究vue-router或者react-router们的实现，因为不管是哪种路由无外乎用兼容性更好的hash实现或者是H5 H…
【20180409 前端开发日报】如何用 CSS + HTML + JS 创建桌面应用；前端防止用户重复提交-js；如何写一个Vue的插件；狼叔：Node全栈为前端带来更多可能；JS 面试算法；聊一聊javascript执行上下文；浅谈JavaScript作用域；20180408 前端开发日报…详情→
bing Map 在vue项目中的使用写在最前面拥有全球数据库国内好像就只有百度地图有，高德、搜狗、腾讯的都不行，但是由于百度地图的数据更新不及时，所以在做相关项目要用到国外数据的时候，最好还是推荐使用bingMap。 bing Map 使用教程（基础）参考文档：bing Map 官方教程 bing Map 初始化引入bing map资源 <script typ…
基于 React 的单页应用优化技巧本文内容是基于项目前端框架优化而提炼出的一些比较实用的单页优化小技巧，在此做一下沉淀，希望能帮到在这方面摸索的同学。前端框架是在 React 16+、react-router v4、webpack v3、Next1.x 之上构建。 Next
全新的 React Context API 在一个经典的 React 应用中，组件之间通信是常用到的技术方案。在父子组件之间通常通过 props 来传递参数，而非父子组件就比较麻烦了，要么就一级一级通过 props 传递，要么就使用 Redux or Mobx 这类状态管理的状态管理库，但是这样无疑增加
[CSS] 译文：简洁明了的响应式表格你必须承认，没有一种单一地能使表格响应式表现的方法，然后我们再来想办法来解决。Davide Rizzo 说过的这个我很赞同，并且这一伟大的领域我们已经实践了一段时间。在一些有各种类型表格的网页上，内容会任意的疯狂地响应式的变化。我觉得最棘手的是对照表和普通内
30分钟快速了解webpack 前言——webpack现在已成为前端自动化、模块化不可或缺的一款工具，我们可以把它看做是一种模块打包机，它来分析你的项目结构、找到JS模块以及一些浏览器不能直接运行的拓展语言（如SASS、LESS等），然后将其打包为合适的格式供浏览器使用…… 首先要确保你的计算机安装了nodeJS然后我们就可以开始我们的webpack之路…
用HTML5 Geolocation实现一个距离追踪器 HTML5 Geolocation（地理定位）用于定位用户的位置。那么如何实现一个距离追踪器呢？我的思路是这样的，前提是浏览器支持h5地理定位，在这个基础上，获取用户位置，更新用户位置，计算距离，显示到页面，这样就简单实现了一个距离追踪器，为了用户更清楚地看到当前位置，这里接入了百度地图API。页面结构如下所示： …
一则 Vue 项目的图片 lazyload 解决方案刚刚花了一点点时间解决了一个 Vue 项目的图片 lazyload 问题，简单记录下解决过程。先介绍一下这个项目，它是几个月前由两个人做的一个前后端 Web 项目，我当时负责的是后端+部署，并在之后接手了前端维护工作。这个项目是一个面向 Desktop 和 Mobile 的响应式设计的站点，是一个 Card Collection 类的设计，每个 Ca…
JavaScript 开发的45个经典技巧 JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等。JavaScript还是很多新手踏入编程世界的第一个语言。既可以用来显示浏览器中的简单提示框，也可以通过nodebot或nodruino来控制机器人。能够编写结构清晰、性能高效的JavaScript代码…
教你如何检查一个函数是否为JavaScript运行时环境内建函数在开发过程中，对于某些API在现有的JavaScript运行时环境不支持的时候，我们大都会采用加入polyfill来解决这个问题。但有些时候我们可能需要知道现在某个API到底是否为运行时环境所原生支持，还是polyfill代码支持的。今天在学习Vue 2.X版本的源代码时，就发现了Vue中也有用来检测一个函数是否为运行时原生支持。 func…
webpack用法小结根据文档的定义：本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 2、webpack四个核心概念入口(entry) 入口，…
Vue打包优化之code spliting 在http1的时代，比较常见的一种性能优化就是合并http的请求数量，通常我们会把许多js代码合并在一起，但是如果一个js包体积特别大的话对于性能提升来说就有点矫枉过正了。而如果我们对所有的代码进行合理的拆分，将首屏和非首屏的代码进行剥离，将业务代码和基础库代码进行拆分，在需要某段代码的时候再加载它，下次若再…
React 深入系列4：组件的生命周期 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。组件是构建React应用的基本单位，组件需要具备数据获取、业务逻辑处理、以及UI呈现的能力，而这
RxJS 游戏之贪吃蛇