AngularJS入門知識之MVW類框架的編程思想探討

更新時間：2014年12月08日 11:16:42 投稿：junjie

這篇文章主要介紹了AngularJS入門知識之MVW類框架的編程思想探討,本文通過實現(xiàn)兩個簡單的業(yè)務需求,探討AngularJS和傳統(tǒng)的JavaScript控制DOM實現(xiàn)方式的差別,并嘗試理解MVW此類框架在流行的Web前端開發(fā)中的編程思想,需要的朋友可以參考下

本文通過實現(xiàn)兩個簡單的業(yè)務需求，探討AngularJS和傳統(tǒng)的JavaScript控制DOM實現(xiàn)方式的差別，并嘗試理解MVW此類框架在流行的Web前端開發(fā)中的編程思想。

這個需求很常見，比如，一個兩級菜單，在第一級別菜單項點擊時候，對應的子菜單項目應該顯示或隱藏。

jQuery的實現(xiàn)：

復制代碼代碼如下:

<ul class="parent">
    <li class="parent_item">
        Item 1
        <ul class="child">
            <li class="child_item">Item child 1</li>
        </ul>
    </li>
</ul>

// javascript
$('li.parent_item').click(function(){
$(this).children('ul.child').toggle();
})

AngularJS的實現(xiàn)：

復制代碼代碼如下:

<!-- html -->

<ul>

    <li ng-click="hide_child = !hide_child">

        Item 1

        <ul ng-hide="hide_child">

            <li>Item child 1</li>

        </ul>

    </li>

</ul>

傳統(tǒng)操作DOM的方式，不再贅述。AngularJS的實現(xiàn)，相對代碼要精煉很多，只有HTML的版本即可。以上代碼，用到了AngularJS這些知識點：

1.Directives

2.Expressions

ng-click和ng-hide都是框架自帶的Directives（指令），前者相當于給li標簽提供了一個Event Handler，在該HTML元素（li）被點擊的時候，會執(zhí)行hide_child = !hide_child這個Expression（表達式）。我們先看一下ng-hide這個指令，它會根據(jù)賦值的表達式結(jié)果（布爾值）來控制該HTML元素是否要顯示（通過CSS實現(xiàn)）。也就是說，如果hide_child這個變量如果是true，那么ul就會被隱藏，否則結(jié)果相反。

這里hide_child其實是$scope上的一個變量，對它的值的變更，也可以用controller控制器包裝一個方法來實現(xiàn)，只不過現(xiàn)在的語句比較簡單，直接寫在了指令的賦值里面。

通過以上簡單的代碼分析，我們可以看到AngularJS兩個比較明顯的特點：

1.通過指令和表達式對DOM的操作進行了封轉(zhuǎn)，只需簡單的代碼便可省去額外的JavaScript代碼
2.指令和表達式的應用，只直接嵌套在HTML中的，這和jQuery推從的Unobtrusive JavaScript的代碼風格有些背道而馳

我們先看另外一個需求，再詳細解釋上面的結(jié)論。

需求2：通過點擊div，觸發(fā)選擇form中的一個radio button
傳統(tǒng)的HTML Form元素，在如今的移動設備上，操作起來并不是十分友好。比如，Radio button單選框，在觸摸屏上，需要精確的位置定位，才能控制好這個組件，但是手指定位又很粗糙。常見的做法，是添加一個對應的Label控件，但是文字本身占屏比例也并不理想，而且也不具備明確的信息傳達效果。所以，通常會間接操作一個區(qū)域比較大的div或者li標簽。

jQuery的實現(xiàn)：

復制代碼代碼如下:

<ul>
    <li class="selection">
        <input type="radio"
            id="option1" />
        <label for="option1">option 1</label>
    </li>
</ul>

// javascript
$('li.selection').click(function(){
$(this).children('input[type="radio"]').click();
})

AngularJS的實現(xiàn)：

復制代碼代碼如下:

<!-- html -->

