• 【翻译】Ext JS最新技巧——2014-8-13


    原文:Top Support Tips


     Greg Barry:新的框架、 新的文档类型(Doctype)

    在Ext JS 5,只支持IE8+,因此不再古力用户使用严格的HTML文档类型。现在,推荐使用HTML 5的文档类型,而且还推荐使用X-UA-Compatible作为meta标记以确保IE不会激活“兼容模式”,因为该模式不支持Ext JS。

    以下代码片段展示了用于Ext JS 5的理想的文档类型和HEAD:

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>

    在《Ext JS 5指南》中的新功能介绍中可以找到有关这方面的更详细的信息。

    Greg Barry:仔细检查重写

    重写是一个非常有用的用来扩展或改变核心类功能的工具,而且无需修改框架的源代码。Ext JS 4.1提供了一种新的方式用来创建这些框架的重写。在Ext JS 4和Ext JS 5的基本原则内,新的基于声明的重写的效果相当好。这些重写可以被放置在Sencha Cmd创建的overrides文件夹内,Cmd会自动将overrides文件夹内的重写包含在内,例如,如果使用了Ext.grid.Panel,就可以在overrides/grid/文件夹内创建一个名为Panel.js的文件,当bootstrap通过sencha app build、sencha app watch或sencha app refresh更新后,该文件就会被自动包含在bootstrap。

    这种重写方法可以在整个框架的内部代码风格内看到。实际的内部重写示例包括:主题、本地化、RTL和更多。

    尽管如此,还是可以看到一些从Ext JS 3就被纳入到应用程序的重写被应用在新的框架中。当将这些重写应用到新的应用程序价格,这可能在创建时产生时序问题。


    创建重写的首选方式如下:

    Ext.define('MyApp.overrides.panel.Panel', {
        override: 'Ext.panel.Panel',
        close: function() {
            console.log('My Change to Close');
            this.callParent(); // call the original method
        },
        helloWorld: function(){
            console.log('Hello World');
        }
    });

    下面来重温一下语法:

    首先,要根据应用程序的overrids文件夹使用适当的命名空间来定义重写:

    1. 添加override配置项并将重写类作为它的值。在示例中,要重写的是Ext.panel.Panel。
    2. 添加要重写的功能,这需要确保所有的相关部分。在当前示例,只是修改了close功能,让它输出一个控制台信息。如果创建一个面板并调用它的close方法, 将会在控制台看到信息“My Change to Close”。
    3. 注意:在重写方法内,如果需要调用基类的同名方法,就需要调用this.callParent方法。
    4. 还可以添加新的功能。正如你所知道的,在Ext.panel.Panel内并没有“helloWorld”方法。然而,这可以通过重写来添加它。现在,创建一个面板,并调用panel.helloWorld方法,将会输出信息“Hello World”。


    正如你所见到的,重写是一个强大的,可在应用程序中用来自定义框架的工具。如果还一直在使用Ext JS 3方式的重写,请对他们进行大修。

    可以在这里越多到更多有关的定义机制。

    Don Griffin:callParent(),一点建议

    callParent是Sencha类系统(在Ext JS和Sencha Touch经常会见到)提供的一个方法,用来调用基类的同名方法。这在从一个框架类派生且要重写诸如onRender这样的方法时会经常看到。在一个带有参数的方法内调用callParent方法时,有两种方式来将这些参数传递给基类的方法。可以像以下代码哪样使用简便的arguments关键字:

    Ext.define('App.view.MyPanel', {
        extend: 'Ext.panel.Panel',
        onRender: function (parentNode, index) {
            this.callParent(arguments);
        }
    });
     

    又或者,可以显式的将这些参数作为数组直接量传递:

    onRender: function (parentNode, index) {
        this.callParent([ parentNode, index ]);
    }

    这看上去没有区别,不过,在使用Sencha Cmd 5新的优化对callParent进行优化的时候,性能的改进会变得很明显。在启用了优化的时候,这两个方法会被优化为以下代码:

    onRender: function (parentNode, index) {
        Ext.panel.Panel.prototype.onRender.apply(this, arguments);
    }
     
    onRender: function (parentNode, index) {
        Ext.panel.Panel.prototype.onRender.call(this, parentNode, index);
    }
     

    在第二种情况下,优化会使用Javascript函数的call方法来替代apply方法。要避免使用arguments。这两种方式毫无疑问都是高性能的方式。事实证明要尽量避免创建数组直接量。显然,在启用了优化后的代码中性能是最至关重要的地方,因而值得使用显示数组来代替arguments。

    如果有任何问题,请访问论坛


  • 相关阅读:
    Struts2SpringHibernate整合示例,一个HelloWorld版的在线书店(项目源码+详尽注释+单元测试)
    Java实现蓝桥杯勇者斗恶龙
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 226 翻转二叉树
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 225 用队列实现栈
    Java实现 LeetCode 224 基本计算器
    Java实现 LeetCode 224 基本计算器
  • 原文地址:https://www.cnblogs.com/hainange/p/6334150.html
Copyright © 2020-2023  润新知