、Extjs核心工具方法

1、Ext.onReady

Ext.onReady在DOM模型加载完毕后才进行操作。

优点：无需像onload事件那样，等待页面的所有资源都加载完毕后才进行操作。

"onReady方法是Ext.Loader.onReady()方法的别名"

其语法如下：

Ext.onReady(Object fn,Objet scope,Objet options)

其中：

fn:指定Ext JS和HTML页面加载完成后要执行的方法，fn参数类型为对象（必传参数）；

scope:指定执行该方法的范围（可选参数）；

options：指定执行一些附加选项，比如delay等（可选参数）。

2、Ext.create

Ext.create方法是创建对象的方法，

"在Ext JS 4版本之前，一直使用new关键字创建对象-- new classname([config])"

其语法如下：

Ext.create( String className, Object args)

其中：className指定要创建对象的类名，可以是类的全名、别名或者备用名；

args是一个JavaScript对象，用于向新生成的对象传入构造参数值（也称为配置选项，即为config属性指定选项传入参数值）,类型为对象。

二、Ext JS 4 语法

1、配置对象

config:用于为该类指定配置选项，Ext JS会自动为config指定的选项添加setter和getter方法。

2、关于xtype

定义xtype来指定该位置使用什么组件。

定义xtype，一般使用组件的别名。

3、使用Ext.widget或者Ext.createWidget创建对象

Ext.widget的作用是使用别名来创建对象。 Ext.widget=Ext.createWidget;

其语法如下：

Ext.widget( classname,[config] )

其中： classname是对象的别名；

configs是可选参数，为对象的配置对象（config options）,类型为对象。

4、使用Ext.ns或者Ext.namespace定义命名空间

Ext.namespace()方法用于创建一个或多个命名空间，命名空间可用于限定函数、类的范围和作用域，可以 很好的解决二者的同名冲突。

很多时候都会使用命名空间来组织相关类和其他类。在Extjs中，使用Ext.namespace方法可创建命名空间

其语法如下：

Ext.namespae(namespace1,namespae2,...)

其中namespace1、namespace2都是字符串数据，是命名空间的名字

5、使用Ext.define定义新类

Ext.define()方法和Ext.extend()方法都用于自定义类。

"Ext.define()方法相当于Ext.ClassManager.create()方法的别名"

"在Ext JS 3版本，定义新类使用的是Ext.extend方法（不推荐使用）"

其语法如下：

Ext.define( String className, Object properties,[Function callback] );

其中：className:用于执行自定义的类名（推荐采用与java类名相同的命名规则）；

properties：新类的配置对象，对象里包含了类的属性集对象（用于为该类定义属性、方法）。

callback：回调函数，当类创建完成后执行该函数（用于指定该类创建成功的回调函数）。

注意：properties该对象可以指定任何合法的属性，以下是几种具有特殊意义的属性。

Ⅰ.self:引用当前类本身

Ⅱ.alias:为该类定义别名

Ⅲ.alternateClassName:为该类定义可选的类名

Ⅳ.config:用于为该类指定配置选项，Ext JS会自动为config指定的选项添加setter和getter方法

Ⅴ.extend:用于指定该类继承的父类

（还可以通过constructor为该类指定构造器）

Ⅵ.inheritableStatics:与statics属性相同，也用于为该类定义静态方法和静态属性，该属性的 定义的静态方法和静态属性可以被子类继承

Ⅶ.mixins:用于列出所有要被混入的类

Ⅷ.override：用于注定要覆盖的类

Ⅸ.requires:用于列出在实例化该类之前，必须预先加载的类

Ⅹ.singleton:如果该属性被设为true,则该类的实例将是单例的

ⅩⅠ.statics:为该类定义静态方法和静态属性

ⅩⅡ.uses:用于列出必须与该类同时使用的类

6、使用Ext.defer方法指定延迟执行的函数

Ext.defer()用于指定延迟执行的函数

其语法如下：

Ext.defer(Function fn,Number millis,[Object scope],[Array args])

其中：

fn参数执行需要延迟执行的函数；

millis:指定延迟多少毫秒后执行fn函数；

scope参数用于指定执行fn函数的范围；

args用于执行传入fn函数的参数；

7、Ext.apply和Ext.applyIf方法

