2. 程式人生 > >sencha touch 入門系列 （五）sencha touch執行及程式碼解析（上）

sencha touch 入門系列 （五）sencha touch執行及程式碼解析（上）

阿新 • • 發佈：2019-02-06

　　由於最近專案比較忙，加之還要轉戰原生開發，所以很久沒更新了，今天我們接著上一次的內容往下講：

　　首先我們開啟index.html，這是我們整個程式的訪問入口，也是整個專案的引入地：

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>MyFirst</title>
    <style type="text/css">
         /**
         * Example of an initial loading indicator.
         * It is recommended to keep this as minimal as possible to provide instant feedback
         * while other resources are still being loaded for the first time
         */
        html, body {
            height: 100%;
            background-color: #1985D0
        }

        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            width: 100%;
            height: 30px;
            -webkit-animation-name: appLoadingIndicator;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: linear;
        }

        #appLoadingIndicator > * {
            background-color: #FFFFFF;
            display: inline-block;
            height: 30px;
            -webkit-border-radius: 15px;
            margin: 0 5px;
            width: 30px;
            opacity: 0.8;
        }

        @-webkit-keyframes appLoadingIndicator{
            0% {
                opacity: 0.8
            }
            50% {
                opacity: 0
            }
            100% {
                opacity: 0.8
            }
        }
    </style>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

首先我們看第4行

<meta charset="UTF-8">

　　這個是設定瀏覽器的預設編碼，建立專案的時候預設會建立為utf-8編碼，當然你也可以設定成GBK這些，根據自己的實際需要來，正常情況下保持utf-8就可以了，若去掉這個標籤，當頁面出現中文的時候將會出現亂碼

12行的樣式:

html, body {
            height: 100%;
            background-color: #1985D0
 }

這裡是用來定義整個頁面的高度為100%,以及它的背景色，開發時根據自己的實際需要修改

17到50行的樣式定義了一段css動畫，通過id關聯了body標籤中的div：

<div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
</div>

也就是我們專案開啟時的那三個一直閃爍的小點，在專案的js檔案載入完畢後，在app.js中通過Ext.fly('appLoadingIndicator').destroy()對其進行了銷燬

接下來最重要的就是53行引入的js了，這是整個專案js檔案的入口：

<script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>

你可以開啟對應的js檔案觀察下程式碼，

development.js的主要最用就是解析app.json檔案（我們的資原始檔的配置都寫在裡面，下面我們會給大家介紹下app.json檔案的配置項）載入相關的資原始檔，並對裝置進行判斷並設定一些css3媒體查詢的內容

關於css3的媒體查詢，是個很強大的功能，在移動webapp，以及現在流行的響應式開發中都起著巨大的作用，大家可以網上自己百度或者google瞭解下，

頁面中meta標籤中viewport的設定在android官方文件中也有講解：http://developer.android.com/guide/webapps/best-practices.html

下面我對程式碼做了簡單的註釋，因為這裡的程式碼正常情況下我們不用去修改，所以大家簡單瞭解下就可以，如果覺得看不懂程式碼或者想更好的學習js，強烈推薦《javascript高階程式設計》這本書，

目前最新版本是第三版，看完對js的提升還是相當大的，讀完之後可以再配合看看《javascript權威指南》，這本更適合作為工具書， 目前最新版本第6版

/**
 * Sencha Blink - Development
 * @author Jacky Nguyen <[email protected]>
 */
