产品设计

    今日:83| 主题:15636
收藏本版 (1)
软件产品、PC、移动、网站、平台的开发、策划等内容。

[其他] 【第728期】JavaScript生态圈现状:初学者地图

[复制链接]
Superficialdial 发表于 2016-10-10 10:17:12
160 4

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
前言
   不知道有没被昨天的 【第727期】在 2016 年学 Java 是一种什么样的体验? 惊讶到?不同的人对这抱着不同的态度。虽然各种框架、库发版之快,但并不会阻止部分人去研究应用。昨天的文章可能带给你的是一些前端的名词解释,[email protected]的感受。
  正文从这开始~
  如果你以前有编程经验,但是一名前端Java开发的初学者,那么一系列的术语和工具容易引起混淆。我们不会纠缠于细节的讨论,而是会纵览当前的“Java生态圈”。这应该足够你找准方向,开启前端开发之旅。
  关键术语显示为粗体。如果你想跳到可以工作的样板代码库,那么我已经将我的一些建议整理成了一个GitHub库。
  客户端Java是如何工作的,为什么要使用它?
  关键术语:DOM(文档对象模型)、Java、async、AJAX
  为了编写高效的前端代码,你需要对如何综合运用HTML、CSS和Java创建Web页面有一个基本的了解。
  当客户端(通常是浏览器)访问HTML页面时,它会下载它,解析它,然后使用它构造DOM(文档对象模型)。Java可以同DOM交互及修改DOM,交互式站点就是这样创建的。这里有一个DOM的基本介绍。
  Java是如何包含到页面中的?那是另一个复杂的问题,但它是以标签开始的。
  Java的执行会阻塞DOM构造。这就是说,执行Java的时间过长会让人觉得页面没响应。为了避免这种情况,客户端Java经常都是大量使用异步。(你可能听说过AJAX,它就代表asynchronous Java and XML。)
  如果你正在构建一个交互式站点,那么你会需要使用Java,你可能会使用这种或另一种方式处理异步。
  框架是什么?我需要使用trendy.js吗?
  关键术语:React、Angular、Ember、Backbone、jQuery、Underscore、Lodash
  “框架”这个词有许多意思。Java框架的目标通常是减少构建交互式Web页面过程中无谓的工作。从根本上说,框架就是脚手架,设计用来解决一个特定种类的问题。
  许多当前流行的框架都是设计用来解决这样的问题的,“如何创建一个支持复杂用户交互的单页Web应用,并在前端管理所有的业务逻辑?”单页应用或者SPA是不需要刷新页面的Web应用,产品的大部分都是作为一个单独的“页面”而存在——回想下Facebook首页或者Gmail收件箱。
  那么该用哪个框架呢?React? Angular? 还是Ember?甚至说你需要框架吗?选择麻痹症的信号!
  所有这些项目都试图帮你编写更好的Web应用程序。对于选择哪个框架,没有正确的答案,如果有,你就应该使用。
  如果你是刚刚开始使用Java,那么不使用框架可能会更好一些,尝试使用jQuery构建一个站点,其他的少用或不用。那很快就会变得让人厌烦,但你能做到,这会让你了解到一些重要的、有关Java工作原理的东西。你还可以使用jQuery践行好的软件工程准则。
  如果你正在开发一个相当复杂的站点,那么你会发现框架很有用。当前,Angular、React和Ember都是流行且明智的选择。Backbone是一个相对较小的老式框架;它也适合于许多项目。我为本文整理的初学者工具包使用了React,但实际上,没有错误的选择。TodoMVC使用不同的框架实现了同一个清单应用程序,检出它,自己比较一下各种框架。
  Java还缺少许多其他语言内置的标准库函数,像字符串填充或数组重排。为此,我们通常会使用像jQuery、Underscore和Lodash这样的库来弥补这种不足。按照惯例,这些库在导入后要分别使用$、_和_引用,因此,如果你看到一个Java文件中有许多美元符号,几乎可以肯定这是调用了jQuery。
  如果你要开始一个新项目,我建议使用React或者Angular以及Lodash。
  

【第728期】JavaScript生态圈现状:初学者地图-1 (浏览器,星辰变,初学者,客户端,Java)

  我应该编写Java,还是其他的什么?Java的种类有哪些?
  关键术语:ES5、ES6、ES2015、Coffee、Type、Clojure、Babel、“转译(transpiling)”、“编译(compiling)”、MDN参考
  “Java”实际上并不是一门单独的语言。每个浏览器供应商都实现了自己的Java引擎,由于浏览器和版本之间的差别,Java饱受碎片化之苦。CanIUse.com记录了部分不一致的情况;你也可以查看Mozilla开发者社群里的文档。
  ES6又称 ES2015/Harmony/ECMA6/ECMA 2015,是Java规范的最新版本。它引入了新的语法和功能。胖箭头、ES6类、本地模块和模板字符串都是这个Java版本的一部分。Treehouse提供了一份不错的ES6入门教程。
  虽然Java处于一个碎片化的环境,但能够使用新的语言特性也不错。因此,像Babel这样的工具会把你闪亮的标准Java代码转换成一个同旧平台兼容的版本。这个过程称为转译。这同编译没有太大的区别。使用像Babel这样的工具,你不必太过担心特定的浏览器是否支持你使用的Java特性。
  转译工具不只是将ES6 Java转换成ES5。还有一些工具可以对Java的变体,如Clojure、Type和Coffee,做同样的事情。Clojure是Clojure的一个版本,可以编译成Java。Type本质上是Java,但有一个类型系统。Coffee同Java非常像,但有更闪亮的语法;由Coffee创建的许多语法糖都已经被ES6采用,这在很大程度上显得Coffee不那么有用了。所有这些都会编译成普通的Java。
  那么你应该使用什么呢?如果你是前端开发的初学者,那么你也许应该编写ES6风格的Java。大部分ES6特性都得到了各浏览器供应商的广泛支持。如果你需要支持相对较老的平台,那么像Babel这样的工具可以替你将ES6编译成兼容ES5的Java。现在先不要考虑闪亮的compile-to-Java选项,如Clojure,不过,一旦你有了更多的前端开发经验,那么它们当然值得研究。
  


