DEV Community: Clark

JavaScript | Let's going to know about Queue structure!

Clark — Mon, 11 Oct 2021 11:56:35 +0000

The article original published on the my blog.

Hi guys! I am Clark, in the post I am going to try to through JavaScript share and implement Queue data structure, and I will pick the problem about Queue from the Leetcode! Let you guys know more about the application of Queue.

Queue

Data structure Queue is like the line up. If you want to pay for something, but the clerk is handling the first person of front you, at the situation, you need to in line and be the second person, if other people want to pay, he also need to in line. Until the clerk have handled the first people, you will become the first people.

Such process of FIFO(First in, first out) is what Queue structure doing and limiting.

On the other hand, the time complexity also is the point of Queue. For Queue, the execute time will same when you put in or take out item from Queue, whether the Queue own how many items. Queue have constant time complexity, that is O(1) time complexity.

So next we are going to stage of implement Queue!

Implement Queue

Because JavaScript didn't provide Queue structure, so if we want to use Queue structure in JavaScript then we need to implement by ourself.

So what is the method Queue need to use? For a simple Queue, the most basic methods is putting and taking items, that is the enqueue and dequeue.

First, create a Class named Queue, and declare constructor, enqueue and dequeue:

class Queue {
  constructor() {

  }

  enqueue(item) {

  }

  dequeue() {

  }
}

For the choice of implement way, though we can direct array structure of JavaScript and array methods, like below:

class Queue {
  constructor() {
    this.data = [];
  }

  enqueue(item) {
    this.data.unshift(item);
  }

  dequeue() {
    return this.data.pop();
  }
}

const queue = new Queue();

queue.enqueue(1); // put 1, current Queue: [1]
queue.enqueue(2); // put 2, current Queue: [2, 1]

console.log(queue.dequeue()); // took 1, current Queue: [2]

queue.enqueue(3); // put 3, current Queue: [3, 2]
console.log(queue.dequeue()); // took 2, current Queue: [3]

It looks like we have completed the FIFO part, but according to this comment, the execute time of unshift would depend the array own how many items, the below test case is from the comment:

If unshift is O(1) time complexity, then whether at any situation, the execute time of unshift should not be different. base on the above reason, so we can not implement Queue by array.

Let's think a different angle. besides the array of JavaScript, We can through object of JavaScript create a mapping table:

class Queue {
  constructor(){
    this.data = {};
    this.head = 0;
    this.tail = 0;
  }

  enqueue(item) {
    this.data[this.tail] = item;
    this.tail += 1;
  }

  dequeue() {
    if (this.tail === this.head) return undefined;
    const item = this.data[this.head];
    delete this.data[this.head];
    this.head += 1;
    return item;
  }
}

const queue = new Queue();

queue.enqueue(1); // put 1, current Queue: [1]
queue.enqueue(2); // put 2, current Queue: [2, 1]

console.log(queue.dequeue()); // took 1, current Queue: [2]

queue.enqueue(3); // put 3, current Queue: [3, 2]
console.log(queue.dequeue()); // took 2, current Queue: [3]

The result of execute is as same as implement by array. The above implement way is through tail as the position to put new items, and head is the position to take out items. Add tail by 1 when enqueue, delete the item of head position and add head by 1 when dequeue, because after we take out the item, the item will vanish from the queue.

Also because we implement through mapping table of object, so whether the Queue own how many items, the execute time of I put in or take out items from the Queue is same, that is O(1) time complexity. In this way, the above implement for Queue have followed the FIFO and time complexity of Queue. 🎉

The Problem About Queue

In the last section of this article, we are going to solve the problem of Leetcode, 1700. Number of Students Unable to Eat Lunch.

Put simply, the problem would give you two arrays, the first is students, the second is sandwiches. The value of the student and sandwiches would be 1 or 0, The student who value is 1 only take out the sandwich which value is 1, the student who value is 0 only take out the sandwich which value is 0. If the first sandwich is not up the first student street, the student will moved to the end of array, but if the first sandwich happens is up the first student street, the first student will take out the first sandwich and leave the array.

This continues until none of the students want to take the first sandwich, and we need to return how many student unable to eat sandwiches. So there are three situation:

situation 1

Students: [1,0,1,0] Sandwiches: [0,1,1]
Because the first student is 1, he will not take out the first sandwich which value is 0, so he will go to the end of array.
Students: [0,1,0,1] Sandwiches: [0,1,1]

situation 2

Students: [0,1,0,1] Sandwiches: [0,1,1]
Because the first student is 0, so he will take out the first sandwich which value is 0 and leave the array.
Students: [1,0,1] Sandwiches: [1,1]

situation 3

Students: [1,1,1] Sandwiches: [0,1,1]
The first sandwich value is 0, so have no any students want to take out the sandwich, hence there are three students unable eat sandwiches, return 3.

The way of solve problem need to put all students into the Queue, and use loop take the first students, check if the student want to eat the current the first sandwich, if the student want then take out the sandwich, else we need to put the student back to Queue. We can end the loop and return the count of students when have no any students want to take out the first sandwich.

Tidy up the above thinking, the solution is:

class MyQueue {
  /*
  constructor
  enqueue
  dequeue
  */

  contains(item) {
    return Object.keys(this.data).some(
      (key) => this.data[key] === item
    );
  }

  getSize() {
    return this.tail - this.head;
  }
}

