집 > 기사 > 웹 프론트엔드 > js에서 MVVM 프레임워크 구현(자세한 튜토리얼)

js에서 MVVM 프레임워크 구현(자세한 튜토리얼)

亚连원래의: 2018-06-11 18:00:541840검색

아래에서는 js로 구현된 간단한 MVVM 프레임워크의 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

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

처음에는 자동 바인딩 이벤트만 했는데 나중에 vue, knockout, argular 구현 방법을 배우고, 제가 WPF를 만들어본 경험을 합쳐서 오늘은 조금 정리해서 좀 개선해봤습니다. , 코드 클라우드에 코드를 제출했습니다: 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: &#39;xiaoming&#39;,
    age: 3,
    desc: function() {
　　　　　　　　　　　　return this.name + &#39; likes looking little movie. he should take care of his body&#39; 
    }
   },
   format: function(val) {
    return val + &#39;岁&#39;
   },
   update: function() {
    this.name = &#39;this is a test&#39;
    this.age = 18
   }
  }
  $(&#39;body&#39;).controller()
 </script>

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

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

모든 속성은 데이터 노드 아래에 정의되어야 합니다. 내부 속성이 함수로 정의된 경우 복합 속성(예: desc)은 읽기 전용입니다. 프롬프트 오류가 다시 할당됩니다.

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

2. Instruction

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

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

3. 이벤트

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의 로컬 업데이트를 지원하지 않는다는 것입니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

js에서 MVVM 프레임워크 구현(자세한 튜토리얼)

관련 기사