TỔNG LIÊN ĐOÀN LAO ĐỘNG VIỆT NAM

TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

KHOA CÔNG NGHỆ THÔNG TIN

ĐỒ ÁN CUỐI KÌ MÔN MẪU THIẾT KẾ

ỨNG DỤNG MẪU THIẾT KẾ TRONG

LẬP TRÌNH JAVASCRIPT

Người hướng dẫn: TS NGUYỄN THANH PHƯỚC

Người thực hiện: TẠ TRUNG HIẾU – 518H0502
TRẦN VĂN AN – 518H0127
Lớp : 18H50205
Khoá : 22

THÀNH PHỐ HỒ CHÍ MINH, NĂM 2020

 i

CÁM ƠN
Cảm ơn thầy Nguyễn Thanh Phước đã trực tiếp giảng dạy và hỗ trợ chúng tôi

thực hiện đồ án lần này.

 ii

ĐỒ ÁN ĐƯỢC HOÀN THÀNH

TẠI TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG

Tôi xin cam đoan đây là sản phẩm đồ án của chúng tôi và được sự hướng dẫn
của TS Nguyễn Thanh Phước. Các nội dung nghiên cứu, kết quả trong đề tài này là
trung thực và chưa công bố dưới bất kỳ hình thức nào trước đây. Những số liệu trong
các bảng biểu phục vụ cho việc phân tích, nhận xét, đánh giá được chính tác giả thu
thập từ các nguồn khác nhau có ghi rõ trong phần tài liệu tham khảo.
Ngoài ra, trong đồ án còn sử dụng một số nhận xét, đánh giá cũng như số liệu
của các tác giả khác, cơ quan tổ chức khác đều có trích dẫn và chú thích nguồn gốc.
Nếu phát hiện có bất kỳ sự gian lận nào tôi xin hoàn toàn chịu trách nhiệm
về nội dung đồ án của mình. Trường đại học Tôn Đức Thắng không liên quan đến
những vi phạm tác quyền, bản quyền do tôi gây ra trong quá trình thực hiện (nếu có).
TP. Hồ Chí Minh, ngày tháng năm
Tác giả
(ký tên và ghi rõ họ tên)

Tạ Trung Hiếu

Trần Văn An
 iii

PHẦN XÁC NHẬN VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN

Phần xác nhận của GV hướng dẫn
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
Tp. Hồ Chí Minh, ngày tháng năm
(kí và ghi họ tên)

Phần đánh giá của GV chấm bài

_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
_________________________________________________________
Tp. Hồ Chí Minh, ngày tháng năm
(kí và ghi họ tên)
 1

MỤC LỤC
PHẦN XÁC NHẬN VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN.........................................iii
MỤC LỤC...................................................................................................................... 1
CHƯƠNG 1 – SINGLETON PATTERN.......................................................................2
1.1 Lý do áp dụng................................................................................................2
1.2 Sơ đồ lớp.......................................................................................................2
1.3 Code áp dụng.................................................................................................2
CHƯƠNG 2 – STRATEGY PATTERN........................................................................4
2.1 Lý do áp dụng................................................................................................4
2.2 Sơ đồ lớp.......................................................................................................4
2.3 Code áp dụng.................................................................................................4
CHƯƠNG 3 – FACTORY PATTERN...........................................................................7
3.1 Lý do áp dụng................................................................................................7
3.2 Sơ đồ lớp.......................................................................................................7
3.3 Code áp dụng.................................................................................................7
CHƯƠNG 4 – ABSTRACT FACTORY PATTERN.....................................................9
4.1 Lý do áp dụng................................................................................................9
4.2 Sơ đồ lớp.......................................................................................................9
4.3 Code áp dụng.................................................................................................9
CHƯƠNG 5 – COMMAND PATTERN......................................................................12
4.1 Lý do áp dụng..............................................................................................12
4.2 Sơ đồ lớp.....................................................................................................12
4.3 Code áp dụng...............................................................................................12
TỰ ĐÁNH GIÁ............................................................................................................15
 2

GIỚI THIỆU
Chương trình AH Tools là một trang web tích hợp các công cụ tiện ích cơ bản
như tính toán, vẽ hình, chuyển đổi tiền tệ, chuyển đổi thời gian giữa các khu vực,
random ngẩu nhiên... Chương trình được viết bằng ngôn ngữ Javascript và hiển thị trên
giao diện web html.
 3

CHƯƠNG 1 – SINGLETON PATTERN