(function() {
    var head = document.head;

    function write(content) {
        document.write(content);
    }

    function addMeta(name, content) {
        var meta = document.createElement('meta');

        meta.setAttribute('name', name);
        meta.setAttribute('content', content);
        head.appendChild(meta);
    }

    //通過http請求讀取app.json檔案
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'app.json', false);
    xhr.send(null);

    //將讀取的app.json檔案的json內容解析為json物件
    var options = eval("(" + xhr.responseText + ")"),
        scripts = options.js || [],//如果存在js屬性將物件中的js屬性賦值給scripts變數，不存在則傳空陣列
        styleSheets = options.css || [],//同上，設定css屬性
        i, ln, path, platform, theme, exclude;

    //判斷app.json的json內容是否設定了platform屬性，主要用來配置theme主題的
    if(options.platform && options.platforms && options.platforms[options.platform] && options.platforms[options.platform].js) {
        scripts = options.platforms[options.platform].js.concat(scripts);
    }

    //通過瀏覽器的userAgent來判斷是否是ie10，如果是建立css3媒體查詢設定
    if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
        var msViewportStyle = document.createElement("style");
        msViewportStyle.appendChild(
            document.createTextNode(
                "@media screen and (orientation: portrait) {" +
                    "@-ms-viewport {width: 320px !important;}" +
                "}" +
                "@media screen and (orientation: landscape) {" +
                    "@-ms-viewport {width: 560px !important;}" +
                "}"
            )
        );
        document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    }

    //設定頁面的meta標籤，控制頁面的縮放以及寬高等
    addMeta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
    addMeta('apple-mobile-web-app-capable', 'yes');
    addMeta('apple-touch-fullscreen', 'yes');

    if (!window.Ext) {
        window.Ext = {};
    }
    Ext.microloaded = true;

    //平臺過濾物件，判斷專案位於什麼裝置平臺上
    var filterPlatform = window.Ext.filterPlatform = function(platform) {
        var profileMatch = false,
            ua = navigator.userAgent,
            j, jln;

        platform = [].concat(platform);

        function isPhone(ua) {
            var isMobile = /Mobile(\/|\s)/.test(ua);

            // Either:
            // - iOS but not iPad
            // - Android 2
            // - Android with "Mobile" in the UA

            return /(iPhone|iPod)/.test(ua) ||
                      (!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) ||
                      (/(BlackBerry|BB)/.test(ua) && isMobile) ||
                      /(Windows Phone)/.test(ua);
        }

        function isTablet(ua) {
            return !isPhone(ua) && (/iPad/.test(ua) || /Android|Silk/.test(ua) || /(RIM Tablet OS)/.test(ua) ||
                (/MSIE 10/.test(ua) && /; Touch/.test(ua)));
        }

        // Check if the ?platform parameter is set in the URL
        var paramsString = window.location.search.substr(1),
            paramsArray = paramsString.split("&"),
            params = {},
            testPlatform, i;

        for (i = 0; i < paramsArray.length; i++) {
            var tmpArray = paramsArray[i].split("=");
            params[tmpArray[0]] = tmpArray[1];
        }

        testPlatform = params.platform;
        if (testPlatform) {
            return platform.indexOf(testPlatform) != -1;
        }

        //如果使用者在app.json中配置了platform設定，判斷當前平臺進行匹配
        for (j = 0, jln = platform.length; j < jln; j++) {
            switch (platform[j]) {
                case 'phone':
                    profileMatch = isPhone(ua);
                    break;
                case 'tablet':
                    profileMatch = isTablet(ua);
                    break;
                case 'desktop':
                    profileMatch = !isPhone(ua) && !isTablet(ua);
                    break;
                case 'ios':
                    profileMatch = /(iPad|iPhone|iPod)/.test(ua);
                    break;
                case 'android':
                    profileMatch = /(Android|Silk)/.test(ua);
                    break;
                case 'blackberry':
                    profileMatch = /(BlackBerry|BB)/.test(ua);
                    break;
                case 'safari':
                    profileMatch = /Safari/.test(ua) && !(/(BlackBerry|BB)/.test(ua));
                    break;
                case 'chrome':
                    profileMatch = /Chrome/.test(ua);
                    break;
                case 'ie10':
                    profileMatch = /MSIE 10/.test(ua);
                    break;
                case 'windows':
                    profileMatch = /MSIE 10/.test(ua) || /Trident/.test(ua);
                    break;
                case 'tizen':
                    profileMatch = /Tizen/.test(ua);
                    break;
                case 'firefox':
                    profileMatch = /Firefox/.test(ua);
            }
            if (profileMatch) {
                return true;
            }
        }
        return false;
    };

    //在頁面中動態將app.json中配置的css檔案引入
    for (i = 0,ln = styleSheets.length; i < ln; i++) {
        path = styleSheets[i];

        if (typeof path != 'string') {
            platform = path.platform;
            exclude = path.exclude;
            theme = path.theme;
            path = path.path;
        }

        if (platform) {
            if (!filterPlatform(platform) || filterPlatform(exclude)) {
                continue;
            }
            Ext.theme = {
                name: theme || 'Default'
            };
        }

        write('<link rel="stylesheet" href="'+path+'">');//輸出到頁面
    }

    //在頁面中動態將app.json中配置的js檔案引入
    for (i = 0,ln = scripts.length; i < ln; i++) {
        path = scripts[i];

        if (typeof path != 'string') {
            platform = path.platform;
            exclude = path.exclude;
            path = path.path;
        }

        if (platform) {
            if (!filterPlatform(platform) || filterPlatform(exclude)) {
                continue;
            }
        }

        write('<script src="'+path+'"></'+'script>');//輸出到頁面
    }

})();

