Angularjs学习笔记（一）软件设计的基本原则和MVC设计模式

最新推荐文章于 2020-04-19 22:41:16 发布

kun鲲

最新推荐文章于 2020-04-19 22:41:16 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

分类专栏： angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/shilipeng666/article/details/85057567

angular 专栏收录该内容

3 篇文章

订阅专栏

本文探讨软件设计的基本原则，如避免重复、KISS、YAGNI等，并深入讲解设计模式及其在AngularJS中的应用。AngularJS作为一款强大的前端框架，采用MVC设计模式，支持双向数据绑定、依赖注入及模块化设计，适用于数据驱动的SPA应用。

1、软件工程——软件设计原则

(1)避免重复原则（只要用得到Ctrl+c和Ctrl+v的就算）

(2)KISS原则，代码越简单越傻瓜越好（因为要注重团队意识）

(3)YAGNI原则，不创建不需要的代码（严格遵守客户需要，不创建不必要的功能）

(4)开闭原则，不让别人修改自己的代码，但可以扩展它

(5)单一责任原则（例如在Bootstrap中每一层div包含不同功能的class）

(6)高聚合低耦合原则，组件内部的逻辑关系越紧密越好，组件和组件之间关系越少越好。（angularjs的模块化设计就是遵循此原则）

(7)最少知识法则/迪米特法则，例如司机不必知道如何造汽车。（在一个模块或函数中只有本身需要的东西）

2、软件工程——设计模式

象棋（马走日象走田） => 基本套路（双炮枪/马后炮）

|| ||

js（对象/原型/闭包） => 设计模式 => 设计框架

设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。

共23+1种设计模式

+1的那种设计模式：MVC模式（现在特别常见的设计模式，也是angularjs的设计模式）

3、MVC设计模式

MVC模式根据逻辑关系，把前端项目的代码分为三个层次：

（1）Model：模型，就是业务数据，前端项目中就是JS变量；

（2）View：视图，就是业务数据在用户面前的展现，前端项目中就是HTML

（3）Controller：控制器，负责业务数据的增删改查，前端项目中就是function

4、AngularJS概述

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。所有的操作思路都以“业务数据”为关注点，彻底颠覆了传统的DOM操作。适用于以数据的CRUD（增删改查）操作为主的SPA应用。

5、面试题：AngularJS的四大特性

(1)MVC设计模式

(2)双向数据绑定

(3)依赖注入

(4)模块化设计例如帮助手册：

注：i18n: internationalization 国际化，Web项目若可以实现见中国人呈现汉语，见英国人呈现英语。

6、如何使用angularjs（angularjs简写为an）

引入angular.js文件即可

7、Angular表达式（前提ngApp启动）

语法：{{ 表达式 }}

含义：Angular会计算表达式的值，输出在当前位置。

8、Angular表达式可以执行哪些运算

算数运算？ + - * / % 都可以，唯独不能自增/自减
比较运算？ > < 都可以
逻辑运算？ && || ! 都可以
三目运算？ ?: 可以
调用字符串对象的成员方法？可以
使用直接量表示法创建对象？可以
可以使用数组吗？可以
使用new关键字创建对象？不可以！不允许使用new和var关键字
调用ES全局函数？不可以！

9、ng模块提供的指令(directive)

(1)ngApp：启动一个Angular应用——只有Angular应用中的表达式才会被Angular执行。

用法： <ANY ng-app>

注意：angular应用的范围仅限于声明它的元素范围；且默认情况下一个HTML中不允许声明多个ngApp元素。

(2)ngInit：声明模型变量(Model)——不是局部变量（违背MVC设计原则，尽量不用）

用法： <ANY ng-init="变量名=值; 变量名=值;">

注意：ngInit声明变量不能声明var关键字！声明的变量可以在Angular表达式中进行输出

(3)ngBind: 计算一个表达式的值，输出为当前元素的innerHTML

用法： <ANY ng-bind="表达式"></ANY>

     例：<div ng-init="age=20;"></div>
         <p ng-bind="age+5"></p>
         <p class=”ng-bind:age*5;”></p>

说明：ngBind指令作用与{{}}表达式基本类似，只是可以防止用户在一瞬间看到{{}}。ngBind指令计算完成表达式的值，会替换当前元素的innerHTML.

(4)ngController：调用Controller创建函数，实例化一个控制器对象，指定其作用范围

用法： <ANY ng-controller="控制器名">...</ANY>

(5)ngRepeat：用于在View实现循环输出

用法： <ANY ng-repeat="变量名 in 集合对象"></ANY>

含义：对于集合对象中的每一个元素，依次赋值给指定的变量名，对每次赋值都输出一遍当前元素。

(6)ngIf：用于在View实现判断输出，为false就不输出了

用法： <ANY ng-if="布尔表达式">

含义：若布尔表达式为true则输出当前元素；否则当前元素在DOM树不存在

<div ng-if=”isIPO”>仅为真时可见</div>

10、AngularJS中声明模型数据的方式

(1)使用ngInit指令来声明Model数据

说明：此方式将Model声明在View中，严重违反了MVC模型的分工，不推荐使用

(2)使用Controller对象创建Model数据——符合MVC模型分工

新版本的AngularJS中创建Model的语法：

ngApp=>Module=>Controller=>Model

声明一个AngularJS的应用程序： ngApp
创建一个自定义的模块： angular.module('模块名', [依赖列表])
在应用中注册自定义模块： ng-app="模块名"
在模块中声明Controller函数
在View中指定Controller对象的作用范围——调用控制器创建函数
在Controller中声明Model数据

使用Controller创建Model数据：

创建一个新的HTML页面，声明一个ngApp，创建一个模块，其中声明一个控制器，创建一个Model数据，在View中显示这些数据：

<!DOCTYPE html>

<html lang="en" ng-app="myModule5">
<head>
  <meta charset="UTF-8">
  
  <link rel="stylesheet" href="css/bootstrap.css">
  <title></title>
</head>
<body>
<div class="container">
  <h1>练习：使用Controller创建Model，在View中加以显示</h1>
  
  <div ng-controller="myCtrl5">
    
    <p>{{empCount}}</p>
  </div>
  </div>
    
    <script src="js/angular.js"></script>
    <script>
      // 用angular.module定义一个组件后边是所依赖的模块
        angular.module('myModule5', ['ng']).
        controller('myCtrl5', function($scope){// 用controller定义一个控制器，控制器中函数是对业务数据的函数操作
            //在Controller中声明Model数据
            $scope.empCount = 1000;
        });
    </script>
</body>
</html>

11、AngularJS在项目中的优缺点是什么？