知行社的前端早读课 第10期

准备帮 GIT 申请吉尼斯世界纪录,申请项目是 《人类能够用命令行操作的最为复杂的软件项目》。

《趣谈 | Javascript:一个屌丝的逆袭》

概要

用风趣的语言介绍了 Javascript 的历史。很有意思~

阅读地址:https://mp.weixin.qq.com/s?__biz=MzI1ODE4NzE1Nw==&mid=2247486028&idx=2&sn=2a0ba8d8824eedfc03f63cd37a87b89f&chksm=ea0d40b6dd7ac9a0cd2d941fcfe247400e12d71119b1173a3d0d5aea04f8d51772ae84f75e4b&mpshare=1&scene=1&srcid=0814KptAFbVh9FZ5ShpO8Zt8&key=b14ef81558367f701d5cf46cd2c90b08e6a51238fcf32bfb20a4542602ad635a680172dbe3449cfa180dd6d886d6b4495c7019869d643a84dc66d444b39c411e0f4747278273401d56bc55adc22760fa&ascene=0&uin=NDI4NTMwNTE1&version=12020610&nettype=WIFI&fontScale=100&pass_ticket=8Z6VRnJ3KEno5%2FsJi3jm2F7aWU8VHEBYUhN4uPFhUBp0nZCZwe3mgz0R%2FBpTV6pd

今天文章概览

今天 07:15:18 抓取在掘金网上最新发布的50篇前端文章,概要:JavaScript(4篇),CSS(3篇),React(2篇),Angular(2篇),Vue(2篇),Node.js(2篇),工程化(1篇),Service(1篇),Yeoman(1篇),拷贝(1篇),变量(1篇),weex(1篇),浅析(1篇),ES6(1篇),V8(1篇),前端(1篇),HTML5(1篇),构造函数(1篇),model(1篇),cli(1篇),异步控制(1篇),Nuxt(1篇),26(1篇),Alfred(1篇),ReactNative(1篇),Frame(1篇),1.0(1篇),DOM(1篇),Sass(1篇),初识(1篇),插件(1篇),橡皮擦(1篇),文本编辑(1篇),wepy(1篇),Canvas(1篇),AE(1篇),API(1篇),Vue.js(1篇),源码(1篇),canvas(1篇),Web(1篇)。

详情如下:

标签:JavaScript

JavaScript 专题之函数柯里化

JavaScript 专题系列第十三篇,讲解函数柯里化以及如何实现一个 curry 函数 定义 维基百科中对柯里化 (Currying) 的定义为: In mathematics and computer science, currying is the technique o…

阅读地址: https://juejin.im/post/598d0b7ff265da3e1727c491

JS不靠谱系列之枚举出时间段和对应的分钟数(新增遍历功能)

前言 今天遇到一个需求,是把选择时间段转为分钟数提交上去的; 所以想手动写个数组一一映射,提交的时候遍历下匹配的值提交. 比如 : 00:00 为 0分钟或者1440分钟; 00:10为30分钟; 具体看下面的 2017-8-17 : 加入遍历功能呢 参数: value : st…

阅读地址: https://juejin.im/post/598c32dcf265da3e3d12557d

JavaScript 专题之如何判断两个对象相等

JavaScript 专题系列第十二篇,讲解如何判断两个参数是否相等 前言 虽然标题写的是如何判断两个对象相等,但本篇我们不仅仅判断两个对象相等,实际上,我们要做到的是如何判断两个参数相等,而这必然会涉及到多种类型的判断。 相等 什么是相等?在《JavaScript专题之去重》…

阅读地址: https://juejin.im/post/598a701b6fb9a03c5b04bb14

翻译 | 一行 JavaScript 代码的逆向工程

原文地址:Reverse Engineering One Line of JavaScript 原文作者:Alex Kras 译者:李波 校对者:冬青、小萝卜 几个月前,我看到一个邮件问:有没有人可以解析这一行 JavaScript 代码 <pre id=p><script>n…