var countStudents = function(students, sandwiches) {
  const studentQueue = new MyQueue();
  students.forEach((student) => {
    studentQueue.enqueue(student);
  });

  while (studentQueue.contains(sandwiches[0])) {
    const firstStudent = studentQueue.dequeue();
    if (firstStudent === sandwiches[0]) {
      sandwiches.shift();
    } else {
      studentQueue.enqueue(firstStudent);
    }
  }

  return studentQueue.getSize();
};

I added the contains and getSize methods in the MyQueue implement besides enqueue and dequeue. The contains can help me check if any students want to take out the first sandwich, and the getSize is help me to return remaining count of students.

Beside the above problem, if you want to find more problem to practice Queue, there are some interesting problem about Queue in the Leetcode, like 1670. Design Front Middle Back Queue or 225. Implement Stack using Queues!

Final word

At the begin of this article, I introduce the Queue data structure, and explain how to implement by JavaScript, then in the last of the article I solved a problem about Queue!

If above have any problem or mistake point, please comment below, I will reply as soon as I can! thanks for any response!

Reference

Thanks

Photo by Zichao Zhang on Unsplash

React | Write a unit test for custom hooks in ten minutes

Clark — Mon, 04 Oct 2021 14:24:31 +0000

The post original publish on the my blog: React | Write a unit test for custom hooks in ten minutes

Hello guys! I am Clark! I am going to sharing how to write a unit test for custom hooks!

Custom Hooks

Before we write the first unit test, we should have a custom hooks first. If you don't understand what is the custom hooks, I recommend you can read the official document about custom hooks first, or if you already known what is the custom hooks, you can continue to read:



import { useState, useEffect } from 'react';

const useCounter = (s, cb) => {
  const [count, setCount] = useState(s);
  const add = (addend = 1) => {
    setCount(count + addend);
  };

  useEffect(cb, [count]);

  return { count, add };
};

export default useCounter;

Above code snippet is a custom hooks name useCounter, the useCounter would manage the logic about counter. The return object include a current count and method of increase current count. On the other hand, useCounter receive two parameters, the first is the initial value of count, the second is a callback function, the callback function will execute after count changed.

So we can use useCounter like this:



import React from 'react'
import ReactDom from 'react-dom'
import useCounter from '../hooks/useCounter';

const Main = () => {
  const { count, add } = useCounter(5, () => { console.log('Here is the callBack') });
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => { add(3); }}>++</button>
    </div>
  );
};


ReactDom.render(<Main />, document.getElementById('root'));

Let's Test Custom Hooks

Beforehand

We would use react-hooks-testing-library write the unit test.

So the first step, we need to install react-hooks-testing-library and it dependent packages:



npm install --save-dev @testing-library/react-hooks react-test-renderer

Remainder, if you never write any unit tests, don't forget install jest:



npm install --save-dev jest

When you installed and we can start to write unit tests! There are two methods we need to know in react-hooks-testing-library. The first is renderHook, the second is act:

renderHook: The renderHook can render custom hook, you can operations the custom hook like in the component.
act: The act can execute the methods return from custom hook. For example, You can execute the add method of useCounter through act.

Ok! Let's write unit test!

Case 1

The first case is that I want to check default value of count will be zero. The unit test doesn't need to execute any methods so it doesn't need to use act, only need renderHook:



import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from '../hooks/useCounter';

describe('useCounter', () => {
  test(`Default value of `count` will be zero`, () => {
    const { result } = renderHook(() => useCounter());

    expect(result.current.count).toBe(0);
  });
});

The renderHook will return an object, we can get result from the object, and result.current is the state of custom hooks currently. So the unit test use the expect method check the result.current.count if to be zero.

Case 2

The second case is going to check if the add could correct change count:



import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from '../hooks/useCounter';

describe('useCounter', () => {

  /* Case 1: Default value of `count` will be zero */

  test('The `add` could correct change `count`', () => {
    const { result } = renderHook(() => useCounter());

    act(() => { result.current.add(3); });

    expect(result.current.count).toBe(3);
  });
});

In the above example, The act would received the function and execute that.

Case 3

The third case is going to check if callback function will trigger after the count changed. In this case besides the renderHook and act methods, also will use the mock:



import { renderHook, act } from '@testing-library/react-hooks';
import useCounter from '../hooks/useCounter';

describe('useCounter', () => {

  /* Case 1: Default value of `count` will be zero */

  /* Case 2: The `add` could correct change `count` */

  test(`The callBack function will trigger after add executed`, () => {
    const callBack = jest.fn();
    const { result } = renderHook(() => useCounter(0, callBack));

    act(() => { result.current.add(); });

    // useEffect will execute at begin,
    // so after the add function executed, count of callback executed will become to two times.
    expect(callBack.mock.calls.length).toBe(2);
  });
});

I think test custom hooks is easily than test component. But please make sure your version of react, react-dom and react-test-renderer all above 16.9.0, otherwise you will get the error below:

I have created the repository, the repository include all above unit test. if you want to try more, just clone!

If the content of article have any question or you have other opinion for unit test, all welcome to comment below!

Start learn styled components!(3)-You can styling any component you want!

Clark — Sun, 27 Sep 2020 15:55:37 +0000

The original post published on my blog: https://ms314006.github.io/Start-learn-styled-components-You-can-styling-any-component-you-want/

Hello guys, I am Clark! In this post I am going to continue share and practice about more styled components!

Styling any component

When I read this part in documentation of styled component, I think styled component is very powerful for me. In the post that I share about styled component before, we all know the styled can create a component with style you want and we can direct using or expanding it.

