I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

One, foreword

In my first few years of development, I barely used design patterns. I have seen the common design pattern of the front end for several times, and I can clearly remember the name of the pattern, but the specific content and principle are very vague to me.

The reason why can not remember, use, two reasons, most of the functions are relatively simple, the development of a simple scheme to achieve; Do not have a thorough understanding of the design pattern, can not use.

I feel like I’ve been buffed by productivity lately, so I’m trying to re-understand this.

Two, learn and use

When I was learning a new technology, I read a document or article, but my memory was not very deep. Later, I found that my mastery of the new technology depended on whether I had really implemented it. It is often said that “a good memory is better than a bad pen”. And I’m not good at photographic memory, so I need to understand it to remember it better.

For the learning of front-end design mode, I adopted the mode of knowledge point introduction + functional code, which is convenient for learning, understanding and memory. Most of the introductions come from the articles I refer to, which are listed at the bottom of the article. (Excellent articles)

2.1 Appearance Mode

2.1.1 to introduce

The facade pattern provides a unified high-level interface for a set of interfaces in a subsystem, making the subsystem easier to use. In a nutshell, the design pattern abstracts complex logic from multiple subsystems to provide a more uniform, concise, and easy-to-use API.

2.1.2 Application Scenarios

Many of the frameworks and libraries we use most often follow design patterns. The complex functions we deal with in the actual development, such as separating some complex logic to encapsulate and providing only an API externally, are also the application of the appearance pattern

2.1.3 Simple Example

I’m going to share with you some of the features I’ve simplified.

1) The three private methods are _userBaseInfo (to get the basic information of the user), _userAddressInfo (to get the order information of the user), _userOrderInfo (to get the delivery address of the user);

2) The method provided externally is getUserInfo (get the user’s shopping information);

3) Encapsulate the internal data processing into a method to provide, so that a facade pattern is realized.

/** * User - Basic information */
const _userBaseInfo = () = > {
  const obj = {
    name: 'Joe'.phone: '123456'.sex: 'male'};return obj;
};

/** * user - shipping address information */
const _userAddressInfo = () = > {
  const obj = {
    province: 'Beijing'.city: 'Beijing'.region: 'changping'};return obj;
};

/** * user - order information */
const _userOrderInfo = () = > {
  const obj = {
    orderNo: '123'.price: '129'.goodName: 'hat'};return obj;
};

/** * user - shopping info */
const getUserInfo = () = > {
  const baseInfo = _userBaseInfo();
  const addressInfo = _userAddressInfo();
  const orderInfo = _userOrderInfo();
  constobj = { ... baseInfo, ... addressInfo, ... orderInfo, };return obj;
};

const userInfo = getUserInfo();
console.log({ userInfo });
// Print the result
/ / {
// userInfo: {
// name: 'zhang SAN ',
// phone: '123456',
// sex: male,
// province: 'Beijing ',
// City: 'Beijing ',
// region: 'changping ',
// orderNo: '123',
// price: '129',
// goodName: 'cap'
/ /}
// }
Copy the code

2.2 Proxy Mode

2.2.1 introduces

The proxy pattern provides an object with a proxy object that controls references to the original object. Generally speaking, the agency model is a common intermediary in our life.

2.2.2 Application Scenarios

1) Some inner classes do not want to or cannot be directly referenced by the external class, can use the proxy class as the connection to the external class;

2) Function expansion, without modifying the delegate class, function expansion can be realized by adding the required functions in the proxy class, such as adding message notification, logging, caching, etc.

2.2.3 Simple Example

1) General second-hand book websites provide two ways to buy and sell books;

2) Duozhuoyu is a second-hand book platform I often use. It can be regarded as an agent service, and the delivery service of Duozhuoyu uses the fast delivery and pick-up service of SF Express.

/** * The website provides two ways to buy and sell second-hand books */
class BookTrading {
  // Buy books
  buyBook(props) {
    props = props ? props : {};
    let res = 'Bought' + props.amount + 'this' + props.name;
    console.log(res);
  }
  // Sell books
  recoveryBook(props) {
    props = props ? props : {};
    let res = 'Sold' + props.amount + 'this' + props.name;
    console.log(res); }}/** ** more catch fish second-hand book trading platform */
class Duozhuayu extends BookTrading {
  constructor() {
    super(a); }buy(props) {
    // Buy books
    this.buyBook(props);
  }
  buyDelivery(props) {
    // Buy books
    console.log(Sf Express One-day delivery:);
    this.buyBook(props);
  }
  recovery(props) {
    // Sell books
    this.buyBook(props);
  }
  recoveryPickUp(props) {
    console.log('SF Pick-up :');
    this.recoveryBook(props); }}const duozhuayu = new Duozhuayu();
duozhuayu.buy({ name: 'Bookshop Diary'.amount: 2 });
duozhuayu.buyDelivery({ name: 'Chinese Geographical Journal'.amount: 5 });
duozhuayu.recovery({ name: 'Rabble'.amount: 1 });
duozhuayu.recoveryPickUp({ name: 'Outsider'.amount: 1 });
// Print the result
// Buy 2 bookshop diaries
// Sf Express one-day delivery:
// Purchased 5 copies of Chinese Geographic magazines
// Buy 1 copy of the mob
// Sf pick-up:
// Sell 1 outsider
Copy the code

Other design pattern learning will continue to update this article.

Third, summary

As I learned, I realized that some design patterns had been applied in actual development, but I didn’t know that the functional design was a design pattern at the time.

Even if the original is not good at the technology, through continuous learning, can find new development ideas.

I plan to find time to look through my previous code and see if there is any new development idea or development plan. Even if the previous code can not easily touch it, it can also be used in the next demand.

To dig friends, love, grow to the sun

4. Refer to the article

zhuanlan.zhihu.com/p/133263261

Juejin. Cn/post / 684490…