阅读地址: https://juejin.im/post/5988411251882526185d634a

标签:CSS

CSS Grid 网格布局

CSS Grid是一个强大的 web 二维布局工具,能够以行和列来进行布局; 1. 网格容器 通过设置display的属性为grid或inline-grid来创建网格容器; display: grid 默认行排列,宽度为容器的宽度; .container{ display: gr…

阅读地址: https://juejin.im/post/5924db2e2f301e006b34ddd1

CSS入门指南-4:页面布局

这是《CSS设计指南》的读书笔记,用于加深学习效果。 display 属性 display是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级…

阅读地址: https://juejin.im/post/598c4d93f265da3e2c70fbc0

[译] 渐进增强的 CSS 布局:从浮动到 Flexbox 到 Grid

原文地址:Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid 原文作者:Manuel Matuzović 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/go

阅读地址: https://juejin.im/post/5987acfd6fb9a03c502288f3

标签:React

学习 React.js 比你想象的要简单

原文地址:Learning React.js is easier than you think 原文作者:Samer Buna 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO/lear

阅读地址: https://juejin.im/post/599156cc6fb9a03c3a25db08

聊聊 React Router v4 的设计思想

React Router v4 发布已经有几个月了,但好像并没有得到太多人的青睐,大家(包括我们团队自己)还是习惯使用v2、v3版本。这一方面是因为v4版本是一次破坏性的升级,从v2、v3 升级到v4,必需要大量重写原有的路由相关的代码,对于已经稳定的项目,一般是不会轻易尝试这种…

阅读地址: https://juejin.im/post/5986d1456fb9a03c3f405bd2

标签:Angular

解密Angular WebWorker Renderer (二)

很开心再次遇见你,接着上回分解。先把与通讯相关的类介绍完毕。与WebWorkerRendererFactory2类对应的就是WebWorkerRenderer2类,该类从类结构中就可以看出包含了各种对DOM节点的操作函数,基本覆盖原生JS的DOM操作函数。特别注意,该类里面的操…

阅读地址: https://juejin.im/post/598953e46fb9a03c484501cb

解密 Angular WebWorker Renderer (一)

本文主要介绍Angular中的黑科技之WebWorker Renderer,使用Worker线程渲染如何渲染页面?从源码的角度切入,带领带大家看个究竟。先来做个对比开发框架版本:Angular 4.x项目地址:Charway/angular-webworker-renderer-…

阅读地址: https://juejin.im/post/598952a96fb9a03c4300952c

标签:Vue

Vue 组件库实践和设计

现在前端的快速发展,已经让组件这个模式变的格外重要。对于市面上的组件库,虽然能满足大部分的项目,但是一些小型细节方面和使用方面,或者UI库存在的一些bug,会让人很头疼。 那我们应该如何面对解决这些问题。俗话说自己动手丰衣足食。有些组件不用刻意去造。应该考虑如何去打造一个快速,兼…

阅读地址: https://juejin.im/post/598965bd5188256da941872c

基于文本相似度算法,分析 Vue 是抄出来的框架吗?

本周一篇指摘 Vue 抄袭 Angular 的文章一石激起千层浪。为此,笔者作为中立吃瓜的 React 用户,分析了 13 个主流前端框架版本上万个变量的命名风格,应用自然语言处理中的文本相似度算法进行了分析,以对这一论点的有效性做出客观的评价。 思路 在分析书籍抄袭、论文查重等…

阅读地址: https://juejin.im/post/5985abf9f265da3e345f4f97

标签:Node.js

带你用 Vue 全家桶和 Node.js 完成一个聚合应用

平时会经常浏览一些网站充电,但是老是需要切换网站也很麻烦,所以就有了做这个小项目的想法。通过爬虫抓取一些网站,然后整合在一个应用中。虽然是个简单应用,但是五脏六腑俱全,适合 Vue 的新手学习。 项目地址 项目技术栈 Vue 全家桶 语言:ES6 UI:这里使用了Element…

阅读地址: https://juejin.im/post/59857c616fb9a03c5c6ffa91

[译] 所有你需要知道的关于完全理解 Node.js 事件循环及其度量

原文地址:All you need to know to really understand the Node.js Event Loop and its Metrics 原文作者:Daniel Khan 译文出自:掘金翻译计划 本文永久链接:https://github.co

阅读地址: https://juejin.im/post/5984816a518825265674c8f6

标签:工程化

【上海线下活动】Web前端工程化架构实践 -- 沪江技术沙龙

报名链接:http://www.huodongxing.com/event/5399668594900 Web前端工程化历经了:2011年的Shell&(YUICompress || Google Closure Compiler);基于Node.js的前端工具浮现,2013年G…

阅读地址: https://juejin.im/post/598bc9625188257d86430dea

标签:Service

[译] 理解 Service Workers

原文地址:Understanding Service Workers 原文作者:Adnan Chowdhury 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO/understandin

阅读地址: https://juejin.im/post/599163316fb9a03c3c14d751

标签:Yeoman

使用Yeoman定制前端脚手架

首先附上Yeoman官网:http://yeoman.io/ 我制作的前端脚手架:generator-jake-front 以及我在前端同学的分享会上的分享ppt:yeoman.key 如果想快速制作一个脚手架,并且不需要实现特别复杂的定制化,看完这篇文章足够,如果想要实现复杂的…

阅读地址: https://juejin.im/post/5991f2975188257c666c64f4

标签:拷贝

ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解

ES6 变量声明与赋值:值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式,然后讨论了 JavaScript 按值传递的特性,最后介绍了复合类型拷贝的技巧;有兴趣的可以阅读下一章节 …

阅读地址: https://juejin.im/post/5991549af265da3e345f6e6d

标签:变量

ES6 变量作用域与提升:变量的生命周期详解

ES6 变量作用域与提升:变量的生命周期详解从属于笔者的现代 JavaScript 开发:语法基础与实践技巧系列文章。本文详细讨论了 JavaScript 中作用域、执行上下文、不同作用域下变量提升与函数提升的表现、顶层对象以及如何避免创建全局对象等内容;建议阅读前文 ES6 …

阅读地址: https://juejin.im/post/59905bea6fb9a03c34192c51

标签:weex

weex页面传参

本文来自尚妆前端团队南洋 发表于尚妆github博客,欢迎订阅! 前言 我司在weex上的应用是保证三端统一,为了延续web开发体验,统一在三端的跳转都采用url的形式,即采用<\a>组件,或者自定义的openUrl方法进行跳转。 假如现在点击B按钮跳转到/b.html页面,在…

阅读地址: https://juejin.im/post/59900547f265da3e135778fe

标签:浅析

浅析 Hexo 搭建博客的原理

一直在用 Hexo 写博客,但是对其原理并不是很清晰,在网上找了一些资料,对 Hexo 有了新的认识,现在就来记录一下 使用 Hexo + github pages 搭建博客 记得刚开始知道 Hexo + github pages 搭建博客是在 2016 年,那时候,闺蜜非常激动…

阅读地址: https://juejin.im/post/598eeaff5188257d592e55bb

标签:ES6

《深入理解ES6》中的代码片段,你能猜对几个?

花了3个周末看完了《深入理解ES6》,其中有许多代码段以及文字描述和我“常识”有些出入,因此记录了下来并加以验证。 有些代码段还是蛮有趣的,在此分享下。正在阅读屏幕的你,能“猜”对几个代码片段呢? 每个代码片段均有编号,格式为为try-xxx-yyy或note-xxx-yyy,其…

阅读地址: https://juejin.im/post/598e6eed6fb9a03c543ebe02

标签:V8

【译】如何学习V8开发

原文链接:How do I get started with V8 development? 作者:Franziska Hinkelmann 你是否有兴趣理解更多关于编译器、虚拟机、JavaScript引擎的知识,或者贡献V8项目 你也许曾没上过编译原理的课程或者没有c++编程…

阅读地址: https://juejin.im/post/598e63b76fb9a03c4300a49e

标签:前端

在台湾参加前端大会是什么体验?

前几天有幸受邀前去台湾参加Modernweb会议,并做了主题分享。两天的前端会议见闻让我对台湾的前端环境有更深入的了解,接下去我想从会议形式、主题、氛围、企业几个方面跟大家分享我的见闻。 形式今年的大会选择在台湾大学里面举办,地点是台大的社会科学院,一栋新建不久的教学楼(感觉他…

阅读地址: https://juejin.im/post/5991dd9351882548630c1670

标签:HTML5

从HTML5与PromiseA+规范来看事件循环

写在最前 本次分享一下从HTML5与PromiseA+规范来迅速理解一波事件循环中的microtask 与macrotask。 欢迎关注我的博客,不定期更新中—— ## 先来看段代码 setTimeout(function() { console.log('setTimeout1…

阅读地址: https://juejin.im/post/598c595d6fb9a03c5f0c80e9

标签:构造函数

回顾Javascript构造函数

长期更新文章 喜欢的start下 start https://github.com/asd0102433/blog 构造函数已经是老生常谈的事情了。这里讲一些比较基础的东西。 先看下一个例子 function Book(name) { if (!(this instanceof…

阅读地址: https://juejin.im/post/598c02e66fb9a03c4e18c2c8

标签:model

v-model指令在组件中怎么玩

作者:孙辉,美团金融前端团队成员。15年毕业加入美团,相信技术,更相信技术只是大千世界里知识的一种,个人博客: https://sunyuhui.com 备注:文章内容和案例均基于Vue2(具体版本为Vue2.3.4) 笔者最近在写组件的时候,遇到了 v-model 的使用问题…

阅读地址: https://juejin.im/post/598bf7a3f265da3e252a1d6a

标签:cli

在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]

写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery、bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点。有需要的朋友可以做一下参考,喜…

阅读地址: https://juejin.im/post/5986f5c8f265da3e0e1053cf

标签:异步控制

使用async实现异步控制

async官方DOC 介绍 node安装 npm install async --save使用 var async = require('async')js文件 https://github.com/caolan/async/tree/master/dist async提供了很多…

阅读地址: https://juejin.im/post/5991f4826fb9a03c476d976d

标签:Nuxt

美团点评点餐 Nuxt.js 实战

一、背景在今年年初我开始接触vue的时候,就发现在vue官方文档中“服务端渲染”的一节中提到了Nuxt.js框架,SSR这种方式对于首屏的加载时间优化显而易见,同时还可以方便的进行SEO。美团点评的点餐业务中,数据平台因为其数据量大的特点,首页加载时间很长,非常适合进行SSR改造…

阅读地址: https://juejin.im/post/598aabe96fb9a03c335a8dde

标签:26

前端每周清单第 26 期:Node.js 微服务实践,Vue.js 与 GraphQL,Angular 组件技巧,HeadlessChrome 攻防

作者:王下邀月熊 编辑:徐川 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID:frontshow),及时获取前端每周清单。 新闻热点 国内…