Ext.apply()及Ext.applyIf()方法都是用于把一个对象中的属性复制到另一个对象中。

共同点：都用于实现属性复制。

不同点：

Ext.apply()将会覆盖目标对象中的属性；

Ext.applyIf()只复制目标对象中没有、而源对象中有的属性不会发生属性覆盖。

其语法如下：

Ext.apply()方法的语法格式为：

Ext.apply(Object object, Object config,Object defaults)

作用：

把config、defaults两个对象的属性复制到objet中，但是当config、default两个对象的属性值发生冲 突时，config的属性值取胜。

8、Ext.isXxx方法---用于判断是否为某某对象

Ext.isXxx()方法代表系列的方法，它们都用于判断是否为某某对象，isXxx()方法总是返回Boolean值。

9、Ext.each和Ext.iterate方法

Ext.each()方法用于遍历数组，它是Ext.Array.each()方法的别名。

Ext.iterate()方法相当于Ext.Array.each()方法和Ext.Object.each()方法“综合体”，

当被遍历的数据是数组时，Ext.iterate()方法底层调用Ext.Array.each()方法进行遍历；

当被迭代的数据是对象时，Ext.iterate()方法底层调用Ext.Object.each()方法进行遍历；

三、Ext JS扩展的工具方法---更多方法参考：Ext JS API文档

Ext JS扩展的所有工具方法都直接位于Ext命名空间下。

Ⅰ、为Array扩展的工具方法---Ext.Array工具类

JavaScript数组用做栈的两个方法如下：

①.push(ele):元素入栈，返回入栈后数组的长度。

②.pop()：元素出栈，返回出栈的数组元素

JavaScript数组作为队列使用的两个方法如下：

①.unshift(ele):元素入队列，返回入对列后数组的长度。

②.shift()：元素出队列，返回出队列的数组元素。

Ⅱ、为Date扩展的工具方法---Ext.Date工具类

Ext.Date为操作Date对象提供了大量的工具方法

例如：Ext.Date.format()、Ext.Date.between()两个方法

Ⅲ、为Function扩展的工具方法---Ext.Function工具类

Ext.Function为JavaScript函数新增了大量工具方法

Ⅳ、为Number扩展的工具方法---4个工具类方法

Ext.Number为JavaScript的数值类型的值

Ext.Number.constrain()工具方法---Ext.Number.constrain(20，10，30) //20截取傲10~30范围内

Ext.Number.from()工具方法---Ext.Number.from("abc","20") //字符串abc转换为数值

Ext.Number.snap()工具方法---Ext.Number.snap(23,7,10,20) //返回离23最近的7的倍数(必须在10~30之间)

Ext.Number.snap()工具方法：作用--先获取距离指定数值最近的、特殊数值的倍数，然后将得到的数值截取 到指定范围之内。

Ext.Number.toFixed()工具方法---Ext.Number.toFixed(3.2545,1) //3.2545保留1位小数点

Ⅴ、为Object扩展的工具方法---Ext.Object工具类

javaScript的对象不仅仅可以作为对象使用，还可以作为Java Map集合使用，javascript对象的每个属性名、属性值就相当于Map的key-value对（键值对）

例如：Ext.Object.each()、Ext.Object.toQueryString()、Ext.Object.fromQueryString()、Ext.Object.getKeys()、Ext.Object.getValues()等等

Ⅵ、为String扩展的工具方法---Ext.String工具类

Ext.String提供了大量工具方法来操作字符串，这些工具方法可以进一步增强字符串的功能

Ext.String.format()方法比较实用，用于将字符串中的{0}、{1}、{2}....占位符替换成实际的值。

Ⅶ、Ext.JSON方法

JSON是一种非常有用的轻量级数据交换格式。

Ext.JSON类提供了3个工具方法来完成javascript对象与JSON字符串的相互转化。

Ext.JSON.encode()工具方法---用于把javascript对象或数组转换为JSON字符串

Ext.JSON.encode()方法的别名是： Ext.encode()可直接使用

Ext.JSON.decode()工具方法---用于把JSON字符串恢复成javascript数组或对象

Ext.JSON.decode()方法的别名是： Ext.decode()可直接使用

Ext.JSON.encodeDate()工具方法---用于编码一个日期。将返回的实际字符串，插入到JSON字符串作为 文本表达式。返回的默认格式是："yyyy-mm-ddThh:mm:ss"

