Amaze UI 教程

AmazeUI

Amaze UI 是一個移動優先的跨屏前端框架,簡單好用。

JavaScript


基本使用

基于 jQuery

從 2.0 開始,Amaze UI JavaScript 組件轉向基于 jQuery 開發,使用時確保在 Amaze UI 的腳本之前引入了 jQuery 最新正式版。

組件調用

組件的調用方式普通 jQuery 插件一樣,具體細節請查看各個組件的文檔。

jQuery 和 Zepto.js 的一些差異

jQuery 和 Zepto.js 表面看起來差不多,其實一些細節上差異很大,同時支持 jQuery 和 Zepto.js 是一件吃力不討好的事情,這應該也是 Foundation 5 放棄支持 Zepto 的一個原因。(下面列舉的差異 Demo

width()/height()

  • Zepto.js: 由盒模型(box-sizing)決定
  • jQuery: 忽略盒模型,始終返回內容區域的寬/高(不包含 paddingborder

jQuery 官方的說明

Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css("width") rather than .width().

解決方式就是在 jQuery 中使用 .css('width'),而不是 .width()

這點上 jQuery 的處理方式是值得商榷的,比如下面的例子,$('.box').css('height') 仍然返回 20px這不是扯蛋么

<style>
  .box {
    box-sizing: border-box;
    padding: 10px;
    height: 0;
  }
</style>

<div class="box"></div>
邊框三角形寬高的獲取

假設用下面的 HTML 和 CSS 畫了一個小三角形:

<div class="caret"></div>
.caret {
  width: 0;
  height: 0;
  border-width: 0 20px 20px;
  border-color: transparent transparent blue;
  border-style: none dotted solid;
}
  • jQuery 使用 .width().css('width') 都返回 0,高度也一樣;
  • Zepto 使用 .width() 返回 40,使用 .css('width') 返回 0px

所以,這種場景,jQuery 使用 .outerWidth()/.outerHeight();Zepto 使用 .width()/.height()

offset()

  • Zepto.js: 返回 topleftwidthheight
  • jQuery: 返回 widthheight

$(htmlString, attributes)

DOM 操作區別
$(function() {
  var $list = $('<ul><li>jQuery 插入</li></ul>', {
    id: 'insert-by-jquery'
  });
  $list.appendTo($('body'));
});

jQuery 操作 ul 上的 id 不會被添加;Zepto 可以在 ul 上添加 id

事件觸發區別
$script = $('<script />', {
  src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js',
  id: 'ui-jquery'
});

$script.appendTo($('body'));

$script.on('load', function() {
  console.log('jQ script loaded');
});

使用 jQuery 時 load 事件的處理函數不會執行;使用 Zepto 時 load 事件的處理函數執行。

其他參考鏈接:

高級使用

默認初始化事件接口

Amaze UI 通過特定的 HTML 來綁定事件,多數 JS 組件通過 HTML 標記就可以實現調用。

默認的初始化事件都在 xx.amui.data-api 命名空間下,用戶可以自行關閉。

關閉所有默認事件:

$(document).off('.data-api');

關閉特定組件的默認事件:

$(document).off('.modal.amui.data-api');

自定義事件

一些組件提供了自定義事件,命名的方式為 {事件名稱}.{組件名稱}.amui,用戶可以查看組件文檔了解、使用這些事件。

$('#myAlert').on('close.alert.amui', function() {
  // do something
});

MutationObserver

雙向數據綁定很酷?Mutation Observer 才是(或即將成為)幕后的英雄。

Amaze UI 2.1 中實驗性地引入了 MutationObserver請謹慎使用

data-am-observe

在元素上添加 data-am-observe 屬性以后,動態插入該元素的 Amaze UI JS 插件會自動初始化(演示), 支持的插件包括 Button、Dropdown、Slider、Popover、ScrollSpy、Tabs。

$().DOMObserve(options, callback)

  • options: 監視的屬性(具體參見),默認為 {childList: true, subtree: true}
  • callback(mutations, observer): DOM 發生變化時的處理函數,第一個參數為存儲 MutationRecord 對象的數組,第二個參數為 MutationObserver 實例本身。

DOM 變化監視演示,打開控制臺查看 log

<p id="js-do-actions">
  <button class="am-btn am-btn-primary" data-insert>插入 p 元素</button>
  <button class="am-btn am-btn-secondary" data-addClass>添加 Class</button>
  <button class="am-btn am-btn-warning" data-remove>移除 p 元素</button>
</p>
<div id="js-do-demo">
  <p>DOM 變化監視演示,打開控制臺查看 log</p>
</div>
<script>
  $(function() {
    var $wrapper = $('#js-do-demo');
    $wrapper.DOMObserve({
      childList: true,
      attributes: true,
      subtree: true
    }, function(mutations, observer) {
      console.log(observer.constructor === window.MutationObserver);
      console.log('#js-do-demo 的 DOM 發生變化鳥:' + mutations[0].type);
    });

    $('#js-do-actions').find('button').on('click', function(e) {
      var $t = $(e.target);
      if ($t.is('[data-insert]')) {
        $wrapper.append('<p>插入了一個 p</p>');
      } else if($t.is('[data-remove]')) {
        $wrapper.find('p').last().remove();
      } else {
        $wrapper.addClass('am-text-danger');
      }
    });
  })
</script>

參考鏈接:

模塊化開發

關于前端模塊化,Amaze UI 1.0 的時候曾做過一個關于前端 JS 模塊化的調查,截止 2014.11.13 共 1869 個投票:

  • CMD - Sea.js 23.86% (446 votes)
  • AMD - RequireJS 24.51% (458 votes)
  • CommonJS - Browserify 9.58% (179 votes)
  • 其他加載工具(或者自行開發的) 8.19% (153 votes)
  • 什么是 JS 模塊化?可以吃嗎? 34% (633 votes)
CMD
AMD
CJS
other
unknown

顯然,模塊化是必然趨勢ES6 將原生支持模塊化。

Amaze UI 2.0 按照 CommonJS 規范來組織模塊(前端也像 Node.js 一樣編寫模塊)。最終如何打包,用戶可以自行選擇。

  • Browserify:結合 NPM,實現前端模塊管理。很多前端模塊都已經發布到 NPM,可以拋棄 Bower 這類功能很單一的工具了;
  • Duo:除管理本地模塊以外,還可以從 GitHub 上直接獲取開源項目,支持 Javascript、HTML、CSS;
  • gulp-amd-bundler:把按照 CJS 編寫的模塊打包成 AMD 模塊;
  • Webpack

SPM 貌似不支持直接通過源碼提取依賴,使用 Sea.js 的用戶可能需要自行修改打包工具。

建議閱讀的文章:

側欄導航
江苏时时彩正规吗