感谢@FrailWords 的回答。
我完成了对多个 Angular 应用程序使用相同 UI 代码库的建议。我在这里分享我的想法。
有些方法和我在这个问题中提到的一样。
本提案中要遵循的策略列表:
1. Switch to feature based directory structure.
2. Create an angular module for each feature.
3. Separate common code from instance specific code.
4. Merge duplicate code.
5. Remove unused code and outdated libraries.
6. Re-organize codebase.
7. Make common code as configurable.
8. Use same configurable common code for all 5 instances.
9. Use inheritance or similar mechanisms for extended functionality.
10. Identify & Move functions (methods) from instance specific code to common code.
11. Follow naming conventions.
12. Manage future requirements.
13. Use build tools like gulp or grunt and testing frameworks like jasmine.
14. Application specific look & feel.
如何实施这些策略:
我们将在下面看到每种策略的解决方案/方法。
1.切换到基于特征的目录结构。
当前目录结构:
它基于角度层/类型。也就是说,我们将所有控制器放在一个文件夹中,将所有服务放在另一个文件夹中等等。这是很好的小型应用程序。
例子:
建议的目录结构:
/resources
--/ui_core ui-core or common code
-----/app
-------------------core_module.js inject all modules from /ui_core/modules into this
-------------------config_module.js declare constants and inject into core_module
-----/shared_services part of core_module
-----/shared_directives part of core_module – place directive’s js+html here
-----/shared_filters part of core_module
-----/shared_views
-----/shared_interceptors
-----/shared_content
------------/images
------------/icons
------------/signatures
-----/modules
------------/common_feature1
-------------------common_feature1_module.js
-------------------common_feature1Controller.js
-------------------common_feature1Service.js
-------------------common_feature1Directive.js
-------------------common_feature1Filter.js if any
-------------------common_feature1_view.html
-------------------common_feature1_test.js
-------------------common_feature1.css if any
------------/common_feature2
-------------------common_feature2_module.js
-------------------common_feature2Controller.js
-------------------common_feature2Service.js
-------------------common_feature2Directive.js
-------------------common_feature2Filter.js
-------------------common_feature2_view.html
-------------------common_feature2_test.js
-------------------common_feature2.css
-----/vendor downloaded vendor libraries
------------/js
-------------------/angular
-------------------/kendo
-------------------/jquery
------------/css
-------------------/kendo
-------------------/bootstrap
------------/images
-------------------/kendo
-------------------/bootstrap
--/ui_equity application specific code – for example: equity
-----/app
-------------------equity_module.js inject ui_core module/any module as required.
-----/shared_services part of equity_module
-----/shared_directives part of equity_module – place directive’s js+html here
-----/shared_filters part of equity_module
-----/shared_views
-----/interceptors
-----/content
------------/images
------------/icons
------------/signatures
-----/modules
------------/feature1
-------------------feature1_module.js
-------------------feature1Controller.js
-------------------feature1Service.js
-------------------feature1Directive.js
-------------------feature1Filter.js
-------------------feature1_view.html
-------------------feature1_test.js
-------------------feature1.css
------------/feature2
-------------------feature2_module.js
-------------------feature2Controller.js
-------------------feature2Service.js
-------------------feature2Directive.js
-------------------feature2Filter.js
-------------------feature2_view.html
-------------------feature2_test.js
-------------------feature2.css
--/minified
-----/ui_core
-----/ui_equity
/webapp
-----/WEB-INF
------------/jsp
-------------------index.jsp
-------------------jsincludes.jsp
-------------------cssincludes.jsp
-------------------imageviewer.jsp
-------------------unauthorized.jsp
2。为每个特征创建一个角度模块。
要使我们的应用程序模块化,请为我们应用程序的每个主要特性/功能创建一个角度模块。我们可以在任何需要的地方注入这些模块。
好处:
易于重用模块化应用程序。
提高可读性:无需将单个组件注入其他组件,注入模块就足够了。
3.将通用代码与实例特定代码分开。
可作为 ui_core 一部分的项目列表(通用代码)
a. Most of the directives
b. Filters
c. Utilities , such as arrayUtilities.js, dateUtilities.js, stringUtilities.js
d. Services
e. KendoGridServices & relevant controllers.
To make kendoGrid as part of common code, below changes are required.
For example,
- Create model outside datasource - Currently schema “model” is hardcoded inside abccontroller.js , instead of this create “kendo model” outside abccontroller.js and pass/inject to abccontroller.js
- Currently “columns” are hardcoded inside kendoabcgridservice.js. Instead of this, create “columns array” outside and inject it into kendoabcgridservice.js .
- Similarly, move out any other instance specific code from kendo grid.
以下策略是不言自明的,因此我们可以转到下一个...
4. Merge duplicate code.
5. Remove unused code and outdated libraries.
6. Re-organize codebase.
7.使通用代码可配置。
一个。在公共代码中创建配置模块
( /resources/ui_core/app/ config_module.js).
b.例如,在该模块内声明常量
APP_NAME = ‘equity’ 和任何需要的东西。
c。修改通用代码(ui_core),使用 APP_NAME 常量,
所以相同的代码块对于不同的应用程序会有不同的行为。
例如,
用$resource(‘/APP_NAME/tasks’)代替$resource(‘/equity/tasks’)
注意:以上仅为示例目的(截至目前),服务调用 URL 的更改将在服务器/Java 端重构后最终确定。
示例 2:
If (APP_NAME == ‘equity’){
//do ‘equity’ specific things
} else if (APP_NAME == ‘commodities’){
//do ‘commodities’ specific things
} else {
……………..
}
8.对所有 5 个实例使用相同的可配置通用代码。
As explained earlier
9.为扩展功能使用继承或类似机制。
如果我们需要除可用功能之外的其他功能,而不是复制和粘贴现有文件并向该文件添加代码,我们可以使用下面的 Angular 继承机制。
使用
angular.extend
Or
angular.copy
或类似的方法。
10.识别并将函数(方法)从实例特定代码移动到通用代码。
As explained earlier
11.遵循命名约定
为了更好的可维护性和一致性,请定义并遵循某些文件命名约定。
例如,
如果功能名称是“用户”,那么命名可以如下所示。
/modules
-----/user
----------user_controller.js
----------user_service.js
----------user_directive.js
----------user_view.html
----------user_test.js
跟随 user_controller.js 或 user_ctrl .js ,但是,永远不要同时做。
12.管理未来的需求
当我们生活在现实世界中时,变化和增强是生活的一部分。 一旦我们实施了上述提议,修改/增强功能将非常容易,而不会影响应用程序的其他部分。
无论如何,在向现有代码库添加任何功能之前,问自己这个非常重要的问题(此应用程序的开发人员)。
• 在哪里我要在公共代码或应用程序特定代码中添加此功能?
Enjoy and Have Fun :-)