isscroll等幾款移動端工具介紹

 

本文摘自csdn

Apache Cordova

• Apache Cordova是一套設備API，容許移動應用的開發者使用JavaScript來訪問本地設備的功能，好比攝像頭、加速計。它能夠與UI框架（如jQuery Mobile 或 Dojo Mobile 或 Sencha Touch）等相結合使用，這些UI框架可使用HTML、CSS和JavaScript開發智能手機應用。
• 在使用Cordova API時，應用程序的構建能夠無需本地代碼（如Java或對象C等），使用的是Web技術
• 因爲這些JavaScript API在多個設備平臺上是一致的，並且是基於Web標準建立的，所以應用程序的移植很方便，基本不作什麼改變
• Cordova提供了一套統一的JavaScript庫供調用，它支持iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada和Symbian

• Knockout

• Knockout是一個輕量級的UI類庫，經過應用MVVM模式使JavaScript前端UI簡單化
• Knockout是一個以數據模型（data model）爲基礎的可以幫助你建立富文本，響應顯示和編輯用戶界面的JavaScript類庫。任什麼時候候若是你的UI須要自動更新（好比：更新依賴於用戶的行爲或者外部數據源的改變），KO可以很簡單的幫你實現而且很容易維護
• 開發人員若是用過Silverlight或者WPF可能會知道KO是MVVM模式的一個例子。若是熟悉 Ruby on Rails 或其它MVC技術可能會發現它是一個帶有聲明式語法的MVC實時form。換句話說，你能夠把KO當成經過編輯JSON數據來製做UI用戶界面的一種方式

• Knockout有以下4大重要概念：

• 聲明式綁定 (Declarative Bindings)：使用簡明易讀的語法很容易地將模型(model)數據關聯到DOM元素上
• UI界面自動刷新 (Automatic UI Refresh)：當您的模型狀態(model state)改變時，您的UI界面將自動更新
• 依賴跟蹤 (Dependency Tracking)：爲轉變和聯合數據，在你的模型數據之間隱式創建關係
• 模板 (Templating)：爲您的模型數據快速編寫複雜的可嵌套的UI

• 額外的好處：

• 純JavaScript類庫 – 兼容任何服務器端和客戶端技術
• 可添加到Web程序最上部 – 不須要大的架構改變
• Comprehensive suite of specifications （採用行爲驅動開發） - 意味着在新的瀏覽器和平臺上能夠很容易經過驗證

• 如何使用它

