登录  /  注册
首页 > web前端 > js教程 > 正文

【整理总结】管理Angular项目的5个最好小技巧

青灯夜游
发布: 2023-01-05 20:37:13
转载
2063人浏览过

怎么组织 angular 项目?下面本篇文章给大家整理总结5个管理angular项目的top技巧,希望对大家有所帮助!

【整理总结】管理Angular项目的5个最好小技巧

伴随着新功能的发布,Web apps 的体积越发大。在公司 DevOps 的过程中,这种发布变更每天都发生。

在如此高速的发布周期中,代码很快会变得笨拙。特别是基于 JavaScript 开发的项目,比如 NextJS 或者 Angular

下面是我们在管理 Angular 项目中 5 个最好的实践,以达到最大的可读性,可维护性和可扩展性。

1. 准守单一职责原则

很多单应用程序核心是具有臃肿类的代码库。从本质上讲,这些臃肿的程序很难维护。从某种意义上讲,他们很脆弱,脆弱到更改一行代码可能对到整个程序产生灾难的影响。single responsibility principle 能阻止这些问题。

单一职责原则意味着组件有且仅有一个功能。

使用这种方法构建应用程序会产生一个模块化框架,其中应用程序是通过这些代码块串联在一块的。

使用这种方法能够让程序更易读和更好维护。也能够在应用中很好定位指定的功能。【相关教程推荐:angular教程编程教学

为了确保你的代码能够满足这种要求,你可以问自己一个问题:这代码是干什么的?如果自己的回答包含 and 这个关键字,那么你需要将你的代码重构为单一职责的代码。

构建 Angular 应用程序并对其扩展是一种持续性的练习。在不断的练习中,使用单一职责原则组织你的项目,将使你的应用程序干净,可读和可维护。

2. 绑定代码到模块中

Angular 中的 modules 是单一原则的实施。在 Angular 中,每一个模块代表一个分离的和独立的功能。

Angular 中提供了几种类型模块去指定如何对它们进行逻辑分组或组织。

Core

Core 模块是一个 NgModule,用来实例化应用并加载全局使用的核心功能。

所以,任何单例服务都应该在核心模块中实现。页头,页脚或者导航栏都是这种类型的模块。

每个应用程序有且只有一个实例的所有服务(单例服务)都应该在核心模块实现。例如鉴权服务或者用户服务。

Feature

功能模块代表构建应用程序功能的代码。比如,在一个线上购物的应用中,我们会有将商品添加到购物车的功能和用于付款的单独模块。

Shared

共享模块由可以被组合以创建新功能的模块组成。比如,搜索函数在平台中可以被用于多个功能。

以这种方式构建代码使事情更加容易定位并增加代码可重用性的机会。

3. 组织 SCSS 文件

如果不遵循通用结构,样式文件很快就会变得杂乱无章。一般最佳实践的模式 7-1 模式,该模式使用 7 个文件夹和 1 个文件,如下所示:

  • App - 项目的主要文件夹

  • Abstract - 抽象部分,包含所有变量、混合和类似的组件

  • Core - 包含整个站点的排版、重置和样板代码

  • Components - 包含要为一个网站创建的所有组件的样式,例如按钮、选项卡和模式

  • Layout - 包含定义站点布局所需要的文件,例如页头和页脚

  • Pages - 包含每个特定页面样式

  • Vendors - 这个可选文件夹适合项目的使用的引导框架,比如 bootstrap

为包含该特定文件夹所有代入的在每个文件夹中新建一个 all.scss 文件。

4. 将私有服务放到组件中

许多服务都被设计全局范围内运行。然后,在某些情况下,一个组件需要一个服务。传统的编码组件实践推荐单一责任原则。

在这种方法下,服务和组件被编写为单独的项目。

但是,考虑下入锅删除这些服务的组件会发生什么?你最终得到的是死代码,只会使得仓库变得更加混乱。在这种情况下,最佳实践是将服务放在组件内部。

这样,维护组件和服务就更加容易了。

5. 简化导入的 Angular 最佳实践

嵌套文件结构本质上比将所有代码文件都放在一个目录中的平面文件系统更加容易导航。

然而,随着项目的方法,项目的文件结构可能变得相当复杂。虽然这使得定位代码变得更加容易,但是当它在编写导入语句时提出了挑战。

当一个目录结构开始超过三个或者四个级别的时候, import 语句就会变得非常长并且难以阅读。

解决这个问题的,我们可以在 tsconfig.json 文件中配置路径的别名。在这个文件中,有个名为 compilerOptions 的数组。这个是你在应用程序中配置路径别名。

当代码编译后,在该数组中定义的路径别名会替换成真实的路径。每个路径的值是一个包含实际路径和别名的键值对对象。

构建 Angular 应用程序并对其进行扩展是一项持续的练习。

本文为译文,采用意译的形式。原文地址:How to Organize Angular Project | TOP 5 tips

更多编程相关知识,请访问:编程视频!!

以上就是【整理总结】管理Angular项目的5个最好小技巧的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号