主頁 > 軟體設計 > 作為一名優秀的前端需要了解哪幾種設計模式？

作為一名優秀的前端需要了解哪幾種設計模式？

2021-08-20 08:40:09 軟體設計

設計模式概覽

設計模式是對軟體設計開發程序中反復出現的某類問題的通用解決方案，設計模式更多的是指導思想和方法論，而不是現成的代碼，當然每種設計模式都有每種語言中的具體實作方式，學習設計模式更多的是理解各種模式的內在思想和解決的問題，畢竟這是前人無數經驗總結成的最佳實踐，而代碼實作則是對加深理解的輔助，

設計模式可以分為三大類：

  1. 結構型模式(Structural Patterns): 通過識別系統中組件間的簡單關系來簡化系統的設計，
  2. 創建型模式(Creational Patterns): 處理物件的創建，根據實際情況使用合適的方式創建物件，常規的物件創建方式可能會導致設計上的問題，或增加設計的復雜度，創建型模式通過以某種方式控制物件的創建來解決問題，
  3. 行為型模式(Behavioral Patterns):用于識別物件之間常見的互動模式并加以實作，如此，增加了這些互動的靈活性，

23種設計模式概覽

上述中一共有23種設計模式，但我們作為前端開發人員，需要了解的大概有以下10種，

前端需要了解的設計模式(10種)

創建型模式

故名思意，這些模式都是用來創建實體物件的，

1. 工廠模式

我們從簡單的開始， 簡單工廠模式是由一個工廠物件決定創建出哪一種產品類的實體，

工廠模式

上圖為例，我們構造一個簡單的汽車工廠來生產汽車：

// 汽車建構式
function SuzukiCar(color) {
  this.color = color;
  this.brand = 'Suzuki';
}

// 汽車建構式
function HondaCar(color) {
  this.color = color;
  this.brand = 'Honda';
}

// 汽車建構式
function BMWCar(color) {
  this.color = color;
  this.brand = 'BMW';
}

// 汽車品牌列舉
const BRANDS = {
  suzuki: 1,
  honda: 2,
  bmw: 3
}

/**
 * 汽車工廠
 */
function CarFactory() {
  this.create = (brand, color)=> {
    switch (brand) {
      case BRANDS.suzuki:
        return new SuzukiCar(color);
      case BRANDS.honda:
        return new HondaCar(color);
      case BRANDS.bmw:
        return new BMWCar(color);
      default:
        break;
    }
  }
}

使用一下我們的工廠：

const carFactory = new CarFactory();
const cars = [];

cars.push(carFactory.create(BRANDS.suzuki, 'brown'));
cars.push(carFactory.create(BRANDS.honda, 'grey'));
cars.push(carFactory.create(BRANDS.bmw, 'red'));

function sayHello() {
  console.log(`Hello, I am a ${this.color} ${this.brand} car`);
}

for (const car of cars) {
  sayHello.call(car);
}

輸出結果：

Hello, I am a brown Suzuki car
Hello, I am a grey Honda car
Hello, I am a red BMW car

使用工廠模式之后，不再需要重復引入一個個建構式，只需要引入工廠物件就可以方便的創建各類物件，

2. 單例模式

首先我們需要理解什么是單例？

單：指的是一個，
例：指的是創建的實體，
單例：指的是創建的總是同一個實體，也就是使用類創建的實體始終是相同的，

先看下面的一段代碼：

class Person{
  constructor(){}
}

let p1 = new Person();
let p2 = new Person();

console.log(p1===p2) //false

上面這段代碼，定義了一個Person類，通過這個類創建了兩個實體，我們可以看到最終這兩個實體是不相等的，也就是說，通過同一個類得到的實體不是同一個(這本就是理所應當)，但是如果我們想始終得到的是同一個實體，那么這就是單例模式，那么下面就該介紹如何實作單例模式了：

想要實作單例模式，我們需要注意兩點：

  1. 需要使用return，使用new的時候如果沒有手動設定return,那么會默認回傳this，但是，我們這里要使得每次回傳的實體相同，也就是需要手動控制創建的物件，因此這里需要使用return，
  2. 我們需要每次return的是同一個物件，也就是說實際上在第一次實體的時候，需要把這個實體保存起來，再下一個實體的時候，直接return這個保存的實體，因此，這里需要用到閉包了，