好玩developement.js，我們來看下它所解析的app.json檔案，

注意：正是因為developement.js裡是通過http請求來獲取app.json檔案的，所以用sencha cmd建立的專案必須放到伺服器環境下或者打包成安裝程式才能執行，直接開啟index.html是會報錯，無法執行專案的

app.json：
{
    /**
     * 應用的名稱空間，在專案中自定義專案檔案時都要以這個名稱空間開頭，例如自定義一個名為MyTest的view，必須得MyFirst.view.MyTest，否則會找不到檔案
     */
    "name": "MyFirst",

    /**
     * 專案的訪問頁面的地址
     */
    "indexHtmlPath": "index.html",

    /**
     * 專案開發環境下的絕對地址
     * 例如在你開發環境下的地址 "http://localhost/myapp/index.html".
     *
     * 這個屬性一般不需要設定，除非你需要釋出的時候引用服務端特定的資原始檔，這時你可以設定對應的服務端地址
     */
    "url": null,

    /**
     * 專案中自定義的引用的js檔案.
     * 每一個js檔案都被定義為一個json屬性物件:
     *      {
     *          "path": "path/to/script.js" // 相對於app.json檔案的js路徑
     *          "remote": true              // (選項)
     *                                      // - remote:該js檔案是否是引用的遠端檔案，如果設定為true即遠端檔案，在用sencha cmd專案打包的時候這個
　　　*　　　　　　　　　　　　　　　　　　　　    // - js檔案就不會被打包壓縮到app.js檔案（在app.json檔案中配置的資原始檔在打包時所有的js檔案都會被打包*     *  　　　　　　　　　　　　　　　　　　　　　//　　　到app.js檔案中壓縮成一行）　　　
　　　*　　　　　　　　　　　　　　　　　　　　　　// - 中，其預設值為undefined，也就是被打包壓縮過來
     *          "update": "delta"           // (選項)
     *                                      //  - 如果沒有指定這個選項，這個檔案只會被載入一次
     *                                      //    同時快取在localstorage（html5離線快取）中直到它的值發生了改變
     *                                      //  - "delta" 設定為改選項將會增量更新即只更新修改的部分，在2.2.1版本中釋出production帶離線快取的版本　　　*　　　　　　　　　　　　　　　　　　　　　　//　　　　時設定這個屬性在js需要更新　　　
　　　*　　　　　　　　　　　　　　　　　　　　　　// 　　時更新後，專案會報錯,新版本是否修復該問題未知
     *                                      //  - "full" 完全更新整個js檔案
     *          "x-bootstrap": true         // (Optional)
     *                                      // 標明檔案跟開發模式的依賴關係  
     *                                      // 這些檔案將不會拷貝到生成目錄中
     *                                      // 只會被development.js引用.
     *
     *      }
     */
    "js": [
        {
            "path": "touch/sencha-touch.js",
            "x-bootstrap": true
        },
        {
            "path": "bootstrap.js",
            "x-bootstrap": true
        },
        {
            "path": "app.js",
            "bundle": true,  /* 表示所有的js檔案在打包生成時都合併到app.js檔案中 */
            "update": "delta"
        }
    ],

    /**
     * css檔案的列表
     * 每一項都是一個json物件
     *      {
     *          "path": "path/to/item.css" // Path to file, if local file it must be relative to this app.json file
     *          "remote": true             // (Optional)
     *                                     // - Defaults to undefined (falsey) to signal a local file which will be copied
     *                                     // - Specify true if this file is a remote file which will not to be copied
     *          "update": "delta"          // (Optional)
     *                                     //  - If not specified, this file will only be loaded once, and
     *                                     //    cached inside localStorage until this value is changed to either one below
     *                                     //  - "delta" to enable over-the-air delta update for this file
     *                                     //  - "full" means full update will be made when this file changes
     *
     *      }
     */
    "css": [
        {
            "path": "resources/css/app.css",
            "update": "delta"
        }
    ],

    /**
     * 設定html5離線快取的快取檔案
     */
    "appCache": {
        /**
         * 快取檔案
         */
        "cache": [
            "index.html"
        ],
        /**
         * 網路選擇
         */
        "network": [
            "*"
        ],
        /**
         * 回撥項
         */
        "fallback": []
    },

    /**
     * 設定擴充套件的資原始檔路徑，這些檔案也會在打包的時候一起被打包進資原始檔
     */
    "resources": [
        "resources/images",
        "resources/icons",
        "resources/startup"
    ],

    /**
     * File / directory name matchers to ignore when copying to the builds, must be valid regular expressions
     */
    "ignore": [
        "\.svn$"
    ],

    /**
     * Directory path to store all previous production builds. Note that the content generated inside this directory
     * must be kept intact for proper generation of deltas between updates
     */
    "archivePath": "archive",

    /**
     * List of package names to require for the cmd build process
     */
    "requires": [
    ],

    /**
     * Uniquely generated id for this application, used as prefix for localStorage keys.
     * Normally you should never change this value.
     */
    "id": "23568a9e-e669-4786-b057-738279cffe3f"
}