In this chapter, we will learning how to styling existing components instead of HTML tags!

Install react-router-dom

If we want to practice styling any component, we need to using components other element ui framework provide.

So first, we need to use react-router-dom in our project(I think this is a common thing), The Link provided bu react-router-dom is a prefect component let us try to styling through styled component.

npm i react-router-dom

Styling existing component

When we finished previous step, we can import Link from react-router-dom:

import React from 'react';
import { HashRouter, Link } from 'react-router-dom';

const App = () => (
  <HashRouter>
    <Link>I am a link</Link>
  </HashRouter>
);

export default App;

So...should we writing inline style? Link code below:

const App = () => (
  <HashRouter>
    <!--inline style-->
    <Link style={{ textDecoration: 'none' }}>
      I am a link
    </Link>
  </HashRouter>
);

No!

We can wrap the Link through like Button component of last post. The wrap way is same, just give styled the Link parameter. Code snippet show you different between inline style and through styled component:

import React from 'react';
import { HashRouter, Link } from 'react-router-dom';
import styled from 'styled-components';

const NoneDecorationLink = styled(Link)`
  text-decoration: none;
`;

const App = () => (
  <HashRouter>
    <!--inline style-->
    <Link style={{ textDecoration: 'none' }}>
      I am a link
    </Link>
    <br />
    <!--styled component-->
    <NoneDecorationLink>
      I am a style link
    </NoneDecorationLink>
  </HashRouter>
);

export default App;

I think the styled component is clearer than inline style, but the result is same:

Conclusion

So if we use styled component we don't need to consider how to expanding components provided by other element ui framework!

Start learn styled components!(2)-Extending Styles

Clark — Sun, 20 Sep 2020 15:56:04 +0000

The original post published on my blog: https://ms314006.github.io/start-learn-styled-components-extending-styles/

Hello guys, I am Clark! In this post I am going to share more about styled components I learn. If you don't know what is styled components, you can go to last post, I had introduce what is it.

Extending Styles

If we using styled components in our project then we can through more way like program language to define CSS, the extending styles is good example among styled components.

We can defined a styled component call Button, in this styled component I defined some base CSS:

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  border: 1px solid black;
  border-radius: 5px;
  font-size: 20px;
`;

const App = () => (
  <>
    <Button>Base Button</Button>
  </>
);

export default App;

The result of code above:

The button look awesome, but if I want to change color of button's border and keep others style, what can we do?

Create another styled components?

const DangerousButton = styled.button`
  border: 1px solid red;
  border-radius: 5px;
  font-size: 20px;
`;

No!

You can through extending styles to finish same thing above and more beautiful, easier to maintain.

The way to using extending styles is give a based styled components when you create a new styled components, like code below:

const Button = styled.button`
  border: 1px solid black;
  border-radius: 5px;
  font-size: 20px;
`;

const DangerousButton = styled(Button)`
  border: 1px solid red;
`;

The DangerousButton will extended style of Button and override the style of same setting, such as border in the example above.

So the result will be:

So good, right? In addition, you can just change the tag name, if you want to using other tags and keep the style of same setting. In other words you can extends the same style when you using other tags. The way is that add as props and give tag name you want to render when you using the styled components.

So if I want to extend the style of Button and render to the a or div, you can through as props give a or div when you using Button:

const App = () => (
  <>
    <Button as="a" href="https://dev.to">Base Button</Button>
    <Button as="div">Base Button</Button>
  </>
);

The result above, the Button will be render to div and a:

Conclusion

So according to this post I said that using styled component can allow us to defined style in a way similar to program language. Styled component is very convenience and interesting! 😃

Start learn styled components!(1)-what is it and how to install and use?

Clark — Sun, 09 Aug 2020 18:04:00 +0000

The original post published on my blog: https://ms314006.github.io/start-learn-styled-components-what-is-it-and-how-to-install/

Hello guys, I'm Clark! Today I am not really going to share a power skill in this post, but I am going to talk the process about I learning styled components. I hope you can learn something from my share or every beginner can learn what is styled components and how to use it?

What is styled components?

From we can knew the official document:

styled-components is the result of wondering how we could enhance CSS for styling React component systems.

So I think that is useful and helpful, if we apply styled components in our react project(But I have no a real answer, maybe we can find it together or you can comment your opinion below, anything thanks!).

Create a React project

In this series, I will use create-react-app create a React project. So whether you had installed create-react-app, as long as you installed node and npm(If you didn't, you can reference this post).

you can run command below, if you prepared:

npx create-react-app practice-styled-components

When you finished it, we would have a best environment to practice styled components.

Install styled-components

Next, we should install styled components if we want to use it. So type following:

npm install --save styled-components

Make a first styled component

First, we would delete the src/App.css file because we don't need CSS file now, and remove the code of App component from src/App.js. Besides I also refactor the way of defined function component:

// Ignore others code...
import App.css; // <== Please remove this line.

const App = () => (
  <div></div>
);

Next in the same file, I defined a simple styled component and don't forget import your library styled-components, like this:

// Ignore others code...

import styled from 'styled-components';

const Title = styled.div`
  font-size: 32px;
  color: #0f4c75;
