作者 Tamic
MVC 起源和發展!
MVP其實我接觸已經三年了,本文的實踐也是在17年做基礎框架實踐的,今天放出來也是為了分享給需要這快東西的同學,面試足夠了,好東西不能雪藏。
1 起源
MVC:全稱:Model - View - Controller,它是於1970年的時候有TrygveReenskaug在Smalltalk-80系統上首次提出。起初並不是MVC,而是MVCE,也就是Model - View - Controller後面多了一個Editor。但是當時提出MVC的理念和現在的理念大致是一樣的。都是為了將資料模型和檢視層分離開來。
其實MVC是一種框架模式,而非設計模式,GOF把MVC看做是3中設計模式:《觀察者模式》、《策略模式》,《組合模式》三者的合體。其核心是《觀察者模式》。
前期的mvc主要用在桌面程式,脫離web的程式設計年代!
2 理解
MVC 主要分三層,模型——檢視——控制器。為了使得程式的各個部分分離降低耦合性,我們對程式碼的結構進行了劃分。 他們的通訊方式也如上圖所示,即View層觸發操作通知到業務層完成邏輯處理,業務層完成業務邏輯之後通知Model層更新資料,資料更新完之後通知View層展現。
Controller充當觀察者角色,Model和View是被觀察者角色,兩者任意一方發生變化則通知Controller去控制對方。
3 優點
3.1 三層解耦,將資料和view隔離,通過Controller 去做資料和檢視的互動橋樑!
3.2 滿足client程式設計需求,易維護和擴充套件!
4 缺點
4.1 Controller 職責過於繁重
4.2 不滿足網路程式設計下的非同步請求造成的 Model和view的斷層,所謂的頁面抖動!
4.3 資料和檢視任意一方發生變化,則在不想更改對方的情況下,需要Controller 做處理,職責收斂太嚴重!
5 展望
有沒有一種架構模式,減輕控制器的職責。能在Model和view之間自我通訊,無需中間人橋接,並滿足在web程式設計時期的非同步帶去的各種不同步問題?,那麼mvp和MVVM就先後出現了, 下節繼續學習MVP。
其實無需太多程式碼,只要一幅圖就能看懂!
MVP
作為一種新的模式,MVP與MVC有著一個重大的區別:在MVP中View並不直接使用Model,它們之間的通訊是通過Presenter (MVC中的Controller)來進行的,所有的互動都發生在Presenter內部,而在MVC中View會直接從Model中讀取資料而不是通過 Controller。 在MVC裡,View是可以直接訪問Model的!從而,View裡會包含Model資訊,不可避免的還要包括一些業務邏輯。 在MVC模型裡,更關注的Model的不變,而同時有多個對Model的不同顯示,即View。所以,在MVC模型裡,Model不依賴於View,但是View是依賴於Model的。不僅如此,因為有一些業務邏輯在View裡實現了,導致要更改View也是比較困難的,至少那些業務邏輯是無法重用的。
MVP模式的核心:
MVP把Activity中的UI邏輯抽象成View介面,把業務邏輯抽象成Presenter介面,Model類還是原來的Model。
這就是MVP模式,現在這樣的話,Activity的工作的簡單了,只用來響應生命週期,其他工作都丟到Presenter中去完成。從上圖可以看出,Presenter是Model和View之間的橋樑,為了讓結構變得更加簡單,View並不能直接對Model進行操作,這也是MVP與MVC最大的不同之處
MVP實踐
基礎模型,所謂單向資料流和腳手架模式已經成了前端設計工程的主流。 接下來來個模版。
1 Model
模型,不僅代表者檢視模型,還有資料模型。主要做模版功能,下面展示通用的檢視和資料模型
view 模型
/**
* Created by Tamic on 2018-01-08.
*/
public abstract class ModelActivity<V extends IBaseView, P extends IPresenter> extends AppCompatActivity implements IBaseView {
protected P presenter;
protected V view;
@SuppressWarnings("unchecked")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
presenter = createPresenter();
presenter.attachView(this);
}
@Override
protected void onDestroy() {
super.onDestroy();
presenter.detachView(false);
}
protected abstract P createPresenter();
}
複製程式碼
DATA 模型
/**
* Created by Tamic on 2017-12-28.
*/
public abstract class BaseModel<T, E> {
abstract public T getApi();
abstract public E getBean(String... var);
}
複製程式碼
P層
Presenter主要處理業務邏輯,把事件的流程抽象出一個個介面。下面是一個base類,防止記憶體洩漏,和activity關聯了,生命週期同步起來。
介面類:
public interface IPresenter<V extends IBaseView> {
void start();
void attachView(V view);
void detachView(boolean retainInstance);
}
複製程式碼
抽象的實現類
/**
* Created by Tamic on 2018-01-08.
*/
public abstract class BasePresenter<V extends IBaseView> implements IPresenter<V> {
private WeakReference<V> viewRef;
/**
* 介面建立,Presenter與介面取得聯絡
*/
@Override
public void attachView(V view) {
viewRef = new WeakReference<V>(view);
}
/**
* 獲取介面的引用
*/
protected V getView() {
return viewRef == null ? null : viewRef.get();
}
/**
* 判斷介面是否銷燬
*/
protected boolean isViewAttached() {
return viewRef != null && viewRef.get() != null;
}
/**
* 介面銷燬,Presenter與介面斷開聯絡
*/
@Override
public void detachView(boolean retainInstance) {
if (viewRef != null) {
viewRef.clear();
viewRef = null;
}
}
}
複製程式碼
3 View
View主要包含了view操作的共同方法抽離。下班展示了一個基礎的BaseView
,用於講Presenter和view 繫結。
public interface IBaseView<T extends IPresenter> {
void setPresenter(T presenter);
}
複製程式碼
實現腳手架
本次我給大家做一個登陸模組,來演示我們怎麼最優雅的使用MVP。
登陸肯定需要網路呼叫的,我選用了Retrofit作為請求端。下面是登入API。
1 API
/**
* Created by Tamic on 2017-12-28.
*/
public class LoginApi<T> extends Api {
/**
* A dummy authentication store containing known user names and passwords.
* TODO: remove after connecting to a real authentication system.
*/
private static final String[] DUMMY_CREDENTIALS = new String[] {
"foo@example.com:hello", "bar@example.com:world"
};
/**
* Keep track of the login task to ensure we can cancel it if requested.
*/
private UserLoginTask mAuthTask = null;
@Override
public Call<UserBean> getData(String... var1) {
//模擬請求
mAuthTask = new UserLoginTask(var1[0], var1[1]);
return (T) mAuthTask.execute();*/
Map<String, String> hashMap = new HashMap<>();
hashMap.put("ip", "21.22.11.33");
return create(LoginApiService.class).login(hashMap);
}
public interface LoginApiService {
/**
* http://ip.taobao.com/service/getIpInfo.php?ip=21.22.11.33
*/
@GET("service/getIpInfo.php")
@Headers({"Accept: application/json"})
Call<UserBean> login(
@QueryMap Map<String, String> maps);
}
}
複製程式碼
2 LoginModel
/**
* Created by Tamic on 2017-12-28.
*/
public class LoginModel extends BaseModel<LoginApi, UserBean> {
public LoginModel() {
}
@Override
public LoginApi getApi() {
return new LoginApi<>();
}
@Override
public UserBean getBean(String... var) {
//return (LoginBean) getApi().getData(var);
return null;
}
public Call<UserBean> getFlowable(String... var) {
return getApi().getData(var);
}
}
複製程式碼
2 LoginPresenter
負責登入的請求和菊花的控制,並對映成模型。
/**
* Created by Tamic on 2018-01-03.
*/
public class LoginPresenter extends BasePresenter<LoginContract.View> {
private LoginModel model;
public LoginPresenter() {
model = new LoginModel();
}
public UserBean login(String... var) throws IOException {
getView().showLoading();
if (!isViewAttached()) {
return null;
}
return model.getFlowable(var).execute().body();
}
public void login(final CallBack callBack, String... var) {
if (!isViewAttached()) {
return;
}
getView().showLoading();
model.getFlowable(var).enqueue(new Callback<UserBean>() {
@Override
public void onResponse(Call<UserBean> call, Response<UserBean> response) {
getView().dismissLoading();
callBack.onSuccess(response.code(), response.message(), response.body());
callBack.onFinal();
}
@Override
public void onFailure(Call<UserBean> call, Throwable t) {
getView().dismissLoading();
callBack.onFailure(-100, t.getMessage());
callBack.onFinal();
}
});
}
@Override
public void start() {
}
}
複製程式碼
3 Contract
契約是雙方的約定協議的意思,MVP的契約是指對View和Presenter的約定,下面是一個對登入業務的約定。
/**
* This specifies the contract between the view and the presenter.
* Created by Tamic on 2018-01-04.
*/
public interface LoginContract {
interface View extends IBaseView {
void showLoading();
void dismissLoading();
}
interface LoginPresenter extends IPresenter {
}
}
複製程式碼
4 Activity
到了大家最熟悉的Activity了,我們用`LoginActivity` 實現View模版,並實現View介面,並滿足契約,接下來程式碼就是這麼優雅。
/**
* A login screen that offers login via email/password.
*/
@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public class LoginActivity extends ModelActivity<LoginContract.View, LoginPresenter> implements LoginContract.View {
/**
* Id to identity READ_CONTACTS permission request.
*/
private static final int REQUEST_READ_CONTACTS = 0;
// UI references.
private AutoCompleteTextView mEmailView;
private EditText mPasswordView;
private View mProgressView;
private View mLoginFormView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
// Set up the login form.
mEmailView = (AutoCompleteTextView) findViewById(R.id.email);
mPasswordView = (EditText) findViewById(R.id.password);
mPasswordView.setOnEditorActionListener(new TextView.OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) {
if (id == R.id.login || id == EditorInfo.IME_NULL) {
attemptLogin();
return true;
}
return false;
}
});
Button mEmailSignInButton = (Button) findViewById(R.id.email_sign_in_button);
mEmailSignInButton.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
attemptLogin();
}
});
mLoginFormView = findViewById(R.id.login_form);
mProgressView = findViewById(R.id.login_progress);
}
@Override
protected LoginPresenter createPresenter() {
return new LoginPresenter();
}
/**
* Attempts to sign in or register the account specified by the login form.
* If there are form errors (invalid email, missing fields, etc.), the
* errors are presented and no actual login attempt is made.
*/
private void attemptLogin() {
// Reset errors.
mEmailView.setError(null);
mPasswordView.setError(null);
// Store values at the time of the login attempt.
final String email = mEmailView.getText().toString();
final String password = mPasswordView.getText().toString();
boolean cancel = false;
View focusView = null;
// Check for a valid password, if the user entered one.
if (!TextUtils.isEmpty(password) && !isPasswordValid(password)) {
mPasswordView.setError(getString(R.string.error_invalid_password));
focusView = mPasswordView;
cancel = true;
}
if (TextUtils.isEmpty(email)) {
mEmailView.setError(getString(R.string.error_field_required));
focusView = mEmailView;
cancel = true;
} else if (!isEmailValid(email)) {
mEmailView.setError(getString(R.string.error_invalid_email));
focusView = mEmailView;
cancel = true;
}
if (cancel) {
focusView.requestFocus();
} else {
presenter.login(new CallBack<UserBean>() {
@Override
public void onSuccess(int code, String msg, UserBean data) {
showToast(data.getData().getCountry());
}
@Override
public void onFailure(int code, String msg) {
showToast(msg);
}
}, email, password);
presenter.start();
/* By Rxjava
presenter.login(email, password)
.subscribeOn(Schedulers.newThread())
.subscribeOn(AndroidSchedulers.mainThread())
.subscribe(new Consumer<UserBean>() {
@Override
public void accept(UserBean userBean) throws Exception {
if(userBean != null) {
showToast(userBean.getData().getCity());
showUIProgress(false);
}
}
});*/
}
}
private boolean isEmailValid(String email) {
//TODO: Replace this with your own logic
return email.contains("@");
}
private boolean isPasswordValid(String password) {
//TODO: Replace this with your own logic
return password.length() > 4;
}
private void showToast(final String data) {
runOnUiThread(new Runnable() {
@Override
public void run() {
Toast.makeText(LoginActivity.this, data, Toast.LENGTH_SHORT).show();
}
});
}
private void showUIProgress(final boolean show) {
runOnUiThread(new Runnable() {
@Override
public void run() {
showProgress(show);
}
});
}
private void resfreshUI(final String content) {
runOnUiThread(new Runnable() {
@Override
public void run() {
mPasswordView.setError(content);
mPasswordView.requestFocus();
}
});
}
/**
* Shows the progress UI and hides the login form.
*/
@TargetApi(Build.VERSION_CODES.HONEYCOMB_MR2)
private void showProgress(final boolean show) {
// On Honeycomb MR2 we have the ViewPropertyAnimator APIs, which allow
// for very easy animations. If available, use these APIs to fade-in
// the progress spinner.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) {
int shortAnimTime = getResources().getInteger(android.R.integer.config_shortAnimTime);
mLoginFormView.setVisibility(show ? View.GONE : View.VISIBLE);
mLoginFormView.animate().setDuration(shortAnimTime).alpha(
show ? 0 : 1).setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mLoginFormView.setVisibility(show ? View.GONE : View.VISIBLE);
}
});
mProgressView.setVisibility(show ? View.VISIBLE : View.GONE);
mProgressView.animate().setDuration(shortAnimTime).alpha(
show ? 1 : 0).setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mProgressView.setVisibility(show ? View.VISIBLE : View.GONE);
}
});
} else {
// The ViewPropertyAnimator APIs are not available, so simply show
// and hide the relevant UI components.
mProgressView.setVisibility(show ? View.VISIBLE : View.GONE);
mLoginFormView.setVisibility(show ? View.GONE : View.VISIBLE);
}
}
@Override
public void showLoading() {
showUIProgress(true);
}
@Override
public void dismissLoading() {
showUIProgress(false);
}
@Override
public void setPresenter(IPresenter presenter) {
this.presenter = (LoginPresenter) presenter;
}
}
複製程式碼
總結
本文以最簡單的方式介紹了MVP的概念,MVP模版,MVP實踐,並結合了RXJava, Retrofit的,讓你在元件化過程中游刃有餘。
程式碼:github.com/Tamicer/Api…
作者 Tamic