阅读地址: https://juejin.im/post/59916dd6f265da3e20770e63

标签:Alfred

用 Node.js 把玩一番 Alfred Workflow

本文首发在个人博客:http://muyunyun.cn/posts/4c23be51/ 插件地址(集成Github、掘金、知乎、淘宝等搜索) 作为 Mac 上常年位居神器榜第一位的软件来说,Alfred 给我们带来的便利是不言而喻的,其中 workflow(工作流) 功不可没…

阅读地址: https://juejin.im/post/598a3203f265da3e213effd8

标签:ReactNative

ReactNative学习笔记十三之布局详细解析

又是一周过去了,似乎上周我只更新了一篇文章,最近工作实在太忙,望大家见谅。今天要讲的还是布局相关的,之前已经对布局中主要属性做了介绍,这次,会对布局中其他属性进行介绍。 alignSelf alignSelf是指相对于父容器,自身的位置,有auto,flex-start,flex…

阅读地址: https://juejin.im/post/59898948f265da3e282bd030

标签:Frame

翻译 | 使用A-Frame打造WebVR版《我的世界》

原文地址:Minecraft in WebVR with HTML Using A-Frame 原文作者:Kevin Ngo 译者:Felix 校对:阿希 我是 Kevin Ngo,一名就职于 Mozilla VR 团队的 web 虚拟现实开发者,也是 A-Frame 的核心开…

