不知不觉,现在国外网页已经到了“优先为移动平台创建”的时候了,优点是可以优化CSS结构与代码量,还可以使得移动端用户体验更优质的性能。我目前使用的这个Medium写作平台就是基于“移动先行”策略而开发的,使用起来不论什么方式,它的体验都很棒。 为 小屏幕的移动设备减少数据传输量可以大幅提高移动设备对web的加载性能,而性能对你的用户满意都有着重要的影响。Guy Podjarny做过调查,86%的响应式网站在最小的手机屏幕上浏览时的页面大小与大屏幕是相同的。也就是说虽然采用响应式设计的网站看起来像个移动站 点,实际上它们大多数加载了大屏幕端所有内容,造成的原因无外乎这三种: 1.下载并隐藏 2.下载并缩小 总结一下最近学习到的关于图片优化的相关问题。…
移动前端工作的那些事—前端制作篇之框架篇–Sencha Touch框架
Sencha Touch是个重量级的框架,是基于extjs写的, 它的使用原理全是封装好的方法,包括页面布局和版块。全是js方法生成。换句话说HTML页面结构文档中之间是没有任何前端代码结构的。这个也算是该框架的一大特点吧。
该框架优点是兼容性很广,Android和IOS上都可以良好的运行。在布局上,手机、平板电脑都可以兼容。但其缺点也较明显。过于封闭,调试起来很麻烦。需要有相当水平的前端技术才能使用。上手较慢,另外,运行速度和流畅度上,同比于jquery mobile、jqmobi、jqtouch差了一些。前端水平一般者,不建议使用该框架!
这个框架我使用的不多。平时偶尔拿来练练手而已,没有实际太多的项目开发的使用经验,对该框架的使用程度而言,我只是停留在初级阶段,对它没有进行很深入的研究和学习。因此本文权当是该框架的入门文章。只对该框架的进行简单的介绍即可。想通过该篇文档对Sencha Touch框架的使用水平有质的飞跃的话,请选择专业的教程进行系统的学习,谢谢。
言归正传,下面对该框架进行简单的介绍,同时我已经认为你的电脑上已经下载了该框架的整体文件包了。以下为代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>GeoTweets</title> <!-- Sencha Touch CSS --> <link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css"> <!-- Custom CSS --> <link rel="stylesheet" href="css/guide.css" type="text/css"> <!-- Google Maps JS --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <!-- Sencha Touch JS --> <script type="text/javascript" src="../../ext-touch-debug.js"></script> <!-- Application JS --> <script type="text/javascript" src="src/index.js"></script> </head> <body></body> </html>
这段代码是我从该框架官网上的一个demo中截取出来的。大家可以看到该页面中<body></body>之间没有任何前端代码内容。这个也是这个框架的一大特点。下面对以上代码进行一个简单的说明。
<link rel="stylesheet" href="../../resources/css/ext-touch.css" type="text/css"> 上面的代码是其框架自带的css样式,直接导入即可! <link rel="stylesheet" href="css/guide.css" type="text/css"> 这段代码导入的是你关于自建项目的自定义的样式表文件 <!-- Google Maps JS --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <!-- Sencha Touch JS --> <script type="text/javascript" src="../../ext-touch-debug.js"></script> <!-- Application JS --> <script type="text/javascript" src="src/index.js"></script>
这三段是JS文件,第一个是谷歌的地图插件(因为这个demo介绍的是外部地图插件的使用,所以这里要导入这个js,这段JS本身和框架没有关系),第二个js则是sencha touch框架的主执行程序必须导入!第三个js则是生成该项目的关键JS(也是重点的介绍对象,每个项目都会有一个专门的js文件,该文件负责页面逻辑、页面布局、版块生成等等)。
下面,详细说明这个index.js。我会详细的分段加以说明,其代码如下:
Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: false, onReady: function() { var timeline = new Ext.Component({ title: 'Timeline', cls: 'timeline', scroll: 'vertical', tpl: [ '<tpl for=".">', '<div class="tweet">', '<div class="avatar"><img src="{profile_image_url}" /></div>', '<div class="tweet-content">', '<h2>{from_user}</h2>', '<p>{text}</p>', '</div>', '</div>', '</tpl>' ] }); var map = new Ext.Map({ title: 'Map', getLocation: true, mapOptions: { zoom: 12 } }); var panel = new Ext.TabPanel({ fullscreen: true, animation: 'slide', items: [map, timeline] }); var refresh = function() { var coords = map.geo.coords; Ext.util.JSONP.request({ url: 'http://search.twitter.com/search.json', callbackKey: 'callback', params: { geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi', rpp: 30 }, callback: function(data) { data = data.results; // Update the tweets in timeline timeline.update(data); // Add points to the map for (var i = 0, ln = data.length; i < ln; i++) { var tweet = data[i]; // If the tweet is geo-tagged, use that to display marker if (tweet.geo && tweet.geo.coordinates) { var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]); addMarker(tweet, position); } } } }); }; // These are all Google Maps APIs var addMarker = function(tweet, position) { var marker = new google.maps.Marker({ map: map.map, position: position }); }; map.geo.on('update', refresh); var tabBar = panel.getTabBar(); tabBar.addDocked({ xtype: 'button', ui: 'mask', iconCls: 'refresh', dock: 'right', stretch: false, align: 'center', handler: refresh }); } });
其中,Ext.setup({})是创建整个项目的方法;它表示的是设置一个触摸功能设备的使用页面.它允许你为你的应用程序设置不同的开始属性和行为;
tabletStartupScreen: ‘tablet_startup.png’,//非手机(一般所指的都是平板电脑)初始化时所使用的图片;
phoneStartupScreen: ‘phone_startup.png’,//手机初始化时所使用的图片;
icon: ‘icon.png’,//保存至主屏幕时进入项目的图标;
glossOnIcon: false,//是否给该图标加入高光效果;
onReady: function() {}//当浏览器的文档对象模型(DOM)准备好之后,所开始执行的方法;可以定义应用程序代码的其余部分,包括各个页面模版的组成,都在这个函数里写。类似于jquery中的$(document).ready();
剩下的则开始定义页面中的各个组件部分;基本模式如下:
var objectName = new Ext.ComponentName({ objectDefinition });
其中:
objectName是用于引用该对象的变量名.
ComponentName是对象的类名称.
objectDefinition 定义对象的属性和行为.
语法的使用方法近似于javascript面向对象的写法;我分段加以说明:
var timeline = new Ext.Component({ title: 'Timeline', // 所要显示的标题名字 cls: 'timeline', // 要使用的CSS样式 scroll: 'vertical', // 所采用的滑屏方式 tpl: [ // 创建一个名为tweet的模块面板; '<tpl for=".">', '<div class="tweet">', '<div class="avatar"><img src="{profile_image_url}" /></div>', // 该面板的图片路径 '<div class="tweet-content">', '<h2>{from_user}</h2>', // 题目名字 '<p>{text}</p>', // 具体内容 '</div>', '</div>', '</tpl>' ] });
其中,{profile_image_url}、{from_user}、{text}都是采用json方式获取的。这里就不讨论了。这里的值可以写死的。如:”<img src=”images/XXX.png” />;
再创建一个地图组件:
var map = new Ext.Map({ title: 'Map', //所要显示的标题名字 getLocation: true, // 是否使用地理位置 mapOptions: { //地图组件参数层的设置; zoom: 12 } });
再创建一个容器组件(这个非常重要!!!,必须要有!!!类似于在<body></body>之间加入了一个整体内容的<div></div>,说通俗一点就是创建一个可以放入内容的容器);
var panel = new Ext.TabPanel({ fullscreen: true, // 容器是否开启为全屏模式(就是把移动终端的屏幕铺满); cardAnimation: 'slide', // 页面之间的动画切换采用的样式; items: [map, timeline] // 这块非常关键!!!它表达的意思就是该容器中所要包含的模块项目有什么!! 我们把上面创建好的map地图组件和timeline组件放入到里面去。 });
至于地图组件的使用代码这里就不详细赘述了。大家看看就好。地图具体使用这块可以略过,有想详细了解的可以查阅谷歌地图插件的API。
var refresh = function() { var coords = map.geo.coords; Ext.util.JSONP.request({ url: 'http://search.twitter.com/search.json', callbackKey: 'callback', params: { geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi', rpp: 30 }, callback: function(data) { data = data.results; // Update the tweets in timeline timeline.update(data); // Add points to the map for (var i = 0, ln = data.length; i < ln; i++) { var tweet = data; // If the tweet is geo-tagged, use that to display marker if (tweet.geo && tweet.geo.coordinates) { var position = new google.maps.LatLng(tweet.geo.coordinates[0], tweet.geo.coordinates[1]); addMarker(tweet, position); } } } }); }; // These are all Google Maps APIs var addMarker = function(tweet, position) { var marker = new google.maps.Marker({ map: map.map, position: position }); }; map.geo.on('update', refresh);
最后这个方法有必要拿出来说明一下,这个组件其实是添加自定义刷新按钮到标签栏,并对这个按钮进行了设置:
var tabBar = panel.getTabBar(); tabBar.addDocked({ xtype: 'button',//定义属性为button按钮; ui: 'mask',//UI的外观; iconCls: 'refresh',//按钮的CSS样式; dock: 'right',//水平放置的方式为居右; stretch: false,//位置是否为固定,和dock配合使用; align: 'center',//垂直情况下的排列方式为居中; handler: refresh//按钮点击时执行创建的地图组件refresh; });
只此,一个简单的应用就创建完了。保存各个文件后,就可以预览所创建的项目了。
以上就是sench touch一个简单demo的应用了。另外,我以前在自学这个sench touch框架的时候,看了几个关于使用该框架的教程视频后。总结并写了一些关于sencha touch的各种demo进来,可以供学习的同学已做参考!我逐行加了注释,以便于学习的同学便于理解。以下是代码:
<script> //例子一! Ext.setup({//创建一个工程 onReady:function(){//读取工程所用的方法是: new Ext.Panel({//新建一个面板,相当于一个容器body或是是DIV等。 fullscreen:true,//显示的方式是全屏状态。 style:"background-color:#fc0",//设置面板的背景色样式。 items:[],//项目 dockedItems:[//添加的项目。 { dock:"right",//让添加的项目的排布方式显示为居右。 html:"another docked item",//该项目里包含的HTML内容。 style:"back-ground-color:#f0c",//设置这个项目的背景色。 height:200,//可以设置这个项目的高。 width:500,//可以设置这个项目的宽。 }]})}}) //例子二!可以再项目里在添加其他的项目。 Ext.setup({ onReady:function(){ new Ext.panel({ fullscreen:true, items:[{//这个知识点是在项目里添加其他的项目!。 width:340,//设置这个项目的宽度, height:210,//设置这个项目的高度, cls:"panel-1",//这个项目调用的外部的CSS样式是什么。 html:"panel",//包含的HTML内容是什么。 dockedItems:[{ dock:"top", width:130, height:200, cls:"panel-2", html:"inner panel", dockedItems:[{//我们还可以在添加项目里中再添加项目。 dock:"top", width:130, height:50, cls:"panel-3", html:"inner panel", }] }] }]})}}) //例子三!建立一个标题栏。 Ext.setup({ onReady:function(){ var gongjulan= new Ext.Toolbar({//定义一个变量为新建的工具栏。这个工具栏为sencha touch内置的。可以通过修改其css样式来实现自定义。 dock:"top",//它的排布方式局顶部显示。 title:"Toolbar",//名称为toolbar. items:[{//在这个工具栏里添加一个项目文本为按钮字样。 text:"button" }] }) new Ext.panel({//建立一个body面板。 fullscreen:true,//显示方式为全屏。 dockedItems:[gongjulan]//在这个面板里添加刚才定义的这个工具栏。 }) }}) //例子四!一个综合的复杂的动画应用。视频学习地址:<A href="http://v.youku.com/v_show/id_XMjkyNDgwMzk2.html">http://v.youku.com/v_show/id_XMjkyNDgwMzk2.html</A> App = new Ext.Application({//建立一个新的应用,这个应用也是sencha touch内置的。下面是要为这个应用定义方法: name:"App",//为这个应用定义一个名称。 launch:function(){//在这个应用里,要启动一个方法。launch是启动开启的意思。 this.views.viewport = new this.viems.Viewport();//这个视图的视图窗口等于一个新的视图的视图窗口。 } }) //例子五!布局实例1! Ext.setup({//创建一个方法。 onReady:function(){ var red={ dock:"top",//排布模式为居上。 style:"background-color:#822222; color:white",//行业样式的定义。 title:"red",//命名标题。 html:"red",//html内容。 }; var rootPanel=new Ext.Panel({//创建body面板 fullscreen:true,//全屏显示 layout:"auto",//布局方式为自动 items:[red]//项目输出为定义的变量red. }) } }) //例子六!布局实例2 Ext.setup({ onReady:function(){ var bottomChanger=new Ext.Carousel({//添加一个滑屏事件。默认滑屏方式为水平滑动。 direction:"vertical",//将滑屏方式改为上下垂直滑动。 items:[ {cls:"yangshi1"},"//上下滑屏的第一屏内容。 {cls:"yangshi2"},//上下滑屏的第二屏内容。 {cls:"yangshi3"},//上下滑屏的第三屏内容。 ] }) var credits=new Ext.Panel({ dock:"bottom", html:"yiduanwenzi", }) rootPanel=new Ext.Panel({ fullscreen:true,layout:"card",//当显示模式为card的时候,则可以通过cardswithanimation这个参数来实现动画设置。请详细参考layout的所有参数。以及各个参数的用法。详见API文档。 defaults:{flex:1},//个人理解为布局等分的份数。详情可以参考sencha touch之Ipad开发文章。如果为1的话。应该是被设置的这个项目。1等分屏幕剩下的部分。如果另一个项目也设置了为1.那么就是这两个项目等分屏幕。 cardSwitchAnimation:{type:"fade",duration:500},//动画切换模式为渐隐。时间为500毫秒。 items:[topChanger,centerChanger,bottomChanger],//包含的项目有三个插件。 dockedItems:[credits]//另外添加的一个项目。要理解dockedItems和item之间的区别!! }) } }) </script>
原文:http://blog.sina.com.cn/s/blog_3f1fc8950101n5b1.html