westore
1.0.0
setData 와보다 직관적 인 프로그래밍 경험을 위해 내부적으로 DeepClone + Datadiff를 사용합니다. 만 update 하고 더 이상 setData 사용할 필요가 없습니다.
Westore 아키텍처는 MVP (Model-View-Presenter) 아키텍처와 매우 유사합니다.
스토어 층은 중재자 패턴 의 중개자로 이해 될 수 있으며,보기와 모델 사이의 다수의 관계의 수를 0으로 줄이고, 뷰 객체보기와 모델 객체 모델 사이의 상호 작용의 전송 제어를 담당합니다.
미니 프로그램에 의해 수행되는 프로젝트가 점점 더 복잡해짐에 따라 합리적인 아키텍처는 미니 프로그램의 확장 성과 유지를 향상시킬 수 있습니다. 페이지/구성 요소에 논리를 쓰는 것은 죄입니다. 비즈니스 로직이 복잡해지면 페이지/구성 요소가 점점 더 부풀어 오르고 유지하기가 어려워집니다. 요구 사항이 변경 될 때마다 Westore는 모든 복잡성의 미니 프로그램에 적합한 합리적인 미니 프로그램 아키텍처를 정의하여 프로젝트 기반을보다 강력하고 유지 관리 및 확장 가능하게 만듭니다.
npm i westore --saveNPM 관련 문제 참조 : 미니 프로그램 공식 문서 : NPM 지원
| 프로젝트 | 설명하다 |
|---|---|
| Westore | Westore의 핵심 코드 |
| Westore-example | Westore 공식 사례 |
| Westore-example-ts | Westore 공식 사례 (TS+SCSS) |
클래스 다이어그램은 다음과 같습니다.
// 平台无关的 Model
import Counter from '../models/counter'
// 平台无关的 Model
import User from '../models/user'
import { Store } from 'westore'
// 页面 store，一个页面一个
class HomeStore extends Store {
constructor ( ) {
super ( )
this . data = {
count : 0 ,
motto : 'Hello World' ,
userInfo : null
}
// 消费 Model
this . counter = new Counter ( )
// 消费 Model
this . user = new User ( {
onUserInfoLoaded : ( ) => {
this . syncUserModel ( )
}
} )
this . syncCountModel ( )
}
// 同步 Model 的数据到 ViewModel 并更新视图
syncCountModel ( ) {
this . data . count = this . counter . count
this . update ( )
}
// 同步 Model 的数据到 ViewModel 并更新视图
syncUserModel ( ) {
this . data . motto = this . user . motto
this . data . userInfo = this . user . userInfo
this . update ( )
}
increment ( ) {
this . counter . increment ( )
this . syncCountModel ( )
}
decrement ( ) {
this . counter . decrement ( )
this . syncCountModel ( )
}
getUserProfile ( ) {
this . user . getUserProfile ( )
}
}
module . exports = new HomeStore범용 모델은 프레임 워크가 없으며, 이러한 간단한 프로그램을 위해이 논리를 분리 할 가치가 없지만 수요가 확장됨에 따라 그렇게하는 큰 이점이 있습니다. 여기에 조금 더 복잡한 예가 있습니다.
게임 스크린 샷 :
디자인 다이어그램 :
그림의 연한 파란색 부분은 코드 라인을 변경하지 않고 미니 프로그램 뱀, 미니 게임 뱀 및 웹 뱀 프로젝트에서 재사용 할 수 있습니다.
응용 프로그램 스크린 샷 :
디자인 다이어그램 :
사진의 연한 파란색 부분은 코드 줄을 변경하지 않고 애플릿 TodoApp 및 웹 토도 APP 프로젝트에서 재사용 할 수 있습니다.
공식적인 예는 뱀 과 Todoapp을 다음과 같이 미니 프로그램 디렉토리로 가져옵니다.
├─ models // 业务模型实体
│ └─ snake-game
│ ├─ game.js
│ └─ snake.js
│
│ ├─ log.js
│ ├─ todo.js
│ └─ user.js
│
├─ pages // 页面
│ ├─ game
│ ├─ index
│ ├─ logs
│ └─ other.js
│
├─ stores // 页面的数据逻辑，page 和 models 的桥接器
│ ├─ game-store.js
│ ├─ log-store.js
│ ├─ other-store.js
│ └─ user-store.js
│
├─ utils
자세한 코드를 보려면 여기를 클릭하십시오
경험을 위해 QR 코드를 스캔하십시오.
답변 SetData로 어디로 갔습니까? 이전에는 Westore가 왜이 API를 캡슐화하여 사용자가 직접 사용하지 않도록 생각해야합니다. 애플릿에서 setData 통해보기를 변경하십시오.
this . setData ( {
'array[0].text' : 'changed text'
} )그러나 직관적 인 프로그래밍 경험은 다음과 같습니다.
this . data . array [ 0 ] . text = 'changed text'데이터가 응답하지 않은 경우 수동으로 업데이트됩니다.
this . data . array [ 0 ] . text = 'changed text'
this . update ( )위의 프로그래밍 경험은 직관적이며 개발자 친화적입니다. 따라서 Westore는 SetData를 숨기고 개발자에게 직접 노출되지는 않지만 DiffData를 내부적으로 사용하여 가장 짧은 업데이트 경로를 만듭니다. 업데이트 방법 만 개발자에게 노출됩니다.
Westore Diffdata의 기능을 살펴 보겠습니다.
diff ( {
a : 1 , b : 2 , c : "str" , d : { e : [ 2 , { a : 4 } , 5 ] } , f : true , h : [ 1 ] , g : { a : [ 1 , 2 ] , j : 111 }
} , {
a : [ ] , b : "aa" , c : 3 , d : { e : [ 3 , { a : 3 } ] } , f : false , h : [ 1 , 2 ] , g : { a : [ 1 , 1 , 1 ] , i : "delete" } , k : 'del'
} )Diff의 결과는 다음과 같습니다.
{ "a" : 1 , "b" : 2 , "c" : "str" , "d.e[0]" : 2 , "d.e[1].a" : 4 , "d.e[2]" : 5 , "f" : true , "h" : [ 1 ] , "g.a" : [ 1 , 2 ] , "g.j" : 111 , "g.i" : null , "k" : null } 
Diff 원칙 :
export function diffData ( current , previous ) {
const result = { }
if ( ! previous ) return current
syncKeys ( current , previous )
_diff ( current , previous , '' , result )
return result
}이전 State.data의 키는 주로 동기화되어 배열에서 삭제 된 요소 또는 OBJ에서 삭제 된 키를 감지합니다.
프로그래밍 경험을 향상 시키지만 SetData가 SetData의 가장 짧은 경로 업데이트 일 때마다 많은 양의 새로운 데이터를 전달하는 문제를 피합니다.
따라서 Westore를 사용하지 않으면 종종 그러한 코드를 볼 수 있습니다.
Westore를 사용한 후 :
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) 현재의 관점에서 볼 때, 대부분의 미니 프로그램 프로젝트는 미니 프로그램의 페이지 생성자에 비즈니스 로직을 축적하며 기본적으로 가독성이 없으므로 나중에 유지 보수에 막대한 비용이 발생합니다. Westore Architecture의 목표는 비즈니스/게임 논리를 분리합니다. 페이지는 순수한 페이지입니다. 사용자 입력, 클릭, 슬라이딩, 긴 누르기 또는 기타 제스처 명령을 표시하고 수신하고 지침을 상점으로 전달하는 데 책임이 있습니다. 그런 다음 상점은 실제 프로그램 논리 모델을 호출합니다. 이 계층 적 경계는 강력한 유지 보수, 확장 성 및 테스트 가능성으로 명확합니다. 단일 파일 모듈의 크기도 매우 적절하게 제어 할 수 있습니다.
MIT
