JavaScript设计模式

With your JavaScript skills, you have the opportunity to earn income. Sign up now and we'll send you the best freelance opportunities straight to your inbox. We are building the largest freelancing marketplace for people like you.

JavaScript Design Patterns

Introduction:

Design patterns are advanced object-oriented solutions to commonly occurring software problems. They are about reusable designs and interactions of objects. Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions. The 23 Gang of Four (GoF) patterns are generally considered the foundation for all other patterns. They are categorized in three groups: Creational, Structural, and Behavioral (see below for a complete list).

This tutorial provides JavaScript examples for each of the GoF patterns. Mostly, they follow the structure and intent of the original pattern designs. These examples demonstrate the principles behind each pattern but are not optimized for JavaScript.

JavaScript-optimized patterns are available in our Dofactory JS, a unique guide for web app developers and architects developing with JavaScript and jQuery. This comprehensive guide includes not only optimized GoF patterns (using namespacing, closures, modules, immediate functions, prototypes, among others), but also modern patterns, model view patterns, architecture patterns, jQuery patterns, and more.

GoF or the "Gang of Four" is a set of design patterns that have been widely adopted in software development. The patterns aim to provide solutions to common problems that developers face when creating complex applications. By following these patterns, developers can create more maintainable and scalable code.

Creational Patterns are one such category in the GoF pattern library. These patterns are used to create instances of several families of classes. The main goal of creational patterns is to separate object construction from its representation. They allow for the creation of an instance of several derived classes and ensure that a fully initialized instance is always copied or cloned. Another important aspect of creational patterns is that they enforce a class of which only a single instance can exist.

Structural Patterns are another crucial category in the GoF pattern library. These patterns match interfaces of different classes and separate an object's interface from its implementation. Structural patterns help to organize the structure of simple and composite objects and add responsibilities to objects dynamically. Additionally, they enable developers to represent an entire subsystem as a single class.

By using these optimizations techniques provided by Dofactory JS, web app developers and architects can streamline their JavaScript coding experience and produce high-quality, efficient code. To learn more about these optimizations and access the complete guide, click here.

在计算机科学中，对象和行为模式是两个重要的概念。对象是一种用于存储数据和处理数据的代码段或数据结构的实例，它可以被封装在一个类中。行为模式则是一种设计模式，它定义了对象之间的交互方式。

一种常见的编程技术是使用对象来共享信息。对象可以通过引用传递来实现这一点，这意味着一个对象的值可以在多个地方共享。这种技术可以提高程序的效率和可维护性。

另一种编程技术是将命令请求封装为对象。这样做的好处是可以更方便地组织和管理代码，并且可以更容易地扩展程序的功能。

还有一种技术是将语言元素包含在程序中。这可以通过使用特定的编程语言或库来实现，例如Python中的装饰器。

此外，还可以使用集合类来顺序访问元素。集合类提供了一种方法来管理和操作一组元素。

为了简化类之间的通信，可以使用接口。接口定义了一组方法，对象可以实现这些方法以满足接口的要求。

有时需要捕获并恢复对象的内部状态。这可以通过使用状态模式来实现，该模式定义了对象的行为如何随其内部状态的变化而变化。

有时需要通知多个类对象的状态已更改。这可以通过观察者模式来实现，该模式定义了一个对象如何在其状态更改时通知其他对象。

有时需要在不改变类的情况下定义新的操作。这可以通过使用策略模式来实现，该模式定义了算法如何与特定的对象一起使用。

最后，有时需要将算法的确切步骤推迟到子类中执行。这可以通过使用模板方法模式来实现，该模式定义了一个算法的框架，并在子类中实现具体的步骤。

```javascript// old interface

function Shipping() {

this.request = function (zipStart, zipEnd, weight) {

// ...

return "$49.75";

};

}

// new interface

function AdvancedShipping() {

this.login = function (credentials) { /* ... */ };

this.setStart = function (start) { /* ... */ };

this.setDestination = function (destination) { /* ... */ };

this.calculate = function (weight) { return "$39.50"; };

}

// adapter interface

function ShippingAdapter(credentials) {

var shipping = new AdvancedShipping();

shipping.login(credentials);

return {

request: function (zipStart, zipEnd, weight) {

shipping.setStart(zipStart);

shipping.setDestination(zipEnd);

return shipping.calculate(weight);

};

}

function run() {

var shipping = new Shipping();

var credentials = { token: "30a8-6ee1" };

var adapter = new ShippingAdapter(credentials);

// original shipping object and interface

var cost = shipping.request("78701", "10010", "2 lbs");

console.log("Old cost: " + cost);

// new shipping object with adapted interface

cost = adapter.request("78701", "10010", "2 lbs");

console.log("New cost: " + cost);

}

```