`;

The styled.div would create a component which only have a div tag, in this div everything will use style you written. So I think the code above is like:

const Title = (props) => (
  <div style={{ fontSize: 32, color: '#0f4c75' }}>
    {props.children}
  </div>
)

So we can use Title like components:

// Ignore others code...

const App = () => (
  <Title>
    Hello world!
  </Title>
);

The result of code above:

The gist.

Receive Props

We already knew the styled component is a component, so it can receive props is very normal. Let's learn it below!

In the styled component. Styled components can receive props through a parameter of function, the function will return a string, the string is a result you want to set in the style. Like following:

const Title = styled.div`
  font-size: 32px;
  color: ${props => props.color ? props.color : '#0f4c75'};
`;

So we can set any color in the styled component:

const App = () => (
  <>
    <Title>Hello world!</Title>
    <Title color="#fdcb9e">Hello world!</Title>
  </>
);

The result:

The gist.

Conclusion

In this post we learned what is styled components, install it, how to use it and receive props in styled components. I had provided gist for each example, the gist have complete code, if you have any question or opinion please comment below let me know, I would thank for any comment!

How to install npm through NVM(Node version manager)?

Clark — Sun, 02 Aug 2020 14:31:12 +0000

The original post published on my blog: https://ms314006.github.io/how-to-install-npm-through-NVM-node-version-manager/

Hello guys, I am Clark! In this post I am going to share about install npm. In the official document of npm, you can install npm through two way, and npm is node package manager, so the two way are all related to node.

The first way is node installer which I always did when I want to install npm before, because this way is easily, you just need to go to the website of node, download the node installer and install it(Whatever you choose the LTS or Current version), you will got npm when you finished.

The second way is through NVM, also is main way I want to share in this post. But I never do it, so if any mistake I did, please comment below let me know, thanks!

What is the NVM

The NVM meaning is node version manager, according to the official document, something we can know:

This way is more recommend than node installer.
You can install and switch between multiple versions of node and npm in your device.

So if we choose the NVM, we can test if our application work well on different version of node. It sounds nice! Let's install NVM!

Window

If your device's OS is window, you can download the latest NVM installer from releases. Install NVM on the window is more easily than on the macOS I think.

If you finished download and install, you could open command line and type nvm, that would look like this if you success install NVM:

macOS

If your device's OS is macOS, you can execute a command below through terminal(According to here):



curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

If you finished the step and you already have installed npm before then NVM would check all modules you installed and ask if you want to uninstall they from global:

Because if you installed the NVM, your original node and npm will be overwritten by NVM. But this step we will handle later, because we have something not yet finished.

My terminal is using zsh(The latest macOS Catalina default terminal is use zsh), so I need a a new terminal window and add the following to file ./zshrc, if your terminal is not zsh, please add in file ./bash_profile:



vim ~/.zshrc

And type i to start editing it, and paste the following:



export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

After you paste the command above, you can click button esc on keyboard, continue type :wq and enter it:

If you finished above all thing, please you close and reopen a new terminal then type nvm check if you successful installed:

Next if you want to use current versions of node and npm through your NVM, you can run following. The use also is command which you want to switch the version of node:



nvm use system

The NVM will apply versions of node and npm to the NVM, we can continue run command below check:



nvm ls

Anything will like you use node or npm before install NVM.

How to install other versions of node and npm

If you want to install other versions of node and npm, the first you can run following see all versions of node you can install:



nvm ls-remote

Next if I want to install latest LTS version of node v12.18.3, I can run following:



nvm install <version>

Then we can run the following command to check the version of node currently use by NVM:



nvm current

So if I want to install the v12.18.3 and check if it is successful switch to versions I installed:

So good! You also can uninstall version of node you don't want to use:



nvm uninstall <version>

Last, you should be know, the version of node would not influences each other, each version of node will be independent! So just take easy to using any version of node to develop your applications!

Final words

I hope this post can be helpful for you, and if you have any opinions or questions, please comment below, I would very appreciate every thing! :)

In my opinion, what is the difference between decorator and proxy pattern?

Clark — Sun, 19 Jul 2020 14:33:36 +0000

The original post published on my blog: https://ms314006.github.io/what-is-difference-between-decorator-pattern-and-proxy-pattern/

Hello guys! In this post, I am going to share what is the difference between decorator and proxy patter. But it is just my opinion, if you have others question or any opinions, please comment below let me know, I would super thanks!

And my English is not good, so I hope you will not mind it. If you have any suggestion, please comment below let me know. Thanks!

Introduction

In the last two weeks, I wrote two articles explaining about what is decorator and proxy pattern. I think these two pattern is quite similar. Like situation below.

If I have a class Computer:

class Computer {
  echo(something) {
    return something;
  }
}

const computer = new Computer();

console.log(computer.echo('hi'));  // hi

And I want to make method echo can be loudly through decorator pattern, like following code:

const decoratorLoud = (computer) => ({
  ...computer,
  echo: (something) => (
    computer.echo(something.toUpperCase())
  ),
});

const computer = decoratorLoud(new Computer());

console.log(computer.echo('hi'));  // HI

So, that is decorator pattern, right?

But!

Proxy pattern still can implement same thing above, like following:

const computer = new Computer();

const computerProxy = new Proxy(computer, {
  get: (target, prop) => {
    if (prop === 'echo') {
      return function() {
        return target.echo(arguments[0].toUpperCase());
      };
    }
    return target[prop];
  },
});

computerProxy.echo('hi');

Umm...so although I was through proxy pattern implement same feature, that still can be call decorator pattern?

Now, I would give you a little time to think that, and if you have any answers, just keep reading, I had sharing my opinions below 👇

My opinions

In my opinions, I would say: "Yes! Though I used proxy pattern implement, but that still can be call decorator pattern definitely."

The answer is surprise you? Maybe you want to ask that why? That is proxy pattern because I used proxy, not decorator!

Ok, I think this is a good moment that we can think something again.Did you see any syntax about decorator when I used decorator?

No you didn't, right?

So, it is very interesting thing about design pattern. even the implement of both is same,

but according to different situations, would decide what pattern is it.

Like example above, in this situation I expect to add some new logic(toUpperCase()) on original logic(return something). So the original logic(return something) is decorate with new logic(toUpperCase()).

On the other hand, we didn't control(get or set) any properties from original object(computer) through proxy(computerProxy). though I used proxy, it still only decorated for the method(echo).

We move on next example, I still have a class computer, and it have a another different method:

class Computer {
  _reset() {
    console.log('Reset!');
  }
}

In the class above, anyone can execute reset method, but I hope the method is a private. we can do that through proxy pattern:

const computer = new Computer();

const computerProxy = new Proxy(computer, {
  get: (target, prop) => {
    if(prop[0] === '_') {
      throw new Error(`Hey! don't do that!`);
    }
    return target[prop];
  },
});