• 簡單來講：聲明你的數據做爲一個JavaScript 模型對象（model object），而後將DOM 元素或者模板（templates）綁定到它上面
• 來看一個具體的例子:
  • 想一想在一個頁面上，航空旅客能夠爲他們的旅行升級高級食物套餐，當他們選擇一個套餐的時候，頁面當即顯示套餐的描述和價格。首先，聲明可用的套餐:
    

    • var availableMeals = [
          { mealName: 'Standard', description: 'Dry crusts of bread', extraCost: 0 },
          { mealName: 'Premium', description: 'Fresh bread with cheese', extraCost: 9.95 },
          { mealName: 'Deluxe', description: 'Caviar and vintage Dr Pepper', extraCost: 18.50 }
        ];

  • 若是想讓這3個選項顯示到頁面上，咱們能夠綁定一個下拉菜單（例如：<select>元素）到這個數據上。例如：
    

    • <h3>Meal upgrades</h3>
      <p>Make your flight more bearable by selecting a meal to match your social and economic status.</p>
      Chosen meal: <select data-bind="options: availableMeals,
                                      optionsText: 'mealName'"></select>

  • 啓用Knockout並使你的綁定生效，在availableMeals變量聲明以後添加以下代碼：
    

    • var viewModel = {
          /* we'll populate this in a moment */
      };
      
      ko.applyBindings(viewModel); // Makes Knockout get to work
      // 注意：ko. applyBindings須要在上述HTML以後應用纔有效

  • 如今你的頁面將render成以下的樣子：
    
  • 響應選擇
  • 下一步，聲明一個簡單的data model來描述旅客已經選擇的套餐，添加一個屬性到當前的view model上：
    

    • var viewModel = {
          chosenMeal: ko.observable(availableMeals[0])
      };

    • ko.observable是什麼？它是KO裏的一個基礎概念。UI能夠監控（observe）它的值而且迴應它的變化。這裏咱們設置chosenMeal是UI能夠監控已經選擇的套餐，並初始化它，使用availableMeal裏的第一個值做爲它的默認值（例如：Standard）
  • 讓咱們將chosenMeal 關聯到下拉菜單上，僅僅是更新<select>的data-bind屬性，告訴它讓<select>元素的值讀取/寫入chosenMeal這個模型屬性：
    

    • Chosen meal: <select data-bind="options: availableMeals,
                                      optionsText: 'mealName',
                                      value: chosenMeal"></select>

  • 理論上說，咱們如今能夠讀/寫chosenMeal 屬性了，可是咱們不知道它的做用。讓咱們來顯示已選擇套餐的描述和價格：
    

    • <p>
          You've chosen:
          <b data-bind="text: chosenMeal().description"></b>
          (price: <span data-bind='text: chosenMeal().extraCost'></span>)
      </p>

  • 因而，套餐信息和價格，將根據用戶選擇不一樣的套餐項而自動更新：
    
  • 最後一件事：若是能將價格格式化成帶有貨幣符號的就行了，聲明一個JavaScript函數就能夠實現了:
    

    • function formatPrice(price) {
          return price == 0 ? "Free" : "$" + price.toFixed(2);
      }

  • 界面顯示結果將變得好看多了：
    
  • Price的格式化展現了，你能夠在你的綁定裏寫任何JavaScript代碼，KO仍然能探測到你的綁定依賴代碼。這就展現了當你的model改變時，KO如何只進行局部更新而不用從新render整個頁面 – 僅僅是有依賴值改變的那部分
  • 鏈式的observables也是支持的（例如：總價依賴於價格和數量）。當鏈改變的時候，依賴的下游部分將會從新執行，同時全部相關的UI將自動更新。不須要在各個observables之間聲明關聯關係，KO框架會在運行時自動執行的
  • 你能夠從 observables 和 observable arrays 獲取更多信息。上面的例子很是簡單，沒有覆蓋不少KO的功能。你能夠獲取更多的內嵌的綁定和模板綁定
  • knockout和jQuery (或Prototype等)是競爭關係仍是能一塊兒使用?
    
    • 全部人都喜歡jQuery! 它是一個在頁面裏操做元素和事件的框架，很是出色而且易使用，在DOM操做上確定使用jQuery，knockout解決不一樣的問題
    • 若是頁面要求複雜，僅僅使用jQuery須要花費更多的代碼。 例如：一個表格裏顯示一個列表，而後統計列表的數量，Add按鈕在數據行TR小於5調的時候啓用，不然就禁用。jQuery 沒有基本的數據模型的概念，因此須要獲取數據的數量（從table/div或者專門定義的CSS class），若是須要在某些SPAN裏顯示數據的數量，當添加新數據的時候，你還要記得更新這個SPAN的text。固然，你還要判斷當總數>=5條的時候禁用Add按鈕。 而後，若是還要實現Delete功能的時候，你不得不指出哪個DOM元素被點擊之後須要改變
  • Knockout的實現有何不一樣？
    • 使用knockout很是簡單。將你的數據描繪成一個JavaScript數組對象myItems，而後使用模板（template）轉化這個數組到表格裏（或者一組DIV）。無論何時數組改變， UI界面也會響應改變（不用指出如何插入新行<tr>或在哪裏插入），剩餘的工做就是同步了。例如：你能夠聲明綁定以下一個SPAN顯示數據數量（能夠放在頁面的任何地方，不必定非要在template裏）：
      

      • There are <span data-bind="text: myItems().count"></span> items

    • 就是這些！你不須要寫代碼去更新它，它的更新依賴於數組myItems的改變。一樣， Add按鈕的啓用和禁用依賴於數組myItems的長度，以下：
      

      • <button data-bind="enable: myItems().count < 5">Add</button>

    • 以後，若是你要實現Delete功能，沒必要指出如何操做UI元素，只須要修改數據模型就能夠了
    • 總結：knockout沒有和jQuery或相似的DOM 操做API對抗競爭。knockout提供了一個關聯數據模型和用戶界面的高級功能。knockout自己不依賴jQuery，可是你能夠一塊兒同時使用jQuery， 生動平緩的UI改變須要真正使用jQuery
  • 下載安裝
    • 純 js ，直接下載引入便可
    • 開啓模板綁定，只需再引入兩個 js 文件便可，正確的引用順序：

      • <script type='text/javascript' src='jquery-1.4.2.min.js'></script>
        <script type='text/javascript' src='jquery-tmpl.js'></script>
        <script type='text/javascript' src='knockout-1.2.1.js'></script>

