AngularJS_01之基础概述设计原则及MVC设计模式

Posted 2020-08-20 Jupiter258

1、AngularJS：
开源的JS框架，用来开发单一页面应用，以及数据操作频繁的场景；
2、设计原则：
①YAGNI原则：You Aren‘t Gonna Need It!
不要写不需要的代码！
②KISS原则：Keep It Simple and Stupid!
代码保持简洁和具有表现力！
——语义化标记、注释、变量或者方法的命名、减少嵌套；
③DRY原则：Don‘t Repeat Yourself!
模块的封装！
——提高代码复用率，降低测试难度方便后期的迭代和维护；
④high cohesion low coupling:
高内聚低耦合
内聚：一个组件内部不同组成部分之间的关系；
耦合：不同组件之间的关系；
⑤SRP原则：Single Responsibility Principle！
单一责任原则！
⑥OCP原则：Open Closed Principle!
开闭原则！
⑦LCP原则：
最少知识原则！
3、设计模式：
①创建型模式——五种：
工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式；
②结构型模式——七种：
适配器模式、装饰器模式、代理模式、外观模式、、桥接模式、组合模式、享元模式；
③行为模式——十一种：
策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式；
4、MVC设计模式——组合型设计模式：
①M——model——模型数据；V——view——html视图；C——controller——控制器；
view接收用户操作，然后通知controller（控制器）中对应的方法，对model（数据）进行操作，反过来更新view（视图）；
5、AngularJS：
①开源的基于MVC的JS框架，用于以数据操作为主的SPA应用，其四大特征方便数据处理以及模块方便实现SPA应用；
②四大特征：
a、采用MVC的设计模式：
符合当前互联网的发展趋势——职责的细分；
模块化开发——提高代码复用率，降低测试难度，维护方便；
b、双向数据绑定：
AngularJS区别于其他框架的重要特性；
c、依赖注入：
通过注入某些服务或对象，直接调用；
d、模块化设计：
AngularJS框架本身就符合模块化设计，使用框架结合模块、控制器、服务等来实现模块化开发；
③使用：
基础语法：
{{expression}}：可执行括号中的表达式，将结果输出到innerHTML中；
ng-app：自动载入并启动ng应用；
ng-init：初始化数据（变量、对象、数组...）；
* ngApp——用来启动ng应用，同时指定angular应用的作用范围，出了范围ng表达式指令无法被执行，且只允许调用ngApp指令一次；
ng常用指令：
ngApp、ngInit、ng-Bind、ngRepeat（让HTML支持循环）、ngIf（让HTML支持选择/判断）、ngShow（true为显示）、ngHide（true为隐藏）；
4、ng的MVC使用：
①声明模块：
var app=angular.module(‘myApp‘,[‘ng‘]);
②注册模块：
ngApp指令：ng-app="myApp";
③声明控制器：
app.controller(‘myCtrl‘,function(){});
④使用控制器：
ngController指令：ng-controller="myCtrl";
⑤在控制器的回调函数中，注入$scope对象，指定模型数据：$scope.变量=值;
⑥显示：
{{}}——ng指令：
$scope作用域控制对象，将模型数据和视图建立联系；
初始化数据——ngInit：
$scope对象；
⑦指令：
<ANY ng-XX=‘‘>
<ANY ng-init="变量名=值；变量名=值..."></ANY>——允许声明变量，双向绑定；
<ANY ng-bind="表达式"></ANY>——将指定的表达式的值输出为当前元素的innerHTML；
<ANY ng-repeat="临时变量名 in 对象/数组"></ANY>——为HTML添加循环功能；
<ANY ng-repeat="（下标变量名，值变量名） in 对象/数组"></ANY>——为HTML添加循环功能；
<ANY ng-if="表达式"></ANY>——为HTML添加选择功能；
ng-click、ng-dbclick、ng-focus、ng-blur；
⑧注意：
定义模型数据，必须注入$scope；
ng-controller所在的标签内部的作用范围，才能识别控制器所声明的变量、方法；