Bootstrap前端框架网页布局的使用介绍_中华文本库
第1页/共4页
文本预览：
您好，欢迎来到WEB前端资源网！ (/)
Bootstrap前端框架网页布局的使用介绍
发布时间：Nov 24
Bootstrap做为一款优秀的前端框架，已经集成了网页布局的功能，利用此集成功能可以让我们轻松实现简单或复杂的 网页布局！最重要的是有利于团队合作开发和后期项目维护！
(/Tags/psd jQuery插件
(/Tags/网页 WEB代码酷
Bootstrap布局是标准的12列框架！使用起来也很方便，布局中常用的 . l s 样式如下： cas
.otie .otie-li .o .o-li .pn—.pn2 ofe1ofe1 cnanr cnanrfud rw rwfud sa1—sa1 fst-fst2
素材) 模板) 国内外优秀项目推荐 (/Tags/jQuery(http://ww
开源CMS Orchard (http://www.orchardproject.net/) Drupal (http://drupal.org/) Joomla (http://www.joomla.org/) DNN (/) 开源商城 Nopcommerce
利用上述几个样式不同的组合就可以轻松搞定简单或复杂的网页布局！下面我将实例为大家介绍布局的实现。
12列简单布局的示例
通过示例明白什么是标准的12列框架！12列布局在线示例 (/Media/Default/bootstrap-demo/Layout1.html)
(/default.asp OpenCart (/)
Magento (http://www.magentocommerce.c
开源博客 WordPress (http://cn.wordpress.or
blogengine (http://www.dotnetblogengine.n
首页 (/) Web (/web) jQuery (/jquery) 设计 (/design) Bootstrap (/bootstrap) Orchard (/orchard) 前端志 (/about) 1 2 3 4 5 6 7 8 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0 4 1 4 2 4 3 4 4
开源论坛 Discuz! X (http://www.discuz.net/) Phpwind (http://www.phpwind.net/) phpBB (/) JS框架 jQuery (/) YUI (/) Knockout (/)
hm ag"hc" 前端框架
Bootstrap (/bootst
o t t a 网页布局使用介绍 Foundation (/)
YAML (http://www.yaml.de/)
/ 自定义样式，实现个性化页面* * / UI框架 jQuery UI (/) .hwgi {mri-o:1p;mri-otm 2p;} so-rd agntp 0x agnbto: 0x . h w g i [ l s * " p n ] { b c g o n - o o : e e t x - l g : e t r h i h : 0jQueryn - e g t 4 o d r r d u so-rd cas=sa" a k r u d c l r # e g t 4 iTools (http://jquerytools.org/) a i xl ehih:0xbreWijmo (/) .hwgi [ls*"pn]hvr{bcgon-oo:#d;} so-rd cas=sa":oe akrudclr dd
更多优秀开源项目欢迎大家与我们交流讨论
jQuery交流QQ群：
dv ls=rw hwgi" Bootstrap前端框架QQ群: <i cas"pn".pn<dv dv ls=sa
第1页/共4页
寻找更多 ""模块化高扩展性的前端框架 KISSY - { focus : web } - ITeye技术网站
博客分类：
模块化高扩展性的前端框架 KISSY
注：本文为 2013 年 3 月程序员杂志同名文章的完整版。
伴随着淘宝的快速发展，诞生已三年多的 KISSY 也取得了巨大的成长。 目前应用于阿里集团的多个业务团队，特别是淘宝，天猫，一淘的绝大多数业务都采用了 KISSY， 满足了从前台的 web page 到后台的 web app 再到移动端应用（起步阶段）的广泛需求。
在阿里集团以外也有不少公司和个人使用 KISSY，交流旺旺群成员已将近千人， 在 github 源码库也时常有外部人员参与提交 issue，发起 pull request，另外在 oschina 等开源社区也受到了一定的关注。
淘宝在 2012 年 12 月 25 号发布了 KISSY 最新版本 1.3， 在这篇文章中我将对 KISSY 1.3 结合在淘宝的实践做一次全面概述，希望能对想了解淘宝前端技术的朋友有所帮助。
为什么选择 KISSY
KISSY 作为国内一个完全自底向上开发起来的框架，诞生三年来历经淘宝的各种业务变化的考验，体现了 KISSY 的可扩展性，高稳定性和可维护性。 它在以下方面具有一定优势:
拥有大量的中文文档： 方便不熟悉英文的国内开发者快速入门学习。
在国内具备一定的社区规模： 通过旺旺群，google group，微博，官方网站等用户随时可以和开发人员快速交流。
开发便捷： 在模块化，组件以及工具辅助方面形成了一套完善的机制，可以高效应对日常的需求开发。
综合借鉴国际先进的框架类库设计：
在吸收 jquery 稳定的 dom 核心之外提供了模块化，按需加载的基础架构。
在学习 yui 坚实的架构之外着重于组件开发，积累了一批贴近淘宝应用的组件集。
在研究 extjs 优秀的组件设计之外探索轻量级，可扩展的组件开发，同时满足 web app 与 web page 的需求。
应用场景广泛： 在各种设备上都有所支持。
可以使用 seed 和 core 简单快速地搭建页面
也可以进一步使用 KISSY 的大量组件构建富客户端应用
也可以使用统一的 API 开发移动应用
更可以利用 KISSY 灵活的模块化机制高效进行大规模团队协作
不过由于 KISSY 开发时间还不长，在组件完备性以及可测试性上有待进一步完善，我们坚信这种情况会随着团队的不断努力而逐步解决。
KISSY 的架构由淘宝复杂多变的业务决定，在松耦合、无污染、模块化的核心前提下，也从众多优秀类库和框架的思路得到一些启发。 如图1所示：
图1： KISSY 整体架构图
最底层的 seed 是类似目前流行的 AMD 模块化机制实现，为了更高效地共享通用组件加入了自动 combo 的支持， 另外 seed 也包含一些像 each（循环数组以及对象），mix（合并对象），param（编码对象为 url）， ready（等待 dom ready）等常用的静态工具方法以及 Path，Uri，Promise，UA 等模块化需要用到的基础类。
seed 之上的第二层是处理 dom 兼容性的核心模块，其中每个模块都是由更小的模块打包合并而来。 特殊之处在于 KISSY 把一些不标准浏览器的兼容代码单独抽取成内部模块，用户可用的外部模块会根据不同的设备分别依赖不同的内部模块。 虽然加载不同的具体实现模块代码，但是最终提供给用户的是一致的模块名，api 以及渐进增强的能力。 例如用户使用 event 模块，在 touch 设备上会加载 event/touch 模块从而可以使用一些手势事件， 而在 ie&9 下会加载 event/hashchange 模块，以类似 es5-shim 的方式来补全浏览器的能力，提供给用户统一的 api。
第三层为组件架构层。提供包括模拟 es5 属性管理，插件和多继承机制的 rich-base 模块， 所有 UI 组件渲染机制的基类 component 模块以及具备一定逻辑的模板引擎 xtemplate。
第四层为独立可用的 KISSY 组件，用户可自由组合继承搭建最终页面。包括：
工具模块，例如拖放，调整大小，操作 swf，操作样式表，mvc（model，router）架构等。
UI 组件，例如弹窗，菜单，标签，日历等。
最外层为 KISSY gallery，KISSY 社区开发的一些通用模块会放入 gallery 中， 从而可以方便得在所有使用 KISSY 的团队间共享模块。 如果该模块确实十分通用则会经过重构放入 KISSY 自身。
模块化机制
由于淘宝业务的复杂，为了提高代码的可维护性和重用性，KISSY 在早期就引入了简单的模块化机制，并且随着前端技术的发展而不断改进。 KISSY 1.3 的模块化机制与目前的 AMD 规范比较类似，并根据淘宝自身业务特点加入了自动 combo 功能。
注：combo 举例：请求 /??a.js,b.js 相当于把 /a.js 与 /b.js 的文件内容合并后返回。
KISSY 之外的每个模块必须属于一个包，一个包内可以有很多相关模块，它们具备相同的加载基地址。 包的设计一方面通过约定优先配置的原则可以减少同一个包内多个模块的请求路径配置， 另一方面也方便了部署在不同地址的多个应用间互相调用模块。 所以开发应用前请先配置包地址，例如：
KISSY.config('packages', {
base:'./x'
之后在 x 目录下建立 myapp 目录，并在 myapp 目录下新建模块 a 对应的代码文件： a.js
KISSY.add(function(S,JSON){
return JSON.stringify({a:'ok'});
requires:['json']
以及依赖 a 的入口主模块 main 的代码文件： main.js
KISSY.add(function(S,DOM,a){
S.ready(function(){
DOM.text(document.body,a);
requires:['dom','./a']
应用模块可依赖 KISSY 自身模块，例如以上的 dom json。
最后新建 index.html 来调用应用模块：
// ... 上述包配置
KISSY.use('myapp/main',function(){
alert('page loaded');
打开上述 index.html 会发现链接数不少，有从淘宝 cdn 的链接也有本地的链接。 因此 KISSY 提供了配套工具 KISSY Module Compiler 进行脚本打包以及抽取依赖后用 cdn combo 来解决这个问题， 对工具有兴趣可查看参考资料中的链接地址，以下仅作简单介绍：
如果应用脚本非常多，可以用 module compiler 将入口模块 main 以及其依赖的所有应用模块打包压缩到 main-min.js 中， 同时 module compiler 会生成一份依赖描述文件：
KISSY.config('modules',{
'myapp/main':{
requires:['dom','json']
接着设置 KISSY 启用 combo 模式，并载入上述的依赖描述文件：
KISSY.config('combine',true);
最后修改 index.html 引用 seed-min.js，打开网络面板后会发现现在只产生两个链接请求：
/s/kissy/??dom/base,json/native.js
http://localhost/myapp/main-min.js
注：在 ie&9 等非标准浏览器下第一个链接地址会加上 dom/ie json/json2 等脚本地址
如果应用脚本不多，并且自身服务器也支持 combo 的话，那么可以采用更加灵活的抽取依赖后全部 combo 的解决方案。 这时 module compiler 会做两件事情：
补全模块名，例如 a.js 变为
KISSY.add('myapp/a',function(S,JSON){
return JSON.stringify({a:'ok'});
requires:['json']
将各个模块的依赖收集为一个单独的文件，例如
KISSY.config('modules',{
'myapp/main':{
requires:['dom,','./a']
'myapp/a':{
requires:['json']
接着设置 KISSY 启用 combo 模式，并载入上述的依赖描述文件：
KISSY.config('combine',true);
访问 index.html，打开网络面板会发现同样只产生两个链接请求：
/s/kissy/??dom/base,json/native.js
http://localhost/myapp/??a.js,main.js
KISSY 还提供了一套基于约定的前端打包解决方案 KISSY-PIE，通过统一的约定，提升应用的可维护性，将大家从重复的打包脚本的编写中解放出来。
KISSY-PIE 包括了以下功能：
JS（KISSY 的模块编译，HTML 模板到 KISSY 模块编译，代码压缩）
CSS（基于 CSS-Combo 的合并，压缩）
并且在命令行之外还提供了 web 操作界面，如图2所示：
图2： KISSY-PIE 打包界面
KISSY 目前包括众多即开即用的组件， 包括工具性质的例如 dd（拖放），resizable（调整大小），swf（插入flash），stylesheet（操作样式表）等 和 UI 性质的例如 overlay（弹窗），menu（菜单），menubutton（菜单按钮），imagezoom（放大镜），editor（编辑器）， tabs（标签），tree（树）等。 这些组件都基于公共的 rich-base 以及 component 模块： rich-base 和 component 模块充分利用了 javascript 语言的 mixin 和原型链继承， 提供了属性绑定，类继承，扩展以及插件等特性。
其中的重点是 Component，它是所有 UI 组件的基类，提供了两种通用的渲染方式：
组件实例由 javascript 完全渲染 dom 树。其中对于 menu 等组件在 javascript 完全渲染的情况亦可以通过 json 初始化内部嵌套组件。例如
KISSY.use('menu',function(S,Menu){
// javascript 渲染一个菜单到 body
new Menu({
children:[{
content:'item1'
}).render();
从已有的 dom 树节点得到组件实例。
下面以 KISSY 中常用的一个组件 Overlay 为例讲解下，首先看图3类结构图：
图3： Overlay 类结构图
Overlay 继承自 Component，然后静态地由一些分散的功能类扩展而来，包括定位功能类，对齐功能类，关闭功能类，遮罩层功能类， 这些功能类底层利用 javascript 的 mixin 功能将自己的方法和属性汇入到 Overlay 类中，使得最终的 Overlay 具备了这些能力。
组件在运行时也可以选择性依赖某些插件模块，将插件的功能注入到组件中去， 既避免了一个组件过于功能繁多导致的文件过大，又大大增强了组件的可扩展性。
以下为 Overlay 的使用示例代码：
KISSY.use('overlay,component/plugin/resize',function(S,Overlay,ReizePlugin){
// 完全由 javascript 将组件实例渲染到 body 中
new Overlay({
content:'test'
}).render();
// 从已有的 dom 树节点生成 Overlay 实例
var overlay = new Overlay({
srcNode:'#existing'
}).render();
// 运行时加入调整大小的插件能力
overlay.plug(new ReizePlugin({
handles:['t']
除了 KISSY 自身的组件机制，一淘开发人员根据自己的应用特点在组件开发和使用上找寻了另一条途径。即 Brix 解决方案：
基于统一的渲染方式：模板（tmpl）和数据（data）产生html片段后使用 innerHTML 到 DOM 节点中.
提取子模板，结合数据的更新，达到局部刷新，开发者不需要再关心页面的表现，而专心于数据的变化。
DOM 节点自定义属性设置组件标志，Brix 提供 Pagelet 按照统一的方式实例化组件。
图4： Brix 类库结构
设备普适性
当前 javascript 的使用范围越来越广，平台包括 pc 浏览器与读屏器，nodejs，移动端浏览器以及各种外壳，window8 等。 KISSY 也尽量在各个平台给予支持，保证统一的开发体验。
在 nodejs 上 KISSY 通过调整模块加载器使得 KISSY 可以直接将自身的模块加载到 nodejs 中使用。例如
可以使用 KISSY 的 UA 解析模块来分析日志中的 UA 串
可以载入 jsdom 模块在 nodejs 环境下做单元测试
用 xtemplate 在服务器端渲染前端模板
使用 KISSY 的 htmlparser，color 等工具模块
经统计约有 1000 万残疾人用户在使用淘宝，其中不少是受影响最大的盲人朋友，他们实际上是通过读屏器来和淘宝交互， KISSY 组件通过遵循 WAI-ARAI 规范来给视力受损的朋友提供无障碍的访问环境，网上人人平等。
KISSY 也计划对 windows8 进行支持，在即将发布的 tmall windows8 app 中仅仅通过使用 KISSY 的模块化机制以及一些语法糖 API 就可以达到和平常开发一样的高效。
随着用户越来越多地在移动设备上购物产生交易，移动应用在流量的比重上也越来越多，KISSY 及时适配移动设备， 目前在两方面进行了支持：
根据设备条件加载。对于移动端由于网络速度等原因对于文件大小比较敏感，KISSY 为了保证一致的 API 又不能随意删减功能， 因而采取了独立兼容模块的方法来保持瘦身。在架构一节也阐述过，KISSY 对基础核心模块中的兼容非标准浏览器的模块进行选择性加载， 同时移动设备上都是标准浏览器，从而可以大大减少实际下载到用户设备上的代码大小。部分组件也实行了拆分，将 pc 的功能交互独立到单独的模块，在移动触摸设备上只加载触摸交互需要用到的模块。
渐进增强 API。对于触屏设备，很多交互是建立在手势操作上。而手势操作除了在 safari 上有 gesture 事件做有限支持外， 在 android 上则完全没有对应事件。 得益于 KISSY 易于扩展的事件机制，KISSY 在底层多点触摸 touch 事件的基础上模拟出了 tap rotate pinch 等触屏设备上独有的事件，这对于用户则是透明，用户完全可以把这些事件当做原生事件来使用，例如
KISSY.use('event',function(S,Event){
// 监听 div 上的 tap 事件
Event.on('#div','tap',function(){
另外淘宝北京团队还基于 KISSY 核心打造了专门面向 Web 无线设备的一整套工具库 ZOOJS， 包含控件级的事件支持、触屏行为的封装、富控件、皮肤、App的基础架构等。 这套独特的 Web 无线解决方案力争将 HTML5 和 CSS3 的优势发挥至最佳，做到即调即用。
测试与持续集成
KISSY 经过三年的开发代码库已经相当庞大了，模块间还常常有依赖关系，修改代码有牵一发而动千钧的后果。 为了应对此问题，KISSY 也在逐渐完善单元测试，自动化测试与持续集成。
KISSY 一个模块的常见目录结构如图5所示：
图5： 模块目录结构
其中 tests 目录下为测试资源，runner 目录下启动测试的 html 文件，specs 下为对应模块的单元测试代码。 KISSY 采用的单元测试框架为 jasmine ，测试代码举例如下：
describe('S.mix',function(){
it('works for simple case',function(){
expect(S.mix({x:1},{y:1})).toEqual({x:1,y:1});
然后打开启动测试的 html 文件 即可看到图6所示的单元测试结果：
图6： 单元测试结果
为了提高测试效率，KISSY 还依赖 travis 平台和 phamtomjs 进行持续集成测试。 每次提交代码都会在 travis 平台上启动 phantomjs 来运行 KISSY 所有模块的单元测试代码。 如图7所示：
图7： travis 平台上的 KISSY
淘宝应用场景举例
淘宝目前的绝大多数页面已经采用 KISSY 搭建，这次我选取两个大家使用比较多的应用来介绍下 KISSY 在淘宝的实践：
店铺页面是商家店铺的门户，除了淘宝页头之下都可以由商家自定义内容，如图8所示：
图8：典型的店铺页面
可以看出页面本身就是区块化的组织，在程序内部也是分成很多个模块，例如店内搜索模块，宝贝分类模块，销量统计模块等， 每个模块负责页面一块区域的交互实现，这些模块又会调用 KISSY 的模块来实现自身的逻辑。 而每个商家的店铺可能使用到的区块并不相同，这也意味着每个商家店铺所用到的程序模块也不相同。
店铺模块与 KISSY 模块依赖关系如图9所示：
图9：店铺模块与 KISSY 模块的关系
在实际开发中配置店铺应用为一个包，其内的所有模块都放入这个包内，最后由页面初始化脚本加载当前店铺需要的模块列表。例如：
KISSY.use('shop/search,shop/category,...');
在线上会发出两个 combo 请求：一个为店铺页面需要的应用模块集，一个为 KISSY 自己的模块集，例如
/s/kissy/1.3.0/??dom/base.js,event/base.js,overlay.js...
/p/shop/??search.js,category.js...
宝贝详情应用
宝贝详情页面用来展示商家单个商品的详细信息，评价，成交趋势等信息，并为下一步购买做准备，是目前淘宝访问量最大的页面。
该应用和店铺应用紧密相关，从页面可以看出，很多区块和店铺页面对应区块相同，实际上在代码层面也是引用同一份模块， 首先宝贝详情应用和店铺应用一样加载当前页面用到的店铺模块，然后再加载这个页面本身的应用模块。 但是宝贝详情业务本身逻辑十分复杂，若像店铺应用一样也是采用模块 combo 的方式则会导致请求 url 过长， 进而 KISSY 会对过长的 combo url 拆分成多个短的 url，反而适得其反。 因此这里会把宝贝详情页自身的模块打包合并，将自己模块的主模块和依赖模块都合并到主模块中去， 最终线上会发出三个请求，其中两个为 combo 请求，一个为非 combo 请求，例如：
/s/kissy/1.3.0/??dom/base.js,event/base.js,overlay.js...
/p/shop/??search.js,category.js...
/p/detail/main.js
KISSY 才刚刚处于成长初期，相对于国外成熟框架尚有不小差距，不过依然承受住了淘宝复杂多变业务的考验。 下一步 KISSY 会继续完善基础组件例如 date，datasource，selector，graphics 等， 重构已有组件例如 switchable，calendar 等， 增加 package manager 方便基于 KISSY 模块的提交与共享，补全测试用例，实现代码覆盖率检测，不断提高运行稳定性。 将来我们坚信 KISSY 会随着淘宝的发展而继续成长，也会随着国内外前端技术的不断发展而不断进步。 希望有兴趣的你也能加入到 KISSY 开发中，一起学习进步，享受成长的乐趣。
参考资料：
KISSY Module Compiler：
KISSY Module Compiler Node 版本：
OSCHINA 访谈：
nginx combo：
KISSY-PIE：
KISSY on Travis：
刚发现KISSY，觉得他很符合国情，虽然完整性样例等不是很完善，不是..
浏览: 799555 次
来自: 上海
如果想改成淘宝后台那样，可以在编辑器批量上传图片呢？
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
Javascript引擎单线程机制及setTimeout执行原 ...
怎么能让浏览器不进入 文档模式的quirks模式，进入标准的
大侠，你好，我现在急需你这个声音解决方案，有没有完整的例子，之 ...kissy kissy
谁知道这首歌的中文意思啊_百度知道
kissy kissy
谁知道这首歌的中文意思啊
nothing makes me feel like this La la la, why won&#39;re my favorite kiss Kissy kissy makes me happy Honey honey sweet as candy Kissy kissy take my hand and come along with me Kissy kissy makes me happy Honey honey sweet as candy Kissy kissy love is grand with you my sugar bee Kissy kissy makes me happy Honey honey sweet as candy Kissy kissy take my hand and come along with me Kissy kissy makes me happy Honey honey sweet as candy Kissy kissy love is grand with you my sugar bee La la la, I heard them tell it to a star There&#39I&#39, you&#39, why won&#39? You could be my brand new game You begin and roll the dice I would smile and break the ice Tell me how could I resist when you&#39;t you let me know Ls no mountain, cause you&#39, nothing makes me feel like this La la la, tell me what your secret is Lre too old to play with toys Won&#39;re a boy We&#39;re still my favorite kiss Kissy kissy makes me happy Honey honey sweet as candy Kissy kissy take my hand and come along with me Kissy kissy makes me happy Honey honey sweet as candy Kissy kissy love is grand with you my sugar bee La la la, cause you&#39;t you let me know La la la, you&#39;s no sea that could keep your love away from me No matter t you tell me what&#39;re my favorite kiss Kissy kissy makes me happy Honey honey sweet as candy Kissy kissy take my hand and come along with me Kissy kissy makes me happy Honey honey sweet as candy Kissy kissy love is grand with you my sugar bee See the moon and see the sun, shining down on everyone They know how in love we are, tell me what your secret is La la la, there&#39
kissy的相关知识
您可能关注的推广
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁查看: 613|回复: 1
【热门】前端框架分析
主题帖子e币
没有eoe的账号，级别还太低，出门如何吹牛逼？
才可以下载或查看，没有帐号？
& && &&&一名合格的前端程序猿一般不会也不愿意每天去做重复的工作，IT行业每天更新迭代的速度那么快，我们还有好多好多新的技能要花时间去get。同样的效果，同样的动画，每天重复着写同样一套代码，最后搞得自己对工作失去兴趣，枯燥、乏味，累感不爱。于是乎，程序猿进化了~~这个种族在这种简单重复单调的工作中发现了一些代码上的共通点，用自己掌握的成熟技术，用带有扩展性的语言将常用的代码封装好，不管是css or javascript，在使用的时候传递对应的参数进去，直接调用，省时省力还能把代码贡献出来让别人使用，感觉so easy有木有。于是乎，框架本身的扩展性、兼容性以及使用的便捷性，使得各种各样的插件和框架开始被程序员们冠以亲睐的目光。Google在13年提出的webcomponents就提到，Web组件将会是Web前端的未来，而Web组件就是通过这些被封装的小组件、小框架融合而成，就像是点成线，线组面一样样的。
& && && &目前前端框架主要采用JavaScript+CSS 模式，我们先来了解一下这两者。& && && &预准备之--JavaScript目前主流的 JavaScript 框架排名中，jQuery 和 Ext 可算是佼佼者，获得了用户的广泛好评。国内的一些框架很多也是仿照 jQuery 对 JavaScript 进行了包装，不过这些框架的鼻祖 YUI 还是坚持用自己的 JavaScript 类库。jQuery 是目前用的最多的前端 JavaScript 类库，据初步统计，目前 jQuery 的占有率已经超过 46%，它算是比较轻量级的类库，对 DOM 的操作也比较方便到位，支持的效果和控件也很多。同时，基于 jQuery 有很多扩展项目，包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移动端的jQuery 框架)、QUnit(JavaScript 的测试框架)、Sizzle(CSS 的选择引擎)。这些补充使得 jQuery 框架更加完整，更令人兴奋的是，这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。Ext 是 Sencha 公司推崇的 JavaScript 类库，相比 jQuery，Ext JS 更重量级，动辄数兆的文件，使得 Ext 在外网使用的时候会顾虑很多。但是，另一方面，在 Ext JS 庞大的文件背后是 Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到了让人发指的程度。图表、菜单、特效，Ext JS 的控件库非常丰富，同时它的交互也非常强大，独立靠 Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得 Ext JS 成为内网开发利器。框架鼻祖 YUI 也有自己的 JavaScript 类库，DOM 操作和效果处理也还比较方便，功能和控件也很齐全，但是相比 jQuery 和 Ext JS 显得比较中庸一些。随着 Yahoo!的没落，YUI 的呼声也逐渐被新起的框架淹没，想来也让人惋惜。除了上述的三个 JavaScript类库，还有 Dojo、Prototype、Mootools 等众多类库，由于本文讨论的框架多采用上述框架，所以其他框架暂不讨论。& && &&&预准备之 CSS随着 CSS3 的推出，浏览器对样式的支持更加上了一个层次，效果更加出众。各框架也纷纷开发出基于 CSS3 的样式，让框架更加丰富。对于 CSS3，更是推出了一些预编译的扩展框架，主要是 LESS、Sass 和Compass(Compass 是基于 Sass 的扩展)。可以方便地进行变量定义，格式引用，函数定义等操作，并内置了大量的效果。让您的 CSS 开发效率提升一个档次。根据 Chris Coyier 的比较，Sass+Compass 几乎完胜 LESS。有兴趣的读者可以自行参考。由于 Sass 是用 Ruby 开发的，所以也需要相应的 Ruby 环境将文件编译成 CSS 文件。& && && &现在业内比较出名的框架有好多，比方说Foundation、Kissy、AmazeUI 等等。& &Foundation（）是 ZURB 旗下的主要面向移动端的开发框架，但是也保持对桌面端的兼容，目前已经更新到Foundation4 版本。框架主要采用 jQuery 和Zepto（语法酷似 jQuery，但比 jQuery 更轻量级）作为 JavaScript 基础，CSS 则基于 Sass、Compass，有着很好的扩展性，并有着丰富的布局，版式和多种多样的控件与特效，非常方便开发者使用。控件的响应式效果也帮助用户识别不同浏览器效果。ZURB 作为一个完整的项目组，包括很多原型、设计、构建、分析等一系列工具，为用户提供完整的服务。当然，有很多服务是要收费的Foundation 主要以移动端风格为主，如图所示：
1.png (175.7 KB, 下载次数: 0)
13:55 上传
Kissy（）是阿里集团自主开发的前端框架，目前在淘宝网、一淘网等阿里系网站上得到不少应用。Kissy 框架模仿 jQuery 编写了自己的内核 Kissy Core，用于对 DOM 的解析，Ajax 处理等。同时，有着丰富的控件，并实现了一些动画效果和特效。同样，在 Kissy的控件中也可以看到 Bootstrap 等国外框架的影子。此外，Kissy abc 项目工具可以帮助用户实现自动化构建，并有很多扩展组件方便用户使用。应该说 Kissy 是目前国内开发的最好的前端框架，在实际使用中也经过了检验，但跟国外成熟框架相比还是有一定差距。
2.png (241.03 KB, 下载次数: 0)
13:55 上传
Amaze UI& &AmazeUI 面向 HTML5 开发，使用 CSS3 来做动画，以Mobile first为理念，从小屏逐步扩展到大屏；根据用户代理、针对国内不同内核的浏览器以及不同浏览器下的字体排版进行了全面的考究，进行设置；其中的Web 组件，由模板（hbs）、样式（LESS）、交互（JS）三部分组成，通过一个 package.json 文件描述，使用 Handlebars 作为模板引擎；同时提供了Slush.js的开发脚手架，以快速生成 Web 组件目录及相关文件。& &作为一名前端小屌丝，在做网站时候最想做的就是用最少的时间，尽量少的代码完成任务，这些框架会被经常作为模板进行专研学习。
本文特别鸣谢： 1.& &极客学院（）
13.png (66.33 KB, 下载次数: 0)
13:57 上传
中国最大的 IT 职业在线教育平台,涵盖400多门市场最火的技术开发课程 ,上线至今已成功帮助 30w 移动开发者提升了自身的技术开发实力。极客学院已与微软、触控科技等多家大型互联网公司达成战略合作。创始团队出版过中国大陆第一本Android 教材,做过中国最早的Android 线下企业培训和学生培训;具有极为丰富的线上培训和线下培训实战经验。
2.& &Amaze UI（）& &
12.png (44.88 KB, 下载次数: 0)
13:56 上传
Amaze UI 是一款轻量级高性能的开源框架。它以移动优先，拥有丰富的组件，为中文排版提供更强大的支持，可能是目前最好用的前端框架。
主题帖子e币
本人觉得ext还是太大，太重了，有时候根本不需要这么多的功能，太宠大，写代码难道写得很隐晦才算得上高手？好久不用它了，以前它大多数还是用table来布局，不知道现在如何
推荐阅读热门话题
6252124072282190918551836148813211219942916803800736715
27&分钟前27&分钟前28&分钟前28&分钟前28&分钟前29&分钟前29&分钟前半小时前半小时前半小时前
特别关注 /3
从基础入门到熟练精通，9个阶段知识体系图指引你逐步提升~还有技术问答+讲师互动，最新实战教程每日更新！
从零开始手把手教授如何开发一个完整的天气 App，包括 UI 布局、接口调用、数据解析、 Service 的使用。【限时免费，源码下载】
本期eoe特邀专家跟大家一起讨论学习电话、短信、彩信拦截+自定义 ContentProvider技术内容。
活动地址：3月2日——3月8日
Powered by
扫一扫 关注eoe官方微信}