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 <jacky@sencha.com>
*/
(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运行及代码解析（上）的更多相关文章
- sencha touch 入门系列 (九) sencha touch 布局layout
布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...
- sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩
经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢,经常要10秒左右的时间甚至更多, 大家都知道,sencha touch开发的项目中引用了大量的js文件,当我们打开项目时,st的 ...
- C语言高速入门系列(五)
C语言高速入门系列(五) C语言指针初涉 ------转载请注明出处:coder-pig 本节引言: 上一节我们对C ...
- vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目（上）
其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(上) 前面我们已经学习了一个成熟的脚手架(vue-cli),笔者希望通过这个脚手架快速搭建系统(或项目).而展开搭建最好 ...
- sencha touch 入门系列 （二）sencha touch 开发准备
这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...
- sencha touch 入门系列 （七）sencha touch 类系统讲解（上）
在mvc结构的基础上,sencha touch又使用了sencha公司为extjs4开发出来的类系统,在面向对象的编程语言中,类是对对象的定义,它描述了对象所包含的大量属性和方法. 跟面向对象语言类似 ...
- Go语言入门系列(五)之指针和结构体的使用
Go语言入门系列前面的文章: Go语言入门系列(二)之基础语法总结 Go语言入门系列(三)之数组和切片 Go语言入门系列(四)之map的使用 1. 指针 如果你使用过C或C++,那你肯定对指针这个概念 ...
- OPEN(SAP) UI5 学习入门系列之二： 最佳实践练习（上）
这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入 ...
- Xen入门系列一【使用Xen4CentOS 在 Centos 6 上安装 Xen】
最近在学习Hadoop,在Win7下用VMware搭了三台虚拟机好不容易装好了Hadoop结果跑个两个单词的wordcount就跑了十分钟,郁闷啊,于是开始寻找效能更好的虚拟化解决方案,然后选定了Xe ...
随机推荐
- (转) eclipse安装lombok
lombok的官方网址:http://projectlombok.org/ 1. lombok的安装: 使用lombox是需要安装的,如果不安装,IDE则无法解析lombox注解,有两种方式可以安装l ...
- 关于那些常见的坑爹的小bug（会持续更新）
当我学了矩阵分析的时候我知道什么是麻烦,当我学了傅里叶级数的时候我知道什么是相当麻烦. 然而,当我刚刚接触前端,我才明确什么叫做坑爹的ie6.这个分享对于经验丰富的前端基本都遇过.对于刚入行的新手,也 ...
- pdo mysql连接时报[2002] No such file or directory
将PDO连接中的dsn的host由“localhost”改为“127.0.0.1”即可
- 在Linux环境下mysql的root密码忘记解决方法
MySQL密码的恢复方法之一 ．首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下 ...
- 什么是服务端渲染、客户端渲染、SPA、预渲染，看完这一篇就够了
服务端渲染(SSR) 简述: 又称为后端渲染,服务器端在返回html之前,在html特定的区域特定的符号里用数据填充,再给客户端,客户端只负责解析HTML. 鼠标右击点击查看源码时,页 ...
- 用CSS创建打印页面
用CSS创建打印页面,不必为打印而专门建立一个HTML文件,可以节省一些体力,其前提是按“WEB标准”用CSS+DIV布局HTML页面. 第一.在HTML页面加入为打印机设置的CSS文件 <li ...
- jQuery 中的编程范式
浏览器前端编程的面貌自2005年以来已经发生了深刻的变化,这并不简单的意味着出现了大量功能丰富的基础库,使得我们可以更加方便的编写业务代码,更重要的是我们看待前端技术的观念发生了重大转变,明确意识到了 ...
- 今天搞log4net插入错误日志去mysql数据库的时候出现了点问题，已解决。记录下解决方案
先上图 配置log4net的时候要填这项,可是这个value我不知道啊.....上图里的value是我用下面的方法获取的 MySqlConnection con = new MySqlConnecti ...
- Java调用FTP实例
package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStre ...
- 【Java面试题】15 String s="Hello"; s=s+“world！”;这两行代码执行后，原始的String对象中的内容到底变了没有？String与StringBuffer的超详细讲解！！！！！
1.Java中哪些类是不能被继承的? 不能被继承的是那些用final关键字修饰的类.一般比较基本的类型或防止扩展类无意间破坏原来方法的实现的类型都应该是final的,在java中,System,Str ...