前端应用能从 Node.js 学到什么

摘要:Will Binns-Smith是一位热爱JavaScript的全栈工程师,喜欢通过技术来解决实际问题。他开发了Bonobos.com的前端购物车功能。Will喜欢与设计师一对一工作,将PC网站转换为针对更小的触摸设备的站点。

Will Binns-Smith是一位热爱JavaScript的全栈工程师,喜欢通过技术来解决实际问题。他开发了Bonobos.com的前端购物车功能。Will喜欢与设计师一对一工作,将PC网站转换为针对更小的触摸设备的站点。近日,Will撰写了一篇文章,谈到了Node.js有哪些做法和特性值得前端应用学习。

在Web平台能从Node.js学到什么这篇文章中,我们探索了由开发者为开发者所创建的小范围抽象所带来的好处。在这篇文章中,我们来了解如何以及为何应该将这种开发风格引入到你自己的Web前端中。

选择你自己的方式

作为小模块的用户,如果你不接受依赖所做的变动,那么你可以换另一个依赖。也许应用会使用某个模块的新版本(比如说2.x),而应用的另一个依赖使 用的却是老版本(比如说1.x)。在Node中,由于依赖的查找是从邻近的node_modules目录开始,然后沿着文件系统逐级向上,即便需要不同版 本号的相同模块,这种方式也是可以满足需求的。如果版本匹配,那么只会使用一个副本。

浏览器中的npm模块?这难道不是Node的事情?

你可能想知道如何能在不使用成百上千个script标签或是不在RequireJS配置文件中使用那么多条目的情况下维护如此多的依赖。也许你还想知道如何在浏览器中使用来自于npm的模块轻松创建SVG元素。诸如Browserify与Webpack等现代工具让这件事成为了可能,他们会通过Node所用的相同的CommonJS require语句来追踪应用的依赖图。他们使得一个大型包文件中的模块彼此可见,而你在页面中则可以通过单个script标签将其引入进来。

另一个常见问题就是这么做会不会增加向浏览器传送的JavaScript文件大小。在新版的npm中,这种模块树采用了扁平形式,同时又会向应用中 的每个依赖提供所需的版本。借助于这种方式,你不会传递任何不需要的库的副本,同时又能满足每个模块的要求。此外,还有一个名为rollup的更加新颖的包管理器,它使用了ES2015模块格式,只打包你所导入的模块的子集。

我所认识的很多人都对将多个jQuery版本放到浏览器中这个想法感到惊讶。没错,这么做确实有些恐怖,虽然做了精简与gzip压缩,但 jQuery依然会有30KB的大小。不过,传输2个、3个、甚至4个2KB大小的库的副本相比起来却是微不足道的,特别是这么做能够避免手工解析依赖和 升级jQuery以及安装的那些插件。即便如此,你也只应该在应用中包含了很多模块,并且这些模块又依赖于很多不兼容模块的情况下才这么做,因为npm 3在默认情况下会尽可能打平模块目录。你可以通过简单的安装随意使用npm注册的100,000多个模块。

界限在哪里

我们先来了解一些术语:包指的是可以发布到npm注册中心或是通过git仓库使用的单元。不过在CommonJS中,模块与文件是一一对应的。因此,一个包可以包含多个模块,不过通常情况下,一个npm包本身就是一个模块。

定义包的职责是最困难的一件事。如果包的范围过大,那么就会出现破坏性的改变,其后果就是破坏了生态圈。与之类似,如果一个包有很多依赖,那么破坏性的改变与Bug就会导致整个系统出现级联更新,无论开源还是内部使用都是如此。在设计包的范围时,一个好的原则就是软件组件的内聚性。本质上,如果几个组件会一同变化,那么他们就应该属于同一个包。如果不是,那就请抽取出来!

请记住,借助于npm与大多数包管理器,一个包不一定需要一个专门的仓库。如果过多的Pull Request的负担阻碍了发布新模块的流程,那就请考虑创建新的仓库,同时发布每一个包。Babel是个开源的JavaScript编译器,它通过这种 方式在单个仓库中维护了100多个包,极大地提升了效率,同时又将每个包发布到了npm中。

值得注意的是,Bower(另一个JavaScript包管理器)的一个限制是它使用Git仓库(或是tarballs)作为接收模块代码的方式,因此它需要为每个包都创建一个仓库。我的建议则是使用npm。

尝试

通过小模块来构建应用要比你想象的简单多了。你的应用可能已经有了很多抽象,确定哪些抽象应该拥有自己的包其实是个很困难的事情。首先,如果只抽象 了平台,并且提供通用目的的门面,那么最好提供一个开源的包。诸如GitHub与Bitbucket等服务都非常适合于这一点,如果使用的是Node或是 浏览器,那么你当然应该将自己的工作成果发布到npm注册中心了。当然,其他语言的生态圈也拥有自己的包管理解决方案。

如果应用为内部业务逻辑提供了可重用的抽象,比如说对内部服务或是API的包装器,那么组织中的其他人就会从独立的包中获益匪浅。在 Atlassian,我们有很多小型的JavaScript客户端来访问报表或是分析等服务。此外,还有一个通用目的的包,它用于在新产品中快速开始 Atlassian Connect的实现。对于源代码管理来说,我的建议是不要以每个仓库作为基础,这样才能创建出由很多小模块所构成的内部生态圈。Bitbucket Cloud与Bitbucket Server都可以随着团队规模的变化而水平扩展。在发布包时,npm在其云服务上提供了私有模块,并且提供了自托管的服务,从而作为源代码仓库管理的一 个有益补充。你甚至还可以通过Bitbucket Cloud仓库来方便地安装npm模块:只需执行命令npm install bitbucket:user/repo即可。

一旦拥有了很多小模块,你就可以对其设计进行迭代,将其组合起来构建出更高层次的抽象。你可以无所畏惧地破坏APIs,因为现代工具与语义化版本可以确保消费者能够从中作出选择,所有一切都会快速演进。这才是变化的真正意义。


原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,302评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,563评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,433评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,628评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,467评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,354评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,777评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,419评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,725评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,768评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,543评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,387评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,794评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,032评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,305评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,741评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,946评论 2 336

推荐阅读更多精彩内容

  • 本文由我首发于 GitChat 中。 前言 在 Node.js 开发领域中,原生 C++ 模块的开发一直是一个被人...
    機巧死月不會碼代碼阅读 5,194评论 6 24
  • Node.js是目前非常火热的技术,但是它的诞生经历却很奇特。 众所周知,在Netscape设计出JavaScri...
    Myselfyan阅读 4,058评论 2 58
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,517评论 18 139
  • 1 Android事件分发机制? 分为三层:Activity、ViewGroup、View。 1、如果事件不被中断...
    小鬼图样阅读 2,370评论 0 25
  • 读完一本醍醐灌顶的好书,写完一篇酣畅淋漓的文章,结识一位心仪已久的姑娘,会有一种抑制不住的想说话的冲动。内容并非要...
    banny阅读 381评论 0 2