Ext.JSON.encodeValue()工具方法---用于把javascript对象或数组转换为JSON字符串

xtjs框架

ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。

ExtJs初期仅是对Yahoo! UI的对话框扩展，后来逐渐有了自己的特色，深受网友的喜爱。 发展至今， Ext除YUI外还支持Jquery、Prototype等的多种JS底层库，让大家自由地选择。该框架完全基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采用JSON/XML数据源开发，使得服务端表示层的负荷真正减轻，从而达到客户端的MVC应用！

Sencha Ext JS提供了开发人员构建数据密集型跨平台Web应用程序所需的一切。Ext JS利用现代浏览器上的HTML5功能。

Ext JS具有115多种高性能，预测试和集成的UI组件，包括日历，网格，图表等。Ext JS Grid和Advanced Charting包可以轻松处理数百万条记录。该框架包括一个强大的数据包，可以使用来自任何后端数据源的数据。借助Sencha Pivot Grid和D3适配器，组织可以为其Web应用程序添加领先的可视化和分析功能。查看与其他框架的比较。

丰富的Ext JS工具和主题集有助于提高开发效率并加速提供外观漂亮的Web应用程序。工具可用于帮助应用程序设计，开发，主题和调试以及构建优化和部署。

Sencha Test是一个补充产品，是Ext JS Apps最全面的单元和端到端测试解决方案。

extjs框架优势：

1、预集成和测试的UI组件。

Ext JS包含业界最全面的预集成和测试高性能UI组件集合。这些组件包括HTML5日历，网格，枢轴网格，D3适配器，树，列表，表单，菜单，工具栏，面板，窗口等等。Sencha社区也提供数百个用户扩展。

Sencha Grid使组织能够处理数百万条记录，并提供开箱即用的功能，如排序，分组，列锁定和摘要行。

Ext JS Calendar组件可帮助您轻松查看/管理Ext JS应用程序中的计划和事件。通过利用此组件，您可以轻松地为应用程序添加功能齐全的日历，而无需投入大量时间和精力来构建一个。

2、丰富的数据分析

Ext JS使组织能够使用Sencha Pivot Grid为其Web应用程序添加强大的分析功能。它允许用户汇总，汇总和分析多维数据，以做出更明智的决策。

Sencha Grid使组织能够处理数百万条记录，并提供开箱即用的功能，如排序，分组，列锁定和汇总行。

Exporter插件使您能够以各种不同的格式导出Ext JS Grid和Pivot Grid数据。它支持标准的XLSX，XML，CSV，TSV和HTML格式，并允许您配置数据导出的可见（显示）或不可见（隐藏）部分。Exporter插件还支持导出文档的基本样式。

3、复杂的数据可视化.

D3 Adapter使您可以向Web应用程序添加复杂的数据驱动文档包（D3）可视化，如热图，树图，旭日等。现在，您可以创建动态可视化，不仅可以讲述特定的故事，还可以帮助您的用户浏览他们的数据并了解它必须讲述的故事。

Ext JS Charting软件包允许您直观地表示包含各种动态和静态图表的数据 - 包括直线图，条形图和饼图。图表使用使用SVG，VML和Canvas技术实现的绘图包开发的曲面和精灵。浏览器变体会自动处理，因此图表始终可以正确显示。Ext JS Charts还支持移动设备上的触摸手势，从而为图表提供增强的交互功能，如平移，缩放和捏合。

4、后端不可知数据包。

Ext JS中包含的强大数据包将UI组件与数据层分离。数据包允许使用功能强大的模型进行客户端数据收集，这些模型提供排序和过滤等功能。数据包与协议无关，可以使用来自任何后端源的数据。它具有会话管理功能，允许多个客户端操作，最大限度地减少到服务器的往返。

5、布局管理器和响应配置。

Ext JS包含一个灵活的布局管理器，可帮助组织跨多个浏览器，设备和屏幕大小的数据和内容显示。它可以帮助您控制组件的显示，即使对于最复杂的用户界面也是如此。Ext JS还提供了一个响应式配置系统，允许应用程序组件适应特定的设备方向（横向或纵向）或可用的浏览器窗口大小。

6、符合Section 508的可访问性包（ARIA）。