developement.js解析完成後，專案就會載入app.js檔案，從而進入我們整個專案了.

這裡順便提及一下js檔案中引入的sencha-touch.js, 這是sencha cmd建立專案時生成的引用，

也是我們專案開發中推薦的引用，當你開啟sencha的sdk資料夾時，你應該能看到下面4種js

sencha-touch.js ：

　　sencha touch壓縮後的核心程式碼庫，裡面只包括了sencha touch的sdk中的核心程式碼，當你需要其他功能得時候，需要通過requires（我們會在後面的教程中詳細講解）的方式來引用指定的js，在專案完成後，使用sencha cmd的打包壓縮功能，只有requires的程式碼、核心程式碼以及使用者自己寫的專案程式碼會被壓縮到app.js中，這樣，就保證了專案檔案的最小化。包括phonegap從3.0開始也採用了模組化的結構，需要的功能才引入，保證檔案最小化

sencha-touch-all.js：

　　顧名思義，這個-all.js就是sencha touch壓縮後的所有程式碼了，除非特殊情況，否則我們很少會使用這個檔案。

sencha-touch-all-debug.js ：

　　這個是包含了未壓縮的sencha touch的所有程式碼的js檔案，看到debug，很多有開發經驗的同學應該知道這個檔案是用來除錯用的了：

sencha-touch-debug.js：

　　未壓縮的核心程式碼庫檔案

在sdk目錄下的builds資料夾下，還有個

sencha-touch-all-compat.js：

　　這個js檔案比較特殊，因為sencha touch從1.x版本到2.x版本的變化比較大，兩個版本沒法做到相容，這個js就是為了讓1.x版本升級到2.x版本來引用的，如果