const Person = (function(){
  let instance = null;
  return class{
      constructor(){
        if(!instance){
         //第一次創建實體，那么需要把實體保存
          instance = this;
        }else{
          return instance;
      }
  }
  }
})()
let p3 = new Person();
let p4 = new Person();
console.log(p3===p4)  //true

從上面的代碼中，我們可以看到在閉包中，使用instance變數來保存創建的實體，每次回傳的都是第一次創建的實體，這樣的話就實作了無論創建多少次，創建的都是同一個實體，這就是單例模式，

3. 原型模式

通俗點講就是創建一個共享的原型，并通過拷貝這些原型創建新的物件，

在我看來，其實原型模式就是指定新創建物件的模型,更通俗一點來說就是我想要新創建的物件的原型是我指定的物件，

最簡單的原型模式的實作就是通過Object.create()，Object.create()，會使用現有的物件來提供新創建的物件的__proto__，例如下方代碼：

let person = {
  name:'hello',
  age:24
}

let anotherPerson = Object.create(person);
console.log(anotherPerson.__proto__)  //{name: "hello", age: 24}

anotherPerson.name = 'world';  //可以修改屬性
anotherPerson.job = 'teacher';

另外，如果我們想要自己實作原型模式，而不是使用封裝好的Object.create()函式，那么可以使用原型繼承來實作：

function F(){}

F.prototype.g = function(){}
 
//G類繼承F類
 
function G(){
  F.call(this);
}
 
//原型繼承
function Fn(){};
Fn.prototype = F.prototype;
G.prototype = new Fn();
 
G.prototype.constructor = G;

原型模式就是創建一個指定原型的物件，如果我們需要重復創建某個物件，那么就可以使用原型模式來實作，

結構型模式

1. 裝飾器模式

裝飾器模式：為物件添加新功能，不改變其原有的結構和功能，

配接器模式是原有的不能用了，要重新封裝介面，裝飾器模式是原有的還能用，但是需要新增一些東西來完善這個功能，

比如手機殼，手機本身的功能不受影響，手機殼就是手機的裝飾器模式，

裝飾器模式

class Circle {
    draw() {
        console.log('畫一個圓形');
    }
}

class Decorator {
    constructor(circle) {
        this.circle = circle;
    }
    draw() {
        this.circle.draw();
        this.setRedBorder(circle);
    }
    setRedBorder(circle) {
        console.log('設定紅色邊框')
    }
}

// 測驗
let circle = new Circle();

let client = new Decorator(circle);
client.draw();

輸出結果：

畫一個圓形
設定紅色邊框

如今都2021了，es7也應用廣泛，我們在es7中這么寫（ES7裝飾器）：

1、安裝 yarn add babel-plugin-transform-decorators-legacy

2、新建.babelrc檔案，進行下面的配置

{
    "presets": ["es2015", "latest"],
    "plugins": ["transform-decorators-legacy"]
}

3、上代碼

@testDec
class Demo {
    // ...
}

function testDec(target) {
    target.isDec = true
}

console.log(Demo.isDec)

//輸出true

列印出來了true，說明@testDec這個裝飾器已經成功了，函式是個裝飾器，用@testDec給Demo裝飾了一遍，這個target其實就是class Demo，然后給她加一個isDec，

拆解后就是下面的內容：

// 裝飾器原理
@decorator
class A {}

// 等同于
class A {}
A = decorator(A) || A;

裝飾器引數的形式 

@testDec(false)

class Demo {
}

function testDec(isDec) {
    return function (target) {
        target.isDec = isDec
    }
}

console.log(Demo.isDec);

驗證是否是一個真正的裝飾器模式需要驗證以下幾點：

1.將現有對戲那個和裝飾器進行分離，兩者獨立存在
2.符合開放封閉原則

2. 配接器模式

配接器模式：舊介面格式和使用者不兼容，中間加一個適配轉換介面，

比如國外的插座跟國內的插座不一樣，我們需要買個轉換器去兼容，