1.1 Lý do áp dụng
Singleton là một object chỉ khởi tạo duy nhất một lần, nghĩa là nó chỉ tạo một
instance mới của một class nếu chưa tồn tại instance nào, còn nếu có thì nó chỉ việc trả
lại instance đó. Nhờ vậy mà dù có gọi hàm khởi tạo nhiều lần thì chúng ta cũng chỉ
nhận được một object duy nhất, giúp tránh lãng phí bộ nhớ.
Chúng tôi áp dụng mẫu trên cho công cụ xem giờ quốc tế. Công cụ hiển thị thời
gian hiện tại và cho phép xem giờ của các quốc gia khác tại cùng thời điểm.

1.2 Sơ đồ lớp

1.3 Code áp dụng

 4

var mySingleton = (function () {
  var instance;
  function init() {
    let new_hours = 0;
    let area = "";
    return {
      setInfo: function (x, y) {
        new_hours = x;
        area = y;
      },
      setUI: function () {
        $("#switchTimeDisplay").html(new_hours + ":" + mins);
        $("#areaDisplay").html(area);
      },
    };
  }

  return {
    getInstance: function () {
      if (!instance) instance = init();
      return instance;
    },
  };
})()

// action
var inst = mySingleton.getInstance()
$("#switchBtn").click(function (e) {
  let str = $("#countries").val()

  let data = str.split("|")
  let n = parseInt(data[0])
  let area = data[1]

  let new_hours
  if (curent_hours + n >= 24) {
    new_hours = curent_hours + n - 24
  } else {
    new_hours = curent_hours + n
  }

  inst.setInfo(new_hours, area)
 5

  inst.setUI()
})

CHƯƠNG 2 – STRATEGY PATTERN

2.1 Lý do áp dụng
Strategy pattern bao gồm các thuật toán (hoặc chiến lược) thay thế cho một
nhiệm vụ cụ thể. Nó cho phép một phương thức được hoán đổi trong thời gian chạy
bằng bất kỳ phương thức (chiến lược) nào khác mà khách hàng không nhận ra. Về cơ
bản, Chiến lược là một nhóm các thuật toán có thể thay thế cho nhau.
Chúng tôi áp dụng mẫu thiết kế trên cho công cụ chuyển đổi tiền tệ, cụ thể đây
là công cụ chuyển đổi tiền dựa trên tỉ giá đồng tiền giữa ba nước Việt Nam – Trung
Quốc – Mỹ.
 6

2.2 Sơ đồ lớp

2.3 Code áp dụng

var ChuyenDoi = function () {
  this.donvi = ""
}

ChuyenDoi.prototype = {
  setStrategy: function (donvi) {
    this.donvi = donvi
  },

  calculate: function (package) {
    return this.donvi.calculate(package)
 7

  },
}

var USDandVND = function () {
  this.calculate = function (package) {
    let tigia = 23081.38

    if (package["from"] == "VND") {
      return package["amount"] / tigia
    }
    return package["amount"] * tigia
  }
}

var CNYandVND = function () {
  this.calculate = function (package) {
    let tigia = 3539.56

    if (package["from"] == "VND") {
      return package["amount"] / tigia
    }
    return package["amount"] * tigia
  }
}

var USDandCNY = function () {
  this.calculate = function (package) {
    let tigia = 6.52

    if (package["from"] == "CNY") {
      return package["amount"] / tigia
    }
    return package["amount"] * tigia
  }
}

const contains = (first, second) => {
  const indexArray = first.map((el) => {
    return second.indexOf(el)
  })
  return indexArray.indexOf(-1) === -1
}
 8

$("#kqButton").click(() => {
  var amount = parseFloat($("#soluong").val())
  var from = $("#tu").val()
  var to = $("#sang").val()

  var package = {
    amount: amount,
    from: from,
    to: to,
  }

  // console.log(from, to)

  let chuyendoi = new ChuyenDoi()

  if (contains(["VND", "USD"], [from, to]) == true) {
    chuyendoi.setStrategy(new USDandVND())
  } else if (contains(["CNY", "VND"], [from, to]) == true) {
    chuyendoi.setStrategy(new CNYandVND())
  } else if (contains(["CNY", "USD"], [from, to]) == true) {
    chuyendoi.setStrategy(new USDandCNY())
  } else {
    return $("#kq").html("")
  }
  // chuyendoi.setStrategy(donvi)
  return $("#kq").html(chuyendoi.calculate(package))
})
 9

CHƯƠNG 3 – FACTORY PATTERN

