前端开辟早报,和咱们一齐上学JavaScript

图片 1

2018年6月前端面试经历(上);全屏滚动插件fullPage.js;ECMAScript 2018 语言规范正式发布,改进正则表达式;Vue SPA项目优化小记;实现一个完美符合Promise/A 规范的Promise;JS继承,中间到底干了些什么;用 Node.js 开发一个 Command Line Interface (CLI);跨域解决方案实践cors及jsonp

译者按

2016年,疯狂奔跑的前端界似乎慢了下来,React、Angular、Vue 鼎足之势成矣。难得有这样的契机,让我们静下心来归回基础,深挖框架潜力。我相信,前端工程师的自我升华之路就在其中。

就像作者在另一篇文章中所讲:我们都在一辆像子弹一样飞速前行的列车之中,无论你坐在哪,窗外的世界都是疾驰残影而已。

所以我们不妨点一杯咖啡,品尝当下的美味,任凭列车把我们带向充满未知的未来。

图片 2

JavaScript框架.jpeg

JavaScript 无疑还在流行,各类技术、框架、类库逐鹿前端界。生态系统惊人的多样性与活力让很多人陷入了深度困惑:我到底该学啥?

我们该把宝贵的时间投资到哪里才能获得最大收益呢?各大公司把哪些技术栈作为招聘标准呢?哪些技术最有成长潜力呢?

在众多问题中,你必须先把这件事搞清楚:你现在需要了解哪些最重要的技术?

这将会是一个长长的清单,但是不要灰心。相信自己,你能行!如果你还在担心永远也不可能把构建现代应用的每一件事都搞明白,那就先读读这篇文章吧:《为什么我对 JavaScript 框架疲劳现象心存感激》。然后打起精神,我们开始吧。

在此过程中,记得多写一些实际的代码。你可以在 Codepen.io 上演练。如果你在学习 ES6,可以使用 Babel REPL 看它是怎样翻译的。

MobX:MobX 和 React 十分钟快速入门

MobX 是一种简单的、可扩展的、久经考验的状态管理解决方案。
这个教程将在十分钟内向你详解 MobX 的所有重要概念。MobX 是一个独立的库,但是大部分人将它和 React 共同使用,所以本教程将重点讲解他们的结合使用。

深入理解React 组件状态(State)


深入理解React 组件状态(State)

react-redux实践总结


标题 作者:赵玮龙 先后就职于面包旅行,阿里体育,现在就职于美团。涉及技术范围React, AngularJS, gulp, grunt, webpack, redux, canvas, node等,现在专注于前端react周边技术栈研究 特此声明:本篇文章都是围绕react技术…

如何管理好10万行代码的前端单页面应用


蚂蚁金服数据平台前端团队主要负责多个数据相关的PC Web单页面应用程序,业务复杂度类比Excel等桌面应用,业务前端代码量在几万行~几十万行,随着产品不断完善,破百万指日可待。管理好10万行级甚至百万行级代码的前端应用,是我们团队的核心挑战之一。 团队的架构方案是多个产品经历…

快速上手必备:五分钟过一遍 Redux 知识点


你是不是好不容易看完了 Redux 的官方文档、了解了 state/action/reducer/store 这些内容后,但又愁于没有地方可以一次性实践将他们牢记于心,而下次真正要使用的时候又苦于这些看过的概念差不多都忘光了。

如此反复不仅浪费时间、而且消磨精力。

考虑到此,本文尝试通过简明的概述将 redux 中涉及到的主要知识点以及官方提供的最佳实践表达,希望已经入门的你在真正需要的时候可以扫一遍迅速捡起这些、方便你的开发。

快快收藏吧。

Slate.js - 革命性的富文本编辑框架


相信很多同学即便没有接触过富文本编辑领域,也一定听说过【富文本编辑是天坑,千万不要碰】的说法——是的,富文本编辑是天坑,但 Slate 能很好地帮助你。下面会介绍富文本编辑的复杂度所在,以及 Slate 的解决方式。 富文本编辑领域和常规的前端开发相比,有个非常微妙的区别:在这…

React 实践项目 (三) Redux-Saga


React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React Redux 进行实战!

Vue.js 依赖收集


因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。 文章的原地址:https://github.com/answershuto/learnVue。 在学习过程中,为Vue加上了中文的注释http…

RxJS 学习线路推荐


RxJS 一向以很难,学习曲线高著称,所以选择合适的方法来学习 RxJS 显得尤为重要!
特整理了一份 RxJS 的正确学习方式。