配接器模式

上代碼：

class Adaptee {
    specificRequest() {
        return '德國標準的插頭';
    }
}

class Target {
    constructor() {
        this.adaptee = new Adaptee();
    }
    request() {
        let info = this.adaptee.specificRequest();
        return `${info} -> 轉換器 -> 中國標準的插頭`
    }
}

// 測驗
let client = new Target();
client.request();

結果：

德國標準的插頭 -> 轉換器 -> 中國標準的插頭

場景上可封裝舊介面：

// 自己封裝的ajax，使用方式如下：
ajax({
    url: '/getData',
    type: 'Post',
    dataType: 'json',
    data: {
        id: '123'
    }
}).done(function(){

})
// 但因為歷史原因，代碼中全都是：
// $.ajax({...})

這個時候需要一個配接器：

// 做一層配接器
var $ = {
    ajax: function (options) {
        return ajax(options)
    }
}

3. 代理模式

代理模式：使用者無權訪問目標物件，中間加代理，通過代理做授權和控制，

明星經紀人：比如有個演出，要請明星，要先聯系經紀人，

或者理解為：為一個物件提供一個代用品或者占位符，以便控制對它的訪問，例如圖片懶加載、中介等，代理模式

/**
 * pre:代理模式
 * 小明追求A，B是A的好朋友,小明比不知道A什么時候心情好，不好意思直接將花交給A，
 * 于是小明將花交給B，再由B交給A.
 */

// 花的類 
class Flower{
    constructor(name){
        this.name = name 
    }
}

// 小明擁有sendFlower的方法
let Xioaming = {
    sendFlower(target){
        var flower = new Flower("玫瑰花")
        target.receive(flower)
    }
}
// B物件中擁有接受花的方法，同時接收到花之后，監聽A的心情，并且傳入A心情好的時候函式
let B = {
    receive(flower){
        this.flower =flower
        A.listenMood(()=>{
            A.receive(this.flower)
        })
    }

}
// A接收到花之后輸出花的名字
let A = {
    receive(flower){
        console.log(`A收到了${flower.name} `)
        // A收到了玫瑰花 
    },
    listenMood(func){
        setTimeout(func,1000)
    }
}
Xioaming.sendFlower(B)

虛擬代理用于圖片的預加載

圖片很大，頁面加載時會空白，體驗不好，所以我們需要個占位符，來短暫替代這個圖片，等圖片加載好了放上去，

let myImage = (function(){
    let img = new Image
    document.body.appendChild(img)
    return {
        setSrc:(src)=>{
            img.src = src
        }
    }
})()
let imgProxy =(function(){
    let imgProxy = new Image
    // 這個地方我使用了setTimeout來增強演示效果，否則本地加載太快，根本看不到，
    imgProxy.onload=function(){
        setTimeout(()=>{
            myImage.setSrc(this.src)
        },2000)
    }
    
    return (src)=>{
        myImage.setSrc("../../img/bgimg.jpeg")
        imgProxy.src=src
    }
})()

imgProxy("../../img/background-cover.jpg")

ES6 Proxy

其實在ES6中，已經有了Proxy，這個內置的函式，我們來用一個例子來演示一下他的用法，這是一個明星代理的問題，

let star={
    name : "張XX",
    age:25,
    phone : "1300001111"
}
let agent = new Proxy(star,
    {
        get:function(target,key){
            if(key === "phone"){
                return  "18839552597"
            }else if(key === "name"){
                return "張XX"
            }else if(key === "price"){
                return "12W"
            }else if(key === "customPrice"){
                return target.customPrice
            }
        },
        set:function(target,key,value){
            if(key === "customPrice"){
                if(value < "10"){
                    console.log("太低了！！！")
                    return false
                }else{
                    target[key] = value
                    return true
                }
            }
        }
    }
)

console.log(agent.name)
console.log(agent.price)
console.log(agent.phone)
console.log(agent.age)
agent.customPrice = "12"
console.log(agent)
console.log(agent.customPrice)

設計原則驗證

代理類和目標類分離，隔離開目標類和使用者

符合開放封閉原則

行為型模式

1. 策略模式

