这是一个备忘清单,可以让你在不用做太多选择的情况下快速学习。我会列出一些工具来满足大部分场景下的前端开发。当你看完这篇文章,你会有足够的自信来调整你的技术栈。

☉概要

我会将地图划分为你需要解决的问题。对于每个问题将包含:

  • 问题描述以及所需工具

  • 决定用哪种工具来解决问题

  • 解释我为什么选择这个工具

  • 给出几个替代方案

☉包管理

  • 问题: 需要组织管理的你的项目和依赖

  • 解决: NPM 和 Yarn

  • 原因: NPM是市面上非常优秀的包管理工具。Yarn运行在NPM之上,优化了依赖解析,把你的第三方依赖版本锁定在一个文件中。

  • 其他选择: 据我所知还没有。

☉JavaScript

  • 问题: ECMAScript 5 很老派很糟糕

  • 解决: ES6

  • 原因: ES6包含了几个很有用的特性,这些特性其他语言已经存在很久了。说几个有意思的特性吧:箭头函数、具备模块导入导出能力、对象解构、模板字符串、let和const、generators、promises等等。如果你是个python程序员,你会有家的感觉。

  • 其他选择: TypeScript, CoffeeScript, PureScript, Elm

☉语法转化

  • 问题: 许多浏览器还没有大规模的支持ES6。你需要一个程序来将ES6语法转换成ES5。

  • 解决: babel

  • 原因: 完美运行,近乎事实上的标准。在服务器端完成转换。

  • 其他选择: Traceur

  • 注意: 你将使用babel加载器,是一个webpack加载器。如果你使用比如coffeeScript这样的语言,也需要转换。

☉检查工具

  • 问题: 有无数种方法可以写js,所以实现代码一致性很难。用语法检查工具可以阻止一些bugs。

  • 解决: ESLint

  • 原因: 很好的代码检查器,而且还可配置。可以很好的帮助你适应新的语法。

  • 其他选择: JSLint

☉打包工具

  • 问题: 需要处理第三方依赖和模块加载问题。

  • 解决: Webpack

  • 原因: 高度可配置。可以加载各种依赖,可插拔。

  • 其他选择: Browserify

  • 缺点: 首次配置会比较麻烦

  • 注意: 你需要花一些时间去了解webpack运行机制。以及去了解babel-loader, style-loader, css-loader, file-loader, url-loader。

☉测试

  • 问题: 有时候你的代码很脆弱,你需要测试它。

  • 解决: mocha(测试运行器),chai(断言库)。

  • 原因: 使用方便,功能强大.

  • 其他选择: Jasmine, Jest, Sinon, Tape.

☉前端框架 / 状态管理

  • 问题: 这是一个很大的问题。单页应用变得越来越复杂,可变状态很麻烦。

  • 解决: React 和 Redux

  • 为什么使用React: 让人兴奋的是React打破了许多传统教条,更好的组件划分思想:用功能划分替代了原有通过(HTML/CSS/JavaScript)来划分组件的方式。

  • 为什么使用Redux: 如果你的应用很复杂,那你需要用一个工具来管理你的状态。网上有很多工具可以实现,为了节约你的时间请直接学redux吧。它实现简单,Facebook也在用。

  • 其他选择: Angular2, Vue.js.

  • 警告: 当你第一次看到JSX代码时,可能想骂人。请相信我,把HTML,JavaScript和CSS写到一个文件会超级爽,感觉解锁了一个新世界。

☉操作DOM

  • 问题: 你偶尔也需要操作DOM

  • 解决: jQuery.

  • 原因: 是的,jQuery仍然活的很好,React和jQuery不是水火不容的。你觉得还可以用React原生提供的’querySelector‘,但jQuery的跨浏览器的兼容能力可以为你省去很多麻烦。

  • 其他选择: Dojo (不知道现在还有吗).

☉样式

  • 问题: 每个组件需要有独立的样式,而且可复用。

  • 解决: CSS模块

  • 原因: 我喜欢用内联样式,但我不得不承认它有很多局限性。当然在React中用也是可以的,但是你不能定位伪类选择器(如 :hover)。

  • 其他选择: 内联样式。我特别喜欢在React中使用内联样式,这样你就可以把样式当做js对象来处理,而且他们在一个文件中,非常容易维护。有些人可能主张用 SASS/SCSS/Less,但是又会增加新的步骤,没有CSS模块/内联样式那么轻便。

转载链接:http://zcfy.cc/article/3696.html

