【javascript激增的思考02】模塊化與MVC

時間 2019-11-12

標籤 javascript 激增思考模塊化 mvc 欄目 JavaScript 简体版

原文原文鏈接

前言

以前咱們遇到了這麼一個項目，也就是咱們昨天提到的，有不少的小窗口的，昨天說的太抽象了，今天咱們再來理一理什麼是小窗口（後面點說下），當時因爲js有一點複雜，我本身也裝B跟風用了一下傳說中MVC！！！javascript

PS：最後讀寒冬老師的文章說是MVC不合適用到前端，可是爲何用以及爲何不能用多是我半年後才能理解的問題了。html

其實，我當時對MVC的理解就停留在model view control的地步。。。。前端

項目幾個月後，核心功能都實現了，可是不得不面臨js文件激增的問題，有時候其它同事要插入進來，便有點困難，因而當時對核心的框架進行了一點重寫，緩解了一些問題，但並未解決問題。。。。java

後來的後來我就離開了，該項目我一直在關注着，只不過已經物是人非了，事實上我仍是很是願意投入進行這種富客服端的開發的，真的頗有意思，話說對那家公司還有點留戀呢！jquery

好了，如今咱們來講說什麼是「小窗口」吧，由於這幾天咱們會花一個星期左右的時間完成原來幾個月左右的工做喲，固然是核心功能：），哈哈。數據庫

什麼是小窗口

所謂小窗口即是：設計模式

① 咱們一個小窗口數據來源是騰訊微博，須要造成騰訊微博app小窗口app

② 咱們一個小窗口數據來源新浪微博，須要造成新浪微博的小窗口框架

咱們注意到以上2個的數據源與處理方式較一致，可是須要作處理，並且其鑑權也不盡相同，因此這個js代碼有相同的，也有不相同的。ssh

③ 咱們的一個小窗口數據來源於百度RSS，須要造成點擊標題展開的功能

④ 咱們一個小窗口數據來源於XXX，其表現形式爲選項卡......

⑤ 咱們一個小窗口是flash，須要......

⑥ 咱們一個小窗口是個綜合應用，裏面還會有定時器，自動的更新其數據

正所謂有圖有真相，小葉子花了不少時間搞了幾個圖：

咱們最近會作的

根據前面的那些圖各位可能大概知道咱們的「小窗口」是幹神馬的了，這裏我再畫一個圖，描述下咱們最近幾天會完成的功能：

整體頁面

單個小窗口

最大化

相信你們，對咱們要作的有一個大概印象了，並且咱們還會完成如下功能：

① 動態增長關注框（好比魔圖），這裏便須要考慮js代碼激增
② 你們看到上面的分頁導航了，咱們能夠將首頁放不下的放到第二頁
③ 小窗口彼此的擺放順序能夠拖動
......
還有的咱們邊看邊作吧，由於我這裏數據庫方面不會太關注，因此搜索功能應該不會完成

MVC和咱們有什麼關係？

說實話，我不懂MVC，那是真不懂......

我搞過2年.net開發，也搞過將近一年的javascript開發，而且是傳說中的ssh，咱們都知道struts2是MVC，可是我對MVC的理解可謂一瓢漿糊，因而我昨天晚上專門去學習了一下什麼是MVC，想總結點東西出來，可是結果你們都知道了，我交了白卷，看來看去所謂MVC即是：

模型（Model） 「數據模型」（Model）用於封裝與應用程序的業務邏輯相關的數據以及對數據的處理方法。「模型」有對數據直接訪問的權力，例如對數據庫的訪問。
「模型」不依賴「視圖」和「控制器」，也就是說，模型不關心它會被如何顯示或是如何被操做。
可是模型中數據的變化通常會經過一種刷新機制被公佈。爲了實現這種機制，那些用於監視此模型的視圖必須事先在此模型上註冊，
從而，視圖能夠了解在數據模型上發生的改變。（比較：觀察者模式（軟件設計模式））

視圖（View） 視圖層可以實現數據有目的的顯示（理論上，這不是必需的）。在視圖中通常沒有程序上的邏輯。
爲了實現視圖上的刷新功能，視圖須要訪問它監視的數據模型（Model），所以應該事先在被它監視的數據那裏註冊。

控制器（Controller） 控制器起到不一樣層面間的組織做用，用於控制應用程序的流程。
它處理事件並做出響應。「事件」包括用戶的行爲和數據模型上的改變。

咱們來看看這個圖，他是作得很是好的：

① 用戶的全部交互與controller打交道

② controller處理用戶信息（參數），傳遞給數據模型

③ 數據模型造成後在展現爲相關視圖

這樣說仍是太空洞，因此咱們仍是要用例子來講明：

MVC

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             var end = $('#end');
 8             $('#pili').change(function () {
 9                 var name = '';
10                 var p = $(this).val();
11                 if (p == '葉小釵') {
12                     name = '刀狂劍癡';
13                 }
14                 if (p == '一頁書') {
15                     name == '百世經綸';
16                 }
17                 if (p == '素還真') {
18                     name = '清香白蓮';
19                 }
20 
21                 end.html(name + p);
22             });
23         });
24     </script>
25 </head>
26 <body>
27     <select id="pili">
28         <option value="葉小釵">葉小釵</option>
29         <option value="一頁書">一頁書</option>
30         <option value="素還真">素還真</option>
31     </select>
32     <div id="end"></div>
33 </body>
34 </html>

以上的代碼，咱們常常用到，沒有任何邏輯可言，可是一旦和「高級」的東西產生關係後，咱們就有了一件聖衣，看着高深莫測，甚至我也能夠裝B。

PS：代碼是我可恥的抄的。。。。但我但是自豪的一個字一個字的敲的哦，竊知識不算偷......

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             //定義一個controller
 8             var piliController = {
 9                 //選擇視圖
10                 start: function () {
11                     this.view.start();
12                 },
13                 //將用戶操做映射到模型更新上
14                 set: function (name) {
15                     this.model.setPerson(name);
16                 }
17             };
18             piliController.model = {
19                 piliKV: {
20                     '葉小釵': '刀狂劍癡',
21                     '一頁書': '百世經綸',
22                     '素還真': '清香白蓮'
23                 },
24                 curPerson: null,
25                 //數據模型負責業務邏輯和數據存儲
26                 setPerson: function (name) {
27                     this.curPerson = this.piliKV[name] ? name : null;
28                     this.onchange();
29                 },
30                 //通知數據同步更新
31                 onchange: function () {
32                     piliController.view.update();
33                 },
34                 //相應視圖對當前狀態的查詢
35                 getPiliAction: function () {
36                     return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
37                 }
38             };
39             piliController.view = {
40                 //用戶觸發change事件
41                 start: function () {
42                     $('#pili').change(this.onchange);
43                 },
44                 onchange: function () {
45                     piliController.set($('#pili').val());
46                 },
47                 update: function () {
48                     $('#end').html(piliController.model.getPiliAction());
49                 }
50             };
51             piliController.start();
52         });
53     </script>
54 </head>
55 <body>
56     <select id="pili">
57      <option value="葉小釵">葉小釵</option>
58         <option value="一頁書">一頁書</option>
59         <option value="素還真">素還真</option>
60     </select>
61     <div id="end"></div>
62 </body>
63 </html>