前端开发工程师 - 05.产品前端架构 - 协作流程 & 接口设计 & 版本管理 & 技术选型 &开发实践

05.产品前端架构

第1章--协作流程

WEB系统

角色定义

协作流程

职责说明

第2章--接口设计

概述

接口规范

规范应用

本地开发

第3章--版本管理

见 Java开发工程师(Web方向) - 01.Java Web开发入门 - 第5章.Git

课堂交流区:

分布式版本控制(DVCS) 对比集中式版本控制系统(CVCS)

由于Git的持续火热, 对于DVCS与CVCS的争论和对比越来越多了, 似乎很多文章都倾向于这个观点:"Git这种DVCS 要比SVN这些CVCS要优越"  实际情况真的是这样吗? 现在请同学们各抒己见, 以各个方面来分析下CVCS与 DVCS之间的优缺点. 

答:

http://scmquest.com/centralized-vs-distributed-version-control-systems/
https://*.com/questions/111031/comparison-between-centralized-and-distributed-version-control-systems
https://www.youtube.com/watch?v=_yQlKEq-Ueg

为什么大部分情况下,git fetch 要优于直接使用 git pull?

不难发现, 课程中对于可能常用的 git pull 命令着墨不多.  而把大量的时间放在了 git fetch + git merge 的工作原理上。

同学可以总结下,为何使用git fetch来分步骤处理 要优于直接使用git pull?

答:

git pull的问题是它把过程的细节都隐藏了起来,以至于你不用去了解git中各种类型分支的区别和使用方法。当然,多数时候这是没问题的,但一旦代码有问题,你很难找到出错的地方。

将下载(fetch)和合并(merge)放到一个命令里的另外一个弊端是,你的本地工作目录在未经确认的情况下就会被远程分支更新。当然,除非你关闭所有的安全选项,否则git pull在你本地工作目录还不至于造成不可挽回的损失,但很多时候我们宁愿做的慢一些,也不愿意返工重来。

前面那些行显示出“git fetch”命令会将哪些文件下载到本地,这些文件一旦下载到本地之后,就可以在本地进行任意操作了。

git fetch命令执行完毕之后,还不会立即将下载的文件合并到你当前工作目录里,这就给你了一个选择下一步操作的机会,要是想将从远程分支下载的文件更新到你的工作目录里,你需要执行一个“合并(merge)”操作。

单独进行下载和合并是一个好的做法,你可以先看看下载的是什么,然后再决定是否和本地代码合并。而且分开来做,可以清晰的区别开本地分支和远程分支,方便选择使用。

版本管理的单元测验

本次得分为:19.00/19.00, 本次测试的提交时间为:2017-09-12
1单选(2分)

下列哪个工具不是版本控制系统

  • A.SVN
  • B.RCS
  • C.GIT
  • D.FTP2.00/2.00
2多选(3分)

以下哪些git命令可以切换branch

  • A.git reset <branchName>
  • B.git checkout –b <branchName>1.50/3.00
  • C.git branch  <branchName>
  • D.git checkout  <branchName>1.50/3.00
3多选(3分)

以下哪些git命令可以得到一个git仓库

  • A.git init1.50/3.00
  • B.git clone1.50/3.00
  • C.git checkout
  • D.git pull
4多选(3分)

以下哪些git config命令可以影响到本用户所有git操作

  • A.git config --global1.50/3.00
  • B.git config --local
  • C.git config --high
  • D.git config --system1.50/3.00
5判断(2分)

与svn类似,只要使用git commit可以提交你的代码与其它开发者共享

  • A.×2.00/2.00
  • B.√
6判断(2分)

git pull除了会直接获取远程历史,还会与你本地版本的历史进行合并

  • A.×
  • B.√2.00/2.00
7判断(2分)

git alias 可以用来设置git命令的别名

  • A.√
  • B.×2.00/2.00
8判断(2分)

git checkout 和 git reset 都可以使HEAD指向发生改变

  • A.×
  • B.√2.00/2.00

