SMVVM with RxSwift
原文鏈接:https://medium.com/smoke-swift-every-day/smvvm-with-rxswift-b3c1e00ca9b
A tale of a modern architecture for modern mobile applications.
- {failImgCache = [];}if(failImgCache.indexOf(src) == -1 && src.trim().length){failImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded'); " onload="var src = window.removeLastModifyQuery(this.getAttribute('src'));if(!src.trim()) return;if(loadedImgCache.indexOf(src) == -1 && src.trim().length){loadedImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">
The legend
Once upon a time on planet Program-1NG, our ancestors had to fight off the Asynchronous Dragon, Master of Time, which lived near the Pyramid of Doom in the barren lands of Callback Hell. His castle of Massive-View-Controller-on-the-Sea was heavily guarded by its most loyal minions: the Lady of Unresponsive-UI, the Prince of Race Conditions and the Clutter Monster. As the battle raged, day and night, for years, slowly driving our forefathers into insanity from exhaustion, a beacon of hope surfaced at the horizon. - {failImgCache = [];}if(failImgCache.indexOf(src) == -1 && src.trim().length){failImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded'); " onload="var src = window.removeLastModifyQuery(this.getAttribute('src'));if(!src.trim()) return;if(loadedImgCache.indexOf(src) == -1 && src.trim().length){loadedImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">His Holiness St. RX the First (Erik Meijer)
Seemingly out of nowhere, wielding a tremendous power, a wizard had appeared and handed enchanted weapons to our brave and relentless predecessors: the Sword of Observables, the M?n?d Hammer and the Functional Reactive Armor.
Easily defeating the Asynchronous Dragon, our ancestors studied the unlimited source of mightiness that was now at the cusp of their hands and proceeded to spread the Good Word and forge their own weapons, inspired by the Reactive Trinity; for when the Dragon would come back around, they and their children shall be ready.
SMVVM WTF
It’s not just another name for the sake of it; frankly, you could call it whatever you want. The point is to present a style of MVVM architecture that helps write clean and testable code with the sacro-saint “separation of concerns” at heart.
True, it might seem at times like overkill/waste of time when you spend 15mins just setting things up for the new screen you will be working on. Rest assured: you will save 100x that amount in the future when debugging or trying to figure out how to add a new feature. - {failImgCache = [];}if(failImgCache.indexOf(src) == -1 && src.trim().length){failImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-error').removeClass('md-img-loaded'); " onload="var src = window.removeLastModifyQuery(this.getAttribute('src'));if(!src.trim()) return;if(loadedImgCache.indexOf(src) == -1 && src.trim().length){loadedImgCache.push(src);}$(this).closest('.md-image').addClass('md-img-loaded').removeClass('md-img-error');" style="box-sizing: border-box; border-width: 0px 4px 0px 2px; border-right-style: solid; border-left-style: solid; border-right-color: transparent; border-left-color: transparent; vertical-align: middle; max-width: 100%; cursor: default;">This is basically SMVVM.
In a nutshell, SMVVM (or, you know, whatever) features:
**ViewControllers/Views: that’s the first “V”. **They will be the link between your user and the ViewModel. Basically the steering wheel and pedals of your app: they collect user input (location and speed) to be transmitted to the system and organise displaying the information through a windshield.
ViewControllers/Views是第一個"V".它們把用戶和ViewModel鏈接起來。就像你app的方向盤和踏板:它們采集了用戶的輸入(位置和速度))绷柒,傳遞給系統(tǒng)并組裝起來通過面板顯示信息志于。
**ViewModels: that’s the “VM” at the end. **Arguably the most important part of the architecture pattern. The ViewModel is basically the engine and wheels of your app: it connects and transforms both inputs from the user as well as from other parts of the system inaccessible to him/her in order to produce outputs that will ultimately, one way or another, be displayed on his/her windshield.
ViewModels: 它是結尾處的“VM”。這個結構范式無可爭論的最重要的部分废睦。ViewModel相當于你app的引擎和車輪:它連接和轉換來自用戶的輸入伺绽,以及系統(tǒng)的其他部分不可訪問的輸入,以產(chǎn)生最終以某種方式顯示在他/她的面板上的輸出嗜湃。
Services: that’s the “S” at the beginning. They are all the little mechanical parts (screws, straps, and so on) that support ViewModels by providing them the “building blocks” they need to perform their job. They are divided in two groups: helper structs
, which have a specific use case (i.e., intended for use by a particular ViewModel), and lower-level “base service” singletons which are used by multiple higher-level services (typically, networking).
Services:它是最開始的“S”奈应。它們是用來支撐ViewModels的所有小零件(螺絲,繩子等等)购披,為它們提供工作所需的“組裝塊”杖挣。它們被分配為兩組:helper structs,具有特定的用例(例如:由特定的ViewModel使用)刚陡,和底層基于服務的單例惩妇,它用于多種高層服務(通常為網(wǎng)絡服務)
**Models: that’s the first “M”. **Same as any architecture: this is the core of your app, which will come to life through the ViewModel.
模型:它是第一個“M”。像其他結構一樣:這是你app的核心筐乳,它通過ViewModel存活歌殃。
What should it look like?
Magnificent.
ViewControllers
Models: that’s your job ! (struct
s by default)