綜合應用

• 綜合應用
• 搭建開發環境
• 演示項目功能
• 畫 UML 類圖
• 開始寫代碼
• • 準備工作
  • 入口文件
  • App.js
  • ShoppingCart.js
  • GetCart.js
  • List.js
  • Item.js
  • CreateItem.js
  • 狀態管理
  • 模擬日志log.js
  • 補充折扣功能

綜合應用

使用 jQuery 做一個模擬購物車的小 demo ，不用 vue 或 React 是因為它們封裝了很多東西，使用封裝的框架，就不容易分析設計模式。

包括：顯示購物車列表、加入購物車、從購物車刪除

用到的設計模式：

• 工廠模式：$(...)，創建商品實例
• 單例模式：購物車
• 裝飾器模式：log（點擊按鈕日志打點）
• 觀察者模式：事件監聽、Promise
• 狀態模式：添加到購物車 & 從購物車刪除
• 模板方法模式：渲染的方法統一成一個，里面再分別寫渲染不同部分的代碼
• 代理模式：優惠商品打折：name 有“優惠”字樣、price 是原價 80%
• 外觀模式：？？？
• 適配器模式：？？？
• 職責連模式：Promise 多個 then

注意，這不是一個完整的項目，是為了演示設計模式而做的一個真實項目的一部分

學習設計模式前后的對比：

• 學習之前：主要考慮如何操作 DOM ，綁定事件，發送請求
• 學習之后：考慮面向對象，設計模式，合理性和可擴展性（其實這些都是 vue React 統一做的，是前端開發的升級）

搭建開發環境

使用現有 ES6 環境即可，不用重新搭建。

演示項目功能

待項目做完之后，演示一下功能，讓學員知道即將做了個什么項目

畫 UML 類圖

根據項目演示，分析功能，并畫出 UML 類圖。

開始寫代碼

準備工作

在 index.html 中增加一個容器，即<div id="app"></div>

安裝 jQuery npm install jquery -save

入口文件

新建src/index.js作為入口文件，內容如下

import App from './demo/App.js'let app = new App('app') app.init()

App.js

參考 App.js 的內容，注意要引入 jQuery