【WebVR教程翻译】超简单!用A-frame快速打造你的VR网站


A-frame是由three.js封装而来的一组库,使用它可以方便地构建跨平台Web VR应用。如果你对它毫无概念,还没有准备好继续往下读,可以先看看A-frame官方示例,了解了解这个它是工作的,以及它能用来做什么。
在这篇文章中,我将教会你如何创建一个VR网站,你可以体验到…

Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下


Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。我们会在此基础上不断完…

通过实例,学习编写 React 组件的“最佳实践”


现在前端程序员都知道,React 是组件化的。当我开始学习 React 的时候,我记得当时已经存在了很多不同编写组件的方式了。如今,React 社区已经愈发成熟,但是对于组件正确编写姿势却没有一个相对完备的指导。 这篇文章仅从作者的观点出发,来谈一谈我们究竟应该如何来写高质量的 …

Weui,一套基于preact的轻巧UI库


Preact是一个非常轻巧且性能极佳的react-like框架;
Weui,是微信官方团队出品的一套极至简洁的UI;
当Preact遇上Weui会擦出怎样的火花呢?请看preact-weui吧!

react-router 按需加载


React Router 是一个非常出色的路由解决方案,同时也非常容易上手。但是当网站规模越来越大的时候,首先出现的问题是 Javascript 文件变得巨大,这导致首页渲染的时间让人难以忍受。实际上程序应当只加载当前渲染页所需的 JavaScript,也就是大家说的“代码分拆" — 将所有的代码分拆成多个小包,在用户浏览过程中按需加载。

【译】如何实现前端微服务化?


译者按: 微服务在后端开发中大行其道,其实对于越来越复杂的前端应用来说,微服务也是一种不错的选择。

不吹不黑聊聊前端框架--尤雨溪知乎Live整理


像VUE一样写微信小程序-深入研究wepy框架


微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发。 小程序于M页比相比,有以下优势: 1、小程序拥有更多的能力,包括定位、录音、文件、媒体、各种硬件能力等,想象空间更大 2、运行在微信内部,体验更接近APP 3、在过度竞争的互…

React 中被忽略的函数组件(Functional Components)


详细介绍了React 中函数组件和类组件的区别,分析了函数组件背后的实现思想。

使用 Redux 管理你的 React 应用


使用 Redux 管理你的 React 应用

React 16 更新一览


就在今天,React 团队正式发布了 React 16,这次发布带来了哪些内容呢?
React 16 采用了称为“Fiber”的全新的内部架构。官方对 Fiber 的一句话解释是“React Fiber是对核心算法的一次重新实现”。
以前的 React 使用的称为“Stack”…

面向未来的前端数据流框架 - dob


我们大部分对内产品,都广泛使用了 dob 管理前端数据流,下面隆重介绍一下。 dob 是利用 proxy 实现的数据依赖追踪工具,利用 dob-react 与 react 结合。 dob 的核心思想大量借鉴了 mobx,但是从实现原理、使用便捷性,以及调试工具都做了大量优化。 …

改造你的网站,变身 PWA


最近有很多关于 Progressive Web Apps(PWAs)的消息,很多人都在问这是不是(移动)web 的未来。我不想陷入native app 和 PWA 的纷争,但是有一件事是确定的 --- PWA极大的提升了移动端表现,改善了用户体验。
好消息是开发一个 PWA 并…

React 开发中面临的九个重要抉择


在 React 开发的过程中我们常常会遇到一些抉择,下面我将选取其中一些个人认为重要的抉择来一一分析。但请记住以下所说的都只是的建议,可能有一些方面也没有考虑到,大家还是需要依据实际情况自己选择最合适的,切勿随波逐流。 当开始React开发之前,你或你的团队必须先考虑选择什么样…

深入理解React 高阶组件


对React 高阶组件的概念,基本使用,高级用法及注意事项做了详尽的说明。

关于Vue服务端渲染(nuxt)的简单学习


近期我司开始了一个新项目,因为上一个项目完成的差不多了,所以将这个项目交给了我(其实就是我先踩踩坑,后续大家在一起开发)。因为客户要求要做SEO优化,所以一开始的决定是使用原声js加jq做,我自己也花了俩三天时间来做了一个demo,但是老大觉得效果不理想,周一上午开会决定用服务…

ReactNative 的理解与思考,三端同一套代码的实践