阅读地址: https://juejin.im/post/59917b13f265da3e1d211f61

标签:1.0

腾讯发布 Omix 1.0 - 用 JSX 或 hyperscript 创建用户界面

Omix 1.0 https://user-gold-cdn.xitu.io/2017/8/8/bbe2ce1c1e7e925005df0f1cc8938374 今天,腾讯正式开源发布 Omix 1.0, 让开发者使用 JSX 或 hyperscript 创建用户界面。 Gith…

阅读地址: https://juejin.im/post/59892e5cf265da3e277803c8

标签:DOM

如何实现一个基于 DOM 的模板引擎

题图:Vincent Guth 注:本文所有代码均可在本人的个人项目colon中找到,本文也同步到了知乎专栏 可能你已经体会到了 Vue 所带来的便捷了,相信有一部分原因也是因为其基于 DOM 的语法简洁的模板渲染引擎。这篇文章将会介绍如何实现一个基于 DOM 的模板引擎(就像…

阅读地址: https://juejin.im/post/59892b656fb9a03c445ddafe

标签:Sass

常用 SCSS 总结(持续更新)

//伸缩盒(旧) @mixin box{display: -webkit-box;display: box;} @mixin pack-c{@include box;-webkit-box-pack:center;box-pack:center;} @mixin align-c{…

阅读地址: https://juejin.im/post/59891d1e51882525d45c05d3

标签:初识

初识RxJS

什么是Rx.JS? Rx.JS是英文 Reactive Extensions for JavaScript 的缩写.翻译成中文就是:JavaScript的响应式扩展.其主要的功能就是利用响应式编程的模式来实现JavaScript的异步式编程. 相对于JavaScript中其它的异…

阅读地址: https://juejin.im/post/5988ad175188250f7e00cd5c

标签:插件

基于 Vue.js 的消息气泡插件

之前介绍了一款基于vue的文本折行显示组件ellipisis-plus,今天介绍一款仿照QQ消息气泡的插件vue-bubble,演示地址在这里。 仿照QQ消息气泡想法的起源是来自掘金的安卓小伙伴们,看到他们在安卓平台实现了这种效果,所以想迁移到web上。在这里要感谢他们。 先放张…

阅读地址: https://juejin.im/post/598832486fb9a03c594587fd

标签:橡皮擦

canvas 基础系列(一)之实现抽奖刮刮卡(橡皮擦)

笔主最近一个多月以来 “深入“ 研究了 canvas 的实现原理,一口气读完了 《HTML5 Canvas 核心技术》这本书;而这一切以及这篇文章的诞生,都源于笔主公司的一位实习产品经理~ 这位实习生拥有刚毕业时的血气方刚,以及天马行空的想象力;他从未考虑过项目的实际需求,以及…

阅读地址: https://juejin.im/post/59881ced51882525bd3562ab

标签:文本编辑

人人都会写的富文本编辑器

这个本来是给 vm-manager 写的一个富文本编辑器,后来觉得独立出来维护比较方便,就单独分离出来放到NPM。之所以说人人都会写, 是因为这个组件实现起来确实比较简单,不需要很厉害的Js水平, 基本是对document.execCommand()指令的绑定。在此将过程分享给大…

阅读地址: https://juejin.im/post/5987c4a66fb9a03c5539cfce

标签:wepy

深入wepy小程序组件化框架

wepy是一个优秀的微信小程序组件化框架,突破了小程序的限制,支持了npm包加载以及组件化方案,并且在性能优化方面也下了功夫,不管之后项目是否会使用到,该框架组件化编译方案都是值得学习和深入的。 本文同步于个人博客 http://www.imhjm.com/article/597

阅读地址: https://juejin.im/post/5987370e6fb9a03c42430a30

标签:Canvas

一个少女心满满的例子带你入门 Canvas

canvas入门 本文首发于我的个人博客:http://cherryblog.site/ github项目地址:https://github.com/sunshine940326/canvasStar 项目演示地址:https://sunshine940326.github.io

阅读地址: https://juejin.im/post/5986d6e1f265da3e241e8cdb

标签:AE

用视频软件AE + bodymovin制作网页动画

我们知道,做动画有多种形式,可以用CSS的animation,也可以用Canvas,或者是用JS控制CSS的属性形成动画。我们经常使用CSS做一些比较简单的动画,像过度、加载的动画,对于一些比较复杂的,可能会做成gif,或者是用Canvas,使用Canvas的控制粒度可以很细,同…

阅读地址: https://juejin.im/post/5986d4575188256dcf65cd5a

标签:API

捋一捋容易被忽略的API用法

Date 获取某月的天数 下一月的第0天就是当前月的最后一天。 function daysInMonth(year, month) { let date = new Date(year, month + 1, 0); return date.getDate(); } // 注意在…

阅读地址: https://juejin.im/post/5985d7aef265da3e1727b0ab

标签:Vue.js

手摸手教你使用vue-cli脚手架-详细步骤图文解析[vue入门]

写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建环境的教程,每一步尽量详细解析。需…

阅读地址: https://juejin.im/post/597eee92f265da3e2e56e37c

标签:源码

探索 vue-spa 全家桶项目,解析配置,目录结构,路由以及状态管理的实现,附源码

1.简介 项目是一个简单的权限管理页面,分为3个页面, 首页,账户中心,登录页 通过vue-router 对于路由做权限控制, 首页无需登录,跳转账户中心会自动检索是否登录, 登录之后首页的登录按钮变为退出按钮, 页面之间的的状态管理全部通过vuex进行管理 项目演示 项目用到的…

阅读地址: https://juejin.im/post/59916da2f265da3e154b202c

标签:canvas

基于canvas实现波浪式绘制图片

写在最前 本次的分享是一个基于canvas的更新图片特效实现。其中主要涉及canvas中getImageData()、putImageData()、toDataURL()方法的使用。效果请看下面。 欢迎关注我的博客,不定期更新中—— PS:请在本地服务器中打开页面,因谷歌浏览器中…

阅读地址: https://juejin.im/post/598471e3f265da3e2a2f8147

标签:Web

Web 端的下一代三维图形

原文地址:Next-generation 3D Graphics on the Web 原文作者:Dean Jackson 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO/next-g

阅读地址: https://juejin.im/post/5983208c5188253c6f2d185d

推荐阅读更多精彩内容

  • 交朋友就要交那种即使变成老头了也能互叫绰号的! 《初识RxJS》 背景 RP(Reactive Programmi...
    知行社阅读 198评论 0 2
  • 我早年都是用 VIM 写程序,也说不上特別喜欢,主要是当时还不知道怎么退出 VIM 《《深入理解ES6》教程学习笔...
    知行社阅读 189评论 0 7
  • 当一个软件工程师宣称他已经完成了 90% 的工作,意思是他还需要相同的时间来完成剩下的 10% 的工作。 《用程序...
    知行社阅读 372评论 0 4
  • 头发天然卷的家伙都不是坏人! 《如何阅读计算机科学类的书》 概要 阅读计算机书的建议: 鉴别烂书。 检视阅读。快速...
    知行社阅读 142评论 0 3
  • 以下是一个例子:先编写接口 @Service注释表示定义一个bean,自动根据bean的类名实例化一个首写字母为小...
    itachi阅读 407评论 0 0