• MVVM

• 想理解 MVVM 先去看 WPF(注意一個概念，先前的 WFX 便是後面的 .NET Framework 3.0)
• 看完 WPF 再去看 MVP
• 看完 MVP 再理解一下 MVP 和 MVC 的不一樣：MVC 有什麼缺陷？MVP 解決了這些缺陷嗎？MVP是如何解決這些缺陷的？
• MVVM是Model-View-ViewModel的簡寫。微軟的WPF帶來了新的技術體驗，如Sliverlight、音頻、視頻、3D、動畫……，這致使了軟件UI層更加細節化、可定製化。同時，在技術層面，WPF也帶來了 諸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由來即是MVP（Model-View-Presenter）模式與WPF結合的應用方式時發展演變過來的一種新型架構框架。它立足於原有MVP框架而且把WPF的新特性揉合進去，以應對客戶日益複雜的需求變化

• MVVM 架構圖

• MVVM 主要優勢
  • 低耦合
    • 視圖（View）能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變
  • 高可重用性
    • 你能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯
  • 獨立開發
    • 開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xaml代碼
  • 獨立測試
    • 界面素來是比較難於測試的，而如今測試能夠針對ViewModel來寫

• 設計模式的發展（MVC—>MVP—>MVVM）

• 最基礎的 MVC ， 缺陷 ： View層會直接從Model層拉數據，致使View層依賴Model層，帶來團隊開發和功能複用、測試上的一系列缺陷
• MVP 改Controler 層爲 Presenter 層，不容許View 層直接訪問Model層，再加一層 adapter，多出來的邏輯在 Presenter 層裏實現
• MVVM 則進一步改進 MVP， 引入 數據綁定  的概念，在View 層和Model 層之間再加入一層爲 特定View 量身定製的 Model層，這層就被稱爲 ViewModel層，即：MVVM中後面的VM
  • View綁定到ViewModel，而後執行一些命令在向它請求一個動做。而反過來，ViewModel跟Model通信，告訴它更新來響應UI。這樣便使得爲應用構建UI很是的容易。往一個應用程序上貼一個界面越容易，外觀設計師就越容易使用Blend來建立一個漂亮的界面。同時，當UI和功能愈來愈鬆耦合的時候，功能的可測試性就愈來愈強

• iScroll

• iscroll.js是Matteo Spinelli開發的一個js文件，使用原生js編寫，不依賴與任何js框架。旨在解決移動webkit系瀏覽器的區域滾動問題，兼容mobile safari、android默認瀏覽器、safari、chrome、firefox5+、opera11+、IE9+及其餘webkit核心瀏覽器

• 什麼是移動webkit系瀏覽器的區域滾動問題

• 咱們在pc端web開發中，有時會用固定某一區域的寬度和高度，而後使用overflow:auto，使其內容在該區域內滾動
• iphone默認瀏覽器（mobile safari）也支持固定區域的滾動，但必須雙指滑動操做，並且沒有滾動條。mobile safari中的單指滑動只針對頁面級別，不針對頁面元素。這樣的操做體驗很麻煩，並且不少用戶根本不知道雙指可以區域滑動
• android自帶瀏覽器也支持區域滾動，且能夠單指滑動操做，可是滑動起來卡的半死半活，很不流暢
• 使用iscroll,能夠完美解決上述問題了，不只能夠在iphone和android上單指滑動，並且滑動起來流暢之極，酣暢淋漓。滑動過程當中也有漂亮的滾動條提示，讓你舒心不已

• 固定定位