策略模式是一種簡單卻常用的設計模式，它的應用場景非常廣泛，我們先了解下策略模式的概念，再通過代碼示例來更清晰的認識它，

策略模式由兩部分構成：一部分是封裝不同策略的策略組，另一部分是 Context，通過組合和委托來讓 Context 擁有執行策略的能力，從而實作可復用、可擴展和可維護，并且避免大量復制粘貼的作業，

策略模式

策略模式的典型應用場景是表單校驗中，對于校驗規則的封裝，接下來我們就通過一個簡單的例子具體了解一下：

/**
 * 登錄控制器
 */
function LoginController() {
  this.strategy = undefined;
  this.setStrategy = function (strategy) {
    this.strategy = strategy;
    this.login = this.strategy.login;
  }
}

/**
 * 用戶名、密碼登錄策略
 */
function LocalStragegy() {
  this.login = ({ username, password }) => {
    console.log(username, password);
    // authenticating with username and password... 
  }
}

/**
 * 手機號、驗證碼登錄策略
 */
function PhoneStragety() {
  this.login = ({ phone, verifyCode }) => {
    console.log(phone, verifyCode);
    // authenticating with hone and verifyCode... 
  }
}

/**
 * 第三方社交登錄策略
 */
function SocialStragety() {
  this.login = ({ id, secret }) => {
    console.log(id, secret);
    // authenticating with id and secret... 
  }
}

const loginController = new LoginController();

// 呼叫用戶名、密碼登錄介面，使用LocalStrategy
app.use('/login/local', function (req, res) {
  loginController.setStrategy(new LocalStragegy());
  loginController.login(req.body);
});

// 呼叫手機、驗證碼登錄介面，使用PhoneStrategy
app.use('/login/phone', function (req, res) {
  loginController.setStrategy(new PhoneStragety());
  loginController.login(req.body);
});

// 呼叫社交登錄介面，使用SocialStrategy
app.use('/login/social', function (req, res) {
  loginController.setStrategy(new SocialStragety());
  loginController.login(req.body);
});

從以上示例可以得出使用策略模式有以下優勢：

  1. 方便在運行時切換演算法和策略
  2. 代碼更簡潔，避免使用大量的條件判斷
  3. 關注分離，每個strategy類控制自己的演算法邏輯，strategy和其使用者之間也相互獨立

2. 觀察者模式

觀察者模式又叫發布訂閱模式（Publish/Subscribe），它定義了一種一或一對多的關系，讓多個觀察者物件同時監聽某一個主題物件，這個主題物件的狀態發生變化時就會通知所有的觀察者物件，使得它們能夠自動更新自己，典型代表vue/react等，

使用觀察者模式的好處：

  1. 支持簡單的廣播通信，自動通知所有已經訂閱過的物件，
  2. 目標物件與觀察者存在的是動態關聯，增加了靈活性，
  3. 目標物件與觀察者之間的抽象耦合關系能夠單獨擴展以及重用，

觀察者模式當然給元素系結事件的addEventListener()也是一種：

target.addEventListener(type, listener [, options]);

Target就是被觀察物件Subject，listener就是觀察者Observer，

觀察者模式中Subject物件一般需要實作以下API：

  • subscribe(): 接收一個觀察者observer物件，使其訂閱自己
  • unsubscribe(): 接收一個觀察者observer物件，使其取消訂閱自己
  • fire(): 觸發事件，通知到所有觀察者

用JavaScript手動實作觀察者模式：

// 被觀察者
function Subject() {
  this.observers = [];
}

Subject.prototype = {
  // 訂閱
  subscribe: function (observer) {
    this.observers.push(observer);
  },
  // 取消訂閱
  unsubscribe: function (observerToRemove) {
    this.observers = this.observers.filter(observer => {
      return observer !== observerToRemove;
    })
  },
  // 事件觸發
  fire: function () {
    this.observers.forEach(observer => {
      observer.call();
    });
  }
}

驗證一下訂閱是否成功： 

const subject = new Subject();

function observer1() {
  console.log('Observer 1 Firing!');
}


function observer2() {
  console.log('Observer 2 Firing!');
}