React Native 是一个JavaScript 的框架,用来撰写实时的、可原生呈现iOS 和Android 的应用。 其是基于React的,而React 是Facebook 的用于构建用户界面的JavaScript 库

我们为什么选择使用react生态


昨天参加学习部门一同学的react分享会,会上有很多后端的同学参加,大家都对前端有一定的知识积累。于是会上陆陆续续都抛出了同一个共性的问题。“我用传统的开发方式一样能写出来的东西,为何要用react,redux等一些复杂的东西表达出来”。

接触react也有快两年的时间了。RJ、RN都开发过大大小小的项目。借此机会反思起来,突然发现当初感觉是用来装X和有些鸡肋的东西竟有些割舍不开而且散发着深刻的魅力。

500行代码实现迷你版vuejs,麻雀虽小,五脏俱全


最近看vuejs v1.0 的源码,萌生了能不能自己实现一个vuejs的想法,于是就有了这个迷你版的vuejs。几乎所有的代码都是我自己重写的,但是在写的过程中完全参照vuejs,所以文件组织,生命周期以及类名方法名等都几乎一样。如果你想学习vuejs源码,这个项目将会很有帮助。

超小手势库alloyfinger及其vue版实现深入解析


alloyfinger是一款非常轻量的开源手势库,由于其轻量、基于原生js等特性被广泛使用。关于其原理,它的官方团队解析的非常详细——传送门。相信学过高数的人看起来应该不难,这里不深入解析了。 其核心代码只有300多行,完成了14个手势,其手势并不是浏览器原生的事件,而是通过监…

我们来看看尤大神谈vue.js


本文是最近温习vue知识点后发现必须多看的文章之一

【译】2017 年 20 个最佳的极简 CSS 框架


在文章中,我们将与大家分享 20 个最佳的极简 CSS 框架,它们能够为你提供建站必备的组件,帮助你节省时间。Have Fun!

单页应用的数据流方案探索


这可能是关于单页应用的数据流方案最好的文章了

Napa.js 简介


本文介绍 Napa.js 的核心概念,带领大家探索 Napa.js 是如何运转起来的。关于它的由来和开发初衷,可以阅读 这篇文章 Zone 是 Napa.js 中的核心概念,它是执行 JavaScript 代码的基本单元,所有涉及多线程相关的内容都离不开 Zone 这个概念。一…

高性能迷你React框架anujs1.1.1发布


高性能迷你React框架anujs1.1.1发布

饿了么的 PWA 升级实践


自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作。直到近日在 Google I/O 2017 上登台亮相,才终于算告一段落。我们非常荣幸能够发布全世界第一个专门面向国内用户的 PWA,但更荣幸的是能与 Google、UC 以及腾讯合作,一起推动国内 web 与浏览器生态的发展。

[译] 2017 年了,这么多前端框架,你会怎样选择?


原文地址:Choosing a frontend framework in 2017 原文作者:Taras Mankovski 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO/buil…

基于 React.js redux bootstrap 的 RubyChina 示例


最近在学习前端的各大流行框架, 主要学习了 Vue.js 和 React.js, 前段时间用 Vue.js uikit 实现了 V2EX 的克隆版本, 最近又用 React.js redux bootstrap 实现了 RubyChina 的克隆版本, 两个项目都支持响应式布局. 不得不说这是学习新知识的一个有效途径. 这两个项目都比较合适学习 Vue.js 和 React.js 的朋友参考.

小程序web开发框架-weweb介绍


weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web单面应用。如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中。在小程序大行其道的今天,它可以让你的小程序代码得到最大限度的发挥,他具有以下优点: weweb默认使用我们自己写的编译器对wxml和…

[译] 关于 React Router 4 的一切


原文地址:All About React Router 4 原文作者:BRAD WESTFALL 译文出自:掘金翻译计划 本文永久链接:https://github.com/xitu/gold-miner/blob/master/TODO/all-about-react-rou…

从零开始构建react应用同构之服务端渲染;JavaScript 框架的探索与变迁;我用SVG css3做了一个舞动的机械人——致AI时代的到来;web 应用内存分析与内存泄漏定位;Angular 5 开发一个有道翻译;你可能不知道的 Promise 对象;Redux 异步流最佳实践;利用 javascript 实现富文本编辑器

