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 – 518H0000
Lớp : 18H50205
Khoá : 22

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

 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 HƯỚNG ĐỐI TƯỢNG

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 – 518H0000
Lớp : 18H50205
Khoá : 22

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

 i

LỜ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
LỜI CẢM ƠN.................................................................................................................i
PHẦN XÁC NHẬN VÀ ĐÁNH GIÁ CỦA GIẢNG VIÊN.........................................iii
MỤC LỤC...................................................................................................................... 1
GIỚI THIỆU..................................................................................................................2
CHƯƠNG 1 – SINGLETON PATTERN.......................................................................3
1.1 Lý do áp dụng................................................................................................3
1.2 Sơ đồ lớp.......................................................................................................3
1.3 Code áp dụng.................................................................................................3
CHƯƠNG 2 – STRATEGY PATTERN........................................................................5
2.1 Lý do áp dụng................................................................................................5
2.2 Sơ đồ lớp.......................................................................................................5
2.3 Code áp dụng.................................................................................................5
CHƯƠNG 3 – FACTORY PATTERN...........................................................................8
3.1 Lý do áp dụng................................................................................................8
3.2 Sơ đồ lớp.......................................................................................................8
3.3 Code áp dụng.................................................................................................8
CHƯƠNG 4 – ABSTRACT FACTORY PATTERN...................................................10
4.1 Lý do áp dụng..............................................................................................10
4.2 Sơ đồ lớp.....................................................................................................10
4.3 Code áp dụng...............................................................................................10
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
 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ớ.
1.2 Sơ đồ lớp

1.3 Code áp dụng

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) {
 4

  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)
  inst.setUI()
})
 5

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.
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)
  },
}

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

    console.log(package, tigia)

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

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

    console.log(package, tigia)

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

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

    console.log(package, tigia)

    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
}

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

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

  }

  // 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))
})
 8

CHƯƠNG 3 – FACTORY PATTERN

3.1 Lý do áp dụng

3.2 Sơ đồ lớp

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;
 9

    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("");
});
 10

CHƯƠNG 4 – ABSTRACT FACTORY PATTERN

4.1 Lý do áp dụng

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

  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
 11

  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) {
  let HinhTron = new HinhTronFactory()
  let r = $("#bankinh").val()
  HinhTron.create(r)
})

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

CHƯƠNG 5 – COMMAND PATTERN

4.1 Lý do áp dụng

4.2 Sơ đồ lớp

4.3 Code áp dụng

function add(x, y) {
  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) {
 13

  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)
  }

  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
    },
  }
}
 14

TÀI LIỆU THAM KHẢO

JavaScript Design Patterns Tutorial - Dofactory