subject.subscribe(observer1);
subject.subscribe(observer2);
subject.fire();

輸出：

Observer 1 Firing! 
Observer 2 Firing!

驗證一下取消訂閱是否成功：

subject.unsubscribe(observer2);
subject.fire();

輸出：

Observer 1 Firing!

3. 迭代器模式

ES6中的迭代器 Iterator 相信大家都不陌生，迭代器用于遍歷容器（集合）并訪問容器中的元素，而且無論容器的資料結構是什么（Array、Set、Map等），迭代器的介面都應該是一樣的，都需要遵循 迭代器協議，

迭代器模式解決了以下問題：

  1. 提供一致的遍歷各種資料結構的方式，而不用了解資料的內部結構
  2. 提供遍歷容器（集合）的能力而無需改變容器的介面

迭代器模式

一個迭代器通常需要實作以下介面：

  • hasNext()：判斷迭代是否結束，回傳Boolean
  • next()：查找并回傳下一個元素

為Javascript的陣列實作一個迭代器可以這么寫：

const item = [1, 'red', false, 3.14];

function Iterator(items) {
  this.items = items;
  this.index = 0;
}

Iterator.prototype = {
  hasNext: function () {
    return this.index < this.items.length;
  },
  next: function () {
    return this.items[this.index++];
  }
}

驗證一下迭代器：

const iterator = new Iterator(item);

while(iterator.hasNext()){
  console.log(iterator.next());
}

輸出：

1, red, false, 3.14

ES6提供了更簡單的迭代回圈語法 for...of，使用該語法的前提是操作物件需要實作 可迭代協議（The iterable protocol），簡單說就是該物件有個Key為 Symbol.iterator 的方法，該方法回傳一個iterator物件，

比如我們實作一個 Range 類用于在某個數字區間進行迭代：

function Range(start, end) {
  return {
    [Symbol.iterator]: function () {
      return {
        next() {
          if (start < end) {
            return { value: start++, done: false };
          }
          return { done: true, value: end };
        }
      }
    }
  }
}

驗證：

for (num of Range(1, 5)) {
  console.log(num);
}

結果：

1, 2, 3, 4

4. 狀態模式

狀態模式：一個物件有狀態變化，每次狀態變化都會觸發一個邏輯，不能總是用if...else來控制，

狀態模式

比如紅綠燈：

// 狀態（紅燈，綠燈 黃燈）
class State {
    constructor(color) {
        this.color = color;
    }
    // 設定狀態
    handle(context) {
        console.log(`turn to ${this.color} light`);
        context.setState(this)
    }
}

// 主體
class Context {
    constructor() {
        this.state = null;
    }
    // 獲取狀態
    getState() {
        return this.state;
    }
    setState(state) {
        this.state = state;
    }
}

// 測驗
let context = new Context();
let green = new State('green');
let yellow = new State('yellow');
let red = new State('red');

// 綠燈亮了
green.handle(context);
console.log(context.getState())

// 黃燈亮了
yellow.handle(context);
console.log(context.getState())

// 紅燈亮了
red.handle(context);
console.log(context.getState())

設計原則驗證

將狀態物件和主體物件分離，狀態的變化邏輯單獨處理

符合開放封閉原則

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/294984.html

標籤：其他

上一篇：冒泡排序法（超詳細）

