Vue와 같은 jQuery 냄새, 이 작은 플러그인은 마법입니다!

안녕하세요 오랜만에 돌아왔습니다.

오늘은 제가 작성한 jQuery 플러그인을 소개하겠습니다. 예, 저는 jQuery를 포기하지 않았습니다. 왜냐하면 많은 오래된 시스템이 jQuery를 사용하고 있고 리팩터링할 수 없으며 심지어 IE8을 지원해야 하기 때문입니다. 그것은 강력한 UI 기반 라이브러리이지만 오늘날에는 반응이 하늘을 덮고 있습니다. 나도 반응을 좋아하지만 반응도 UI 라이브러리라고 생각했는데 차이점은 무엇입니까? 반응성!!! React는 반응형 UI libaray이지만 jQuery는 그렇지 않습니다. jQuery를 반응형 라이브러리로 만들 수 있습니까? 여기 내 대답이 있습니다.



https://github.com/tangshuang/jqvm

한눈에 보기

MVVM 패턴을 따르는 jQvm(jQuery 보기 모델)이라는 수백 줄의 비용이 드는 jQuery용 작은 플러그인을 작성했습니다. jQuery에 익숙하다면 익숙한 방식으로 jQuery 플러그인으로 사용하게 됩니다. 이전 jQuery 시스템을 리팩터링해야 하는 경우 jQvm이 옵션일 수 있습니다.

이제 살펴 보겠습니다.

<template id="app">
  <span>{{name}}</span>
  <span>{{age}}</span>
  <button jq-on="click:grow">Grow</button>
</template>

<script>
  $('#app')
      .vm({ name: 'tom', age: 10 })
      .fn('grow', state => state.age ++)
      .mount()
</script>

예, 템플릿 섹션과 jQuery 플러그인 사용이 완료되었습니다!
플러그인을 가져오려면 CDN을 사용할 수 있습니다.

<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jqvm/dist/jqvm.min.js"></script>

코드를 컴파일하거나 빌드할 필요가 없으며 너무 가벼워서 오래된 웹사이트에서도 사용할 수 있습니다.

(jQvm은 jQuery 3.6.x를 기반으로 하며 Object.defineProperty를 사용하여 반응형 시스템을 구현합니다. 이전 브라우저의 경고를 해결하기 위해 약간의 polyfill이 필요할 수 있습니다.)

특징

좋아, vue가 제공하지만 jqvm에는 없는 jqvm의 기능에 대해 의심하고 있다는 것을 알고 있습니다. 검토해 보겠습니다.

가변 반응성

vue에서 this의 속성을 수정하여 rerenderer를 트리거할 수 있으며 jQvm에서도 동일합니다.

$(...).vm(...)
  .fn('change', state => e => state.value = e.target.value)

rerenderer를 트리거하도록 직접 변경합니다state.

조건부 렌더링

vue에서 v-if를 사용하여 노드의 가시성을 제어할 수 있고 jQvm에서 ​​jq-if를 사용할 수 있습니다.

<div jq-if="age > 10">I am older than 10.</div>

루프 렌더링

vue에서 v-for를 사용하여 루프 세트를 렌더링하고 jQvm에서 ​​jq-repeat를 사용할 수 있습니다.

<div jq-repeat="value,index in data traceby value.id">
  <span>{{index + 1}}</span>
  <span>{{value.name}}</span>
  <span>{{value.time}}</span>
</div>

양방향 바인딩

vue에서는 v-model를 사용하여 양식 구성 요소 값을 데이터와 바인딩하고 jQvm에서는 jq-bind를 사용할 수 있습니다.

<input jq-bind="age" />

요소

vue에서는 현재 구성 요소에서 다른 vue 구성 요소를 사용할 수 있습니다. 그러나 jQvm에서는 다릅니다. jQvm에는 개념 View가 있으며 보기는 .vm에 의해 생성된 인스턴스입니다. 예를 들면 다음과 같습니다.

const myComp = $(...)
  .vm(() => ...) // notice here, you should better use a function to return initState
  .fn(...)
  .on(...)

마지막에 .mount()를 호출하지 않았으며 이view는 우리 시스템에서 사용되지 않는 단독 보기입니다. 이제 현재 보기에서 구성 요소로 사용할 수 있습니다.

<div id="app">
  <my-comp></my-comp>
</div>

<script>
$('#app').vm(...)
  .component('my-comp', myComp)
  .mount()
</script>

소품을 사용하면 이벤트를 전달하고 받을 수 있습니다.

<div id="app">
  <my-comp type="search" :count="count" @change="handleChange"></my-comp>
</div>

<script>
const myComp = $(`
  <template>
    <i class="icon icon-{{type}}"></i>
    <span>{{count}}</span>
    <button>plus</button>
  </template>
`)
  .vm(() => ({ count: 0, type: 'text' }))
  .on('click', 'button', function(state) {
    this.emit('change', state.count + 1)
  })
$('#app').vm({ count: 4 })
  .component('my-comp', myComp)
  .fn('handleChange', state => count => state.count = count)
  .mount()
</script>

이전 코드는 type :count 및 @change 소품을 my-comp 에 제공합니다.

더

그래! vue 같지 않나요? 더 많은 기능을 탐색할 수 있습니다here.

내가 그것을 쓴 이유(vue를 직접 사용하지 않는 이유)? 어떤 경우에는 내 응용 프로그램, 특히 jquery로 작성된 오래된 시스템을 향상시키기 위해 무거운 라이브러리/프레임워크가 필요하지 않기 때문입니다. 그리고 여가 시간에는 몇 가지 작은 도구를 작성하고 jQvm을 매우 빠르게 사용하여 UI를 구현할 수 있습니다.

좋은 아이디어라고 생각되시면 githubhere에 별점 부탁드립니다.

안녕~