Magic:轻量级JavaScript UI组件

澳门新葡亰手机版 6

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

淘宝:KISSY
支付包&阿里巴巴: Arale
腾讯:JX
百度:Tangram Magic

Magic是一款基于JavaScript的UI组件,Magic框架的代码量很少,运行效率非常出色。同时Magic包含了很多常用的网页应用组件,包括图片轮播、日历、对话框、分页、选项卡Tab等UI组件。

KISSY
KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript
框架。除了完备的工具集合如 DOM、Event、Ajax、Anim
等,它还提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的
JavaScript 框架,KISSY
为移动终端做了大量适配和优化,让你的程序在全终端均能流畅运行。

澳门新葡亰手机版 1

Arale
Arale 立足于支付宝的前端需求和国内前端社区,基于 Sea.js 和 CMD
规范,致力发展小而美的前端模块架构,建立了一套从编码测试到部署的开发体系,
是一个开放、简单、易用的前端解决方案。

Magic的特点

  • 底层库基于百度的Tangram,Tangram是一款类似于jQuery的JavaScript框架,最新的Magic可以选择使用Tangram作为底层库,同时也可以选择jQuery作为底层库,非常灵活。
  • Magic比较轻巧,对于其出色的功能来讲,代码量已经非常少了。
  • 源码下载可定制功能,你可以只打包你需要的功能,这样一来框架更小了。
  • 提供完整的中文文档,这在JavaScript UI框架中是比较少见的。

兼容性

Magic的常用组件介绍

别看Magic很小,但是其组件已经非常完善,你需要用到的开发组件基本都有了,一起来看看吧。

澳门新葡亰手机版 2

澳门新葡亰手机版 3

如无特别说明,Arale 模块均兼容于 IE6+ 以及 Chrome/Firefox/Safari/Opera
的最新稳定版。

Magic图片轮播组件

澳门新葡亰手机版 4