2018自己的JavaScript开发指南的更多相关文章

  1. 最棒的 JavaScript 学习指南(2018版)

    译者注:原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结,全文包含学习指南.新人上手.Webpack.性能.基础概念.函数式编程.面试.教程案例.Async Await.并发.V8. ...

  2. JavaScript 开发工具webstrom使用指南

    本文给大家推荐了一款非常热门的javascript开发工具webstrom,着重介绍了webstrom的特色功能.设置技巧.使用心得以及快捷键汇总,非常的全面. 看到网上一篇介绍webstrom的文章 ...

  3. 免费下载获取Odoo中文开发 指南 手册

    引言 Odoo是一个强大的商业应用开源平台.在此基础上,构建了一套紧密集成的应用程序,涵盖了从CRM到销售到股票和会计的所有业务领域.Odoo有一个动态和不断增长的社区,不断增加功能.连接器和其他商业 ...

  4. [转帖]2019 简易Web开发指南

    2019 简易Web开发指南     2019年即将到来,各位同学2018年辛苦了. 不管大家2018年过的怎么样,2019年还是要继续加油的! 在此我整理了个人认为在2019仍是或者将成为主流的技术 ...

  5. 每个JavaScript开发人员应该知道的33个概念

    每个JavaScript开发人员应该知道的33个概念 介绍 创建此存储库的目的是帮助开发人员在JavaScript中掌握他们的概念.这不是一项要求,而是未来研究的指南.它基于Stephen Curti ...

  6. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  7. JavaScript权威指南 - 数组

    JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...

  8. JVM 平台上的各种语言的开发指南

    JVM 平台上的各种语言的开发指南 为什么我们需要如此多的JVM语言? 在2013年你可以有50中JVM语言的选择来用于你的下一个项目.尽管你可以说出一大打的名字,你会准备为你的下一个项目选择一种新的 ...

  9. nodejs开发指南读后感

    nodejs开发指南读后感 阅读目录 使用nodejs创建http服务器; supervisor的使用及nodejs常见的调式代码命令了解; 了解Node核心模块; ejs模板引擎 Express 理 ...

随机推荐

  1. AI应用在金融领域,如何能够在商业上有所突破

    AI应用在金融领域,如何能够在商业上有所突破 如今,随着社会不断发展,技术不断进步,国内外各大金融机构已经在大数据.人工智能.区块链等新技术上有很多尝试,智能客服.智能投顾等新金融形式也早已不新鲜.那 ...

  2. UDP 两种丢包处理策略:丢包重传(ARQ) 和 前向纠错(FEC)

    目录 1. 两种丢包处理策略 2. 前向纠错(FEC) 3. 丢包重传(ARQ) [参考文献] 1. 两种丢包处理策略 为了保证实时性,通常适应UDP协议来针对RTP数据进行传输,而UDP无法保证数据 ...

  3. 机器学习技法笔记:Homework #6 AdaBoost&Kernel Ridge Regression相关习题

    原文地址:http://www.jianshu.com/p/9bf9e2add795 AdaBoost 问题描述 程序实现 # coding:utf-8 import math import nump ...

  4. PAT_A1059#Prime Factors

    Source: PAT A1059 Prime Factors (25 分) Description: Given any positive integer N, you are supposed t ...

  5. akka-stream之异常处理

    背景介绍 在项目中使用了akk-stream的source.queue功能,如下: Pair<SourceQueueWithComplete<Integer>, Source< ...

  6. jmeter-测试webservice接口

    测试webservice接口(soap类型接口) 一.webservice协议的本质 一个经过封装的post类型的HTTP请求 Web service一般就是用SOAP协议通过HTTP来调用它,其实他 ...

  7. JS的面向对象与原型

    原型 const yoshi = { skulk: true }; const hattori = { sneak: true }; const kuma = { creep: true }; ⇽-- ...

  8. 自记录:git如何上传文档到git@osc

    前提: D盘有gitserver文件夹 双击桌面的git.exe文件,打开git命令窗口 输入cd  d: 命令进入D盘 输入cd gitserver命令进入 找到git@osc自己参与项目里的htt ...

  9. Box-Cox变换

    简介 编辑 Box-Cox变换的一般形式为: 式中    为经Box-Cox变换后得到的新变量,    为原始连续因变量,    为变换参数.以上变换要求原始变量    取值为正,若取值为负时,可先对 ...

  10. 微服务(Microservices)和服务网格(Service Mesh)的架构概念

    注:文章内容为摘录性文字,自己阅读的一些笔记,方便日后查看. 微服务(Microservices) 在过去的 2016 年和 2017 年,微服务技术迅猛普及,和容器技术一起成为这两年中最吸引眼球的技 ...