Ext JS ARIA Package通过提供实现Section 508合规性所需的工具，可以为您的应用程序添加辅助功能支持。使用ARIA软件包，您可以创建可供需要辅助技术（如屏幕阅读器）的人员使用的应用程序来浏览网页。

7、可定制的内置主题。

Ext JS组件有多种内置主题，包括Material，Triton，Classic，Neptune和Crisp。主题可自定义以反映特定的品牌标识。Sencha Cmd公开了Ext JS主题使用的数百个变量，可以改变这些变量来设计自定义主题。

YUI框架

Yahoo !UI Library (YUI)是一个开放源代码的JavaScript函数库，为了能建立一个高互动的网页，它采用了AJAX,DHTML和DOM等程式码技术。它也包含了许多CSS资源。 YUI 基于BSD协议，对所有的使用方式都是免费的。YUI 项目包括YUI 库和两个创建时工具： YUI Compressor (压缩) 和 YUI Doc （JavaScripts代码的文档引擎）。

YUI分为两个大类,一个是Ajax组件,里面包括对底层javascript包装后的几个工具包,分别是connection,event, dom,animation,dnd.还包括一组高级的javascript控件，目前包括AutoComplete,Calendar, Container,Menu,Slider,TreeView.

另一类是几个很有用的几个CSS文件，一个是CSS Page Grids，用它可以很方便的布局你的网页。另外两个是Standard CSS Fonts和Standard CSS Reset,利用这两个CSS可以对字体等在不同浏览器中获得一致的效果.

Sencha Touch 框架

Sencha Touch 是全球领先的应用程序开发框架，其设计旨在充分利用HTML5、CSS3 和Javascript 来实现最高级别的功能、灵活性和优化。Sencha Touch 是针对下一代具有触摸屏设备的跨平台框架。

它是针对企业级移动应用程序开发的完美解决方案。Sencha Touch 这款应用程序利用严格的代码标准和经典的遗留模型创建而成，可供小型或大型团队轻松简便地使用。而且由于其输出完全基于 web，您可以在您自己的团队中部署您的应用程序，不必等候本地市场的批准或验收。

特点：

1、支持世界上最好的设备。Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。

2、数据集成。提供了强大的数据包，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。

3、基于最新的WEB标准 – HTML5，CSS3，JavaScript。整个库在压缩和gzip后大约80KB，通过禁用一些组件还会使它更小。

4、.增强的触摸事件。在touchstart、touchend等标准事件基础上，增加了一组自定义事件数据集成，如tap、swipe、pinch、rotate等。

LAYUI框架

LAYUI 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

事实上，layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！ layui 认为这种轻量的组织方式，仍然可以填补 WebPack 以外的许多场景。所以它坚持采用经典模块化，也正是能让人避开工具的复杂配置，重新回归到原生态的 HTML/CSS/JavaScript本身！

以上内容如有错误欢迎补充指导！

S框架称得上层出不穷，几乎每周都有新的框架与广大用户见面。在今天的文章中，我们将立足于逆向思维，考虑如何断定一套JS框架不符合实际需求。作为一名JavaScript架构师、培训人员及导师，我经常面对这样一个问题——你最喜欢的框架是什么？或者哪款框架最为出色？而我给出的两个答案往往令提问者感到意外。就目前而言，我个人最偏好的框架是React JS。但如果要为企业选择一套框架，我给出的答案则是Angular 2.0。

不过大家更应该问的恐怕是“为什么要准备两个答案？”或者更进一步探究，“我们该如何完成框架的选择过程？”下面，我将向大家共享一些使用框架的实际感受。为了公平起见，首先聊聊我个人的一点选择倾向。

我个人更偏爱以下几套框架：

• React JS

• Angular 2

• Angular 1

• Ext JS 5或者6

• Ext JS 4

而如果要为大型企业推荐框架，那么答案会稍有不同：

• Angular 2

• Angular 1

• Ext JS 5 或者6

• React

• Ext JS 4

考虑到这些前提，下面我们具体思考接下来的问题。

由谁来使用框架？

在我所效力的企业当中，大多数员工都属于Java程序员。这意味着JavaScript及其各类衍生版本都能够为大家所快速熟悉及掌握。然而尽管各框架之间存在相当程度的共性，但也仍有不少差异需要强调。目前，Ext或者Angular 2的发展势头可能更好，这是因为它们能够以更贴近Java或者C#的方式产生效果，从而吸引更多相关开发者的加入。

