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

简介:

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,因为现代工具与语义化版本可以确保消费者能够从中作出选择,所有一切都会快速演进。这才是变化的真正意义。

====================================分割线================================
文章转载自 开源中国社区[http://www.oschina.net]

目录
相关文章
|
10天前
|
设计模式 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 设计模式与实战应用
【4月更文挑战第30天】本文探讨JavaScript设计模式在提升开发效率和代码质量中的关键作用。涵盖单例、工厂、观察者、装饰器和策略模式,并通过实例阐述其在全局状态管理、复杂对象创建、实时数据更新、功能扩展和算法切换的应用。理解并运用这些模式能帮助开发者应对复杂项目,提升前端开发能力。
|
10天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
2天前
|
开发框架 JavaScript 中间件
中间件应用Koa.js(Node.js)
我们添加了两个中间件。第一个中间件记录请求的开始时间,并在下一个中间件执行完毕后计算并打印出请求的总时间。第二个中间件与之前的示例相同,它设置响应体为 "Hello World"
17 6
|
2天前
|
JavaScript 中间件 API
中间件应用Express.js(Node.js)
我们定义了一个名为 `logger` 的中间件函数。它接受请求对象、响应对象以及下一个中间件函数作为参数。当接收到请求时,它会打印出请求的 HTTP 方法和 URL,然后调用 `next()` 函数来将控制权传递给下一个中间件或路由处理器。我们使用 `app.use()` 方法将 `logger` 中间件添加到了应用级别的中间件堆栈中,这意味着它将对所有请求生效。
10 3
|
3天前
|
JSON 前端开发 JavaScript
快照测试在前端自动化测试中的应用
在前端自动化测试中,快照测试常用于检验组件渲染与布局。
|
4天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
9天前
|
JavaScript 前端开发 开发者
【Web 前端】什么是JS变量提升?
【5月更文挑战第1天】【Web 前端】什么是JS变量提升?
【Web 前端】什么是JS变量提升?
|
10天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
10天前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
10天前
|
前端开发 持续交付 开发工具
【专栏:工具与技巧篇】版本控制与Git在前端开发中的应用
【4月更文挑战第30天】Git是前端开发中的必备工具,它通过分布式版本控制管理代码历史,支持分支、合并、回滚等操作,促进团队协作和冲突解决。在前端项目中,Git用于代码追踪、代码审查、持续集成与部署,提升效率和质量。优化协作包括制定分支策略、编写清晰提交信息、定期合并清理分支及使用Git钩子和自动化工具。掌握Git能有效提升开发效率和代码质量。