架构心得day02

最新推荐文章于 2024-10-15 19:54:06 发布

z朱五斤n

最新推荐文章于 2024-10-15 19:54:06 发布

阅读量169

点赞数 3

分类专栏：架构心得文章标签：架构

本文链接：https://blog.csdn.net/zzn_caomao/article/details/134329683

版权

架构心得专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了Java中的聚合工程，如何使用Maven进行项目管理，以及AngularJS的MVC模式、双向绑定、依赖注入和模块化设计。重点讲解了如何通过Maven实现版本统一管理和依赖传递，以及AngularJS如何实践高内聚低耦合原则。

摘要由CSDN通过智能技术生成

一，聚合工程

概念：

Java中，聚合工程是指将多个项目或模块组合到一个父项目中，以便更好的管理和构建这些项目。Java中构建聚合工程通常使用Maven构建工具。

目的：

将多个聚合在一起的项目或者模块实现统一版本管理、依赖管理和构建流程。通过聚合工程，可以将多个子项目在构建过程中进行统一管理，减少了让人头疼的jar包版本冲突等问题，提高开发效率和代码复用性。

典型示例：

Maven的多模块项目。在多模块项目中，有一个父类项目，包含多个子模块。因此父类项目的打包方式是pom（project object model）。包含的每个子模块代表一个独立的模块或者项目，可以有自己的源代码、资源文件和依赖项。

涉及标签：

父类的pom文件中<modules>，<modele>元素定义聚合工程中父类包含的子模块。<modules>包含<module>。这两个标签元素中是子模块的相对路径。主要目的使maven可以自动构建和管理这些子模块。例如版本统一管理，利用继承思想实现maven依赖传递。

好处：

更好的模块化和代码组织方式；

版本和依赖实现统一管理，简化构建；

通过继承实现的依赖传递，使子模块之间减少了代码冗余，提高了代码复用和降低了模块耦合；

补充：

pom：maven以项目为中心设计。pom是maven对一个单一项目的描述，pom是maven的核心，是pom实现并驱动这种以模型来描述的构建方式（百度百科）。说白了，pom文件就是一种声明和约束。聚合工程中父类项目打包为pom，一是声明此项目是pom，二是声明后可以在此项目中统一管理实现约束，三是子类pom文件可以继承父类pom进而获得相关依赖的声明。

实践小demo：

参考此位大神博主：【精选】maven聚合工程(深度剖析)_一宿君的博客-CSDN博客

二，技术

前端：

AngularJS:

四大特性：MVC模式、双向绑定、依赖注入、模块化设计

MVC模式：

M，指model，数据，angularjs中指变量($scope.xx);

V，指View，视图，数据在页面中的呈现，Html+指令实现；

C，指Controller，操作数据，前端是指function函数，数据的操作增删改查；

注意：MVC模式是一种程序设计模式，不单是angularJS的专属应用，在Java中也有应用，就是我们最熟悉常见的SpringMVC应用。

MVC指MVC模式的某种框架，它强制性地使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP + servlet + javabean的模式。（百度百科）

来源百度百科

双向绑定：

View和Model之间进行绑定，即数据一发生变化，视图也跟着变化；视图发生变化，数据也发生变化，双向的数据绑定实现了视图和model之间的自动化；

这样使我们对DOM操作次数减少，并测试方便化；

DOM：定义了对HTML和XML元素的访问标准。可以简单的理解为对HTML和XML页面的操作。

依赖注入：Dependency Injection

简称DI，指程序运行期间，如需要另一个对象协助，则无需在代码中创建此对象，而是依赖于外部创建然后注入我们使用的程序，即衣来伸手饭来张口，直接要，至于谁创建，在spring中是IOC容器创建。在angularJS中由angularJS创建。

模块化设计：

高内聚低耦合法则

高内聚：功能角度度量模块内的联系，一个好的内聚模块是做好一件事，然后这个模块内的所有功能都是为了做好这件事紧密合作；

低耦合：项目中各模块之间相互联系的一种度量，我们要做的就是尽量减少项目中模块之间的联系性，增强独立性。

所以，一个项目中，程序结构中的模块内聚程度越高，模块间耦合程度就越低。

angularJS中应用高内聚低耦合的法则提供了两种模块方式：

官方提供模块：ng，ngRote(路由)，ngAnimate（动画）

用户自定义模块：angular.module('模块名',[ ])

示例代码：

工程准备：

