javascriptでmvcモデルの考え方を取り入れたい

Question

ストップウォッチを作っていたのですが、コードが猥雑すぎて全体の流れが分からなくなってしまいました。そこでMVCモデルというものが良いと聞きました。

質問なんですが、以下のサンプルコードの場合、model,view,controllerの分け方は正しいでしょうか？
また、どのようにしてセクションを分けるのでしょうか？別ファイルにするなどのやり方はあると思います。以下の例では、単にmodel,view,controllerのコメントを入れているだけです。

	<div id="display">
	</div>
	<button id="button">ボタン</button>
	<script>
	//model
	let display = document.getElementById("display");
	let button = document.getElementById("button");
	let num = 0;
	function main_logic()
	{
		num += 2;
		console.log(num);
		set_num();
	}
	
	//controller
	button.addEventListener("click" , function()
	{
		main_logic();
	});

	//view
	function set_num()
	{
		display.textContent = num;
	}
	</script>

javascriptにおけるmvcモデルの説明が見つからないので、質問させていただきます。

Answer 1

javascriptにおけるmvcモデルの説明が見つからないので、質問させていただきます。

見つからない理由はいわゆるバッドプラクティスだと判断されているからだと思われます
mvcの書き方参考にするならangular1.xのマニュアルを探して書き方を調べる、出来ればangular1.xを使ってみる事です
※angular2.xはmvcではないのでダメです

コードが猥雑すぎて全体の流れが分からなくなってしまいました。そこでMVCモデルというものが良いと聞きました。

例に書いてあるコードだと分かりませんが汚い理由はそこじゃないと思います
まずは同じ処理（ストップウォッチ）のコードを現在のソースを一切見ずにhtmlから1から書き直す事を始めてみてはどうでしょうか？
mvcを意識しているという事から恐らく質問者自身自覚はあると思いますが、各コードの役割が上手く分離できていないからだと思われます

Answer 2

そもそもJavaScript自体フロントなのでいってしまえば全部Viewと言えます。
一般的なMVCを成立させるにはサーバーサイドの（オブジェクト指向）言語、およびデータベースと絡めさせる必要があります。

※JavaScriptでもサーバーサイドのNode.jsとか絡めればMVC構造を持ったフレームワークはあると思います
※IndexedDBなどをDBと見立て、それっぽく仕立てることは出来そうですが、やはりMVCという感じから外れそうな気がしないでもないです。