学习曲线是否陡峭？

那么在前面提到的框架中，其各自需要耗费多少时间进行学习？要找到答案，我们还需要考虑以下几个问题：

• 能否购买支持服务以解答技术疑问？

• 说明文档是否清晰明确？

• 框架流行程度如何？

• 团队中是否已经拥有相关专家？

• 这套框架是否拥有公开Slack频道？

• 框架开发者们是否关注企业客户的需求？

说到这里，Ext JS与Angular 2的优势应该已经显现出来了，而这也正是我总结个人最爱的两个选项的具体方式。

框架是否提供良好的约束机制？

我还记得当初VB 1.0刚刚面世时，每个人都兴奋地高呼“看看它的构建与运行速度有多快”，并以此作为选择的理由。

没错，VB允许大家采取任何能够达到目标的代码编写方式。但历史经验告诉我们，只要框架本身仍然提供部分结构，那么用户仍有可能编写出糟糕的代码，而且这类蹩脚成果的比例与框架所提供的结构量存在正相关。

在与多位开发者合作时，有些人可能要求其他成员重视代码结构而不只是“能跑就行”。

立足于这一问题，Angular 2再次脱颖而出，而Ext则处于垫底位置。尽管Ext提供所谓MVC及MVVM机制，但其无法保证开发者编写的代码成果与其设计模式相匹配。在MVC当中，我甚至不确定编写者是否清楚自己在开发些什么东西。

行业标准

为了让Ext的运作效果更贴近桌面开发环境，其能够生成HTML并利用其布局机制控制各元素在屏幕上的显示位置。前面提到的其它框架皆全部利用CSS实现布局控制。Ext的优势在于，我不需要了解HTML或者CSS即可实现理想的显示效果。但弊端则是，如果我希望尝试一些Ext支持能力之外的效果，则将面临巨大障碍。另外，使用HTML与CSS则会让屏幕渲染时长大幅增加，特别是在组件存在三层以上嵌套的情况下。

另外，Ext利用特殊的类定义机制让JavaScript看起来更像是Java及C#。这不禁令人担心，随着ECMAScript标准的演进与其自有类似机制的推出，Ext选择的作法未来还是否能够得到广泛支持。

Ext还采用专门的构建流程。虽然这能够规避构建中的大部分阻碍，但大家可能会问，“为什么不采用gulp、grunt或者npm脚本之类的标准？”

尽管Angular 2主要使用TypeScript，但Angular 2与Ext间的区别在于：1）尽管强烈推荐，但大家并不一定需要使用TypeScript；2）TypeScript只负责实现部分功能，且实际效果与ECMAScript标准类似。因此，Angular 2的发展前景明显要更为光明。

在这方面，另一款值得关注的框架为React JS。其应用构建流程全部采用行业标准，但这款单元测试框架并不允许大家在测试中使用Karma。

可测试性如何？

毫无疑问，我个人要求全部框架都具备单元测试能力，因此Ext JS 4直接被淘汰出局。大家可能会强调，MVC能够用于测试控制器，但这是MVC的功能而非由Ext自身实现。

在另一方面，React的测试能力最出色，这也是我支持它的原因所在。但我认为它仍然不太适合由企业客户选择，因为其学习周期太长而且说明文档不太完善。

调研工作

好了，到这里各原则性问题已经相当明确，但问题在于我们要如何提前做好准备？大多数具体信息往往要在员工实际使用某套框架后才会出现。

最好的办法就是听听框架老用户们的意见。在测试框架中，我的起步工作就是“我能在互联网上找到多少与该框架相关的信息？”而第二个问题则是，“该框架流行程度如何？”最后，我会联系这款框架的反对者，听听他们对其做出的负面评价。

如何判断一套框架不符合实际需求？

现在说回标题——要想选出一套错误的框架，大家应当听信销售人员的忽悠、别问任何问题，同时忽略一切之前提到的考量因素。

然后为自己的冲动懊悔不已……

原文标题：How Not to Choose a Framework

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】

查看更多精彩内容，请关注51CTO官方微信账号：51CTO（微信号：weixin51CTO）。行业资讯，技术干货，福利互动，都在这里！