你手頭的專案是1.x版本的，你想升級為2.x版本，你就需要在更新了sdk版本後引用該js檔案來達到相容升級的作用

下一講，我們將從app.js開始介紹整個專案的執行流程及mvc的處理方式

相關推薦

sencha touch 入門系列 （五）sencha touch執行及程式碼解析（上）

　　由於最近專案比較忙，加之還要轉戰原生開發，所以很久沒更新了，今天我們接著上一次的內容往下講： 　　首先我們開啟index.html，這是我們整個程式的訪問入口，也是整個專案的引入地： <!DOCTYPE HTML> <html manifest="

【原創】大資料基礎之Spark（5）Shuffle實現原理及程式碼解析

一 簡介 Shuffle，簡而言之，就是對資料進行重新分割槽，其中會涉及大量的網路io和磁碟io，為什麼需要shuffle，以詞頻統計reduceByKey過程為例， serverA：partition1: (hello, 1), (word, 1)serverB：partition2: (hell

sencha touch 入門系列 （二）sencha touch 開發準備

這是本人第一次寫部落格教程，沒什麼經驗，文筆也不是很好，寫這教程一方面為了鞏固自己這段時間的學習成果，一方面幫助大家解決問題，歡迎大家多提建議，指出問題。接下來我們就開始我們的sencha touch開發之旅了。 　　首先，我們開始搭建sencha touch的開發環境

【OCR技術系列之五】自然場景文字檢測技術綜述（CTPN, SegLink, EAST）

文字識別分為兩個具體步驟：文字的檢測和文字的識別，兩者缺一不可，尤其是文字檢測，是識別的前提條件，若文字都找不到，那何談文字識別。今天我們首先來談一下當今流行的文字檢測技術有哪些。 文字檢測不是一件簡單的任務，尤其是複雜場景下的文字檢測，非常具有挑戰性。自然場景下的文字檢測有如下幾個難點：

一個線上音樂軟體的故事（五、讓我們開始寫程式碼吧）

讓我們開始寫程式碼吧 現在有了明確的功能需求，幾乎克服了所有的技術障礙，那麼就可以開始動手編寫這個音樂播放軟體了。 一、組織專案結構 這個故事所講的線上音樂播放軟體並沒有很複雜的功能需求，介面數量很少，沒有資料庫操作。這樣的專案幾乎可以任意組織程式碼檔案，甚至可以沒有任何結構，把所有的程

JavaScript學習之小白篇（五-函式的作用域及建立物件）

好好學習 ，天天向上。Are you ready? 一、作用域及作用域鏈 1. 什麼是作用域？ 2. JS在ES5這個版本中有哪些作用域？ 1》script作用域（全域性作用域） 宣告在全域性作用域的變數，叫全域性變數，同時也是window物件的屬性 宣告在全域性作用域的函式，叫全域性函

牛客網三道程式設計題（五) 之華為機試線上訓練（四）進位制轉換、刪除重複出現的數字、句子逆序

1、進位制轉換       這一題利用 cout 的流輸出，非常簡單。不需要再根據下標啥的，再乘以16 或者除以16啥的。請注意：       1）利用 cout 流輸出的，都是字串，不管它是不是數字。       2）cout 預設輸出的是十進位制。此外，如果是八進位制，

Windows API入門系列之五 -一個正兒八經的SDK程式

上一篇，講了一個簡單的SDK程式的多種版本的編寫，彈出了一個視窗，顯示了我們計算1到10的結果，計算的程式不是重點，重點在於，一：讓大家認識到Unicode版本的程式和ASCII版本的程式在程式設計方面的區別，以及怎麼樣編寫出通用程式碼的程式。二：怎麼樣運用API或者c++庫函式格式化非字元資料到一個字串

[unreal4入門系列之五] 熟悉關卡編輯器介面

一. 標籤欄標籤欄就是最頂部看起來像這樣的東西：在最右方就是專案的名稱，如這裡的test1。前面的對話氣泡是反饋按鈕，你可以給Epic公司提供任何意見。而接著的帽子圖示，是顯示虛幻4內建的教程。 二. 選單欄 在標籤欄下方就是選單欄，它提供了大部分應用程式常用的命令