1，在编译软件或者电脑随便盘下创建一个html文档；

2，引入angular.min.js文件，放在和html文档一个层级下；

3，编写完代码后保存，然后再点开对应页面即可查看结果；

代码编写：

表达式demo：

<html>
<head>
 <title>angularJS-demo01:表达式</title>
 <script src="angular.min.js" ></script>
</head>

<body ng-app>

 {{8838+8849}}

</body>
</html>

angularJS的表达式是{{}}表示；

ng-app：代表了根元素标签，和html文件的根标签<html>一个性质

双向绑定demo：

<html>
<head>
 <title>angularJS-demo02:双向绑定</title>
 <script src="angular.min.js" ></script>
</head>

<body ng-app>

双向绑定输入变量：<input ng-model="variable">

输入的变量是：{{variable}}

</body>
</html>

双向绑定是视图层和数据层的数据和视图展示进行绑定，这里只是进行一个简单html示例；

ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上，而表达式可以实时地输出变量。

上述变量还可以赋予初始值，对应指令：ng-init，相关代码在ng-app后跟ng-init=“赋值的变量名”=“赋值”即可；

控制器demo：

<html>
<head>
 <title>angularJS-demo04:控制器controller</title>
 <script src="angular.min.js" ></script>
 
 <script>
	//使用标签angular.module定义一个自定义模块app
	//两个参数：一个是模块名称，一个是数组
     var app = angular.module('myapp',[]);
	
	//定义控制器
	//$scope:视图层和控制层的通道，是它让是视图层和控制层产生直接联系
	app.controller('myController',function($scope){
	
		$scope.add=function(){
		
			return parseInt($scope.x)+parseInt($scope.y);
		}
	});
 </script>
 
</head>

<body ng-app="myapp" ng-controller="myController">
	x:<input ng-model='x'>
	y:<input ng-model='y'>
	运算结果：{{add()}}
</body>
</html>

var app是用户自定义模块，angular.module()上述已有描述；

app是自定义模块变量名称，使用其可创建控制器；

app.controller(x,y):创建控制器，x是第一个参数，代表控制器名称；y是第二个参数，示例中传入的是function函数；

$scope:是视图层和控制层的数据传输通道，负责把控制器中的方法数据传入到body中ng-model绑定的变量上，同样ng-model绑定的变量的赋值也能传入到控制器的方法中；

这里运算结果可改为事件指令，例如最常见的点击指令：ng-click，代码大家自行发挥；

循环demo：

<html>
<head>
 <title>angularJS-demo06:循环对象数组</title>
 <script src="angular.min.js" ></script>
 
 <script>
	//使用标签angular.module定义一个自定义模块app
	//两个参数：一个是模块名称，一个是数组
     var app = angular.module('myapp',[]);
	
	//定义控制器
	//$scope:视图层和控制层的通道，是它让是视图层和控制层产生直接联系
	app.controller('myController',function($scope){
	
		$scope.list=[{name:"zhangsan",age:18},
					{name:"lisi",age:19},
					{name:"wangwu",age:20},
					{name:"haha",age:99}];//定义对象数组
	});
 </script>
 
</head>

<body ng-app="myapp" ng-controller="myController">
  <table border=1px>
	<tr>
		<td>姓名</td>
		<td>年龄</td>
	</tr>
	<tr ng-repeat="data in list">
		<td>{{data.name}}</td>
		<td>{{data.age}}</td>
	</tr>
  </table>
</table>
</body>
</html>

ng-repeat:angularJS的循环指令；

内置服务demo：

标签$http:现实开发中我们页面展示取决于从后端服务获取的对应数据，$http就是从后端服务获取对应数据的关键便签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>angularJS-demo：内置服务$http</title>
    <script src="angular.min.js"></script>
    <script>
    // 自定义模块
      var app = angular.module('myApp',[]);
    // 定义控制器
      app.controller('myController',function ($scope, $http) {
        // ajax写法
        $scope.findAll=function () {
          $http.get('data.json').success(
                  function (response) {
                    $scope.list=response;
                  }
          );
        }
      })
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
<table border="1px">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr ng-repeat="d in list">
        <td>{{d.name}}</td>
        <td>{{d.age}}</td>
    </tr>
</table>
</body>
</html>

data.json是模拟后端服务数据的文件，里面存的是对应的json数据，注意，这里的json数据必须是严格的json格式；

为了模拟获取后端服务数据，内置服务代码在编译器中编译，且使用tomcat服务器启动；