05.產品前端架構

第1章--協做流程

WEB系統javascript

角色定義css

協做流程html

職責說明前端

第2章--接口設計

概述java

接口規範git

規範應用c#

本地開發瀏覽器

第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

前端開發工程師 - 05.產品前端架構 - 協做流程 & 接口設計 & 版本管理 & 技術選型 &開發實踐