Lodash를 Vue와 함께 사용하는 방법

Lodash 는 JavaScript 라이브러리로 좋은 것들이 많이 포함되어 있습니다🍬. 할로윈 사탕과 달리 이웃을 몇 바퀴 돌아야 추가 칼로리를 태울 수 있다는 뜻이다.이런 좋은 물건들은 흔히 볼 수 있는 실용적인 기능이기 때문에 너는 바퀴의 재발명을 피할 수 있다👍 네가 나 같은 창업 프로젝트에서 일할 때, 그것은 내가 매우 빠른 속도로 시작하고 운행하는 것을 도와준다🦸‍♀️

Vue를 사용하여 Lodash 설치

# Yarn
yarn add lodash

# NPM
npm i --save lodash

Vue에서 Lodash 사용

Vue 응용 프로그램에서 Lodash를 사용하기 시작하는 전형적인 방법은 Vue 구성 요소를 바탕으로 필요한 기능을 가져오는 것이다.이것이 바로 내가 너희들에게 보여줄 것이다.
하지만 모든 Vue 구성 요소에서 Lodash를 사용하려면 Stack Overflow 에서 설명을 찾았습니다.이런 방식은 약간의 결점이 있기 때문에 반드시 토론 내용을 읽어야 한다.이것은 내가 좋아하는 방식이 아니다. 왜냐하면 나는 구성 요소를 바탕으로 당신이 실제적으로 필요로 하는 함수를 가져오는 것이 가장 좋다고 생각하기 때문이다. 전체 라이브러리를 가져오는 것이 아니라.하지만 내가 결정하게 해줄게.🙂
네, Vue 구성 요소에서 Lodash를 어떻게 사용하는지 계속 살펴보겠습니다.🎢

A, 전체 Lodash 라이브러리 가져오기

다음 작업을 통해 모든 lodash를 가져올 수 있습니다.

<script>
import _ from 'lodash';

const range = _.range(1, 3); // [1, 2]
const random = _.random(0, 5); // an integer between 0 and 5
</script>

B, 특정 Lodash 함수 가져오기

전체 Lodash 라이브러리를 가져오는 것은 내 선택이 아니다.만약 네가 그들의 문서를 본다면, 많은 기능이 있다🤯 모든 가져오기를 통해 당신은 모든 불필요한 무게를 짊어졌습니다.gzip일 때 Lodash는 대략 24kB(크지 않음)입니다.하지만, 나는 이렇게 생각하는 것을 좋아한다. 나는 나의 여행을 어떻게 포장하는지 좋아한다.하면, 만약, 만약...🏝, 당신은 왜 귀중한 트렁크 공간을 겨울옷에 낭비합니까?따라서 우리는 같은 방식으로 응용 프로그램 패키지 크기를 대해야 한다.우리는 불필요한 내용을 추가하는 것을 피해야 한다. 이것은 우리의 응용 프로그램을 더욱 크게 만들 것이다.예쁘고 날씬하다는 것은 우리 사용자들이 더욱 빠른 성능 체험을 할 수 있다는 것을 의미한다.👏

B-1。기본 가져오기

특정 경로에서 직접 개별적으로 가져올 수 있습니다.

<script>
import _range from 'lodash/range';
import _random from 'lodash/random';

const range = _range(1, 3);
const random = _random(0, 5);
</script>

B-2。이름 지정 가져오기

lodash 에서 직접 가져올 수도 있습니다.

<script>
import { range, random } from 'lodash';

const range = range(1, 3);
const random = random(0, 5);
</script>

B-3。이름 가져오기 + 이름 바꾸기

하지만 나는 Lodash 함수를 구분하는 것을 좋아한다.따라서 as 를 사용하여 원하는 이름으로 이름을 바꿀 수 있습니다.약속은 _이기 때문에 나는 단지 그것을 나의 함수에 미리 걸었을 뿐이다.

<script>
import { range as _range, random as _random } from 'lodash';

const range = _range(1, 3);
const random = _random(0, 5);
</script>

B-1 승리!

저는 개인적으로 B-1을 선호합니다. 왜냐하면 저는 항상 Lodash 함수를 명확하게 식별하는 것을 좋아하기 때문입니다.물론, 나도 B-3를 사용할 수 있다. 비록 이것은 하나의import 문장에 있지만, 나는 여전히 이 모든 단독 이름 바꾸기를 처리해야 한다.그래서 나는 B-1이 나에게 있어서 가장 깨끗하고 읽는 것도 더 좋다는 것을 발견했다.

개선 토론💛