【第728期】JavaScript生态圈现状:初学者地图-2 (浏览器,星辰变,初学者,客户端,Java)

  如何使用其他人的代码?
  关键术语:AMD、commonJS模块、ES6模块、npm、Github
  在Java中,代码共享和模块的历史有一点复杂。我强烈建议你阅读Preethi Kasireddy的文章“Java模块入门指南”来了解更多信息。
  对于我们而言,术语模块和库基本上是等价的:它们代表大量的自包含代码,我们可以在自己的项目中使用及重用。Java模块一般通过node包管理器npm发布。你可以在npm或GitHub上搜索Java模块。
  模块定义(有时称为模块语法)有几种存在竞争关系的方式,主要包括CommonJS、AMD和ES6原生模块。CommonJS采用一种同步的、面向服务器的方法。相反,AMD(异步模块定义)允许你使用异步、非阻塞的方式定义和加载模块。CommonJS和AMD都是在Java没有原生支持任何模块或依赖概念的情况下创建的。
  ES6增加了原生Java模块支持,它既支持CommonJS的声明式语法,又支持AMD的异步加载,还有其他一些特性。终于,模块成为现行语言的一部分。
  在工作中,你很可能会遇到所有这三种类型的模块。对于新项目,你该应该使用ES6原生模块。构建工具,如webpack(下面会介绍),会帮助你在现有项目中使用各种类型的模块。
  我需要Node.js吗?
  关键术语:Node.js、npm、nvm
  Node.js是一款编写服务器端Java的工具。等一下,难道我们谈论的不只是前端Java吗?
  由于Java模块通常在打包后通过node包管理器npm分享,所以你需要安装Node.js,即使你不会把它用于服务器端开发。在OS X或基于Linux的系统上,最好的方式是通过Node版本管理器nvm,这简化了不同Node.js版本的管理。Windows用户应该看下nvm-windows。
  我该用什么构建工具?
  关键术语:grunt、gulp、bower、browserify、webpack、“热重载(hot reloading)”、sourcemap
  一个标签接一个标签地请求将每个Java依赖作为页面的一部分会很慢。因此,大多数站点都使用所谓的Java bundles。捆绑过程会获取所有依赖,并把它们“捆绑”在一起,生成一个单独的文件,包含到页面中。根据需要,有些开发人员还会使用一个“最小化(minifying)”步骤,将所有不必要的字符从Java代码中去除,而又不改变代码的功能。这可以减少客户端需要下载的数据量。
  有些工具还支持诸如热重载及sourcemaps这样的特性,前者会在你保存一个文件时自动在浏览器中更新你的项目,后者提供了一个从捆绑好的Java到其原始形式的映射,简化了调试工作。
  本质上讲,我刚刚描述的是一个构建过程。不管是否大多数Java开发人员都这样描述,你都是将代码编译成一个生产就绪的格式。“前端devops”或者管理构建、部署工具及依赖项的过程成为一项日益复杂的工作。
  Grunt、gulp、broccoli、brunch、browserify和webpack都是Java构建工具。比较它们非常困难,因为它们每一个都致力于解决不同的问题。它们中有许多使用了不同的抽象概念来讨论相同的问题,我们实在是还没有一个共用的术语库。
  根据我的经验,开发人员往往对这些工具的配置文件不甚了解,因此就在项目之间粘来粘去。下面是我为初学者库整理的webpack配置文件,供参考:
友荐云推荐




上一篇:产品设计的四大原则,你都知道其核心的意义和作用么?
下一篇:用户是如何把天给聊死的?
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

萱恨 发表于 2016-10-10 23:59:18
为了三千积分!
回复 支持 反对

使用道具 举报

阿西吧哦啊 发表于 2016-11-11 16:36:20
据说,回这个帖子会升官发财,我来试一下!
回复 支持 反对

使用道具 举报

幼枫 发表于 2016-11-14 06:20:40
土豪,我们做朋友吧。
回复 支持 反对

使用道具 举报

黄兰蕊 发表于 2016-11-14 12:16:50
坐沙发喽,楼主给赏钱不?
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表