2017秋高级软件工程学习总结-冯涛

学习心得

在这个秋季学期内，我有幸选到了孟宁老师的高级软件工程，通过一个学习的学习后，我感受颇深。在这门课的学期计划里，分为线上和线下两个课程。

线上部分除了真实课堂上老师讲授的软件工程思想外，还有一门老师自己录制的网易云课程《C编码实践》，虽然我在本科阶段已经学过C编码，但是这门课还是给我一种别样的体验。这门课并不是简单的教习C语言编程，而是通过一个个小实例将软件工程的架构思想融入到代码中，让参与者可以有更深的体验，比如后期的callback函数的设计方法，利与弊，线程安全的重要性，封装抽象的利弊等等，都给学习者一种别样的感受。在学习的过程中老师要求我们必须使用类linux的开发环境，我是相当认同的，因为开发者需要对这个开源系统有一定了解，未来在涉及后端开发时可以如鱼得水，另外，系统的开源特性也使得它十分灵活，而熟练终端也是开发者的必备技能之一。我认为这种学习方式非常的高效，也没有传统C课程那般无聊，因为它的重心根本就不是对语法的纠结，而是上升到了架构的层次。

线下课堂主要是深入理解Vue.js及其应用开发，老师通过几次线下实验带我们体验了vue.js的生态环境和核心实现，当然，对于有些没有基础的同学，学习起来可能十分困难，但是老师也提供了很多学习资料，这只能依赖于平时多多练习了。我本人曾在本科阶段使用过vue.js1.0版本开发过网站前端，当时的使用体验不是很好，但是通过老师的这次课程后，我发现主要还是由于自己对于vue.js的理解不够透彻，对最新标准的js不熟悉，老师的深入双向绑定实验使我对于vue.js的核心实现有了很深的体会，通过自己实现一个微缩版本的vue，我们对于vue的技术细节了然于心，以后在使用vue的过程中也会有不一样的体验。

以下是令我收获颇丰的几个实验内容：

Vue背后如何实现的双向数据绑定？

基于vue的技术栈范例，包括vuex、axios、RESTful API (express和express-rest)、mongoose和mongoDB

可重用模块的接口设计（callback函数）

函数的可重入性（reentrant）及线程安全浅析

子系统的可重用设计

代码背后的设计思想

收获颇丰代码部分(配有我自己做的注释)

C实验部分代码：

/*
* C实验关键代码，指针转型，搜寻节点
* Search a LinkTableNode from LinkTable
* int Conditon(tLinkTableNode * pNode,void * args);
*/
tLinkTableNode * SearchLinkTableNode(tLinkTable *pLinkTable, int Conditon(tLinkTableNode * pNode,void * args),void * args)
{
if(pLinkTable == NULL || Conditon == NULL)
{
return NULL;
}
tLinkTableNode * pNode = pLinkTable->pHead;
while(pNode != NULL)
{
if(Conditon(pNode,args) == SUCCESS)
{
return pNode;
}
pNode = pNode->pNext;
}
return NULL;
}

/*
* C实验关键代码，比较节点，配合上面函数使用
*/
int SearchCondition(tLinkTableNode * pLinkTableNode, void * args)
{
char * cmd = (char*) args;
tDataNode * pNode = (tDataNode *)pLinkTableNode;
if(strcmp(pNode->cmd, cmd) == 0)
{
return  SUCCESS;
}
return FAILURE;
}

Vue.js实验部分代码：

// Observer.js
// 在Observer原型上增加defineReactive方法
Observer.prototype.defineReactive = function (data, key, value) {
// dep.subs为当前元素的监听列表
var dep = new Dep();
Object.defineProperty(data, key, {
enumerable: true,
configurable: false,
get: function () {
console.log("intercept get:" + key);
// 挂载监听器
if (Dep.target) {
//JS的浏览器单线程特性，保证这个全局变量在同一时间内，只会有同一个监听器使用
dep.addSub(Dep.target);
}
return value;
},
set: function (newVal) {
console.log("intercept set:" + key);
if (newVal == value) {
return;
}
//利用闭包的特性,修改value,get取值时也会变化
//不能使用data[key]=newVal
//因为在set中继续调用set赋值，引起递归调用
value = newVal;
//监视新值,此处与下方的observer(value)并不冲突
observer(newVal);
//通知所有监听该数据的Watcher对象
dep.notify(newVal);
}
});

//递归处理
observer(value);
};

// Watcher.js
Watcher.prototype = {
get: function () {
Dep.target = this;
/*
this.getter是parseExpression根据exp生成的差不多这样的一个函数
function anonymous(scope) {
return  scope.b.c+1+scope.message;
}

个人理解: this.vm作为scope传入anonymous后执行的过程中会触发元素的get拦截从而将当前Dep.target绑定到元素的监听器列表中
而每次调用update中的Watcher的get()操作时都会重新逐级访问触发元素的get操作从而完成重新注册

这里的访问会逐级触发get，有两个作用
1.在Watcher初始化时调用get，会逐级将自己添加到对象的监听列表中，如要监听a.b.c，则a、a.b、a.b.c的监听列表中都会添加这个Watcher
这样做的目的是，在上级数据被修改时，也能接收到通知，如a.b = {c:1}时，原c元素被覆盖，不会发出变
9e1c
动通知，而b则会；
2.同样是上述情况，新添加的c元素，需要添加监听原来c元素的Watcher到自己的监听列表中，在这个Watcher接收到b过来的通知时，会去取a.b.c的值
与原值比较是否发生变动，
这个取的过程中，触发新的c的get，就会添加到c的监听队列
*/
var value = this.getter ? this.getter(this.vm) : '';
Dep.target = null;
return value;
},
update: function () {
var newVal = this.get();
if (this.value != newVal) {
this.cb && this.cb(newVal, this.value);
this.value = newVal;
}
}
};

// Compiler.js
// 视图层的直接关联处，此对象包含的方法能够将在watcher中监听到的数据层变化同步到对应的DOM节点中，真正的双向绑定实现处
var CompileUtil = {
textUpdater: function (node, newVal, oldVal) {
node.textContent = newVal;
},
handleEvent: function (node, vm, event, exp) {
var fn = parseExpression(exp).get;
node.addEventListener(event, function () {
if (fn) {
fn(vm);
}
});
},
valueUpdater: function (node, newVal, oldVal) {
node.value = newVal ? newVal : '';
}
};

实验报告作业链接

[ 第一次实验博客 ]

[ 第二次实验博客 ]

[ 第三次实验博客 ]

[ 第四次实验博客 ]

[ 第五次实验博客 ]

[ 第六次实验博客 ]

[ Github代码库]

总结部分

在学完整个秋高软件工程后，我个人感觉收获还是颇丰的，从上面我列举的每次实验报告和实验内容上基本可以看出。每次实验我都是非常认真完成的，并没有枯燥烦人的点，多是些有趣的挑战和体验，而具体的收获内容我已在上面的学习体验中讲述了，这里就不再赘述。

不过我个人认为还是有些许遗憾的，上学期由于个人原因，需要备考托福，花费了大量精力在英语上的我没有太多的时间去深究高软这门课，老实说高软这门课学到多少东西取决于自己，老师只是一个引路人，孟老师给的课程范围非常之光，每个细节都可以深究，而没有太多时间去也是我唯一的遗憾吧。

软设1班 SA17225078 冯涛