Node.js는 간단한 MVVM 프레임워크 예제 공유를 구현합니다.

이 글은 주로 js로 구현된 간단한 MVVM 프레임워크의 예를 공유합니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

저는 정원에서 조용히 기사를 읽고 음란하게 좋아하곤 했습니다. 오늘은 js를 사용하여 구현한 간단한 mvvm 프레임워크를 공유하고 싶습니다.

처음에는 자동 바인딩 이벤트만 했는데 나중에 vue, knockout, argular 구현 방법을 배우고, 제가 WPF를 만들어본 경험을 합쳐서 오늘은 조금 정리해서 좀 개선해봤습니다. , Code Cloud에 코드를 제출했습니다: https://gitee.com/zlj_fy/Simple-MVVM

사용법을 간략하게 소개하겠습니다:

<form class="form-horizontal" role="form" data-context="TestController">
  <p class="form-group">
   <legend>Form title</legend>
  </p>
  <p class="form-group">
   <p class="col-sm-6 col-sm-offset-2">
    <input type="text" class="form-control" bind-val="age,format=format" style="margin:5px 0" />
    <input type="text" class="form-control" bind-val="desc" style="margin:5px 0" />
    <input type="range" min="10" max="300" bind-val="age" step="10" class="form-control" style="margin:5px 0" />
    <input type="button" class="btn btn-primary" value="更新" style="margin:5px 0" on-click="update" />
   </p>
  </p>
 </form>
 <script>
  var TestController = {
   data: {
    name: 'xiaoming',
    age: 3,
    desc: function() {
　　　　　　　　　　　　return this.name + ' likes looking little movie. he should take care of his body' 
    }
   },
   format: function(val) {
    return val + '岁'
   },
   update: function() {
    this.name = 'this is a test'
    this.age = 18
   }
  }
  $('body').controller()
 </script>

먼저 json 객체 또는 함수가 될 수 있는 컨트롤러를 정의합니다. 최상위 요소에 data-context="[컨트롤러 이름]"을 정의하여 컨트롤러를 노드 아래의 모든 요소에 바인딩합니다. 요소의 하위 항목에 중첩된 Controller가 있는 경우 해당 요소 아래에 있는 하위 요소의 범위는 하위 컨트롤러를 가리킵니다.

1. 모니터 속성 및 복합 속성

모든 속성은 데이터 노드 아래에 정의되어야 합니다. 내부 속성이 함수로 정의된 경우 복합 속성은 읽기 전용으로 간주됩니다. 재할당되면 오류 메시지가 표시됩니다.

html 요소에 바인딩된 형식: "{속성 이름, fomat=[컨트롤러 메서드]}", 속성 이름은 (a.b)와 같은 중첩 속성을 지원합니다. 속성 이름은 표현식을 지원하지 않으므로 그다지 유용하지 않습니다. 필요한 경우 대신 복잡한 속성을 사용할 수 있습니다. 현재 단점은 비즈니스가 복잡한 경우 속성 이름 오른쪽에 많은 수의 복잡한 속성이 생성될 수 있다는 것입니다. HTML에 표시할 속성을 변환하는 방법인 형식만 있습니다.

2. Instruction

바인딩 명령 구문은 현재 val, attr, text, html, template 만 구현되어 있음을 알 수 있습니다. jqeury 메소드를 캡슐화합니다. 템플릿은 jquery-tmpl 플러그인을 사용하여 구현됩니다. 추가 지침이 필요한 경우 init 초기 로딩 메소드(현재 관찰자 매개변수 수신)만 구현하면 됩니다. 메서드(매개변수 설명: 해당 jquery 요소, 최신 값, 현재 컨트롤러 인스턴스). 기존 명령어를 확장하는 경우 기본적으로 원래 명령어를 덮어씁니다. 다음과 같습니다:

$.controller.addDirective("val", {
  init: function (observer) {
   if (observer.$ele.is('input,select')) {
    //监听onchange事件
    observer.$ele.on('input propertychange', function () {
     var newVal = $(this).val()
     observer.writeValue(newVal)
    })
   }
  },
  update: function ($ele, newVal, controller) {
   $ele.val && $ele.val(newVal)
  }
 })

3. Event

Binding 이벤트 구문: on-{event}="{controller method}, type=on/one", 컨트롤러 메서드의 오른쪽은 선택적 매개변수이며 현재 바인딩만 가능합니다. 유형은 on /one이고 기본값은 on입니다. 컨트롤러 메소드는 두 개의 매개변수를 받습니다. 하나는 이벤트에 해당하는 요소에 설정할 수 있는 초기 매개변수이고 다른 하나는 이벤트 이벤트 매개변수입니다. 메소드

는 이를 속성 이름으로 직접 사용하며, 해당 데이터 노드 아래의 속성에 직접 접근할 수 있습니다.

5. 후크

init는 모든 속성을 모니터링한 후 dom을 컴파일하기 전에 생성됩니다.

컨트롤러는 기본적으로 확장 상속 메서드를 구현합니다. 이 메서드는 다른 컨트롤러를 상속할 수 있으며 init 메서드에서 사용해야 합니다. 현재 프로토타입 상속을 사용하여 직접 구현할 수도 있습니다.

<button type="button" class="btn btn-primary" data-page="1" on-click="refesh">查询</button>

6. Extension

모든 사람은 프로젝트를 수행할 때 반드시 공통 구성 요소 집합을 갖게 되므로 다음과 같이 확장할 수 있습니다. 기본적으로 해당 구성 요소는 모든 컨트롤러 예제에 탑재되며 해당 구성 요소가 해당될 수 있습니다. 메소드는 직접 호출됩니다. this.http.post()

그러나 콜백 메소드의 범위를 컨트롤러에 최대한 지정하여 범위 문제가 항상 발생하지 않도록 하는 제안이 있습니다. 개발 중에 발생합니다.

init: function () {
    this.extend(PageController)
   },
   created: function () {
    //TODO
   },

7. 원리 및 코드 분석(계속...)

전체 js 코드는 300줄이 넘으므로 구현이 비교적 간단하며, 고려되지 않은 부분도 있습니다. 또한 구현하고 싶은 기능도 있지만 아직 수행되지 않은 것은 배열 변경 감지 및 관련 DOM의 로컬 업데이트를 지원하지 않는다는 것입니다.

관련 추천:

MVC, MVP, MVVM이 각각 무엇인지 소개하세요

MVVM 아키텍처와 데이터 바인딩이란 무엇인가요?

Vue.js 및 MVVM에 대한 참고 사항

위 내용은 Node.js는 간단한 MVVM 프레임워크 예제 공유를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!