本文共 5134 字，大约阅读时间需要 17 分钟。

1. 介绍

1.1 综合应用 – 购物车

• 使用 jQuery 做一个模拟购物车的示例
• 包括：显示购物列表、加入购物车、从购物车删除

1.2 运用到的设计模式

• 工厂模式、单例模式
• 装饰器模式、观察者模式
• 状态模式、模板方法模式、代理模式

2. UML 类图

3. 代码实现

• App.js

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

import $ from 'jquery'import getCart from './GetCart.js'export default class ShoppingCart {
   	constructor(app) {
   		this.app = app		this.$el = $('
   
    ').css({
   			'padding-bottom': '10px',			'border-bottom': '1px solid #ccc'		})		this.cart = getCart()	}	initBtn() {
   		let $btn = $('
    购物车')		$btn.click(() => {
   			this.showCart()		})		this.$el.append($btn)	}	showCart() {
   		alert(this.cart.getList())	}	render() {
   		this.app.$el.append(this.$el)	}	init() {
   		this.initBtn()		this.render()	}}
   

• GetCart.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 cart	return function () {
   		if (!cart) {
   			cart = new Cart()		}		return cart	}})()export default getCart

• List.js

import $ from 'jquery'import {
    GET_LIST } from '../config/config.js'export default class List {
   	constructor(app) {
   		this.app = app		this.$el = $('
   
    ')	}	// 获取数据	loadData() {
   		// 返回 Promise 实例		return fetch(GET_LIST).then(result => {
   			return result.json()		})	}	// 生成列表	initItemList(data) {
   		// data.map(itemData => {
   			// 创建一个 Item 然后 init			// let item = createItem(this, itemData)			// item.init()			// return item		// }		data.forEach(itemData => {
   			// 创建一个 Item 然后 init			let item = createItem(this, itemData)			item.init()		}	}	// 渲染	render() {
   		this.app.$el.append(this.$el)	}	init() {
   		this.loadData().then(data => {
   			this.initItemList(data)		}).then(() => {
   			// 渲染			this.render()		})	}}
   

• item.js

import $ from 'jquery'import getCart from '../ShoppingCart/GetCart.js'import StateMachine from 'javascript-state-machine'import {
    log } from '../util/log.js'export default class Item {
   	constructor(list, data) {
   		this.list = list		this.data = data		this.$el = $('
   
    ')		this.cart = getCart()	}	initContent() {
   		let $el = this.$el		let data = this.data		$el.append($(`
    
名称: ${
     data.name}
`))		$el.append($(`
    
价格: ${
     data.price}
`))	}	initBtn() {
   		let $el = this.$el		let $btn = $('
    test')		let _this = this		let fsm = new StateMachine({
   			init: '加入购物车',			transitions: [				{
   					name: 'addToCart',					from: '加入购物车',					to: '从购物车删除'				},				{
   					name: 'deleteFromCart'，					from: '从购物车删除',					to: '加入购物车'				}			],			methods: {
   				// 加入购物车				onAddToCart: function () {
   					_this.addToCartHandle				}				// 从购物车删除				onDeleteFromCart: function () {
   					_this.deleteFromCartHanel()					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')	deleteFromCartHanel() {
   		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(itemData) {
   	// 用代理做折扣显示	return new Proxy(itemData, {
   		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)}

• config.js

export const GET_LIST = '/api/list.json'

• 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	}]

• log.js

export function log(type) {
   	return function (target, name, descriptor) {
   		let oldValue = descriptor.value		descriptor.value = function () {
   			// 在此统一打印日志			console.log(`日志上报 ${
     type}`)			// 执行原有的方法			return oldValue.apply(this, arguments)		}				return descriptor	}}

4. 综合应用总结

• 工厂模式
  • $('xxx') 创建商品
• 单例模式
  • 购物车
• 装饰器模式
  • 打点统计
• 观察者模式
  • 网页是假， Promise
• 状态模式
  • 添加到购物车 & 从购物车删除
• 模版方法模式
  • 渲染有统一的方法，内部包含了各模块渲染
• 代理模式
  • 打折商品信息处理

转载地址：http://zjqwi.baihongyu.com/