보시다시피 많은 프로그래밍 결정은 매우 주관적입니다.나는 어떤 사람들이 자신의 입장이 법치라는 것을 선포하는 데 매우 열중할 것이라는 것을 안다.그러나 대부분의 프로그래밍 선택은 주관적이다.컴퓨터는 정말 개의치 않는다.네, 대다수 사람들은 관례에 동의합니다.하지만 대회가 당신과 당신의 팀에 적합하지 않다고 생각한다면 관례에 어긋나도 틀림없다.나는 더 중요한 것은 일치성이라고 생각한다.만약 네가 규칙을 선택했다면, 그것을 견지해라.이것은 팀의 다른 사람들로 하여금 당신의 코드를 더욱 쉽게 이해할 수 있게 할 것이다.
나는 사람들이 이런 열정을 가지고 토론을 진행할 때, 이것은 정말 대단하다고 생각한다.제가 제일 좋아하는 건 tabs과space 사이의 변론입니다.😂 -- 쌍방의 열정을 보면 항상 재미있어요.🔥. 우리가 이 토론들을 존중하고 동정하는 태도로 대하기만 한다면, 나는 이러한 변론을 진행하는 것이 매우 좋다고 생각한다.그러나 존중과 동리심이 부족하면 이런 토론은 독이 될 수 있다.이런 상황이 발생했을 때, 그것은 재미없을 뿐만 아니라, 매우 무서울 수도 있다.그리고 사람들은 물러나 더 이상 참여하지 않을 것이다.우리는 사람들이 참여하기를 바란다. 이것이 바로 우리가 어떻게 더욱 좋고 창조적인 해결 방안을 실현하는가이다.
따라서 다음에 당신이 토론을 시작할 때 우리는 모두 적극적인 의도가 있다고 가정하고 서로 다른 관점을 존중하며 동리심을 전개합시다.나는 이것이 더욱 건설적이고 재미있는 토론을 초래할 것이라고 생각한다💛

정말 로다스가 필요하십니까?

아주 작은 응용 프로그램에 대해 나는 심지어 로다쉬를 걱정하지 않는다.나는 보통 그것을 더 큰 응용 프로그램에 사용한다.만약 네가 단지 친구와 함께 점심을 먹을 뿐이라면, 너는 정말 너의 트렁크를 가지고 갈 수 있니?나는 지갑이나 작은 가방 하나면 충분하다고 생각한다.물론 예외도 있다!이런 예외적인 상황은 사실상 너의 상황에 달려 있다. 너를 가장 잘 아는 사람은 바로 너다!그러니 너에게 맞는 일을 해라.내 기본값은 항상 더 적게 시작하고, 현실이 너에게 그렇지 않다고 말할 때, 그리고 층을 나눈다👍

너는 로다스가 필요 없어.

로다쉬의 귀여운 전언이 정말 필요하냐고 물어보면서 제 의견을 더욱 공고히 하고 이 귀여운 환매 협의를 지적해 드리겠습니다.👉 You Don't Need Lodash . 현대 JavaScript를 사용하면 로컬에서 많은 작업을 수행할 수 있습니다.자연이 제일 좋은 선택이에요.😆
다음은 세 가지 예입니다.

필터

const array = [1, 2, 3, 4, 5];

// Lodash
_.filter(array, value => value > 3);

// ✅ Vanilla
array.filter(value => value > 3);

눌러서 평평하게 하다

const array = [1, [2, [3, [4]], 5]];
// Lodash
_.flatten(array);

// ✅ Vanilla
array.flat();

... 에서 끝나다

// Lodash
_.endsWith('abc', 'c');

// ✅ Vanilla
'abc'.endsWith('c');

결론

하하, 이 글은 로다쉬 사용에 관한 것이지만, 하반기에 나는 네가 그것을 사용하는 것을 반대한다고 논쟁해 왔다.이것이 바로 생활 맞습니까😂 JavaScript는 처음부터 큰 발전을 이루었습니다.프로그래밍을 더욱 편리하게 하기 위해 더 많은 본체 함수가 있다.당신의 직업 생활에 있어서 바닐라나 원생 자바스크립트를 익히는 것이 로다쉬를 익히는 것보다 훨씬 낫다.하지만 Lodash 사용을 두려워하지 마세요.바퀴를 재발명하는 데 시간을 낭비하는 것을 방지할 수 있는 매우 유용한 기능이 있다.이것은 구축 도구를 걱정하지 않고 프로그램을 구축하는 데 더 많은 시간을 들일 수 있다는 것을 의미한다.
나의 경험법은 항상 일반적인 vanilla JavaScript에서 시작하며, 당신이 그것을 다 썼을 때, 다시 Lodash를 도입한다.제가 가장 좋아하는 명언 중 하나는'어떻게 알아요? 현실이 알려줄게요'.😄

리소스

Lodash

You Might Not Need Lodash

Stack Overflow: Using Lodash in all of Vue component

읽어주셔서 감사합니다.❤
더 많은 게시물을 보려면 방문samanthaming.com
🎨
🌟
👩🏻‍💻