import $ from 'jquery' import ShoppingCart from './ShoppingCart/ShoppingCart.js' import List from './List/List.js'export default class App {constructor(id) {this.$el = $(`#${id}`)//工廠模式}// 初始化購物車initShoppingCart() {let shoppingCart = new ShoppingCart(this)shoppingCart.init()}// 初始化商品列表initList() {let list = new List(this)list.init()}init() {this.initShoppingCart()this.initList()} }

ShoppingCart.js

參考 ShoppingCart.js 的內容。一開始showCart方法內容可不寫，待Cart類創建完之后再補充

import $ from 'jquery' import getCart from './GetCart.js'export default class ShoppingCart {constructor(app) {this.app = appthis.$el = $('<div>').css({'padding-bottom': '10px','border-bottom': '1px solid #ccc'})this.cart = getCart()}// 顯示購物車內容showCart() {alert(this.cart.getList())}// 初始化按鈕initBtn() {let $btn = $('<button>購物車</button>')//觀察者模式$btn.click(() => {this.showCart()})this.$el.append($btn)}// 渲染render() {this.app.$el.append(this.$el)}init() {this.initBtn()this.render()} }

GetCart.js

參考 GetCart.js 的內容，要說明這是一個單例。創建完之后，完善 ShoppingCart.js 的內容。

class Cart {constructor() {this.list = []}add(data) {this.list.push(data)}del(id) {this.list = this.list.filter(item => {if (item.id === id) {return false}return true})}getList() {return this.list.map(item => {return item.name}).join('\n')} }// 返回單例，單例模式 let getCart = (function () {let cartreturn function () {if (!cart) {cart = new Cart();}return cart} })()export default getCart

List.js

參考 List.js 的內容。

在寫loadData之前要先：

• 要先創建好api/list.json
• webpack-dev-server 的 proxy
• 另外要介紹 fetch 的使用
• 創建config/config.js

在沒有createItem之前，可先不寫initItemList的內容。

//list.json [{"id": 1,"name": "《JS 基礎面試題》","price": 149,"discount": 1},{"id": 2,"name": "《JS 高級面試題》","price": 366,"discount": 1},{"id": 3,"name": "《React 模擬大眾點評 webapp》","price": 248,"discount": 0},{"id": 4,"name": "《zepto 設計與源碼解讀》","price": 0,"discount": 0} ] //config.js export const GET_LIST = '/api/list.json' import $ from 'jquery' import createItem from '../Item/CreateItem.js' import { GET_LIST } from '../config/config.js'export default class List {constructor(app) {this.app = appthis.$el = $('<div>')}// 獲取數據loadData() {// 使用 fetch （低版本瀏覽器可使用 https://github.com/github/fetch 兼容）// 返回 promisereturn fetch(GET_LIST).then(result => {return result.json()})}// 生成列表initItemList(data) {data.map(itemData => {let item = createItem(this, itemData)item.init()return item})}// 渲染render() {this.app.$el.append(this.$el)}init() {//觀察者模式this.loadData().then(data => {this.initItemList(data)}).then(() => {// 最后再一起渲染 DOM ，以避免重復渲染的性能問題this.render()})} }

Item.js

參考 Item.js 的內容。CreateItem.js 一開始可先不考慮折扣的功能，后面再補充。

完成之后補充 List.js 的遺留內容。

狀態管理和增加日志，可先不寫，后面單獨講。

import $ from 'jquery' import StateMachine from 'javascript-state-machine' import { log } from '../util/log.js' import getCart from '../ShoppingCart/GetCart.js'export default class Item {constructor(list, data) {this.list = listthis.data = datathis.$el = $('<div>')this.cart = getCart()}initContent() {let $el = this.$ellet data = this.data$el.append($(`<p>名稱：${data.name}</p>`))$el.append($(`<p>價格：${data.price}</p>`))}initBtn() {let $el = this.$ellet $btn = $('<button>')// 狀態管理,狀態模式let _this = thislet fsm = new StateMachine({init: '加入購物車',transitions: [{name: 'addToCart', from: '加入購物車',to: '從購物車刪除'},{name: 'deleteFromCart',from: '從購物車刪除',to: '加入購物車'}],methods: {// 加入購物車onAddToCart: function () {_this.addToCartHandle()updateText()},// 刪除onDeleteFromCart: function () {_this.deleteFromCartHandle()updateText()}}})function updateText() {$btn.text(fsm.state)}$btn.click(() => {if (fsm.is('加入購物車')) {fsm.addToCart()} else {fsm.deleteFromCart()}})updateText()$el.append($btn)}// 加入購物車，裝飾器模式@log('add')addToCartHandle() {this.cart.add(this.data)}// 從購物車刪除，裝飾器模式@log('del')deleteFromCartHandle() {this.cart.del(this.data.id)}render() {this.list.$el.append(this.$el)}init() {//模板方法模式this.initContent()this.initBtn()this.render()} }

CreateItem.js

import Item from './Item.js'function createDiscount(item) {// 用代理做折扣顯示，代理模式return new Proxy(item, {get: function (target, key, receiver) {if (key === 'name') {return `${target[key]}【折扣】`}if (key === 'price') {return target[key] * 0.8}return target[key]}}) }// 工廠模式 export default function (list, itemData) {if (itemData.discount) {itemData = createDiscount(itemData)}return new Item(list, itemData) }

狀態管理

按鈕狀態管理，以及增加、刪除購物車。記得npm i javascript-state-machine --save

模擬日志log.js

增加、刪除購物車時，增加日志功能。代碼寫在util/log.js中。

nodejs v6 及一下的需要npm i babel-plugin-transform-decorators-legacy --save-dev，以及修改.babelrc增加plugin配置。

//裝飾器模式 export function log(type) {return function (target, name, descriptor) {var oldValue = descriptor.value;descriptor.value = function() {// 此處統一上報日志console.log(`日志上報 ${type}`);// 執行原有方法return oldValue.apply(this, arguments);};return descriptor;} }

補充折扣功能

完善 CreateItem.js 補充折扣功能

總結

以上是生活随笔為你收集整理的（十四）综合应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。