3.1 Lý do áp dụng
Factory Method xác định một giao diện để tạo một đối tượng, nhưng để các lớp
con quyết định lớp nào sẽ khởi tạo. Factory Method cho phép một lớp trì hoãn việc
khởi tạo thành các lớp con. Nhiệm vụ của Factory Pattern là quản lý và trả về các đối
tượng theo yêu cầu, giúp cho việc khởi tạo đổi tượng một cách linh hoạt hơn.
Mẫu thiết kế trên được chúng tôi áp dụng để xây dựng công cụ random một số
trong phạm vi hoặc một chuỗi có độ dài n.

3.2 Sơ đồ lớp
 10

3.3 Code áp dụng

function randomNumber() {
  let min = parseInt($("#min").val());
  let max = parseInt($("#max").val());
  this.str = Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomString() {
  var length = parseInt($("#length").val());
  var result = [];
  var characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  var charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    result.push(
      characters.charAt(Math.floor(Math.random() * charactersLength))
    );
  }
  this.str = result.join("");
}

function Factory() {
  this.createRandom = function (type) {
    var random;

    if (type === "integer") {
      random = new randomNumber();
    } else if (type === "string") {
      random = new randomString();
    }

    random.type = type;
 11

    random.setUI = function () {
      $("#random-result").append(`<p>${this.str}</p>`);
    };

    return random;
  };
}

var factory = new Factory();

$("#gennum-btn").click(function (e) {
  var gen = factory.createRandom("integer");
  gen.setUI();
});

$("#genstr-btn").click(function (e) {
  var gen = factory.createRandom("string");
  gen.setUI();
});

$(".clear").click(function (e) {
  $("#random-result").html("");
});
 12

CHƯƠNG 4 – ABSTRACT FACTORY PATTERN

4.1 Lý do áp dụng
Abstract Factory là một mẫu thiết kế cung cấp một giao diện để tạo các đối
tượng liên quan hoặc phụ thuộc mà không chỉ định các lớp cụ thể của chúng, là phương
pháp tạo ra một Super-factory dùng để tạo ra các Factory khác. Hay còn được gọi là
Factory của các Factory. Trong Abstract Factory pattern, một interface có nhiệm vụ tạo
ra một Factory của các object có liên quan tới nhau mà không cần phải chỉ ra trực tiếp
các class của object.
Công cụ vẽ hình được chúng tôi áp dụng mẫu ở trên để vẽ các hình dạng cơ bản
trong toán học, mỗi hình tương ứng với thông số và đại lượng riêng biệt.
 13

4.2 Sơ đồ lớp

4.3 Code áp dụng

function HinhVuong(kichthuoc) {
  this.kichthuoc = kichthuoc

  let div = `<div class="mb-3" style="border-style: solid; border-color: coral
; width:${this.kichthuoc}px; height:${this.kichthuoc}px"></div>`
  $("#drawbox").prepend(div)
}

function HinhVuongFactory() {
  this.create = function (kichthuoc) {
    return new HinhVuong(kichthuoc)
  }
}

function HinhChuNhat(dai, rong) {
  this.dai = dai
  this.rong = rong
 14

  let div = `<div class="mb-3" style="border-style: solid; border-color: coral
; width:${this.dai}px; height:${this.rong}px"></div>`
  $("#drawbox").prepend(div)
}

function HinhChuNhatFactory() {
  this.create = function (dai, rong) {
    return new HinhChuNhat(dai, rong)
  }
}

function HinhTron(bankinh) {
  this.bankinh = bankinh
  let duongkinh = bankinh * 2
  let div = `
        <div class="mb-3 rounded-circle" style="border-style: solid; border-
color: coral; width:${duongkinh}px; height:${duongkinh}px "></div>
    `
  $("#drawbox").prepend(div)
}

function HinhTronFactory() {
  this.create = function (bankinh) {
    return new HinhTron(bankinh)
  }
}

// action
$("#veChuNhat").click(function (e) {
  let HinhChuNhat = new HinhChuNhatFactory()
  let a = $("#dai").val()
  let b = $("#rong").val()
  HinhChuNhat.create(a, b)
})

$("#veVuong").click(function (e) {
  let HinhVuong = new HinhVuongFactory()
  let x = $("#dodai").val()
  HinhVuong.create(x)
})

$("#veTron").click(function (e) {
 15

  let HinhTron = new HinhTronFactory()
  let r = $("#bankinh").val()
  HinhTron.create(r)
})

$(".clear-btn").click(function (e) {
  $("#drawbox").html("")
})
 16

CHƯƠNG 5 – COMMAND PATTERN