computerProxy._reset(); // Uncaught Error: Hey! don't do that!

Look perfect! But can I say situation above is decorator pattern? I think the answer is negative. A most obvious thing is the result of executed method have not been decorate, proxy blocked execute.

Yes! I think the most difference is

Decorator would decorate logic before method executed, but the method will definitely execute.

Proxy would control get and set even method execute of object, when you want to do something form the object(So JavaScript call object be `target`, when you using `proxy` in the JavaScript).

Final words

When I started learning, I always confuse what is difference between decorator and proxy pattern, they are so similar when I think how to implement of them. But when I am learning a while, I gradually clear the difference between both.

I hope this post can be helpful for you, and if you have any opinions, please comment below, I would very appreciate every thing! :)

Thanks

Photo by Jason Dent on Unsplash

What is the proxy pattern? And how to implement it by JavaScript?

Clark — Sat, 11 Jul 2020 16:28:21 +0000

Originally post on my blog: https://ms314006.github.io/what-is-the-proxy-pattern-and-how-to-implement-it-by-javascript/

Hello, guys! I am Clark. In this post, we are going to learn about proxy pattern. In JavaScript proxy pattern is not as same as others pattern, because JavaScript provided a new syntax, that can enable you create to a proxy object easily. So I think implement proxy pattern is not difficult question in JavaScript.

Even the way using proxy is easy, I still want to explain why we need to use proxy pattern. I think that is a little bit difficult for me, but I will try my best. And My English is not good, so I hope you will not mind it. If you can correct anything of my post, I will appreciate for ever comment.

Introduction

Proxy pattern use when if you want to access a property of object, but also want to add some logic when you access the property. We follow Open-Closed Principle so we wouldn't add others logic in original Object, and avoid some chance you modify or add something in object will broken original logic in future.

How to use proxy pattern?

Basic usage

In JavaScript create a basic proxy object is really easy. Just like snippet below:

// original object
const person = {
  firstName: 'Lena',
  lastName: 'Smith',
};

// use proxy add logic on person
const personProxy = new Proxy(person, {
  get: (target, prop) => {
    if(prop === 'fullName') {
      return `${target.firstName} ${target.lastName}`;
    }
    return target[prop];
  },
});

// throw the proxy object, we can get full name
personProxy.fullName; // "Lena Smith"

In the example above , we see get when we create a proxy object. If we want to access something from proxy object, like as personProxy.fullName then it will into the get method to decide what is the proxy object should return.

And get would have two parameters. The first is target, it is original object, so in the get method we can access original object through access target. The second is prop, it is the property name we want to access.

So according to example above, we can know how to create a basic proxy object and use it. Besides we also can use the proxy object access non-existent properties(like as fullName).

Implement private properties in object

Next the proxy pattern also can make some logic to implement private property in object. In the others program languages we add '_' at forward of properties name, like as:

const person = {
  firstName: 'Lena',
  lastName: 'Smith',
  _age: 26, // Yes, the age is secret, right? :)
};

But in the JavaScript, even if we add the _ at forward of properties name, we still can access it:

person._age; // 26

The result above is not we want, so in the this situation we can use proxy pattern handle it.

const personProxy = new Proxy(person, {
  get: (target, prop) => {
    if(prop[0] === '_') {
      return undefined;
    }
    return target[prop];
  },
});

personProxy._age; // undefined

The example above. We check properties name you want to access in the get method, if first letter is '_' then return undefined or if you want to throw a error.

If you want to check something when modify object properties

We have completed inaccessible private properties by proxy pattern, but we still can modify it:

personProxy._age = 25;

And the private properties have been modified. I think we must solve this problem. So besides get method, we can use set method when we want to set properties, Like as:

const personProxy = new Proxy(person, {
  get: (target, prop) => {
    if(prop[0] === '_') {
      return undefined;
    }
    return target[prop];
  },
  set: (target, prop, value) => {
    if(prop[0] === '_') {
      throw Error(`Hey, don't set private properties!`);
    }
    target[prop] = value;
  },
});

We can notice set method have three parameters. The first and the second is as same as get. The third is a value you want to set for properties. So the example above we check the properties name, if it isn't private properties then set for object properties you want to set value. But if it is private, the proxy will throw a error, like as:

I showed the some useful examples you can consider using proxy pattern. And the following is another suitable situation you also can use proxy pattern:

Verify some value when you set for properties.