下一篇：資料結構系列之Java手寫實作紅黑樹

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 面試突擊第一季，第二季，第三季

    第一季必考 https://www.bilibili.com/video/BV1FE411y79Y?from=search&seid=15921726601957489746 第二季分布式 https://www.bilibili.com/video/BV13f4y127ee/?spm_id_fro ......

    uj5u.com 2020-09-10 05:35:24 more
  • 第三單元作業總結

    1.前言 這應該是本學期最后一次寫作業總結了吧。總體來說，對作業的節奏也差不多掌握了，作業做起來的效率也更高了。雖然和之前的作業一樣，作業中都要用到新的知識，但是相比之前，更加懂得了如何利用工具以及資料。雖然之間卡過殼，但總體而言，這幾次作業還算完成的比較好。 2.作業程序總結 相比前兩個單元，此單 ......

    uj5u.com 2020-09-10 05:35:41 more
  • 北航OO（2020）第四單元博客作業暨課程總結博客

    北航OO（2020）第四單元博客作業暨課程總結博客 本單元作業的架構設計 在本單元中，由于UML圖具有比較清晰的樹形結構，因此我對其中需要進行查詢操作的元素進行了包裝，在樹的父節點中存盤所有孩子的參考。考慮到性能問題，我采用了快取機制，一次查詢后盡可能快取已經遍歷過的資訊，以減少遍歷次數。 本單元我 ......

    uj5u.com 2020-09-10 05:35:48 more
  • BUAA_OO_第四單元

    一、UML決議器設計 ? 先看下題目：第四單元實作一個基于JDK 8帶有效性檢查的UML(Unified Modeling Language)類圖，順序圖，狀態圖分析器 MyUmlInteraction，實際上我們要建立一個有向圖模型，UML中的物件（元素）可能與同級元素連接，也可與低級元素相連形成 ......

    uj5u.com 2020-09-10 05:35:54 more
  • 6.1邏輯運算子

    邏輯運算子 1. && 短路與 運算式1 && 運算式2 01.運算式1為true并且運算式2也為true 整體回傳為true 02.運算式1為false，將不會執行運算式2 整體回傳為false 03.只要有一個運算式為false 整體回傳為false 2. || 短路或 運算式1 || 運算式2 ......

    uj5u.com 2020-09-10 05:35:56 more
  • BUAAOO 第四單元 & 課程總結

    1. 第四單元：StarUml檔案決議 本單元采用了圖模型決議UML。 UML檔案可以抽象為圖、子圖、邊的邏輯結構。 在實作中，圖的節點包括類、介面、屬性，子圖包括狀態圖、順序圖等。 采用了三次遍歷UML元素的方法建圖，第一遍遍歷建點，第二、三次遍歷設定屬性、連邊，實作圖物件的初始化。這里借鑒了一些 ......

    uj5u.com 2020-09-10 05:36:06 more
  • 談談我對C# 多型的理解

    面向物件三要素：封裝、繼承、多型。 封裝和繼承，這兩個比較好理解，但要理解多型的話，可就稍微有點難度了。今天，我們就來講講多型的理解。 我們應該經常會看到面試題目：請談談對多型的理解。 其實呢，多型非常簡單，就一句話：呼叫同一種方法產生了不同的結果。 具體實作方式有三種。 一、多載 多載很簡單。 p ......

    uj5u.com 2020-09-10 05:36:09 more
  • Python 資料驅動工具：DDT

    背景 python 的unittest 沒有自帶資料驅動功能。 所以如果使用unittest，同時又想使用資料驅動，那么就可以使用DDT來完成。 DDT是 “Data-Driven Tests”的縮寫。 資料：http://ddt.readthedocs.io/en/latest/ 使用方法 dd. ......

    uj5u.com 2020-09-10 05:36:13 more
  • Python里面的xlrd模塊詳解

    那我就一下面積個問題對xlrd模塊進行學習一下： 1.什么是xlrd模塊？ 2.為什么使用xlrd模塊？ 3.怎樣使用xlrd模塊？ 1.什么是xlrd模塊？ ?python操作excel主要用到xlrd和xlwt這兩個庫，即xlrd是讀excel，xlwt是寫excel的庫。 今天就先來說一下xl ......

    uj5u.com 2020-09-10 05:36:28 more
  • 當我們創建HashMap時，底層到底做了什么？

    jdk1.7中的底層實作程序（底層基于陣列+鏈表） 在我們new HashMap()時，底層創建了默認長度為16的一維陣列Entry[ ] table。當我們呼叫map.put(key1,value1)方法向HashMap里添加資料的時候： 首先，呼叫key1所在類的hashCode()計算key1 ......

    uj5u.com 2020-09-10 05:36:38 more
