20180728 前端开发日报

再见jQuery,我的老朋友;记录一个前端架构的想法;Vue-cli原理分析;前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader;手把手教你用原生JavaScript造轮子(1)——分页器;JavaScript数据结构03 – 队列;Node.js 爬虫初体验;从 0 到 1 实现 React 系列 —— 生命周期和 diff 算法

  1. 再见jQuery,我的老朋友 免责声明 本文是仓促之作,从构思到成文不足半天。文中没有提到很多优秀的库和框架,提前在此致歉,因为没时间搜集整理。但这不代表笔者对这些库和框架没有敬意。实际上,包括jQuery在内,我的敬意是给这些名字背后整个社区和贡献者的,当然包括库和框架的最初编写者,比如John Resig。 另外,时间所限,本文粗略…
  2. 记录一个前端架构的想法 前端,真的是让我哭笑不得的职业,从几年前作为打酱油的理想职业到现在的热门职业,无疑在这个过程中,门槛变高了,而且还是非常高。一大堆的框架和库,像什么vue啦、react啦、angular啦、webpack啦等等等等。让人眼花缭乱 首先说说工作场景。目前做的项目是微信h5相关的,选择的是react那一套的技术栈。 现在前端js…
  3. Vue-cli原理分析 在平时工作中会有遇到许多以相同模板定制的小程序,因此想自己建立一个生成模板的脚手架工具,以模板为基础构建对应的小程序,而平时的小程序都是用mpvue框架来写的,因此首先先参考一下Vue-cli的原理。知道原理之后,再定制自己的模板脚手架肯定是事半功倍的。 在说代码之前我们首先回顾一下Vue-cli的使用,我们通常…
  4. 前端每日实战:91# 视频演示如何用纯 CSS 创作一个行驶中的火车 loader效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 [链接] 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 [链接] …
  5. 手把手教你用原生JavaScript造轮子(1)——分页器 日常工作中经常会发现有大量业务逻辑是重复的,而用别人的插件也不能完美解决一些定制化的需求,所以我决定把一些常用的组件抽离、封装出来,形成一套自己的插件库。同时,我将用这个教程系列记录下每一个插件的开发过程,手把手教你如何一步一步去造出一套实用性、可复用性高的轮子。 So, Let’s begin! 目前项目使…
  6. JavaScript数据结构03 – 队列队列是遵循FIFO(First In First Out,先进先出)原则的一组有序的项。队列在尾部添加新元素,并从顶部移除元素。最新添加的元素必须排在队列的末尾。
  7. Node.js 爬虫初体验 当我们需要使用Node.js进行爬虫爬取网页时,我们通常需要下载两个库request和cheerio来帮助我们队网页进行爬取: cnpm i request cheerio 其中request帮助我们对网页进行加载,而cheerio则是为服务器特别定制的,快速、灵活、实施的jQuery核心实现。有了这两个库,爬取简单的网页就没有太大的问题…
  8. 从 0 到 1 实现 React 系列 —— 生命周期和 diff 算法本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/…)
  9. 异步发展流程 —— 手写一个符合 Promise/A+ 规范的 Promise 概述 Promise 是 js 异步编程的一种解决方案,避免了 “回调地狱” 给编程带来的麻烦,在 ES6 中成为了标准,这篇文章重点不是叙述 Promise 的基本用法,而是从零开始,手写一版符合 Promise/A+ 规范的 Promise,如果想了解更多 Promise 的基本用法,可以看 异步发展流程 —— Promise 的基本使用 这篇文章。 Promise …
  10. 这样你都不懂Promise,算我输 一、Promise的身世 1、Promise历史 Promise 是异步编程的一种解决方案,比我们传统的回调函数、事件更加合理,最早由社区提出并实现,ES6觉得很ok,就写进了语言标准中,统一了语法,并且提供了原生的Promise对象。 所谓的Promise,
  11. 文字符号—前端开发果断收藏一份啊这个用了好几年了,简直是前端利器啊,有木有。今天发现身边还有用css写三角形等图标的小伙伴,果断分享出来。
  12. NodeJS 树结构遍历 —— 深度优先和广度优先 树的基本概念 树(Tree)是 n 个结点的有限集, n 为 0 时,称为空树,在任意一棵非空树中有且仅有一个特定的被称为根(Root)的结点,当 n 大于 1 时,其余结点可分为 m 个互不相交的有限集 T1 、 T2 、 …… 、 Tm ,其中每一个集合本身又是一棵树,并且称为 SubTree ,即根的子树。 需要强调的是, n>0 …
  13. 深入剖析 Web 服务器与 PHP 应用之间的通信机制 – 掌握 CGI 和 FastCGI 协议的运行原理身为一名使用 PHP 语言开发后端服务的程序猿,我们每天都和 PHP 以及 Web 服务器产生无数次的亲密接触。得益于它们,我们才能够如此快速的构建出令人陶醉的 Web 产品。
  14. 听,知天下、明事理(vue) 听,知天下,明事理 前言 由于热衷于边听有声小说边撸代码,所以我干脆自摸出了一个喜马拉雅App,边听电台边完成电台功能的感觉有一丝丝触动,这个项目完成仅仅30%,功能仍在实现,往后的需求我再一一添加,客官们,不要急,莫催…. 八月初完成大部分功能 主要技术点:vue、vue-router、axios 项目结构 …
  15. 如何使用React生命周期方法 原文:How to use React Lifecycle Methods React 生命周期 大体上分三类 Mount Update Unmount Mount constructor() componentWillMount() render()
  16. 使用mobx优化React应用程序 从1.5秒到50-100毫秒(每次更新) 在这里我将简短地讲述我关于如何通过简单的技巧将网络应用程序的性能提高10倍的故事。 我正在为客户构建基于Web的应用程序。 它是视频的字幕(字幕)审核工具。 所以你有一个视频,你有字幕列表,你想编辑它们
  17. ES6 系列之 WeakMap前言 我们先从 WeakMap 的特性说起,然后聊聊 WeakMap 的一些应用场景。 特性 1. WeakMap 只接受对象作为键名 {代码…} 2. WeakMap 的键名所引用的对象是弱引用 这句话其实让我非常费解,我个人觉得这句话真正想…
  18. MobX vs Redux with React:一个菜鸟的对比和疑问 React中的状态管理一直是Javascript兄弟会讨论的主题。 我最近想在我的一个项目中实施状态管理,希望在做出重大决策之前做一点研究。 是 MobX还是Redux? 在本文中,我们将探讨两者的好处和权衡。 你如何在其中任何一个之
  19. 如何与NPM package-lock.json愉快地玩耍 对的,最近写文章都会交代一下背景。因为按标题的套路,这本应该是一篇教程类的文章,但这种文章其实挺无趣的。之所以想写这篇,是因为确实碰到了一些很麻烦的事情。闲言少叙,我们进入正题。 最近我们前端代码打包正在接入Gitlab CI,使用Docker来作为Executor,也就是在Docker中进行前端代码打包,然后收集打包结果…
  20. 前端知识集锦1当我们在创建对象时,可以根据自己的需求,选择性的将一些属性和方法通过prototype属性,挂载在原型对象上。而每一个new出来的实例,都有一个proto属性,该属性指向构造函数的原型对象,通过这个属性,让实例对象…
  21. C++ WebSocket 库 WebSocket 是 HTML5 的一个引入注目的特性,它通常用于 Web 端,为构建实时的 Web 应用提供方便。WebSocket 是一个基于 TCP 的协议,它借助于 HTTP 请求,建立客户端与服务器端之间的双向通道,通道建立完成后,客户端和服务器端都可以通过这条通道方便地收发消息,因而 WebSocket 一向有着 “Web 的 TCP” 之称。 …
  22. webpack怎么能只是会用呢,核心中的核心tapable了解下? 前言 为什么我们要学tapable,因为….webpack源码里面都是用的tapable来实现钩子挂载的,作为一个有点追求的code,webpack怎么能只满足于用呢?当然是要去看源码,写loader,plugin啦.在这之前,要是不清楚tapable的用
  23. TensorFlow.js · 起手式 所谓机器学习,就是将已知对应结果的输入数据和对应结果 提交到TensorFlow模型中,以训练模型。这一步就是机器学习的过程。 训练完成后,我们传入尚不知晓结果的输入数据 给模型,模型就能预言结果是什么。这一步就是AI的应用。 举个例子,现有澳
  24. CommonJS 模块化简易实现 CommonJS 概述 CommonJS 是一种模块化的标准,而 NodeJS 是这种标准的实现,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。 NodeJS 模块化的简易实现 在实现模块加载之前,我们需要清除模块的加载过程: 假设 A 文件夹下有一个 a.js ,我们要…
  25. Redux中间件的实践最近项目前端开发框架采用React+Redux进行实现,但是,如何异步访问服务器端,以及想要在开发过程中进行状态树日志的输出,所以怎么才能解决这两个问题? 采用Redux中间件
  26. Canvas + WebSocket + Redis 实现一个视频弹幕 页面布局 首先,我们需要实现页面布局,在根目录创建 index.html 布局中我们需要有一个 video 多媒体标签引入我们的本地视频,添加输入弹幕的输入框、确认发送的按钮、颜色选择器、字体大小滑动条,创建一个 style.css 来调整页面布局的样式,这里
  27. css布局简史与决胜未来的第四代css布局技术一转眼已经2018年,前端行业也风风雨雨的走过了10多年,网页布局也从最原始的文档变成成了当前精彩纷呈的交互。当我看到第四代css布局技术网格布局的时候,就像我看到无数女神一样的反应,美女我们好像在哪见过,…
  28. NodeJS —— Buffer 解读 Buffer 概述 在 ES6 引入TypedArray 之前,JavaScript 语言没有读取或操作二进制数据流的机制。 Buffer 类被引入作为 NodeJS API 的一部分,使其可以在 TCP 流或文件系统操作等场景中处理二进制数据流。 Buffer 属于 Global 对象,使用时不需引入,且 Buffer 的大小在创建时确定,无法调整。 创建 Buffer 在 No…
  29. 在vue中使用Autoprefixed为了使我们的项目兼容各种浏览器,我们可能会在开发中写大量的前缀。即使有了IDE为我们提供了边界的方式。但是仍然需要我们去花时间和精力。而这样会浪费我们很多的时间。为了在开发中提升团队的开发效率,并且同…
  30. 使用 React 和 HTML5 表单验证 API 处理表单元素 作者: Dmitry Sheiko | 译:甄玉磊 原文地址: 【译者注:链接序号对应下面扩展阅读,另外可以点击阅读原文查看详细的链接文章】 简介:React 没有内置的表单验证逻辑,但是我们可以使用第三方解决方案。…

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

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


关注我

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

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

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