解读sencha touch移动框架的核心架构(一)
sencha的前身就是Extjs了,sencha 框架是世界上第一个基于HTML5的Mobile App框架
那么何谓框架,传统软件工程对于库和框架的区分主要着眼于对应用运行流程的控制权,框架提供架构,控制运行流程,让开发者在合适的地方书写针对具体问题的代码
sencha提倡的就是组件化编程,是面向对象的技术的一种近一步的发展延伸,类的概念仍然是组件技术中一个基础的概念,但是组件技术更核心的概念是接口。
sencha是重量级的架构了,一般来说很少会有公司用到内部的这种架构,因为太像java的Swing了
不过我在项目中用sencha组织的代码结构拿来主义本来不是我的风格,自己也改动了很多代码, 但是整体的设计还是参考的sencha了
有项目图为证:3万行以上的纯js代码架构哦~
AMD + sencha核心
AMD/CMD的实现只用了100行不到的代码,只是为简单的管理模块
在强类型语言中,继承机制是得到语言本身的支持的,就算代码开发者比较一般,也不会出太大的问题,但是js就不同了,要实现这一套机制就有一套很复杂的模拟
当然这里性能与维护扩展本来就是一个单选题 - -.
当然像backbone这种也是类似的提供纯架构方案
为什么我选择sencha作为参考架构呢?
高端大气上档次
关于Ext/sencha的好与坏这里就不多加讨论了,它的精华是需要你去慢慢体会的
按照最新sencha 2.3.1源码的区分
从Ext4.0开始,风格大变,提供一个完整的沙箱模式
就只针对core文件夹的内容,具体就是这么几个文件了,
Ext.js,Base.js,Class.js,ClassManager.js,Loader.js
这里是架构的核心文件,架构真心有点复杂,先看看历史的演变,老版本的架构
EXTJS组件化编程
组件化的简单定义:
组件化的基础是面向对象,在面向对象编程的基础上将一个或多个小部件封装到一起,成为一个模块,让其成为一个新的组件(适合我们需求的组件),每一个模块都应当具备单独运行的能力
通过继承来实现了对象的封装,ExtJS最底层的那个基类是Observable,它提供了最基础的事件机制,通过层层的封装与扩展,它的派生类中是越来越庞大,所提供的功能也越来越多,就比如Window这个组件,它继承自Panel并添加了默认的resizabel,closable,draggable等属性(Panel也可以加入类似的函数,但是需要编码实现)。而Panel又继承自Container,并加入了渲染Title和tbar等功能
先看老版本的实现继承的机制
Ext.extend( superclass, overrides ) 在4.0后就作废了,统一换成了Ext.define的架构方式
先看3.4版本的,之后在过渡4.0,发现是一个多么大的跨越
Ext.apply(Ext, { /**
* This method deprecated. Use {@link Ext#define Ext.define} instead.
* @method
* @param {Function} superclass
* @param {Object} overrides
* @return {Function} The subclass constructor from the `overrides` parameter, or a generated one if not provided.
* @deprecated 2.0.0 Please use {@link Ext#define Ext.define} instead
*/
extend: function() {
// inline overrides
var objectConstructor = objectPrototype.constructor,
inlineOverrides = function(o) {
for (var m in o) {
if (!o.hasOwnProperty(m)) {
continue;
}
this[m] = o[m];
}
}; return function(subclass, superclass, overrides) {
// First we check if the user passed in just the superClass with overrides
if (Ext.isObject(superclass)) {
overrides = superclass;
superclass = subclass;
subclass = overrides.constructor !== objectConstructor ? overrides.constructor : function() {
superclass.apply(this, arguments);
};
} //<debug>
if (!superclass) {
Ext.Error.raise({
sourceClass: 'Ext',
sourceMethod: 'extend',
msg: 'Attempting to extend from a class which has not been loaded on the page.'
});
}
//</debug> // We create a new temporary class
var F = function() {},
subclassProto, superclassProto = superclass.prototype; F.prototype = superclassProto;
subclassProto = subclass.prototype = new F();
subclassProto.constructor = subclass;
subclass.superclass = superclassProto; if (superclassProto.constructor === objectConstructor) {
superclassProto.constructor = superclass;
} subclass.override = function(overrides) {
Ext.override(subclass, overrides);
}; subclassProto.override = inlineOverrides;
subclassProto.proto = subclassProto; subclass.override(overrides);
subclass.extend = function(o) {
return Ext.extend(subclass, o);
}; return subclass;
};
}(), /**
* Proxy to {@link Ext.Base#override}. Please refer {@link Ext.Base#override} for further details.
*
* @param {Object} cls The class to override
* @param {Object} overrides The properties to add to `origClass`. This should be specified as an object literal
* containing one or more properties.
* @method override
* @deprecated 2.0.0 Please use {@link Ext#define Ext.define} instead.
*/
override: function(cls, overrides) {
if (cls.$isClass) {
return cls.override(overrides);
}
else {
Ext.apply(cls.prototype, overrides);
}
}
});
在4.0以前的架构还是相对比较简单的,只是用了一个关键的继承,不像4.0以后那就是一套完整的沙箱架构
针对JS的继承机制,那本红本书高3已经把细节讲的很透彻了
当然也有漏掉的,比如创建一个空函数的作用
var F = function() {},
F.prototype = superclassProto;
subclassProto = subclass.prototype = new F();
backbone的继承机制基本大同小异
实现详解
一般继承的手段无非就是两种,原型继承与对象冒充
⒈原型继承就是利用了原型的查找合函数的作用域,好处就是内存处只有一份,坏处就是原型是共享的,如果有引用类型所有的实例都可以被修改
⒉对象冒充就是拷贝属性了,把所有的实例属性与方法都拷贝一次,坏处自然就是每一份拷贝都是占独立的一份空间了
原型继承自然就是引用原型链了,这个prototype没什么好说的,但是不能继承静态属性,因为这个不在原型链上
对象冒充,就是通过call,apply处理的,因为JS有运行作用域的,要注意了prototype上的的属性是不会被处理的
现在看看Ext的完美解决方案
看下面例子,实现一个最基本的继承
var a = function(id){
this.name = id;
} a.prototype = {
sayA : function(){
alert(this.name)
}
}; var b = Ext.extend(a, {
constructor:function(name){
this.name = name;
},
sayB : function(){
this.constructor.superclass.constructor(111)
}
}); c = new b('Aaron')
ext需要解决的问题
1 构造器问题:类b没有构造器,直接是通过Ext.extend生成的,所以内部可定需要类似工厂方法,生成一个类的包装器
2 父类调用:原型只能继承原型链上的属性与方法,如果要调用父类构造器,如何处理?所以ext需要留一个接口出来可以调用父类
3 静态方法处理
4 实现继承后,构造器引用被修改
可以先思考下以上问题,具体的实现请等下一章~
解读sencha touch移动框架的核心架构(一)的更多相关文章
- 解读sencha touch移动框架的核心架构(二)
本来这行要详解Ext.extend的,但是发现网站有很详细的,那么就跳过去吧 为保持一个系列的分析,还是先搬过来吧,下章开始分析Ext4.0的新架构 在Java中,我们在实现继承的时候存在下面几个事实 ...
- sencha touch 入门学习资料大全(2015-12-30)
现在sencha touch已经更新到2.4.2版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...
- 【PHP】用了这么久的Laravel框架,你分析过核心架构了没
Laravel最初的设计是为了面向MVC架构的,它可以满足如事件处理.用户身份验证等各种需求.另外它还有一个由管理数据库强力支持,用于管理模块化和可扩展性代码的软件包管理器. Laravel以其简洁. ...
- sencha touch 入门系列 (五)sencha touch运行及代码解析(上)
由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTY ...
- sencha touch 框架的几种核心脚本文件之间的区别
sencha-touch-debug.js 供开发时用sencha-touch.js 供发布时用sencha-touch-all.js All 供不能使用SDK构建应用程序时,将 ...
- 动端逐渐出了许多的移动端的框架,比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点,不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点:
移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...
- 移动Web框架:jQuery Mobile VS Sencha Touch
最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...
- 跟我一起玩转Sencha Touch 移动 WebApp 开发(一)
1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布 ...
- (转)Sencha Touch和jQuery Mobile的比较
原文:http://extjs.org.cn/node/664 Sencha Touch和jQuery Mobile的比较 Posted 周三, 08/07/2013 - 10:07 by admin ...
随机推荐
- 迷之bug
是这样的.要解决tbody滚动,而thead不动的布局问题,我把它们分别放在两个表格里,上面的只有thead,下面的只有tbody, 然后解决宽度对齐的问题,我用colgroup设置每列的宽度,用的都 ...
- 【转】iOS学习之适配iOS10
适配iOS10 2016年9月7日,苹果发布iOS 10.2016年9月14日,全新的操作系统iOS 10将正式上线. 作为开发者,如何适配iOS10呢? 1.Notification(通知) 自从N ...
- 【转】bash 参数展开(Parameter Expansion)
转自:http://www.360doc.com/content/13/0513/20/9437165_285204629.shtml ${parameter} 取parameter的值 ${para ...
- 将库打包到nuget服务器
前言 由于目前.net core无法引用本地的 assembly ,所以尝试将项目的依赖库打包到nuget服务器. 相关的工具 Nuget Package Explorer 参考文档 dotnet ...
- Mongodb常用命令介绍
查看命令的方式: 1.在shell中运行db.listCommands() 2.在浏览器中访问管理员接口:http://ipaddress:28017/_commands 下面介绍在Mongodb中最 ...
- 基于XML配置的spring aop增强配置和使用
在我的另一篇文章中(http://www.cnblogs.com/anivia/p/5687346.html),通过一个例子介绍了基于注解配置spring增强的方式,那么这篇文章,只是简单的说明,如何 ...
- asp.net mvc引用控制台应用程序exe
起因:有一个控制台应用程序和一个web程序,web程序想使用exe程序的方法,这个时候就需要引用exe程序. 报错:使用web程序,引用exe程序 ,vs调试没有问题,但是部署到iis就报错,如下: ...
- common.js js中常用方法
//创建CSS样式段 //classid: CSS样式段ID//font: 字体//size: 字体大小//color: 字体颜色//style: 字体风格function FCMakeCSSClas ...
- js中的navigator对象
Navigator 对象包含有关浏览器的信息.所有浏览器都支持该对象 在控制台中输出相关信息的代码 <script> console.log(navigator); </script ...
- Firefox页面缩放
这一段firefox只能缩放文字,不能实现整个页面的缩放,各种尝试,最后发现是勾选了view--zoom--zoom text only!!(按alt键调出菜单)