最新发布
  • 【中介者設計模式詳解】C/Java/JS/Go/Python/TS不同語言實作

    * 中介者模式是一種行為型設計模式，它可以用來減少類之間的直接依賴關系，
    * 將物件之間的通信封裝到一個中介者物件中，從而使得各個物件之間的關系更加松散。
    * 在中介者模式中，物件之間不再直接相互互動，而是通過中介者來中轉訊息。 ......

    uj5u.com 2023-04-20 08:20:47 more
  • 露天煤礦現場調研和交流案例分享

    他們集團的資訊化公司及研究院在一個礦區正在做智能礦山的統一平臺的 試點，專案投資大概1億，包括了礦山的各方面的內容，顯示得我們這次交流有點多余。他們2年前開始做智能礦山的規劃，有很多煤礦行業專家的加持，他們的描述是非常完美，但是去年底應該上線的平臺，現在還沒有看到影子。他們確實有很多場景需求，但是被... ......

    uj5u.com 2023-04-20 08:20:25 more
  • 《社區人員管理》實戰案例設計&個人案例分享

    設計是一個讓人夢想成真程序，開始編碼、測驗、除錯之前進行需求分析和架構設計，才能保證關鍵方面都做正確 ......

    uj5u.com 2023-04-20 08:20:17 more
  • 軟體架構生態化-多角色交付的探索實踐

    作為一個技術架構師，不僅僅要緊跟行業技術趨勢，還要結合研發團隊現狀及痛點，探索新的交付方案。在日常中，你是否遇到如下問題 “ 業務需求排期長研發是瓶頸；非研發角色感受不到研發技改提效的變化；引入ISV 團隊又擔心質量和安全，培訓周期長“等等，基于此我們探索了一種新的技術體系及交付方案來解決如上問題。 ......

    uj5u.com 2023-04-20 08:20:10 more
  • 【中介者設計模式詳解】C/Java/JS/Go/Python/TS不同語言實作

    * 中介者模式是一種行為型設計模式，它可以用來減少類之間的直接依賴關系，
    * 將物件之間的通信封裝到一個中介者物件中，從而使得各個物件之間的關系更加松散。
    * 在中介者模式中，物件之間不再直接相互互動，而是通過中介者來中轉訊息。 ......

    uj5u.com 2023-04-20 08:19:44 more
  • 露天煤礦現場調研和交流案例分享

    他們集團的資訊化公司及研究院在一個礦區正在做智能礦山的統一平臺的 試點，專案投資大概1億，包括了礦山的各方面的內容，顯示得我們這次交流有點多余。他們2年前開始做智能礦山的規劃，有很多煤礦行業專家的加持，他們的描述是非常完美，但是去年底應該上線的平臺，現在還沒有看到影子。他們確實有很多場景需求，但是被... ......

    uj5u.com 2023-04-20 08:19:07 more
  • 《社區人員管理》實戰案例設計&個人案例分享

    設計是一個讓人夢想成真程序，開始編碼、測驗、除錯之前進行需求分析和架構設計，才能保證關鍵方面都做正確 ......

    uj5u.com 2023-04-20 08:18:57 more
  • 軟體架構生態化-多角色交付的探索實踐

    作為一個技術架構師，不僅僅要緊跟行業技術趨勢，還要結合研發團隊現狀及痛點，探索新的交付方案。在日常中，你是否遇到如下問題 “ 業務需求排期長研發是瓶頸；非研發角色感受不到研發技改提效的變化；引入ISV 團隊又擔心質量和安全，培訓周期長“等等，基于此我們探索了一種新的技術體系及交付方案來解決如上問題。 ......

    uj5u.com 2023-04-20 08:18:49 more
  • 05單件模式

    #經典的單件模式 public class Singleton { private static Singleton uniqueInstance; //一個靜態變數持有Singleton類的唯一實體。 // 其他有用的實體變數寫在這里 //構造器宣告為私有，只有Singleton可以實體化這個類! ......

    uj5u.com 2023-04-19 08:42:51 more
  • 【架構與設計】常見微服務分層架構的區別和落地實踐

    軟體工程的方方面面都遵循一個最基本的道理：沒有銀彈，架構分層模型更是如此，每一種都有各自優缺點，所以請根據不同的業務場景，并遵循簡單、可演進這兩個重要的架構原則選擇合適的架構分層模型即可。 ......

    uj5u.com 2023-04-19 08:42:41 more

Copyright © 2010-2020 有解無憂