Kotlin+DataBinding：入門篇（DataBinding的安裝以及執行你的第一個demo）

前言：前幾天導師叫我去學DataBinding，正好趕上這幾天把以前放棄的Kotlin重新拾起（Kotlin的春天要來了？），所以就想到用Kotlin上使用DataBinding，前期踩了好多的坑（下面我會列出我踩到的坑，並提供解決辦法），然後去看了點視訊，學習了一些入門的使

提升HTML5的性能體驗系列之五 webview啟動速度優化及事件順序解析

執行時間 很快 runt 代碼 模式 本地 技術 apk loaded webview加載時有5個事件。觸發順序為loading、titleUpdate、rendering、rendered、loaded。webview開始載入頁面時觸發loading，載入過程中如果&am

2008 R2 輔域安裝和卸載（加域、退域及組策略的測試）

主域 輔域 組策略 加域 退域 一、輔域安裝 1、運行——dcpromo 2、向現有域添加域控制器 3、輸入主域域名fdwxyjy.com 4、選擇站點（默認即可，此處wuxi是因為在AD中重命名了） 5、輔域安裝完後重啟，在主域上可以看到原來Domain Contr

9.13作業2（完整溫度轉換、數字遊戲、解析身份證號...）

網址 ren mage code pan .cn 溫度 img image 1.完成完整的溫度轉換程序 輸入代碼： 1 a = input(‘"攝氏轉華氏請按1\n華氏轉攝氏請按2\n"‘) 2 3 if a == ‘1‘: 4 # 用戶輸入攝氏溫度

Faster RCNN演算法訓練程式碼解析（2）

接著上篇的部落格，我們獲取imdb和roidb的資料後，就可以搭建網路進行訓練了。 我們回到trian_rpn()函式裡面，此時執行完了roidb, imdb = get_roidb(imdb_name)，取得了imdb和roidb資料。 先進入第一階段的訓練：   print

Faster RCNN演算法訓練程式碼解析（3）

四個層的forward函式分析： RoIDataLayer：讀資料，隨機打亂等 AnchorTargetLayer：輸出所有anchors（這裡分析這個） ProposalLayer：用產生的anchors平移整圖，裁剪出界、移除低於閾值的的anchors，排序後使用nms，返回頂部排名的anchors

《Frustum PointNets for 3D Object Detection from RGB-D Data》論文及程式碼學習（二）程式碼部分

《Frustum PointNets for 3D Object Detection from RGB-D Data》論文及程式碼學習（二）程式碼部分 文章目錄 《Frustum PointNets for 3D Object Detection from RG

nginx+php整合（是讓nginx可以執行php，以及下載地址）

下載地址： nginx：http://nginx.org/en/download.html PHP： https://windows.php.net/download/ 都是官網的自己選擇版本 安裝檔案目錄: nginx: D:\wcnm\Nginx\nginx-12 

大資料教程（8.3）wordcount程式執行過程的解析

        上一篇部落格分享了wordcount的原始碼編寫、原理實現，本節將對wordcount在hadoop內部執行過程進行解析。         執行流程圖如下：

大資料教程（8.2）wordcount程式原理及程式碼實現/執行

        上一篇部落格分享了mapreduce的程式設計思想，本節博主將帶小夥伴們瞭解wordcount程式的原理和程式碼實現/執行細節。通過本節可以對mapreduce程式有一個大概的認識，其實hadoop中的map、reduce程

mybatis免sql外掛之JpaMapper-以Jpa hibernate的風格寫mybatis（主鍵賦值策略及useGeneratedKeys無效的坑）

mybatis免sql外掛之JpaMapper-以Jpa hibernate的風格寫mybatis（主鍵賦值策略及useGeneratedKeys無效的坑） 簡介 JpaMapper以Jpa hibernate的風格寫mybatis的程式碼，可以減少手動寫sql的煩惱。 優勢：