If you have any idea or you are implementing proxy pattern in some situation, please comment below we can more discussion, I am super thanks!

Final words

Proxy pattern is very interesting pattern because it can let you access exist or non-existent property, even not allow you access(I think that is the most different between decorator and proxy pattern, if you confuse both before, some opinion I will share in next post).

But in this post, I just Introduce a basic usage of proxy pattern. If you want to learn more approach for use proxy pattern, I recommend read MDN document, I think that is clear enough.

Thanks for you guys read, any comments and feedback are super welcome!

Thanks

Photo by Austin Distel on Unsplash

What is the decorator pattern? And how to implement it by JavaScript?

Clark — Wed, 01 Jul 2020 16:47:05 +0000

Originally post on my blog: What is the decorator pattern? And how to implement it by JavaScript?

Hello you guys! I am Clark. In this post we are going to learn about decorator pattern and implement it by JavaScript!

First of all, my English is not good and hope you will not mind it. If you can correct anything of my post, I will really appreciate for every comment!

Introduction

Decorator pattern is very beautiful pattern, It is implement perfectly Open-Closed Principle. When we finished any class's main function, Except main requirement or logic are changes, we shouldn't modify it. Maybe you are thinking

Why? Why I can't do that?

Okay! Let me talk a simple example below, if I have a class can print something on console of browser:

class Printer {
  print(text) {
    console.log(text);
  }
}

const printerA = new Printer();
printerA.print('something'); // something

And next, the customer said: "Oh! The text's color is too boring! Can you change the text color to yellow?". Sure, just modify as follow:

class Printer {
  print(text) {
    console.log(`%c${text}`,'color: yellow;');
  }
}

When you thinking everything is fine, your customer came again and said: "Hey, can you enlarge size of font? It is too small!". "Umm...Okay!" you said, And modify again as following:

class Printer {
  print(text) {
    console.log(`%c${text}`,'color: yellow;font-size: 36px;');
  }
}

Okay, it is last?

No!

You not only have a one customer, right? So another customer said: "Hey! the size of font too big! Can you change back to original size of font?"

Umm...so what should we do? Maybe we can think some way to resolve the problem:

Just send a parameter to determine style of print when create object by new, I think this is not a good solution, because if your customer become more then your if or switch will become more. the one thing wrong importantly of the way is class Printer just need print, so if you put other logic in it then in the future that will be difficult to modify.
Maybe we can use inheritance, create derived classes for each customer. Yes! that would be awesome, but! if the first customer want to text color shown in red, the second customer want to text color shown in red and set the size of font for 36px. Now just two customer but your code already repeat twice in two derived classes.

So what should we do?

Decorator pattern would be a awesome option! If you want to do a thing(The thing is print of above example), but before you do that, you must do other things and you don't know how many thing you should do(like set for the text's color and the size of font), than decorator pattern can decorate a thing you want to do!

How to use decorator pattern?

I will refactory above example by decorator pattern!

First we should do something for print, so I will create a new method override original print method, but still call it inside new method, and we can pass style for original print through new method:

class Printer {
  print(text, style = '') {
    console.log(`%c${text}`, style);
  }
}

// decorator method
const yellowStyle = (printer) => ({
  ...printer,
  print: (text) => {
    printer.print(text, 'color: yellow;');
  }
});

The printer object by Printer create can decorate with yellowStyle, make text's color become yellow:

So you can according to requirements make a lot of decorator you need, like following:

// decorator methods
const yellowStyle = (printer) => ({
  ...printer,
  print: (text, style = '') => {
    printer.print(text, `${style}color: yellow;`);
  }
});

const boldStyle = (printer) => ({
  ...printer,
  print: (text, style = '') => {
    printer.print(text, `${style}font-weight: bold;`);
  }
});

const bigSizeStyle = (printer) => ({
  ...printer,
  print: (text, style = '') => {
    printer.print(text, `${style}font-size: 36px;`);
  }
});

And through decorator methods compose which you want to display style:

So good! Right? but above example is suboptimal, because I used ... to get properties of object, but some thing would not exist in the object like methods, the method would store in prototype, so if I just want to through ... get all things from object, that will be wrong!

For solve this problem, the solution is make a public function to copy another same object include methods of prototype:

const copyObj = (originObj) => {
  const originPrototype = Object.getPrototypeOf(originObj);
  let newObj = Object.create(originPrototype);

  const originObjOwnProperties = Object.getOwnPropertyNames(originObj);
  originObjOwnProperties.forEach((property) => {
    const prototypeDesc = Object.getOwnPropertyDescriptor(originObj, property);
     Object.defineProperty(newObj, property, prototypeDesc);
  });

  return newObj;
}

Next we need to update content of decorator methods, I talk yellowStyle as an example:

const yellowStyle = (printer) => {
  const decorator = copyObj(printer);

  decorator.print = (text, style = '') => {
    printer.print(text, `${style}color: yellow;`);
  };

  return decorator;
};

Check out complete example here.

Following is another suitable situation you can consider using decorator pattern:

If you want to publish a post.

What things you want to do(decorate) before publish?

Send mail for subscribers
Push notice to Slack
Push post on Facebook page

Final words

I think decorator is super good pattern, I like decorator because it like our life, one day we will all die, but before we die, we can make a lot of decorator to decorate our life!

Thanks for you guys read, comments and feedback are super welcome!

Thanks

Photo by Element5 Digital on Unsplash

How to package front-end projects into Docker images and use it with webpack