• 固定定位不是iscroll的原生用法，而是使用iscroll協助解決固定定位問題
• 話說iphone很先進，但就是不支持position:fixed。這下苦了咱們了，固定定位怎麼解決啊，咱們會常常遇到固定標題欄、固定工具欄等狀況啊！！
• 使用iscroll協助解決：首先獲取瀏覽器窗口高度；而後獲取固定工具欄的高度；接着將除固定工具欄以外的內容所有放在一個固定區域內，該固定區域的高度=窗口高度-工具欄高度；以後對固定區域使用iscroll。這樣，整個html頁面的高度正好等於窗口高度，頁面級別不會出現滾動，工具欄就一直固定在當前的位置。在固定區域內滑動，能夠查看頁面其餘內容，不會影響工具欄的定位

• 鼠標滾輪滾動

• iscroll支持在pc端瀏覽器中使用鼠標滾輪控制區域滾動，但操做起來很不靈敏。這是因爲iscroll對鼠標滾輪事件作了攔截，而後縮小了滾輪的滾動距離，詳見iscroll4.js源代碼608-609行：
  

  • wheelDeltaX = e.wheelDeltaX / 12;//控制X軸鼠標滾輪速度
    wheelDeltaY = e.wheelDeltaY / 12;//控制Y軸鼠標滾輪速度

•  iscroll將每次的滾輪距離縮小爲系統默認距離的12分之一，難怪滾起來很慢，感受不靈敏。只須要將12改爲1，滾輪的滾動速度就恢復正常了。你也能夠根據實際須要設置成其餘值

• 輸入框聚焦不靈敏、沒法選擇文字

• 使用了iscroll以後，你會發現點擊輸入框時不靈敏，常常沒法聚焦；頁面文字也沒法選擇和複製。這是因爲iscroll要監聽鼠標事件和觸摸事件來進行滾動，因此禁止了瀏覽器的默認行爲，詳見源代碼92行：
  

  • onBeforeScrollStart: function (e) { e.preventDefault(); },

• iscroll不分青紅皁白，禁止了瀏覽器的一切默認行爲，致使上述問題。因此咱們須要稍做修改：
  

  • onBeforeScrollStart: function (e) {
    var target = e.target;
    while (target.nodeType != 1) target = target.parentNode;
    if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
    e.preventDefault();
    },

• 判斷觸發事件的元素是否是input、select、textarea等表單輸入類元素，若是不是就阻止默認行爲。這樣保證了輸入類元素能正確快速聚焦。 
  在上述修改中追加一個條件 target.tagName != ‘body’或者直接將onBeforeScrollStart修改成null，便可作到鼠標選取文字，但這樣的修改會致使iscroll滾動失效或不靈敏，因此沒法選取文字這個問題先放一邊吧。如你有更好的方法，歡迎回復

• select元素操做不靈敏或操做後白屏

• 使用iscroll後，還有一個較麻煩的問題，就是select元素點擊不靈敏（滾動以後點擊select，常常無響應）；有時點擊有反應了，下拉菜單顯示卻錯位（pc端）；選擇一項以後，頁面直接變成了空白（iphone、android中）或者頁面位置向上偏離，滾動區域位置出現偏離
• 說白了，就是致使select無法用。爲此我調試了好久，最後發現了問題所在：iscroll默認使用的是css的transform變形中的translate3d實現區域滾動，每次滾動實際是改變translate3d中的y軸值，實際的dom位置並無發生變化。translate3d會致使頁面的焦點錯誤，系統級下拉菜單的顯示則會致使其出現顯示偏離
• 控制滾動模式的代碼在67行：useTransform: true。好在iscroll提供了另外一種滾動方式，基於絕對定位位置變化的滾動。修改成useTransform: false以後，iscroll就會使用對定位位方式來實現滾動，該方式是咱們在web開發中模擬動畫的最經常使用方式，滾動以後dom的實際位置也同步發生了變化，不會出現錯位偏離現象
• 在pc端主流瀏覽器、iphone、android2.2下測試，select問題完美解決
• 不過須要注意，使用對position決定定位後，滾動區的寬度默認會自適應內容寬度，而不是父元素的100%，因此最好將滾動區域寬度設爲100%

• 美中不足

• iscroll是小而精的經典做品，名字也帶着apple範。但惟一美中不足的是，只能使用id調用