Posts match “ AngularJS ” tag:

[心得] AngularJS 第七次小聚

距離上回參加AngularJS已經是好幾個月之前的事情了, 其中的每一次都沒搶到票不然就是錯過搶票時間...

會接觸 AngularJS 是因為它的 data binding(.NET 控?) 覺得很直觀所以跳坑,再這之前我只有一些些js基礎,寫過一些jQuery玩玩PhoneGap等等。

回歸正題,這次講題另我印象最深的是

過去我們使用jQuery的時候這類Framework的時候,會把HTML當成是Docuemnt認為它應該乾乾淨淨就好。但在AngularJS的世界裡把HTML定義為UI - @clonn

jQuery的人都知道,在那原生js要寫的落落長+瀏覽器大混戰(js支援語法不同)時代,jQuery的出現讓我們得以用簡潔的語法就去取得、操作DOM,並且在底層就解決瀏覽器在js上的語言隔閡,在其他概念成形之前我們就以為,對,js就應該這樣用,Web就應該這樣寫。

但就我自己寫jQuery的經驗,在DOM的操作上,我常常看不懂我自己之前寫的Code,一下append,一下子又prepend

function displayFood(food){
    var name = food.name;
    var desc = food.description;
    var url = food.url;
    var imageUrl = food.imageUrl;
    var listDiv = $('#listDiv');

    var foodA = $('<a/>').attr('href',url).text(name);
    var foodLi = $('<li/>').append(foodA);
    foodLi.append(' - ' + desc);

    var foodImage = $('<img>').attr('src',imageUrl).attr('width',100).attr('height',100);
    foodLi.append(foodImage);

    $('#listUl').append(foodLi);
    
    $(listDiv)[0].scrollTop = $(listDiv)[0].scrollHeight;
};

不要說交接給別人了,交接給我自己都有問題了...,而這就呼應到宇庭的講題

Code而是寫給人看的,不是寫給機器看的。 - yuting

而同樣的事情Do it Angular's way:

<div id="messagesDiv">
    <ul ng-repeat="food in foods">
        <li>
            <img src={{food.imageUrl}} width='50' height='50'></img>
            <span><a href={{food.url}}>{{food.name}}</a></span>
            <span>: {{food.description}}</span>
            <button ng-click="writeId(item)">X</button>{{food.$id}}<hr>
        </li>
    </ul>
</div>

先不論效能或其他的議題,這才是人看的懂的Code對吧?
jQuery相比就是簡直是文言文 vs. 白話文

以上就是個人小小心得提供給大家參考:)

感謝Blue大大主辦AngularJS小聚,讓我受益良多阿:)