Clark — Sat, 20 Jun 2020 08:10:03 +0000

Originally post: https://ms314006.github.io/how-to-package-front-end-projects-into-Docker-images-and-use-it-with-webpack/

Hello guys! I am Clark! In this article I am going to share how to package front-end projects into Docker images with webpack.

Maybe someone thinks this is useless for front-end developer, but I think for me, developing a project in front-end is more complicated than before, and also include part of setting environment.

For example, if I want to run a project, I need to install node or I should install deno if this project using deno? I can't just run the project? and make the project work? and perhaps the project also need rely on database?

Can I easy to integrate and manage front-end projects with back-end projects?

You can!

Just choose docker and I think this is common way now.

But in this article I wouldn't talk part of back-end projects, if you guys want to know, please comment below let me know :)

Install docker

Okay, the first step still is install, please refers docker's document, I think it is clearest.

Create Dockerfile

If you want to build a docker image, you should throw Dockerfile. we will write something that about how do you want to execute the project and environment of execution of the project. Below is a basic context of Dockerfile:



FROM node:10.15.3-alpine
WORKDIR /app
COPY package.json ./
RUN npm install
COPY . ./
RUN npm run build

CMD ["npm", "run", "start"]

So, I will explain some point of above Dockerfile:

FROM: It is your target projects' environment of execution, my project is using node environment develop, so I written node and the version is 10.15.3, if you want to choose the others version you can check here.
WORKDIR: Docker will create a work folder, when you build a image.
COPY: It can copy any file or folder you want to WORKDIR, the first I copy package.json for next step.
RUN: During images building, docker will execute commands you wrote. So in this step I execute npm install which will install all the project dependent libraries according to package.json.

After installed libraries, I copy all files to WORKDIR and run a command npm run build for building the project.

CMD: When you builded a image, and you run the image, it will execute commands from CMD. If you want to run npm run start, you should write ["npm", "run", "start"].

Now is the great time, I want to talk about something you should pay attention if you using webpack-dev-server to run server, that is you need to add --host 0.0.0.0 to commands behind webpack-dev-server, I find it from this issue, but I still have no idea for the reason, if you know we can chat about it in the below comment! 😃

In the step, we create a Dockerfile, otherwise we also can create a .dockerignore which can ignore file or folder during building images. For example, maybe I don't want to copy node_modules to WORKDIR, because I will run npm install during building image, for that I can write below snippet in .dockerignore:



node_modules

After we finished above things, we can run the command which building a image:



docker build -t docker-app:1.0.0 .

We can type docker build to build a image, -t meaning is tag name, you can add tag name for your images, the format is image name:tag name, last is your path of project which you want to defined the project root path.

If have no display any problem, we type docker images in terminal, we can find out our image.

Run images

Next, please type below commands for run images:



docker run -p 8080:8080 45c5b8f47f9d

We can use docker run imageID format execute a image, and a same time, a container will started, our image will run in the container.

So our webpack-dev-server run our project on 8080 port, but it is running in the container, we need to export 8080 port of container to our 8080 port of localhost. For that, we need to add -p 8080:8080 into commands, the format is -p [port of localhost]:[part of container].

After running your images, we can type above commands to see running container with image.



docker ps

And we can open browser, enter localhost:8080 into url, the project is work 🎊:

If you want to stop or delete container and image you can refers below commands:



// delete images
docker rmi imageID

// stop containers
docker stop containerID

// delete containers
docker rm containerID

I hope this post can help you, if you have any questions or suggestion please let me know by below comment!

thanks for you read! 😃

Deploy your Deno apps to Heroku

Clark — Sat, 13 Jun 2020 15:15:42 +0000

originally post: Deploy your Deno apps to Heroku

Hello, guys! I am Clark! In this post, I am going to share about how to deploy your Deno applications to Heroku!

Ok, The first we need to have a Deno application. if you didn't download Deno in your system, you can refer to this page, or if you already download Deno, you can create a Deno applications folder and create a index.ts in the folder:

import { serve } from "https://deno.land/std@0.57.0/http/server.ts";

const s = serve({ port: 8000 });

for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}

When you finished, you can type below commend to run this Deno application:

deno run --allow-net index.ts

You can open browser and type http://localhost:8000/ into url:

Next, if we deploy a application to Heroku, Heroku will give me a port, we need to use this port instead of the 8080 we set. So we will use flags to help us parse port from args when our Deno applications running with Heroku.

For that, we need to edit our index.ts:

import { serve } from "https://deno.land/std@0.57.0/http/server.ts";
import { parse } from 'https://deno.land/std/flags/mod.ts';

const { args } = Deno;
const DEFAULT_PORT = 8000;
const argPort = parse(args).port;

const s = serve({ port: argPort ? Number(argPort) : DEFAULT_PORT });

for await (const req of s) {
  req.respond({ body: "Hello World\n" });
}

So far, look nice! Than, we need create Procfile file, Heroku will run commends from Procfile file, when we deployed our Deno applications:

web: deno run --allow-net=:${PORT} index.ts --port=${PORT}

Last, we go to website of Heroku, create a new application and switch to Settings page of the application:

And we pay attention to Buildpacks:

Before, we usually choose a Buildpack to run our commend, maybe nodejs, php, ruby or go. But now we need to set a environment to run Deno, and the most terrible thing is...Heroku have no Deno let us choose:

Don't worry, please enter below Buildpack URL to input box:

https://github.com/chibat/heroku-buildpack-deno.git