<ul>

    <li ng-repeat="option in options"

        ng-click="model.option = option.value"

        ng-class="{active: model.option == option.value}" >

        <input type="radio"

            ng-model="model.option"

            value="{{option.value}}"

            id="option1" />

        <label for="option1">option 1</label>

    </li>

</ul>

在這個解決方案中，我們同樣沒有涉及到額外的JavaScript代碼，并且多用了幾個指令。為了對比參照，我們只關(guān)心ng-click和ng-model這兩個指令的表達式。

我們先看一下input這個元素的ng-model指令，這里賦值的意思是，我們把模板上的input和$scope.model對象的option屬性進行了關(guān)聯(lián)，深入了解數(shù)據(jù)綁定可以參考Data Binding。這種指定關(guān)聯(lián)，使得模板控件直接和數(shù)據(jù)Model進行了綁定，并且這種綁定是雙向的。意味著，一旦用戶修改控件中的值（勾選radio input），對應的Model對象就會重新賦值（model.option）；同時，如果Model對象的值發(fā)生了變化，模板中的input控件也會對應反映變化。而這點，在上述jQuery的實現(xiàn)中，其實是沒有做到的。

所以，這里通過AngularJS的數(shù)據(jù)綁定，點擊li元素間接完成觸發(fā)input的流程是這樣子的：

1.點擊li標簽，給model.option賦值；
2.修改了Model對象，定位到對應input控件（value的值為model.option那個）；
3.激活input控件的checked屬性

通過以上兩個案例，我們對Web前端的操作有了新的認識。

首先，技術(shù)實現(xiàn)上，通過引入新的指令，表達式，數(shù)據(jù)綁定等概念，我們可以完全新的方式去操作DOM，而不僅僅局限在用戶和HTML組件交互操作上的JavaScript代碼的實現(xiàn)。這種思想的變化是巨大的。

從本世紀初，動態(tài)Web編程的興起開始，服務器端的編程技術(shù)一直在改進。從一開始的CGI/PHP/ASP，由語言和平臺產(chǎn)生了.NET vs. Java，開發(fā)效率和軟件過程促進了MVC框架/ORM/AOP等，性能和大數(shù)據(jù)帶來了NodeJS/NoSQL/Hadoop等，而瀏覽器前端的技術(shù)需求似乎沒有那么激進過。一方面，通過服務器端和數(shù)據(jù)庫，大部分B/S模型的業(yè)務需求都能滿足；再者，瀏覽器本身存在不同平臺的差異性，對腳本語言和渲染技術(shù)的標準不兼容，以及運算能力的欠缺和安全性的考慮。

在這種情況下，瀏覽器端的需求，大部分時候只需要考慮渲染頁面和簡單的用戶交互。HTML/DOM加上JavaSript/CSS就這樣成就了前端的主要工作。所以，以前是沒有前端工作師，只需要Web設計師的。慢慢對前端的要求多起來，jQuery成為使用程度最高的一個JavaScript操作DOM的封裝庫。而在這個階段，jQuery/JavaScript的主要任務，仍然只是作為面向用戶瀏覽器終端呈現(xiàn)和交互的工具。

理解了jQuery的起源，我們不難發(fā)現(xiàn)，以前追求的一些規(guī)則，譬如Unobtrusive JavaScript，當時局限于實現(xiàn)的手段和方式，為了分離DOM和JavaScript代碼邏輯，我們優(yōu)先選擇了維護性更高的方式。前端對JavaScript的需求加大之后，出現(xiàn)了很多MVC/MVP的前端框架，以及AngularJS所謂的MVW(Model-View-Whatever)，JavaScript和DOM一刀切的方式發(fā)生了變化。原先我們考慮界面顯示和用戶交互的直接操作，現(xiàn)在我們有了客戶端的數(shù)據(jù)綁定，豐富的指令，依賴注入，等待我們的將是全新的編程模型和思維方式。

您可能感興趣的文章: