westore
1.0.0
setData и более интуитивного опыта программирования. Просто update и больше не нужно использовать setData .
Архитектура Westore очень похожа на архитектуру MVP (модель-визит-presenter):
Слой магазина можно понимать как посредник в шаблоне медиатора , уменьшая количество отношений между многими ко многим между представлением и моделью до 0, и отвечает за транзитный контроль взаимодействия между представлением объекта представления и моделью объекта модели.
Поскольку проекты, выполняемые мини -программами, становятся все более и более сложными, разумная архитектура может улучшить масштабируемость и обслуживание мини -программ. Написание логики на страницу/компонент - это грех. Когда бизнес -логика станет сложной, страница/компонент станет все более и более раздутой и трудной для поддержания. Каждый раз, когда требования меняются, Westore определяет разумную архитектуру мини-программы, подходящую для мини-программ, делая базу проекта более надежной, простых в обслуживании и расширении.
npm i westore --saveNPM связанные с вопросами Ссылка: мини -программа Официальная документация: поддержка NPM
| проект | описывать |
|---|---|
| Вестер | Основной код Вестре |
| Вестре-пример | 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Универсальные модели не содержат рамки, и даже не стоит разделить эту логику для такой простой программы, но по мере расширения спроса вы найдете огромные преимущества этого. Итак, вот немного более сложный пример.
Скриншот игры:
Дизайн диаграмма:
Светло-синяя часть на картинке может быть повторно использована в мини-программной змеи, мини-игре змеи и веб-змеи, без изменения линии кода.
Скриншот приложения:
Дизайн диаграмма:
Легко -синяя часть на картинке может быть повторно использована в проектах Applet ToDoApp и Web 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'
} )Результатом различия является:
{ "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
}Ключи предыдущего раунда состояния. DATA в основном синхронизируются для обнаружения элементов, удаленных в массиве или ключах, удаленных в OBJ.
При улучшении опыта программирования это также позволяет избежать проблемы передачи большого количества новых данных каждый раз, когда SetData является самым коротким обновлением пути SetData.
Поэтому, когда вы не используете Westore, вы часто можете видеть такой код:
После использования Westore:
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) С текущей точки зрения, большинство мини -программных проектов накапливают бизнес -логику в конструкторе страницы мини -программы, и в основном нет читаемости, что приносит огромные затраты на более позднее обслуживание. Цель архитектуры Westore вызывает логику бизнеса/игры. Страница - это чистая страница. Он отвечает только за отображение и получение пользовательского ввода, щелчок, скольжение, длинное нажатие или другие команды жеста, а также пересылку инструкции в магазин. Затем магазин вызывает модель реальной логики программы. Эта иерархическая граница ясна, с сильным обслуживанием, расширяемостью и тестируемостью. Размер одного файлового модуля также может контролироваться очень подходящим образом.
Грань