When we finished above steps, we just need to deploy our Deno applications to Heroku like as other applications. If you never deploy any applications to Heroku, you can refer to this part, but you don't need to type heroku create because you already did.

If you guys have any questions, please comment below and let me know. thank for you read!

Reference:

Deploy your first Deno Web App to Heroku

How to make a mock of arrow functions of classes for unit testing?

Clark — Fri, 05 Jun 2020 07:43:13 +0000

Hello, you guys! I am Clark! In this post I want to share how to make a mock of arrow functions of classes for unit testing. Because I read the document of Jest at yesterday, And I learned about ES6 Class Mocks, But in that page I saw a section:

Please note that if you use arrow functions in your classes, they will not be part of the mock. The reason for that is that arrow functions are not present on the object's prototype, they are merely properties holding a reference to a function.

So we can know that if you use arrow functions in classes then they will not be part of the mock. I think that is terrible, arrow functions is more common than before, but I still can't mock they? and the document also didn't explain what should we do if we used arrow functions in our classes.

Next I will use example of document to show this situation, we have two classes:

// sound-player.js
export default class SoundPlayer {
  constructor() {
    this.foo = 'bar';
  }

  playSoundFile(fileName) {
    console.log('Playing sound file ' + fileName);
  }
}

// sound-player-consumer.js
import SoundPlayer from './sound-player';

export default class SoundPlayerConsumer {
  constructor() {
    this.soundPlayer = new SoundPlayer();
  }

  playSomethingCool() {
    const coolSoundFileName = 'song.mp3';
    this.soundPlayer.playSoundFile(coolSoundFileName);
  }
}

I can easy make a mock for unit testing, like this:

import SoundPlayer from './sound-player';
import SoundPlayerConsumer from './sound-player-consumer';
jest.mock('./sound-player'); // SoundPlayer is now a mock constructor

beforeEach(() => {methods:
  SoundPlayer.mockClear();
});

it('We can check if the consumer called a method on the class instance', () => {

  const soundPlayerConsumer = new SoundPlayerConsumer();

  const coolSoundFileName = 'song.mp3';
  soundPlayerConsumer.playSomethingCool();

  // mock.instances is available with automatic mocks:
  const mockSoundPlayerInstance = SoundPlayer.mock.instances[0];
  const mockPlaySoundFile = mockSoundPlayerInstance.playSoundFile;
  expect(mockPlaySoundFile.mock.calls[0][0]).toEqual(coolSoundFileName);
});

It is work well:

But if I just changed playSoundFile of SoundPlayer to arrow functions, like this:

// sound-player.js
export default class SoundPlayer {
  constructor() {
    this.foo = 'bar';
  }

  playSoundFile = (fileName) => {
    console.log('Playing sound file ' + fileName);
  }
}

And run tests, The result will be fail:

So why should we do? The solution is really easy, you just need make a mock through jest.fn(), then defined your arrow functions in classes as the mock. like code below:

it('We can check if the consumer called a arrow functions on the class instance', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();

  // Use `jest.fn()` to set up mock of arrow functions.
  const mockPlaySoundFile = jest.fn();
  soundPlayerConsumer.soundPlayer.playSoundFile = mockPlaySoundFile;

  const coolSoundFileName = 'song.mp3';
  soundPlayerConsumer.playSomethingCool();

  expect(mockPlaySoundFile.mock.calls[0][0]).toEqual(coolSoundFileName);
});

The mock work well:

Please let me know, if you guys have any questions! :)

On the other hand, this post simultaneous published in my blog: How to make a mock of arrow functions of classes for unit testing?

peace

DEV Community: Clark

JavaScript | Let's going to know about Queue structure!

Queue

Implement Queue

The Problem About Queue

situation 1

situation 2

situation 3

Final word

Reference

Thanks

React | Write a unit test for custom hooks in ten minutes

Custom Hooks

Let's Test Custom Hooks

Beforehand

Case 1

Case 2

Case 3

Start learn styled components!(3)-You can styling any component you want!

Styling any component

Install react-router-dom

Styling existing component

No!

Conclusion

Start learn styled components!(2)-Extending Styles

Extending Styles

No!

Conclusion

Start learn styled components!(1)-what is it and how to install and use?

What is styled components?

Create a React project

Install styled-components

Make a first styled component

Receive Props

Conclusion

How to install npm through NVM(Node version manager)?

What is the NVM

Window

macOS

How to install other versions of node and npm

Final words

In my opinion, what is the difference between decorator and proxy pattern?

Introduction

But!

My opinions

but according to different situations, would decide what pattern is it.

Decorator would decorate logic before method executed, but the method will definitely execute.

Proxy would control get and set even method execute of object, when you want to do something form the object(So JavaScript call object be target, when you using proxy in the JavaScript).

Final words

Thanks

What is the proxy pattern? And how to implement it by JavaScript?

Introduction

How to use proxy pattern?

Basic usage

Implement private properties in object

If you want to check something when modify object properties

Final words

Thanks

What is the decorator pattern? And how to implement it by JavaScript?

Introduction

Why? Why I can't do that?

No!

So what should we do?

How to use decorator pattern?

If you want to publish a post.

Final words

Thanks

How to package front-end projects into Docker images and use it with webpack

You can!

Install docker

Create Dockerfile

Run images

Deploy your Deno apps to Heroku

How to make a mock of arrow functions of classes for unit testing?

Proxy would control get and set even method execute of object, when you want to do something form the object(So JavaScript call object be `target`, when you using `proxy` in the JavaScript).