第4章--技术选型

模块化

The secret to building large apps is never build large apps. Break your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application. -- Justin Meyer

语言的模块支持:

java: import

c#: using

css: @import

javascript: none!

模块:

封装实现

暴露接口

声明依赖

例子:case:计算器

anti-pattern 反模块

math.js

function add(a, b) {
return a + b;
}
function sub(a, b) {
return a - b;
} calculator.js var action = "add";
function compute(a, b) {
switch (action) {
case "add": return add(a, b)
case "sub": return sub(a, b)
}
}

math.js:无封装性;接口结构不明显

calculator.js:没有依赖声明;使用全局变量action

Object Literal 字面量

math.js

var math = {
add: function add(a, b) {
return a + b;
},
sub: function sub(a, b) {
return a - b;
}
} calculator.js var calculator = {
action: 'add',
compute: function compute(a, b) {
switch (action) {
case "add": return math.add(a, b)
case "sub": return math.sub(a, b)
}
}
}

math.js:结构性好;但是没有访问控制

calculator.js:还是没有声明依赖,无法标明action为私有的,在外部也可以使用

IIFE (Immediately-invoked Function Expression) 自执行函数表达式--帮助创建局部作用域

calculator-1.js

var calculator = (function() {
var action = "add"
return {
compute: function (a, b) {
switch (action) {
case "add": return math.add(a, b)
case "sub": return math.sub(a, b)
}
}
}
})()

calculator.js:有了访问控制,但是还是没有依赖声明

calculator-2.js

var calculator = (function(m) {
var action = "add"
function compute (a, b) {
switch (action) {
case "add": return m.add(a, b)
case "sub": return m.sub(a, b)
}
}
}
return {
compute: compute
}
})(math)

calculator-2.js:显示了依赖声明,但是仍然污染了全局变量,而且需要手动进行依赖管理

Namespace 命名空间

math.js

namespace("math", [], function() {
function add(a, b) { return a + b }
function sub(a, b) { return a - b } return {
add: add,
sub: sub
}
}) calculator.js namespace("calculator", ["math"], function(m) {
var action = "add"
function compute(a, b) {
return m[action](a, b)
}
return {
compute: compute
}
})

进行了依赖声明,["math"]做了依赖注入

模块系统:

课堂交流区

市面上这么多种模块系统, 它们之间可以相互转换吗

AMD、COMMONJS、CMD、UMD、ES6 Module、IIFE... 这么多的模块写法, 一旦你选择了一种模块写法,那它在另一个系统中就可能无法运行了。 值得庆幸的是,现在越来越多的工具可以帮助我们将js从一种模块写法转换为另一种写法, 你能帮助同学们列举出一个或多个转换工具吗?

框架

技术选型的单元测验

返回

本次得分为:7.50/9.00, 本次测试的提交时间为:2017-09-12, 如果你认为本次测试成绩不理想,你可以选择再做一次。
1
多选(3分)

以下哪几种方式可以实现依赖分析, 而无需手工管理

得分/总分

  • A.

    ES6/module

    1.50/3.00
  • B.

    字面量对象

  • C.

    命名空间

  • D.

    Commonjs/module

2
判断(2分)

利用AMD规范的模块系统可以实现模块的异步载入

得分/总分

  • A.
    2.00/2.00
  • B.
    ×
3
判断(2分)

字符串模板可以同时用于服务器端和浏览器端

得分/总分

  • A.
    2.00/2.00
  • B.
    ×
4
判断(2分)

ES5以及将来的ES6,ES7都不会有语言级的模块化支持,所以我们才需要模块系统

得分/总分

  • A.
  • B.
    ×
    2.00/2.00

第5章--开发实践

系统设计

系统实现

测试发布

《产品前端架构》课堂交流区问题汇总

http://www.aichengxu.com/product/24596509.htm

上一篇:Web前端开发工程师课程大纲


下一篇:Daily Scrum - 11/25