JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

JS框架是搭建前端复杂应用的基础，各种框架之间存在着诸多的差异和优劣，下面将对 JQuery,Extjs,YUI,Prototype,Dojo 等JS框架进行详细的解析，并对它们的应用场景进行简要的介绍。

JQuery

• 简介：jQuery 是一款快速、简洁的 JavaScript 库。 jQuery设计的宗旨是：write less, do more。
• 特点：易用性好、跨浏览器支持好、支持多种编程风格、拥有大量的插件
• 应用场景：适用于简单的DOM操作、AJAX开发和基础的动画效果实现。

示例说明：

在使用 JQuery 开发的网站中，可以使用以下语句控制元素的隐藏和显示：

$(selector).hide(speed,callback)
$(selector).show(speed,callback)

ExtJS

• 简介：Ext JS是 JavaScript 库，用于开发跨平台的富客户端 Web 应用程序。
• 特点：开发大型应用能力强、文档详细、自定义界面丰富、面向对象编程模式
• 应用场景：适用于复杂的企业级应用程序开发，提供了丰富的UI组件和数据组件供开发者使用。

示例说明：

在使用 ExtJS 开发的网站中，可以创建如下样式的表格：

Ext.create('Ext.grid.Panel',{
    renderTo:Ext.getBody(),
    title:'Bookstore',
    store:Ext.create('Ext.data.Store',{
        fields:['name','author','price'],
        data:[
            {name:'Book1',author:'Author1',price:22.1},
            {name:'Book2',author:'Author2',price:11.2},
            {name:'Book3',author:'Author3',price:35.9}
        ]
    }),
    columns:[
        {text:'Name',dataIndex:'name'},
        {text:'Author',dataIndex:'author'},
        {text:'Price',dataIndex:'price'}
    ]    
});

YUI

• 简介：Yahoo! 用户界面库工具包，简称 YUI，是雅虎公司出品，用于 Web 应用程序的开发及提高用户体验的一个JavaScript库。
• 特点：组件库多、与 Yahoo! 开发的其他基础平台紧密结合、提供了许多基础的工具类和底层框架。
• 应用场景：适用于企业级应用的开发，可以提升 Web 应用程序的灵活性。

示例说明：

在使用 YUI 开发的网站中，可以使用以下语句进行动画效果的实现：

YUI().use('node', 'anim', function(Y) {
    var node = Y.one('.my-class');
    node.on('click', function(){
        var toMove = node.cloneNode(true);
        toMove.setStyle('position', 'absolute');
        toMove.setXY(node.getXY());
        toMove.remove(true);
        toMove.getStyle('opacity', 0.5);
        Y.one('body').append(toMove);
        toMove.animate({
            top: {
                to: 500
            },
            opacity: {
                to: 0
            }
        }, 1.5);

    });
});

Prototype

• 简介：Prototype是一种基于Javascript的Web应用框架，它常被用户拓展使用。
• 特点：提供一些常用的功能，比如Object、Function、Ajax、Dom Event等等，使得javascript开发变得更加容易。
• 应用场景：适用于一些小型的、快速开发的Web应用。

示例说明：

在使用 Prototype 开发的网站中，可以使用以下语句进行函数和类的开发：

Object.extend(SomeClass, {
    method: function() {
        // 自定义函数
    }
});

function SomeClass(name) {
    this.name = name;
}

var MyClass = Class.create(SomeClass, {
    initialize: function($super, name, age) {
        // 调用父类构造函数
        $super(name);
        this.age = age;
    }
});

Dojo

• 简介：Dojo Toolkit是一个开源的跨浏览器JavaScript框架，用于构建 Web 2.0 应用程序和移动应用程序。
• 特点：提供了完整的模块化体系结构、丰富的UI控件，提供了大量对开发者友好的工具和实用程序。
• 应用场景：适用于企业级、中大型Web应用开发，可以提高应用的用户体验。

示例说明：

在使用 Dojo 开发的网站中，可以使用以下语句进行控件的创建和事件处理：

require(['dojo/dom', 'dojo/on', 'dojo/domReady!'],
  function(dom, on) {
    var greetingBtn = dom.byId('button1');
    on(greetingBtn, 'click', function() {
      console.log('Button clicked');
    });
  });

综上所述，不同的 JS 框架都有各自的特点和应用场景，开发者要根据项目需求选择最适合的框架，提高开发效率和应用的效果。