2018年6月前端面试经历(上) 坐标: 杭州 。自己从事前端工作差不多2年,本人不是科班出身,算是一个小菜鸡到现在刚入门吧。2年前去面试,因为技术菜,其实公司并没有怎么去了解我的技术,主要还是看个人的态度和学习能力,所以很感谢前面的俩个老东家,把我这个小菜鸡带入门了。今年,在上一个东家做的项目差不多也成型了,发现自己也到了一个一...全屏滚动插件fullPage.js 本文介绍使用fullPage.js插件可轻易创建全屏滚动网站。很多网站只有一个首页,它是由多个可以滚动的全屏内容组成,使用鼠标滚动或方向键可控制滚屏,支持css3动画和手机触屏,效果非常高大上。 查看演示 下载源码 使用方法 包含文件 link rel=stylesheet type=text/cssquot...ECMAScript 2018 语言规范正式发布,改进正则表达式 科大讯飞通用文字识别100000次/天免费使用。立即申请gt;gt;gt;nbsp;nbsp; ECMAScript 2018已于 6 月底正式发布,带来了许多新特性。ECMAScript 2018nbsp;于今年2月出炉Vue SPA项目优化小记 概述 之前做了一个React项目和Vue的项目,在做完后不加任何优化的情况下,这2个项目的首屏加载平均时间居然达到了20 s,好一点能进10s,差一点快30s,完全不能忍,优化势在必行,本文章记录下Vue项目的优化过程,React项目的优化后续补上。 上图是实现一个完美符合Promise/A 规范的Promise 原文在我的博客中: 原文地址 简要介绍:Promise允许我们通过链式调用的方式来解决“回调地狱”的问题,特别是在异步过程中,通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A 规范,并在此规范的基础上,自己实现一个Promise. 一、Promise的使用 在了解Promise规范之前,我们知道主流的高版本浏览...JS继承,中间到底干了些什么 1.实现new函数 在JS中初始化一个实例的时候,会调用new去完成实例化,那么new函数到底干了些什么事情, 实例可以访问构造函数中的对象 实例可以访问构造函数prototype中的内容 此外,我们都知道在chrome,firefox等浏览器中,实例化的用 Node.js 开发一个 Command Line Interface (CLI)

关于选择性学习

有些内容是完全选择性的,只有你感兴趣或用它找工作时我才推荐学习,并不是必须的。文中以 ***** 标记的内容都是选择性的。

没有以 ***** 标记的内容都建议学习,但是并非每一点都要精通。你需要了解这些知识,但没有必要在每个方向上都成为权威的专家。

