前端开发工程师 - 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://stackoverflow.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