高级软件工程学习总结

SYN_1 2022-07-10 21:29:06

课程的收获：

git merge和git merge -no-ff的区别

git merge –no-ff 可以保存你之前的分支历史。能够更好的查看 merge历史，以及branch 状态。

git merge 则不会显示 feature，只保留单条分支记录。

MVC架构和MVVM架构

MVC

View 传送指令到 Controller ；
Controller 完成业务逻辑后，要求 Model 改变状态；
Model 将新的数据发送到 View，用户得到反馈。

MVC流程一共有两种，在日常开发中都会使用到。

一种是通过 View 接受指令，传递给 Controller，然后对模型进行修改或者查找底层数据，最后把改动渲染在视图上。

另一种是通过controller接受指令，传给Controller。

缺点：

视图与控制器间过于紧密连接，视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。

视图对模型数据的低效率访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。
MVVM

MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。

在前端页面中，把Model用纯JavaScript对象表示，View 负责显示，两者做到了最大限度的分离。把Model和 View关联起来的就是 ViewModel。ViewModel负责把Model的数据同步到 View显示出来，还负责把 View的修改同步回Model。

视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

性能方面：MVC是通过大量手动操作DOM元素来改变view的显示，手动操作更灵活，但会带来浏览器页面渲染性能降低，加载速度变慢；而MVVM实现了view与model的自动同步，具有双向绑定技术，故更加智能。

随着前端页面越来越复杂，用户对于交互性要求也越来越高，jQuery是远远不够的，于是MVVM被引入到Javascript前端开发中。前端有了MVVM的设计思想后，终于实现了前后端工程及数据的彻底分离

软件架构的描述方法：

分解视图：呈现为较为明晰的分解结构（ breakdown structure）特点，子系统，包，类，软件模块，软件单元

依赖视图：软件模块之间的依赖关系，进一步根据依赖关系确定开发和测试软件模块的先后次序

泛化视图：软件模块之间的一般化或具体化的关系，典型的例子就是面向对象分析和设计方法中类之间的继承关系。

执行视图：系统运行时的时序结构特点，比如流程图、时序图等，执行视图中的每一个执行实体，一般称为组件（Component），都是不同于其他组件的执行实体。执行实体可以最终分解到软件的基本元素和软件的基本结构，因而与软件代码具有比较直接的映射关系。在设计与实现过程中，我们一般将执行视图转换为伪代码之后，再进一步转换为实现代码

实现视图：实现视图是描述软件架构与源文件之间的映射关系。通过目录和源文件的命名来对应软件架构中的包、类等静态结构单元

部署视图：部署视图是将执行实体和计算机资源建立映射关系。这里的执行实体的粒度要与所部署的计算机资源相匹配，比如以进程作为执行实体那么对应的计算机资源就是主机，部署视图有助于设计人员分析一个设计的质量属性，比如软件处理网络高并发的能力、软件对处理器的计算需求等。

v模型

我们发现单元测试、集成测试和系统测试是为了在不同层面验证设计，而交付测试则是确认需求是否得到满足。也就是瀑布模型中前后两端的过程活动具有内在的紧密联系，如果将模块化设计的思想拿到软件开发过程活动的组织中来，可以发现通过将瀑布模型前后两端的过程活动结合起来，可以提高过程活动的内聚度，从而改善软件开发效率。这就是V模型。

通过V模型给我们提供一个工作思路，就是在开始一项工作之前，先去思考验证该工作完成的方法。V模型是开始一个特定过程活动和评估该特定过程的过程活动成对出现，从而便于软件开发过程的组织和管理。

闭包

函数和函数内部能够访问到的变量（也叫环境）的总和，就是一个闭包

聚焦到某一关键问题：Vue.js框架的MVVM架构

在前端页面中，把Model用纯 JavaScript对象表示，View 负责显示，两者做到了最大限度的分离。把Model和 View关联起来的就是 ViewModel。ViewModel负责把Model的数据同步到 View显示出来，还负责把 View的修改同步回Model。

我们的Model是一个JavaScript对象，负责显示的是DOM节点可以用{{ message }}来引用Model的属性，也就是View了。其中v-on:click="reverseMessage"用来跟踪 DOM的点击事件调用reverseMessage方法.

我们在创建Vue对象的时候将View的 id="app"与Model（JavaScript对象定义的data）绑定起来，这样'Hello Vue!'就会自动更新到View DOM元素中。View DOM元素button上的事件click绑定Vue对象的方法reverseMessage，这样点击button按钮就能触发reverseMessage， reverseMessage方法只是修改了Model 中JavaScript对象定义的message，而页面却能神奇地自动更新message。就是模型数据绑定和DOM事件监听。其中的关键代码和注释如下：

//保存观察者对象Watcher，通知所用观察者 
var Dep = function(){
    this.subs = {};
};

// 注册 观察者
Dep.prototype.addSub = function(target){
    if(!this.subs[target.uid]){
        this.subs[target.uid]=target;
    }
};
// 发送更新通知给观察者
Dep.prototype.notify = function(newVal){
    for(var uid in this.subs){
        this.subs[uid].update(newVal);
    }
};

// 将要观察的对象 = 操作 转换为 getter/setter， 此时 = 操作并没有发生，只是对父类重载了 get set
Observer.prototype.defineReactive = function(data, key, value){
    //被观察者
    var dep = new Dep();
    Object.defineProperty(data, key ,{
        enumerable:true, configurable:false, 
        get:function(){
            if(Dep.target){//添加观察者 
                dep.addSub(Dep.target);
            }
            return value;
        }，
        //模型中的数据对象被修改，触发setter方法，其中发送更新通知给观察者
        set:function(newVal){
            if(newVal==value) return;
            //data[key] = newVal;//死循环!赋值还会调用set方法
            value = newVal;//为什么可以这样修改?闭包依赖的外部变量 
            //遍历newVal
            this.transform(newVal);
            //发送更新通知给观察者
            dep.notify(newVal);
        } 
     });
     this.transform(value);     
}

Observer.prototype.transform = function(data){ 
    for(var key in data){
        this.defineReactive(data,key,data[key]); 
    }
};

//编译视图模板创建Watcher对象时，观察者模式中的观察者（Watcher接近于view）
var Watcher = function(exp,vm,cb){
    
    this.getter = parseExpression(exp).get;
    this.upadte();
}

Watcher.prototype = {
    get:function(){
        var value = this.getter?this.getter(this.vm);
        return value;
    },
    //观察者更新视图
    update:function(){
        var newVal = this.get();
        if(this.value!=newVal){
            this.cb&&this.cb(newVal,this.value);
            this.value = newVal;
        }
    }
}

参考资料：

代码中的软件工程

软件工程: 《代码中的软件工程》一书的配套ppt和源代码 (gitee.com)

学号：523

...全文