20180204 前端开发日报

观麦在 Webpack 的经验;你不知道的Vuejs – 深入浅出响应式系统;从零开始做Vue前端架构(1);gulp4增量编译;使用 Kotlin 开发前端应用(Webpack 示例);Web 打印开发总结;ES6 开发者的 7 个技巧;React怎么判断什么时候该重新渲染组件?

  1. 观麦在 Webpack 的经验原文 https://github.com/gmfe/Think… 由于涉及知识点多,不做具体的介绍,只点出关键内容。 对应代码在 demo-webpack 可找到。 缓存 生成文件名 [name].[contenthash:8].js,结合 max-age + cdn 做缓存。 网页…
  2. 你不知道的Vuejs – 深入浅出响应式系统 虽然说是Vuejs实践,但是有些重要的理论还是必不可少的,本文将简单的带你了解 Vuejs的响应式原理 。 Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 Javascript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样非常重要,这样你可以回避一些…
  3. 从零开始做Vue前端架构(1) 前言 想想也已经做过不少架构的项目了,有基于vue,基于react,基于thinkPHP,基于laravel的。 做多了,也就对现有的架构有各种想法,有好的,有坏的,总之,用起来还是不爽。vue-cli虽然可以很快地构建并使用,尤其是vue-cli v3.0,
  4. gulp4增量编译 在任何构建工具中增量编译都是一个必不可少的优化方式。即在编译过程中仅编译那些修改过的文件,可以减少许多不必要的资源消耗,也能减少编译时常。而且gulp是一个配置简单,学习性价比很高的工具。 插件 在gulp官方推荐了四个插件用于增量编译: gulp-changed – only pass through changed files …
  5. 使用 Kotlin 开发前端应用(Webpack 示例) 去年的 Google IO 大会上,谷歌捧红了 Kotlin。据某网站预测,Kotlin 会在三四年之内取代 Java 一跃成为 Android 平台上的主要编程语言。Kotlin 原本是运行在 JVM 上的语言,在 Java 应用领域 Kotlin 的表现非常出色。但同时,近几年经过 JetBrains(JB – -!)的不断努力,Kotlin 现在可以支持多平台开发,不同平台之间…
  6. Web 打印开发总结 作者 | 童泽君 介绍:杏仁前端工程师,关注前端各种好玩的技术。 对于经常浏览网页的你来说,打印网页可能并不陌生。我们平时所使用的浏览器在设置菜单都提供了这个功能选项,也可以通过快捷键来(Mac 上是 command + p)触发打印。下面将简单介绍下,在做打印这个不是特别刚性的需求中遇到的一些问题…
  7. ES6 开发者的 7 个技巧 简评:ES6(ECMAScript2015)实际上是一种新的 JavaScript 规范,包含了一些很棒的新特性,可以更加方便地实现很多复杂的操作。 先看一下 ES6 的新特性: Default Parameters in ES6(默认参数) Template Literals in ES6(模板文本) Multi-line Strings in ES6(多行…
  8. React怎么判断什么时候该重新渲染组件?React因为他的性能而著名。因为他有一个虚拟DOM层并且只有在需要时才更新真实DOM。即使是同样地信息这也比一直直接更新DOM要快很多。但是,React的智能仅此而已(目前为止),我们的任务是知道React的预期行为以…
  9. 6个经典的JavaScript报错分析 代码报错是经常发生的一件事,我们要确定是什么原因造成的,以及如何避免错误。 1. Uncaught TypeError: Cannot read property 该错误说明没有某个属性,一般是该属性前面的值是undefined或者是null的情况会出现。
  10. promise用法解析 javascript是单线程语言(单线程/多线程、阻塞/非阻塞、同步、异步)参考此文章,所有的任务都是按顺序执行的,但是对于很耗时的操作采用异步的方式(前一个任务结束的时候,不是执行下一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行)参考此文章,js中异步编程的四种方法:回调函数、事件监听、…
  11. iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 错误处理沪江CCtalk视频地址:https://www.cctalk.com/v/15114923887518 处理错误请求 爱能遮掩一切过错。 当我们在访问一个站点的时候,如果访问的地址不存在(404),或服务器内部发生了错误(500),站点会展示出某个特定…
  12. 深入理解React源码 -界面更新(Transactions) VII Last time we discussed the core Transaction class and ReactDefaultBatchingStrategyTransaction. The instantiation is not the sole T
  13. 前端系列——canvas实现按住鼠标移动绘制出轨迹概要 工作以来,写过vue、react、正则、算法、小程序等知识,唯独没有写过canvas,因为实在不会啊! 2018年,给自己设定一个小目标:学会canvas,达到的效果是能用canvas实现一些css3不容易实现的动画。 本文作为…
  14. 前端技术周刊 2018-02-02前端技术周刊 2018-02-02 新闻 上新 一系列 ECMAScript 提案进入 stage 4 阶段,这意味着相关语法将进入 ES2018 规范。它们包括:Promise.prototype.finally pr、对象解构{…obj} pr、正则逆向断言(?<=…)及…
  15. Vue | 一个支持数据抓取的JSON树组件 一个将 JSON 字符串渲染成树形结构的 Vue2.x 组件,主要原理是利用 Vue 的递归组件,进行深度优先的先序遍历。不仅可以将一段不可读的 JSON 字符串转化为可读的树形结构,同时可用于抓取某一子树的数据。 组件在它的模板内可以递归地调用自己。不过,
  16. Loder:极致性能的 Web 加载器 快速开始 Loder是一个极致性能的Web加载器,适用于各种Web场景,在SPA场景下尤为出色。它提供极简的API,用于注册资源加载、任务加载等过程,以最优的时序执行加载,达到极致的性能。 引入 $ npm install loder import loder from ‘loder’ // or const loder = require(‘loder’) …
  17. Nodejs:UDP极简入门例子模块概览 dgram模块是对UDP socket的一层封装,相对net模块简单很多,下面看例子。 文本同步收录于GitHub主题系列《Nodejs学习笔记》 UPD客户端 vs UDP服务端 首先,启动UDP server,监听来自端口33333的请求。 s…
  18. 初始Promise/A+规范 个人博客: http://zhangsunyucong.top 前言 这篇文章主要讲两个内容,一是,初步认识Promise,二是,Async模块和Async/Await的使用 什么是Promise Promise表示一个异步操作的最终结果。一个Promise对象有一个then方法,then方法中返回一个Promise。 相关的概念 promise是一个包含了兼容promise规范then…
  19. 一个完整小巧的Redux全家桶项目 OneArticle: 使用React-Native开发,使用Redux,React-Redux,Redux-Persist,Redux-Saga。 为什么取这个名字呢,我也不想啊,App为OneArticle,但发现数据源的官方应用以前就叫一文,让后我叫
  20. JavaScript 深拷贝性能分析 原文:Deep-copying in JavaScript – DasSur.ma 如何在 JavaScript 中拷贝一个对象?对于这个很简单的问题,但是答案却不简单。 引用传值 &lt;del&gt;在 JavaScript 中所有
  21. 使用Vue的nextTick引发的执行顺序之争 开端 在Vue中有一个nextTick方法,偶然一天,我发现不管代码的顺序如何,nextTick总是要比setTimeout先要执行。同样是排队,凭什么你nextTick就要比我快? 开局一道题,内容全靠编。(在node下运行,答案在文末给出。) new P
  22. 从零开始做Vue前端架构(2) 前言 这一篇,我们将接着上篇来完成配置eslint、babel、postcss。 开发 一、配置eslint 我们采用eslint –init的方式来创建eslintrc.js。 对了,前提我们需要全局安装eslint:npm i -g eslint。 安装
  23. Webpack Loader源码导读之css-loader 原文地址:Webpack Loader源码导读之css-loader 在上一篇Webpack Loader源码导读之less-loader我们介绍了less-loader 本篇是Webpack Loader源码导读系列中关于css-loader的解读,主要阐述
  24. ES6 换种思路处理数据Handle javascript data structures with map/reduce 看完本文,希望可以写出更加漂亮、简洁、函数式的代码 reduce reduce 可以用来汇总数据 {代码…} 把一个对象数组变成一个以数组中各个对象的 id 为属性名,…
  25. nodejs 学习备忘录系列之 Stream(一) 写在开始之前: 本系列是笔者目前学习nodejs过程中对各个模块知识的整理和思索。注意标题,这个系列叫学习备忘录,而非应用指南。正因如此,这个系列的文章可能并不会出现诸如:如何应用这些知识,如何解决生产问题等相关内容。 本系列的重点在于对nodejs各部分知识的总结。 如果您也是正在学习nodejs的一…
  26. Vue 2.0学习笔记:组件的使用 从这一节开始正式进入对Vue 2.0组件的系统学习。在Vue中,组件是最强大的功能之一。而且Vue组件涉及到的知识点也非常的多,比如组件的使用, prop 、事件、 slots 以及动态动组等等。在一节的内容中无法全部涵盖这些知识点。所以将会分几节内容来整理Vue组件中的学习笔记。 什么是组件 什么是组件?围绕这个问题,…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流