代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Carousel 组件 quickStart">
<title>图片轮播组件 quickStart</title>
<script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
<link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
<link rel='stylesheet' type='text/css' href='http://tangram.baidu.com/bcs/magic-586/resources/default/magic.control.Carousel/magic.control.Carousel.css'>
<script type='text/javascript' src='http://tangram.baidu.com/imports.php?f=magic.Carousel.$button'></script>
<style type='text/css'>
.tang-carousel {
    width: 644px;
    height: 140px;
}
.tang-carousel .tang-carousel-container ul,
.tang-carousel .tang-carousel-container ul li,
.tang-carousel .tang-carousel-container ul li img {margin: 0px; padding: 0px;}
</style>
</head>
<body>
<div id='one-carousel'></div>
<script type='text/javascript'>
baidu(function(){
    var c = new magic.Carousel({
        viewSize: 4,
        originalIndex: 0,
        items: [
            {content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/0.png"/>'},
            {content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/1.png"/>'},
            {content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/2.png"/>'},
            {content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/3.png"/>'},
            {content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/4.png"/>'},
            {content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/5.png"/>'},
            {content: '<img src="http://tangram.baidu.com/bcs/magic-586/demos/Carousel/item/6.png"/>'}
        ]
    });
    c.render('one-carousel');
});
</script>
</body>
</html>

简介

Arale(阿拉蕾)
生在旧社会,长在新中国,本为一个乖巧可爱的机器人女娃,在 Sea.js
大叔的蛊惑下,逐渐走上了无恶不作的不归路。

在猥琐的 Sea.js 的帮助下,Arale 胁迫了业界最优秀的开源类库 (包括不限于
jQuery、underscore、momentjs、handlebars
等)为己所用,并且始终保持对开源社区的邪恶目光,站在并将始终站在这些无辜巨人们的肩膀上。(欢迎加入可能是最不愿意自己开发组件的前端团队!)

Arale 手下拥有 popup、validator、position、autocomplete
等等等等下流狡猾的 CMD
模块喽啰们,他们手脚麻利,办事干净,各自独当一面讲义气,任你各种需求耀武扬威,上去就是一板砖,绝无二话。

Arale 有两大帮凶,一是心狠手辣的包管理工具 spm 管家。spm
帮助她处理打包部署等繁琐工作,让她没有后顾之忧,放心上街砍人。 spm
还精心炮制了 源 服务以供 Arale
发布和管理代码,实乃黑社会管家们之业界良心。

第二位是杀千刀的 nico 兄,这位兄弟擅长玩弄 Markdown 格式,帮助 Arale
用 Markdown
来起草各类文档、演示、用例,方便本地开发,生成静态站点。他打破了互联网上的文档生成旧秩序,对
写文档 和 写演示 这两位苦大仇深的人犯下了不可饶恕的罪行。

Arale 还有个漂亮的好姐妹 Alice 协理样式方面的琐事; 有一只 龙猫
安静守护在她身边,耐心进行各种兼容性测试;让她了无后顾之忧。

最后,最重要的是,Arale 出生和成长在开源街区中,托管在 github
上,深谙互联网的开源黑文化。都在江湖飘哪能不挨刀,Arale
会在不断的闷棍、毒镖暗器、黑吃黑、内讧、街头火并中越挫越勇,希望道上的人抬爱,给个面子,大家同舟共济。

Magic日历组件

澳门新葡亰手机版 5

代码:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="DatePicker 组件quickStart">
        <title>日历组件quickStart</title>
        <link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
        <script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
        <script type="text/javascript" src="http://tangram.baidu.com/bcs/magic-586/demos/common/demo.js"></script>
        <link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/magic.Calendar/magic.Calendar.css">
        <script type="text/javascript" src='http://tangram.baidu.com/imports.php?f=magic.setup.datePicker,magic.control.DatePicker.$title'></script>
    </head>
    <body>
        <div class='demo'>
            <h1>DatePicker </h1>
            <form autocomplete="off">
                <p>选择日期:<input type="text" id="J_input" /></p>
            </form>
        </div>
        <script type="text/javascript">
            var datepicker = new magic.setup.datePicker('J_input', {
                    'title': {
                        enable: false
                    }
                }
            );
        </script>
    </body>
</html>

JX

Magic对话框组件

澳门新葡亰手机版 6

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="description" content="Dialog 组件quickStart">
        <script type="text/javascript" src="http://fe.bdimg.com/tangram/2.0.1.2.js"></script>
        <link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/common/common.css">
        <link rel="stylesheet" type="text/css" href="http://tangram.baidu.com/bcs/magic-586/resources/default/magic.control.Dialog/magic.control.Dialog.css">
        <script type="text/javascript" src="http://tangram.baidu.com/imports.php?f=magic.Dialog"></script>
        <title>对话框组件quickStart</title>
    </head>
    <body>
        <div id="one-dialog">
        </div>
        <script type="text/javascript">
            var dialog = new magic.Dialog({
                draggable: true,
                titleText: "对话框标题",
                content: "对话框内容",
                left: 80,
                top: 40,
                width: 400,
                height: 300
            });
            dialog.render("one-dialog");
        </script>
    </body>
</html>

更多Magic组件可以访问其官方网站,同时你也可以参考其详细的中文文档。

JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服役于 WebQQ
等大规模的 WebApp。

简介

JX
是模块化的非侵入式Web前端框架,开发于2008年,并于2009年开源于GoogleCode

JX 框架同时适用于 Web Page 和 Web App
项目的开发,特别适合构建和组织大规模、工业级的Web App,腾讯
WebQQ、腾讯Q+等产品都是采用JX框架开发,兼容目前所有主流浏览器。

设计理念

  1. 保持最优的执行效率
  2. 保持 Javascript 原有的代码风格,降低学习难度
  3. 不做任何的过度封装
  4. 更好的组织工业级 Javascript 应用程序
  5. 探索在前端使用 MVP、MVC 等模式来构建大型 WebApp
  6. 探索工业级 Javascript 的开发技术

特性

  1. 微内核设计:内核可完全分离出来,用于构建其他的框架
  2. 原生对象零污染:你懂的,随着js的App越来约复杂,对原生对象的零污染也体现的越来越重要了
  3. 模块封包:采用命名空间、闭包等方式建立了模块封包的体系,帮助更好的组织海量js代码
  4. 模块自由拼装:自身模块做了良好的架构分离,尽可能让各个模块之间可以自由的拼装组合
  5. 无缝集成各种js框架:与jQuery, YUI, Mootools, Prototype.js
    等框架无缝集成;与多种局部框架无缝集成,如:Mini, Sizzle,
    cssQuery, xpath, JSON 等等
  6. 多版本共存:如采用的Jx版本过旧,旧有的Javascript代码不能与新版本Jx兼容,则可以采用多版本共存的方式保持程序的可延续性
  7. 分层设计:Javascript核心层,与Javascript解释引擎无关的封装和扩展;浏览器端Javascript层,对浏览器中的Javascript引擎部分的封装和扩展

架构

  • 第一层:Core Javascript 扩展模块 /
    代码组织模块(可用于NodeJs等其他js引擎,轻松组织大型应用,无缝接入其它js库)
  • 第二层:Browser Javascript 扩展模块(跨浏览器,基础封装) /
    可选模块(设计模式相关模块,选择器模块…)
  • 第三层:UI 组件 / 实时动画模块 / 游戏引擎模块
  • 发展规划
  • 核心底层 – 纯Js底层功能封装/代码组织/无缝接入其它js库 – [完成]
  • 基础扩展 – 跨浏览器封装/工具函数/设计模式相关 – [完成]
  • UI 基础控件 – 按钮/面板/窗口/树形列表/Tab/lightbox/widgets…
  • 实时动画系统 –
    实时定时器/关键帧动画/加速度公式/物理引擎/声音控制器…
  • 游戏引擎 –
    角色控制/地图系统/游戏异步通讯系统/寻路算法/键盘控制/人工智能/…

设计原则

不要重复造轮子

业界已经有很多优秀的局部框架,比如JSON、Mini Selector
Engine、SWFObject等等,作为一个综合性的Web前端框架直接做兼容即可,没有再写一遍的必要了,所以JX框架针对出色的局部框架做了良好的兼容工作。

Tangram &澳门新葡亰手机版, Magic