从零开始构建react应用同构之服务端渲染前言 上文讲到使用react进行客户端渲染页面,这次讲解在服务端利用前端react的代码来渲染页面并输出到客户端,即构建同构应用。 PS:同构,我是这样理解的,同一份代码可以同时运行在客户端和服务端。 利用ts实现...JavaScript 框架的探索与变迁译者言 近几年可谓是 JavaScript 的大爆炸纪元,各种框架类库层出不穷,它们给前端带来一个又一个的新思想。从以前我们用的 jQuery 直接操作 DOM,到 BackboneJS、Dojo 提供监听器的形式,在到 Ember.js、Angular...我用SVG CSS3做了一个舞动的机械人——致AI时代的到来 想法来源于codepen大神的一个神作,一群机械人以神一样的步伐在进行群魔乱舞,可是,可是,打开一看,纯js实现,js!也罢,我偏要试一下用SVG CSS3能不能搞出这个效果来,o( ̄ヘ ̄o#)。此为前提。 1.基础图形与基础动画先来个简易版的机械人吧,因为重Web 应用内存分析与内存泄漏定位内存分析与内存泄漏定位是笔者现代 Web 开发工程化实践之调试技巧的一部分,主要介绍 Web 开发中需要了解的内存分析与内存泄露定位手段,本部分涉及的参考资料统一声明在Web 开发界面调试资料索引。 无论是分布式...Angular 5 开发一个有道翻译力争国内 Angular 5 第一篇轮子 Github: 最近轮子造的比较多,意在给初学者一个参考例子,目前反馈来看,如果技术栈不符,很少有人会点...你可能不知道的 Promise 对象 介绍一些你可能不知道的 Promise 用法。Redux 异步流最佳实践 真实业务开发我们需要处理异步请求,比如:请求后台数据,延迟执行某个效果,setTimout, setInterval 等等,所以当 Redux 遇到异步操作的时候,又该如何处理呢。利用 javascript 实现富文本编辑器 利用 javascript 实现富文本编辑器 by.田 光宇 28 小时前 近期项目中需要开发一个兼容PC和移动端的富文本编辑器,其中包含了一些特殊的定制功能。考察了下现有的js富文本编辑器,桌面端的很多,移动端的几乎没有。桌面端以UEditor为代表漫极客 CTO 李焱:大前端之路 - 如何用Web技术一统三端开发 不安分、爱挑战的“折腾”之旅 我是李焱, 来自成都漫极客科技有限公司。 我于 2010 年从北京大学毕业,获得信息管理系学士学位以及计算机软件学士学位。毕业之后,我在酷我音乐商务组从事 web 开发,主要负责公司广告系统、VIP 会员等级体系、音乐盒内链式事件流轻量级迷你 JS 库 hubJS 使用情景 相信大家都听说过 RxJS,它无疑是优秀响应式编程库,让开发者在很多事件驱动的 “流” 中随心所欲地为所欲为。 但实际到最近几次项目开发中,暴露了一些开发以外的问题。 首先想到就是对团队开发者的学习路线比较陡峭,特别是对一些前端新人,上手较为难,无法即拿即用。 另外就是功能真...HOC(高阶组件)在vue中的应用 HOC(高阶组件)在Vue中的应用 HOC是Higher-Order Components(高阶组件)的简称。如果有人第一次看到这个名词,可能会觉得是一个什么高深的技术。其实熟悉React的同学对这个概念应该不陌生。在React体系中,HOC被广泛地用链式事件流轻量级迷你 JS 库 - hubJS 使用情景 相信大家都听说过 RxJS,它无疑是优秀响应式编程库,让在很多事件驱动的 “流” 中随心所欲地为所欲为。 但实际到最近几次项目开发中,暴露了一些开发以外的问题。 首先想到就是对团队开发者的学习路线比较陡峭,特别是对一些前端新人webpack的sourcemap js source map原理 作用:主要用于调试,现在代码都会经过压缩混淆,这样报错提示会很难定位代码,sourcemap就是一个信息文件,里面存储着位置信息,也就是说,转换后的代码的每个位置,所对应的转换前的位置(阮老师有详细解释) 如何开启source关于react diff 算法 React是由facebook开发,用于构建用户界面的js类库,以提升性能为设计理念。在本文中,我将为大家介绍在React中的diff算法,以及它的渲染机制,以便于你能够更好的优化你的程序。 Diff算法在深入了解实现细节之前,了解React如何工作是很重要的8 大前端安全问题 在《8大前端安全问题》这篇文章里我们谈到了什么是前端安全问题,并且介绍了其中的4大典型安全问题,本篇文章将介绍剩下的4大前端安全问题,它们分别是: 防火防盗防猪队友:不安全的第三方依赖包 用了HTTPS也可能掉坑里 本地存储数据泄露 缺乏静态资源完整性校验 ...CloseBrace | 一个简短的完整的Javascript历史 介绍 在2017年,JavaScript的开发可以让新手使用语言,让许多老手瘫痪并且不确定从哪里开始或者选择哪条路径才是正确的。人们经常深究最新的和最伟大的,没有真正了解为什么它是如此伟大。了解JavaScript的历史可以#CSS3#这个很简单,就跟border-radius一样,就是一个参数,同样是针对不同的浏览器有不同的私有属性。w3c上的例子是这样子写的:div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* I...请戳 #前端开发博客# ​​​

Node.js用途很广,常用来开发服务、桌面应用等被开发者熟知,Node.js还有另外一个非常实用的场景

命令行应用。本文将介绍CLI的开发流程、常用的功能,并以meet-cli为例实战演练,从零开始一步步开发一个可以在生产中使用的CLI工具。meet-cli现已开源,读者也可以直接下载查看。 ...跨域解决方案实践cors及jsonp 了解几个跨域的方案,并且通过简单实践进行体会。 如何实践? 但是,我们如何进行实践呢?在哪发请求?向什么服务器发请求?很简单,就在当前网页,打开控制台,输入请求的代码 var url = '#x27;; var xhr =Vue核心思想:数据驱动、组件化 1.数据驱动 DOM是数据的一种自然映射。 传统的前端数据交互是用ajax从服务端获取数据,然后操作DOM来改变视图;或者前端交互要改变数据时,又要再来一次上述步骤,而手动操作DOM是一个繁琐的过程且易出错。 Vue.js 是一个提供了 MVVM 风格的双向数说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State。 正确定义State React把组件看成一个状态机。通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致。组件的任何UI改变Gio.js:基于 Three.js 的 web 3D 地球数据可视化的开源组件库 Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者,可以快速地以申明的方式创建自定义的Web3D数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。 目录 为什么要使用Gio.js 开始使用 例子 API列表 ...邮件驱动 Git 工作流的优势 git 2.18.0 has been released, and with it my first contribution to git has shipped! My patch was for a git feature which remains d基于React Redux的SSR实现 为什么要实现服务端渲染(SSR) 总结下来有以下几点: seo,让搜索引擎更容易读取页面内容 首屏渲染速度更快,无需等待js文件下载执行的过程 代码同构,服务端和客户端可以共享某些代码 今天我们将构建一个使用Redux的简单的React应用程序,实React-从源码分析React Fiber工作原理 本文的demo仓库在_Redux,喜欢请star哟~ 为什么要重写React React16 以前 React16 以前,对virtural dom的更新和RxJS实践,Vue如何集成RxJS 一、 本文章不会对RxJS的原理进行讲解,仅讨论如何在vue中对RxJS进行集成 1、30天精通 RxJS 这是一个台湾开发者编写的关于RxJS的教程,教程涉及到原理解析、简易实现,以及常用operator的介绍。 2、学习RxJS operator 各种常用编写一个简单的JavaScript模板引擎 本文首发于我的知乎专栏,转发于掘金。若需要用于商业用途,请经本人同意。尊重每一位认真写文章的前端大佬,文末给出了本人思路的参考文章。前言能够访问到这篇文章的同学,初衷是想知道如何编写JavaScript的模板引擎。为了照顾一些没有使用过模板引擎的同学,先来稍微Retalk,Redux 从未如此简单 简介Retalk 是 Redux 的一个最佳实践,简单、轻量、流畅而智慧。它可以让你以异常简单清晰的方式来书写 Redux,忘掉 Action types,忘掉 Action creators,再也不用考虑庞大而烦人的样板代码。除此之外,Retalk 还支持异

JavaScript 与 DOM 基础

在你打算用 JavaScript 找到工作之前,你应该抓住 JavaScript 的基础:

  • ES6:当前 JavaScript 的版本是 ES2016(也就是 ES7),但是很多开发者连 ES6 还没有学好呢,现在是时候了。
  • 内建方法:学习标准数据类型的方法(尤其是 Arrays,Objects,Strings,Numbers)。
  • 函数与纯函数:你可能觉得你的函数已经学得不错了,但是 JavaScript 其实暗藏玄机,你需要学好纯函数以便掌握函数式编程。
  • 闭包:掌握 JavaScript 的函数作用域。
  • 回调:回调是被其他函数调用的函数,用来通知某件事情已经有了结果。如同你说:去干你的活吧,好了叫我。
  • Promise:Promise 是一种处理未来数据的方法。当一个函数返回一个 Promise 对象时,你可以用 .then() 方法添加回调,回调会在 promise resolves 后执行,resolved 值会传入回调函数,例如 doSomething().then(value => console.log(value));
  • Ajax & server API calls:多数有趣的应用都需要连接网络。你应该知道怎样与 API 通信。
  • Class:注意《避免类继承》,参见《怎样使用类才能安心睡觉》。
  • 函数式编程基础:函数式编程混合了数学上的方法来编程,避免了共享的状态和易变的数据。我发现 JavaScript 应用中并没有大规模应用函数式编程已经很久了,是时候去掌握它的原理了。
  • Generators & async/await:在我看来,这是用同步的方式编写异步代码的最好方法。它有一定的学习曲线,而你一旦掌握了它,代码的可读性会大大提升。
  • 性能:理解 RAIL 模型,可以使用这两个工具:PageSpeed Insights,WebPageTest。
  • 渐进式网页应用(PWA):看这两篇文章 《Native 应用注定失败》,《为什么 Native 应用注定失败》。
  • Node & Express:Node 允许你在服务端使用 JavaScript,这意味着你能在云端存储数据并随时随地访问。Express 是最流行的 Node 开发框架,并占据绝对优势。
  • Lodash:一个极好的 JavaScript 工具库,封装了函数式编程的优秀思想,可以从 lodash/fp 模块中导入。

工具

  • Chrome Dev Tools:尽管 Firefox 也有一些很酷的工具,但在我看来, DOM inspect 和 JS debugger 是最好的调试器。
  • npm:标准的 JavaScript 开源代码仓库。
  • git & GitHub:分布式版本管理,随时跟踪你的源代码变更。
  • Babel:使 ES6 能在旧的浏览中运行。
  • Webpack:最流行的 JavaScript 打包工具,上手快,进行简单的配置即可快速运行。
  • Atom,VSCode,WebStorm vim:你真的需要一个好用的 IDE。Atom 和 VSCode 是现在最流行的 JavaScript 编辑器。Webstorm 也是一个不错的选择,对插件的支持非常强大。我建议你再学一学 vim,至少先把它加入收藏夹,因为你迟早会在服务器上修改一个文件,使用 vim 是最简单的方法,它几乎默认安装在每一个 Unix 兼容的操作系统,并且在 SSH 上完美运行。
  • ESLint:及早捕获语法错误和样式问题。在代码审查和TDD(测试驱动开发)后,你要做的第三件事就是减少代码中的 bug。
  • Tern.js:JavaScript 类型推断工具,现在是我最喜欢 JavaScript 类型相关工具 —— 无需编译或注释。我用过很多工具,Tern.js 是最好的一个,做静态类型检测无成本。
  • Yarn *****:类似 npm,但安装行为更具确定性,它的目标是比 npm 更快。
  • TypeScript *****:为 JavaScript 提供静态类型。它完全是选择性学习的,除非你在使用 Angular 2。如果你没有使用 Angular 2,你需要在使用 TypeScript 前仔细评估。我个人非常喜欢这门语言,我钦佩 TypeScript 团队出色的工作,但是你需要权衡利弊。建议阅读《静态类型不为人知的秘密》,《你可能不需要 TypeScript》。
  • Flow *****:JavaScript 静态类型检查工具。参见《TypeScript vs Flow》获得详细的了解和客观的对比。友情提示,我发现 Flow 和 IDE 集成很困难,即使使用 Facebook 自家的 Nuclide。

React

React 是 Facebook 开发的用于构建用户界面的 JavaScript 库。它基于单向数据流思想构建,这意味着在每一个更新周期:

  1. React 把输入以 props 传入组件,并在数据为指定 DOM 变更时有条件地渲染 DOM。这个阶段的数据更新不会重新触发渲染,直到下一次绘制阶段。
  2. 事件处理阶段——在 DOM 渲染之后,React 把事件代理到 DOM 树的根结点上(为了更好的性能),你可以监听这些事件并更新数据。
  3. 任何变化都去修改数据,重复步骤1。

这与双向数据绑定形成对比,即 DOM 改变立即触发数据改变(例如 Angular 1 和 Knockout)。使用双向数据绑定,在 DOM 渲染过程中改变 DOM(在 Angular 1 中称为 Digest Cycle)可能会在绘制阶段完成前重新触发绘制,引发降低性能的重排和重绘。

React 不做数据管理,但基于 Flux 的方案是需要的。React 单向数据流的思想是从函数式编程借鉴而来,不可变的数据结构也改变了我们看待前端框架的方式。

深入理解 React 和 Flux 架构,请阅读《学习编程最好的方法就是写代码:从构建应用开始学习应用架构》。

  • create-react-app*****:React 快速入门。
  • react-router:React 路由轻松上手。
  • Next.js*****:React 服务端渲染引擎。
  • velocity-react*****:React  动画 —— 你可以在页面上使用 VMD(Velocity Motion Designer)书签用于交互视觉运动设计。

Redux

Redux 为你的应用提供了事务性的、确定性的状态管理。在 Redux 中,我们通过迭代 action 对象来减少当前应用的状态。想了解为什么这个很重要,读一读《构建 Redux 架构的 10 个注意事项》。学习 Redux 前,看看它的作者 Dan Abramov 的教程:

  • 开始学习 Redux
  • 用地道的 Redux 构建 React 应用

** Redux 是强制性学习的,及时你从未使用它做过项目。**

为什么?因为它会通过大量的实践让你理解纯函数的价值,并以全新的方式理解 reducers,它是迭代数据集并从中抽取数值的通用方法。Reducers 很有用,以至于 Array.prototype.reduce 已经加入了 JS 规范。

Reducers 的重要性堪比数组,而学习 Reducers 的过程本身就很有价值。

  • redux-saga*****:Redux 的同步方式副作用库。用它来管理 I/O(比如处理网络请求)。

Angular 2 *****

Angular 2 是继广泛流行的来自 Google 的 Angular 框架之后的又一个成功者。因为它太火了,所以会让你的简历看起来很漂亮 —— 但是我仍然建议先学 React。

相比 Angular 2,我对 React 更为偏爱,因为:

  1. 它很简单。
  2. 它十分受欢迎,可用在很多工作中(Angular 2 也如此)。

因此,我建议学习 React,而 Angular 2 是全完选择性学习的。如果你对 Angular 2 十分钟情,觉得可以与 React 切换自如,那么就先学 Angular 2 吧,React 作为备选。两者都会使你的简历高大上起来。

无论你选择哪一个,努力集中精力学习至少半年到一年,再去学另一个。完全精通是需要时间积累的。

RxJS *****

RxJS 是 Javascript 响应式编程工具集。可以把它看成用于流处理的 Lodash。响应式编程终于登上了 JavaScript 舞台。ECMAScript 的 Observables 提案已经进入了第一阶段草案,而 RxJS 5 是其权威的标准实现。

尽管我喜欢 RxJS,但如果你一次性引入全部的包,会让你的 bundle 体积迅速膨胀(这里有很多操作)。为了防止 bundle 膨胀,不要引入所有的包。仅加载补丁:

import { Observable } from 'rxjs/Observable';
// then patch import only needed operators:
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';

const foo = Observable.from([1, 2, 3]);
foo.map(x => x * 2).subscribe(n => console.log(n));

仅加载补丁能够将你对 RxJS 的依赖减小大约 200k。这解决了大问题,会让你的应用运行得更快。

为什么你喜欢的框架没有在列?

有些人问我什么他们喜欢的框架没有被我列出来?我考虑的最重要的一个条件是:这些框架在真正的工作中有用吗?

是的,这里存在普遍的争议,但是当你决定投入精力到一个框架中去的时候,了解它是否能够长足发展很重要。

为了找到这个问题的答案,我参考了一些关键的指标。首先,就是谷歌趋势(Google Trends)。如果你想复现下面的谷歌趋势图,记得选择主题,而不是关键词,因为有些词会导致很多错误的判断。也就是说,这是专注主题的趋势,而不是关键词的搜索结果:

图片 3

JS框架在Google Trends上的统计.png

这张图告诉了我们人们在不同项目中的相对兴趣点。如果有人在搜索它们,可能是在寻求观点,或查找帮助文档。这是衡量框架使用情况相当好的一个指标。

另一个好的数据源在 Indeed.com,这里从大量渠道汇总了职位数据。虽然职位投递的热情近年来大幅下降,但是他们仍然积累了足够的数据,可以做一个相对比较,告诉你人们在实际工作的项目中在使用哪些框架:

图片 4

JS框架在Indeed.com上的统计.png

复现这个结果,搜索 <框架名称> javascript,工作地点不填。你可以清楚地看到:

Angular 和 React 占据主导地位:其他框架望尘莫及。(除了jQuery,它已在所有的网站上占据巨大的份额 ——  除了App —— 因为它几乎用于所有的遗留系统,包括像 WordPress 这样流行的 CMS系统)。

你可能看到 Angular 比 React 占据绝对优势。我为什么还是推荐先学习 React 呢?因为:

  1. 越来越多的人对React感兴趣,而不是Angular
  2. 在用户满意度上,React 明显领先 Angular

换句话说,React 赢在了思想占有率和客户满意度上,并且如果按照过去一年半的发展趋势,React 完全有可能超越 Angular 成为前端主流框架。

Angular 2 也有机会翻盘,东山再起,但是现在来看,React 确实打了一场漂亮仗。

待观望框架

  • Vue.js *****:在 GitHub 上有超过 40000 的 star,如果照此情况继续发展下去,2017年它会做得非常好,但是我不认为它在下一年甚至未来会取代 React 或 Angular(它们发展地也很快),学完 React 或 Angular 之后再学这个吧。
  • MobX *****:一个非常好的数据管理框架,是 Redux 的替代方案。发展非常快,我预测它也会在2017年做得不错。多数应用我更倾向于使用 Redux,但在某些场景下显然 MobX 做得更好。例如,当一个页面中有成百上千个动态 DOM 对象时,MobX 的性能可能更好。又如,你的应用流程很简单,你也不需要事务性的、确定性的状态,你可能不需要 Redux。MobX 无疑是更简单的解决方案。同样,学完 Redux 之后再学这个吧。

原文:Top JavaScript Frameworks & Topics to Learn in 2017
译者:Ricky

本文由新葡萄京娱乐场8522发布于计算机编程,转载请注明出处:前端开辟早报,和咱们一齐上学JavaScript

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。