4.1 Lý do áp dụng
Command Pattern đóng gói yêu cầu dưới dạng một đối tượng, do đó cho phép
bạn tham số hóa các với các yêu cầu khác nhau, yêu cầu hàng đợi hoặc nhật ký và hỗ
trợ các hoạt động hoàn tác. Nó cho phép chuyển yêu cầu thành đối tượng độc lập, có
thể được sử dụng để tham số hóa các đối tượng với các yêu cầu khác nhau như log,
queue (undo/redo), transtraction.
Với công cụ tính toán đã quá quen thuộc trong cuộc sống chúng ta, chúng tôi áp
dụng mẫu thiết kế trên để phục vụ cho việc tính toán căn bản.

4.2 Sơ đồ lớp

4.3 Code áp dụng

function add(x, y) {
 17

  return x + y
}
function sub(x, y) {
  return x - y
}
function mul(x, y) {
  return x * y
}
function div(x, y) {
  return x / y
}

var Command = function (execute, undo, value) {
  this.execute = execute
  this.undo = undo
  this.value = value
}

var AddCommand = function (value) {
  return new Command(add, sub, value)
}

var SubCommand = function (value) {
  return new Command(sub, add, value)
}

var MulCommand = function (value) {
  return new Command(mul, div, value)
}

var DivCommand = function (value) {
  return new Command(div, mul, value)
}

var Calculator = function () {
  var current = 0
  var commands = []

  function action(command) {
    var name = command.execute.toString().substr(9, 3)
    return name.charAt(0).toUpperCase() + name.slice(1)
  }
 18

  return {
    execute: function (command) {
      current = command.execute(current, command.value)
      commands.push(command)
    },

    undo: function () {
      var command = commands.pop()
      current = command.undo(current, command.value)
    },

    getCurrentValue: function () {
      return current
    },
  }
}
var calculator
calculator = new Calculator()

// number action
$('.number-btn').click(function () {
    let n = $(this).val()
    $('#screen').val($('#screen').val() + n)
})

// operation action
$('.operation-btn').click(function () {
    let opera_str = $(this).val()

    let screen = parseFloat($('#screen').val())

    let opera
    if (opera_str == '+') {
        opera = new AddCommand(screen)
    } else if (opera_str == '-') {
        opera = new SubCommand(screen)
    } else if (opera_str == '*') {
        opera = new MulCommand(screen)
    } else if (opera_str == '/') {
        opera = new DivCommand(screen)
 19

    } else {
        $('#screen').val(calculator.getCurrentValue())
    }
    calculator.execute(opera)
    $('#screen').val('')
})

$('#ac').click(function () {
    $('#screen').val('')
    calculator = new Calculator()
})

$('#undo').click(function () {
    calculator.undo()
    $('#screen').val(calculator.getCurrentValue())
})
 20

TỰ ĐÁNH GIÁ
Thang 1 2 3
Tự
đánh giá
Đánh
Nội dung tiêu chí
Giá
Trên ½ đến trọn
Điểm/10 0 điểm Tối đa ½ điểm
điểm
Áp dụng pattern
Singleton 1.5 điểm/pattern và tối đa 8 điểm.
Strategy Với mỗi pattern áp dụng được sẽ tính điểm trên 3 thang đo nhỏ bên dưới
Factory (một pattern có thể áp dụng nhiều lần trong project nhưng chỉ tính điểm 1
Abstract Factory lần và tối đa 1.5 điểm)
Command Pattern

Không có hoặc
Có nhưng chưa thể hiện
Lý do áp dụng: 0.3đ không hợp lý Rõ ràng, hợp lý 0.3×5
rõ
hoặc gượng ép

Vẽ hợp lý cho bài toán

Không có hoặc
Sơ đồ lớp nhưng còn có điểm sai
0.5đ vẽ sai, vẽ Sơ đồ đúng, hợp lý 0.25×4
trong
không hợp lý
sơ đồ

Không có hoặc Có code nhưng chưa đủ

Code áp dụng:
0.7đ code sai hoặc pattern hoặc sai phần Code đúng 0.7×5
code bị lỗi nhỏ
Còn sai chính tả; chưa
Trình bày tốt, đúng
thể hiện tốt nội dung các
Báo cáo 2đ Không có và thống nhất 1
pattern; format, font
format, font.
chưa thống nhất
Điểm cộng 1đ Cộng tối đa 1.0 điểm nếu áp dụng đúng được trên 6 pattern. 0
Tổng điểm 10 điểm 7.0
 21

TÀI LIỆU THAM KHẢO

https://www.dofactory.com/javascript/design-patterns