sencha touch 入門系列 (五)sencha touch執行及程式碼解析(上)
由於最近專案比較忙,加之還要轉戰原生開發,所以很久沒更新了,今天我們接著上一次的內容往下講:
首先我們開啟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的煩惱。 優勢: