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

第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, 如果你认为本次测试成绩不理想，你可以选择再做一次。

第5章--开发实践

系统设计

系统实现

测试发布

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

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

前端开发工程师