登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 三月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
虚拟研讨会：HTML5的新JavaScript框架
虚拟研讨会：HTML5的新JavaScript框架
Dio Synodinos
3&他的粉丝
0&他的粉丝
日. 估计阅读时间:
，PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。
亲爱的读者：我们最近添加了一些个人消息定制功能，您只需选择感兴趣的技术主题，即可获取重要资讯的。
相关厂商内容
参与者有：
来自的Dave Balmer
来自的Faruk Ates和
来自的Jacob Wright
InfoQ：虽然现今已经有了一些JavaScript框架，但是是什么激励着你们去为HTML5开发新的框架的？相比传统的框架，它能够给我们带来哪些好处？
Dave（Jo）：当你思考&当浏览器引擎能够做更多工作的时候会发生什么？&的时候，这就意味着Jo大有用武之地。最终你会发现你手头上的框架是如此简单，这个框架和浏览器引擎没有太多的联系。它是一个全新的开始，而且体验非常好。
W3C的大量HTML5草稿和议案给JavaScript开发者展现了一幅新的图画，他们可以开发出完全和本地应用匹敌的世界级web应用。客户端持久化存储、底层文件访问、sockets、后台进程、使用硬件加速UI的展示和互动是HTML5最吸引我的部分。
虽然HTML5在桌面浏览器已有一席之地，但仍未占据统治地位。在我们等待Windows的用户使用Internet Explorer 9（这个浏览器将会支持HTML5规范中的许多非常酷的特性）的过程中，其他的平台已能支持这些特性了。Apple iOS、Google Android和Chrome、webOS以及RIM和Symbian近期都希望能够将HTML5的高级特性应用到智能手机、平板电脑和上网本上。
虽然HTML5离得到广泛的桌面支持还有一段距离，但是市场上最新的移动设备已经趋于认同HTML5将会是高度一致性的平台。
Faruk（Modernizr）：Modernizr始于这样一个问题，那就是在不同的浏览器中，即便页面代码是相同的，但是最终的视觉效果却千差万别──大多数著名的、陈旧的以及功能较少的浏览器都不是完美像素支持。我不是只停留在口头讨论上，而是开始着手解决这个问题。Web开发的建议就是一个：简化开发过程，高效的开发来自于简单且优秀的开发流程。我曾经尝试根据UserAgent来识别浏览器能支持的特性，但是这个不可靠的字段把我搞得灰心丧气（这也是一个反面例子）。这次经历也让我认识到需要有一个可靠的方法，来鉴别出HTML5和CSS3中哪些特性在各个浏览器中是否可用。
当我着手创建Modernizr的时候，很明显，由于精力的问题，我必须专注于少量核心特性。虽然有jQuery和其他的框架的存在，但是Modernizr能够支持它们不能支持的关键特性，因此我决定只有一件事情是Modernizr需要关注的，那就是浏览器特性支持检测。我并不希望Modernizr成为JavaScript库中的大型瑞士军刀，我只是希望它能够尽可能地小，而且成为每一名Web开发者装备库中最基础最重要的装备。他们使用的技术越前沿，Modernizr对他们就越有用。
Jacob（Simpli5）：我猜大概现有Javascript框架中一半代码都在解决跨浏览器的兼容性问题，或者手动为不合格的浏览器增加特性。如果我在开发HTML5应用，为什么我们需要下载（以及缓慢地）脚本来帮助兼容旧有浏览器呢？此外，有很多JavaScript特性这些框架都不能使用，因为并不是所有的浏览器都支持（例如隐式的getter/setter）。开发一个全新的HTML5的JavaScript框架而不是扩展现有的框架，我们能够得到一个更小更快更精致的框架，要知道这样我们并不会受到现有框架的各种规则的限制。
InfoQ：能不能从架构的角度大致描述一下你们的框架？它们的主要组件是什么？组件之间又是如何交互的？
Dave（Jo）：首先，整个框架使用了JavaScript的对象模型。这些用于构建Jo的技术和代码模式都在&JavaScript，The Good Parts&（Crockford / O'Reilly Press）中介绍过，这本书还介绍了一些不错的编程风格；尤其是Google的V8引擎的风格。
命名空间的实现方式是使用一致的命名标准，而不是使用嵌套对象命名（例如是joButton而不是JO.UI.Button）。这将节省下大量用于每次引用对象的时候遍历原型链（prototype chain）所需要的时间。更重要的是，例如V8这样的JavaScript引擎对对象字面量（object literal）的存储做了高度优化，但是，作为代价，给对象添加或者删除属性的方法性能将会下降。这就意味着如果一个框架使用嵌套对象命名空间，那么它的库将会庞大而且缓慢。
除了简单使用对象和方法，正式的Jo对象使用了重构过的&观察者模式&OOP标准。对象将消息发送给任何一名接受对象。这种对象间通信的方式非常灵活，并且容易&重新组合&。而且，因为对象间的接口非常&简洁干净&，这有助于优秀的单元测试实践。
UI元素有一个共同的基类叫做joView。在Jo中创建的每一个UI元素都需要使用一个或者更多HTML标签，而且通过改变.className属性来操控这些标签。这也就意味着所有的视觉展现和行为都是可以由CSS控制。与其在JavaScript中使用动态代码，我们使用CSS3就可以完成这些非常酷的效果。
joControl是输入框，按钮，选择框以及其他GUI控制组件的基类。joContainer是组织UI元素集合的基类。有些Jo的sugar可以在joContainer（或者其子类，例如joCard）中找到。例如：
var myui = new joCard([
new joTitle(&Hello World!&),
new joGroup([
new joLabel(&Username&),
new joInput(joPreference.bind(&username&)),
new joFooter([
new joDivider(),
new joButton(&Goodbye&)
这样你就得到了一个简单的对话框，并且可以直接显示（通常是调用joStack.push()方法）。
仅仅有丰富的UI对象，Jo有自己的joDataSource和其子类。这类对象封装了例如XHR、SQLite、cookie以及其他获取异步数据的巧妙方法。有了这些对象，你的程序可以在不同的数据存储系统和数据获取方法中使用一致的接口。
Faruk（Modernizr）：Modernizr非常小巧简洁：我们运行了一系列测试，每一个测试都会检测浏览器中的特定特性。我们不会问浏览器你是哪个，我们只是简单地询问：你支持border-radius？你支持HTML5 video吗？你支持地理定位吗？诸如此类的问题。然后我们检查所有的测试结果，将其作为HTML元素的类在Modernizr对象中使用，你可以在JavaScript中和它们进行交互。以border-radius为例，HTML元素中的类可以简单地叫做&borderradius&或者&no-borderradius&，这取决于浏览器是否原生支持。如果所有的测试都通过的话，你甚至可以很严格规范地书写你的CSS代码。我们不关注浏览器的UserAgent字符串或者版本号，而是检测它能够支持什么样的特性。
所以我们真正拥有的组件就是各种测试，再加上一点处理程序。有些测试可能会导致较长的反馈，例如@font-face测试，它的特性不是即时可用的，所以这是一个异步检测。
Jacob（Simpli5）：我真的很喜欢jQuery和DOM的简单协同工作方式，但是我也一直希望需要的时候，我能够调用元素的方法，而不是需要使用jQuery来封装这些元素。所以Simpli5的核心特性便是加入了jQuery提供给HTMLElement原型的大部分功能。有些JavaScript开发者可能看不起这个框架，但是我觉得这个框架很好利用了JavaScript语言（而不是无法利用）的核心思想，它允许我们高效地开发生产，并且编写出更多高可读性的脚本。一个Simpli5对象和jQuery对象非常类似，也是一个元素数组，调用对象的方法实际上会调用这些元素的方法，例如，document.body.addClass('myclass')和$('div').addClass('myclass')实际上是将这个类加入到元素中去。
我已经加入了一个小型的类系统，因为结构化和易维护的组织形式对于健壮的HTML5应用是必不可少的。它和MooTools类看起来很像，而且能够很好地支持继承。
InfoQ：你们的框架和现有流行的客户端JavaScript框架（例如jQuery、Dojo和Prototype）之间的互操作性如何？它们能一起正常工作吗？
Dave（Jo）：Jo和其他程序库的兼容性非常好。事实上，它设计之初便是以例如PhoneGap这样的底层库一起工作为目标。我并不会尝试解决所有的核心问题，例如&加载浏览器URL&或者&告诉我什么时候我的应用能够运行&。Jo是一个相对来说比较高层的框架。
Faruk（Modernizr）：与其说Modernizr是一个框架，还不如说它是一个工具集，你可以放心地在大量其他的程序库和框架中使用它。虽然它和ie-css3.js不兼容，但这只是在某些特殊情况下才会触发（比如使用ARIA role属性的时候）。
Jacob（Simpli5）：在绝大多数情况下它们之间兼容性不错。Simpli5使用$作为变量前缀，这和jQuery是一样的。不过如果$已经被占用的话，可以重新指定另一个前缀符号。它的确和Prototype和MooTools一样使用Class，所以无论哪个最后被载入，你使用的类系统都是一样的。
InfoQ：你们能够举例说明一下这些框架的能力以及描述一下解决方案吗？
Dave（Jo）：Jo的目标是解决&我们如何能够让一个应用在大量平台上获得广泛支持？尽管这些平台的显示规格和特性各不相同。&Jo将所有UI的工作交付于了CSS3（在某些平台上是硬件加速），也就是说你的应用在任何平台上都是相同的。跨平台问题在CSS3中被弱化了，而且类似于PhoneGap这类底层库也较好地封装了跨平台问题。
Faruk（Modernizr）：我的（当前的）使用了一系列的标签特性，同一个鼠标行为在不同的浏览器中会出现不同的标签的展现方式。如果浏览器是功能强大并且遵循标准的话，那么会有很酷的动画效果，例如颜色渐变和宽度改变。浏览器本身的功能越少，那么这个特效就越缺少观赏的乐趣。Modernizr允许我能够安全且容易地找出浏览器的类型，然后根据不同的浏览器使用不同的CSS规则 - 如果没有的Modernizr的话，这些规则可能会互相冲突或者出现重载。
Jacob（Simpli5）：这个框架非常的新，也就大概一个月的年龄，但是我相信它会很快的成熟起来。我努力地使用更简洁方便的并且能够为HTML5浏览器支持的代码支持其他框架都能支持的功能。我想它的最大亮点是它的组件系统，你可以以一种非常简单易读的方式定义一个组件，这种方式有助于组件式开发。
InfoQ：你们是如何看待JavaScript框架通过改进来适应HTML5的？
Dave（Jo）：JavaScript库应该逐渐变得更小更高效。更多的底层UI和动画效果应该集成到CSS3之中，使得JavaScript的DOM代码更加简洁。像 同样例如构建入HTML5的worker进程意味着我们可以以一种更加自然的方式来编写后台任务，而不是需要写出一些非常荒谬且复杂的代码展示UI。
Faruk（Modernizr）：HTML5和CSS3越来越被广泛接受，这有很大一部分应该归功于Webkit浏览器引擎，这个引擎已经成为了现在几乎所有移动浏览器的事实标准。JavaScript框架运行于这个引擎之上，而且缓慢地进步到根据情况使用原生实现或者JavaScript驱动的后备计划。
Jacob（Simpli5）：我看大部分人都加入了HTML5扩展，而使得核心代码由于处理跨浏览器问题而变得臃肿，这个问题可能得到大多数站点都转向 HTML5之后才能解决。他们的代码不得不这样做，因为需要满足开发者在不同浏览器中运行脚本的需求。只有很少一部分人选择了只支持HTML5，从而享受到了剔除旧代码和浏览器的畅快感，而且项目也能进展顺利。老实说，对于更快的JS引擎和带宽来说，&臃肿&不是那么重要。
我也看到了很多服务于SQL，数据存储，Socket等的库不断地涌现。和这些库打交道应该是一件很有意思的事情。
InfoQ：你是如何看待近期HTML 5和浏览器的发展情况呢？有什么东西你认为是标准中缺少的呢？你对HTML5的部分技术有什么评价吗？
Dave（Jo）：现在Safari（以及iPhone和iPad上的mobile webkit）是唯一能够在CSS3中进行硬件加速3D变换的解决方案，不过也有一个很让人失望的地方。它的市场占有率使得这个效果在其余94%的平台上无法展示，或者不得不让我们编写一些不能在移动设备上运行的东西。
这个标准中最大的缺陷就是客户端数据持久存储。Webkit、Gecko和IE都有它们自己的本地存储方式，这让编码过程变得焦躁不安。
最激动人心的莫过于&web worker&后台进程。如此多的应用程序将任务分成无数个小片。使用一个后台进程无中断地展示一个列表，这个用户体验非常地酷。
Faruk（Modernizr）：关于HTML5，我有许多东西要说，例如浏览器以及市场的反应。Web开发者和标准拥护者有的时候可能会忘记有一件事情是用户根本不关注的，即用户不在意应用程序是使用Flash、Sliverlight、HTML5还是CSS3编写的，而是关注这个程序是如何工作得好（或者不好）。
我们很自然而然地去批评HTML5的进展以及厂商的态度，但是考虑到复杂程度，以及古往今来这样巨大的事情进展均是如此地混乱，我就释然了。我们现在终于可以在浏览器中做一些我们很多年前就一直在梦想做的事情了，创新的脚步和加入到浏览器中的新特性让人难以置信。作为web开发人员，这是最令人激动的时代，从社区对Modernizr强有力的支持就可以看出。即便它之前是完全开源的，世界各地的人们都在为它做贡献。
非常激动人心的是，人们对Modernizr的支持激励着我们继续开发和完善这个工具，我们希望能够将其变得更加有用，尤其是对于那些希望能够迅速构建自己站点的web开发者。
Jacob（Simpli5）：我看到了一些加入到video和audio组件的特性，例如皮肤功能，或者将其更好地组合到页面中。不过也有浏览器不打算支持Flash video。这个标准没有包括性能这一部分，但是这是我想在下一个版本中看到的东西。JS性能一直在提升，但是渲染的性能也需要提升。如果你希望使用HTML5编写一个游戏，那么性能将会限制你的发挥。
你可以在InfoQ找到更多关于、和其他的信息。
查看英文原文：
感谢对本文的审校。
给InfoQ中文站投稿或者参与内容翻译工作，请邮件至。也欢迎大家加入到中与我们的编辑和其他读者朋友交流。
Author Contacted
语言 & 开发
347 他的粉丝
0 他的粉丝
25 他的粉丝
10 他的粉丝
0 他的粉丝
JavaScript
58 他的粉丝
1 他的粉丝
2 他的粉丝
648 他的粉丝
3301 他的粉丝
0 他的粉丝
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
Re: 支持最新技术的发展
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
订阅InfoQ每周精要，加入拥有25万多名资深开发者的庞大技术社区。
架构 & 设计
文化 & 方法
InfoQ.com及所有内容，版权所有 ©
C4Media Inc. InfoQ.com 服务器由 提供, 我们最信赖的ISP伙伴。
极客邦控股（北京）有限公司
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。15:09 提问
html 怎么做一个输入ip地址的文本框
按赞数排序
四个文本框没有边框，夹杂3个小点，放在一个有边框的div内，同时用js限制每个文本框输入的长度
# 不要想太复杂的，4个输入框每个限制3位数字输入，连在一起 . 号分隔；剩下的就是调整样式了
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐html如何改变框架占整个屏幕的宽度。_百度知道
html如何改变框架占整个屏幕的宽度。
代码如下：
&frameset rows=&19%,72%,10%&&
&frame src=&daohang.php& noresize=&noresize& name=&framA& frameborder=&0& framespacing=&0&&
&frameset cols=&200,700&&
&frame src=&lianjie.php& noresize=&noresize& name=&framB& frame...
我有更好的答案
增加样式：.framesetname{ width:75%; margin:0} html中：&frameset class=&framesetname& rows=&19%,72%,10%&&试试看。
高手能不能帮忙把这个样式给添加到上面的代码中？我对样式不了解，不知怎么加进去啊，非常感谢。。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&&html xmlns=&&&&head&&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&&title&无标题文档&/title&&style type=&text/css&&.frameset1{ width:75%; margin:0}&/style&&/head& &frameset class=&frameset1& rows=&19%,72%,10%&&
&frame src=&daohang.php& noresize=&noresize& name=&framA& frameborder=&0& framespacing=&0&&
&frameset cols=&200,700&&
&frame src=&lianjie.php& noresize=&noresize& name=&framB& frameborder=&0& &
&frame src=&show_product.php& name=&framC& noresize=&noresize& frameborder=&0& framespacing=&0&&
&/frameset&
&frame src=&copyright.php& noresize=&noresize& name=&framD& frameborder=&0& framespacing=&0&&
&/frameset&
&noframes&&/noframes&&/html&
采纳率：25%
你可以用table布局
然后在td中写frame
这样可以设置大小了
可以使用Dreamweaver调整。
我也用了，就是没法调啊感觉。能告诉我用dreamweaver这么调整框架大小吗？不胜感激。。
菜单→查看→可视化助理→框架边框→打钩，就可以看到框架边框了，这时爱怎么调就怎么调。
为您推荐：
其他类似问题
您可能关注的内容
屏幕的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。> 问题详情
在Dreamweaver MX中，给框架加入HTML文档说法错误的是（)A.组织HTML是建立框架的目的B.在框架建
悬赏：0&答案豆
提问人：匿名网友
发布时间：
在Dreamweaver MX中，给框架加入HTML文档说法错误的是()A.组织HTML是建立框架的目的B.在框架建立完成后，需要向每个框架填入正确的HTML文档C.在框架的命名时，如果出现重命名，没有关系，系统将会自动命名D.在属性设置参数的Src栏中点击文件按钮，在出现的文件选择窗口中选择需要加入的HTML文档
您可能感兴趣的试题
1在Dreamweaver MX中，设置分框架属性时，选择设置Scroll(滚动)的下拉参数为Auto(自动)，其表示()A.在内容可以完全显示时不出现滚动条，在内容不能被完全显示时自动出现滚动条B.无论内容如何都不出现滚动条C.不管内容如何都出现滚动条D.由浏览器来自行处理2在Dreamweaver MX中，在设置各分框架属性时，参数Scroll(滚动)是用来设置什么属性的()A.是否进行颜色设置B.是否出现滚动条C.是否设置边框宽度D.是否使用默认边框宽度3在Dreamweaver中，下面那个标签为嵌入Quick Time格式视频文件的标签()A.embedB.bodyC.tableD.object4在Dreamweaver MX中，下面关于Iframe的说法错误的是()A.Iframe是Inline Frame的缩写，一般被称作内联框架或者浮动框架B.使用Iframe，网页的设计者可以在HTML页面的任何地方插入一个内联框架C.每个内联框架都可以独立地定义其大小，而不仅仅局限于一个浏览器窗口的大小D.使用Iframe，像使用普通框架前需要在一个主页面里用FrameSet标签为每个框架划分空
我有更好的答案
请先输入下方的验证码查看最佳答案
图形验证：
验证码提交中……
每天只需0.4元
选择支付方式
支付宝付款
郑重提醒：支付后，系统自动为您完成注册
请使用微信扫码支付(元)
支付后，系统自动为您完成注册
遇到问题请联系在线客服QQ：
恭喜你被选中为
扫一扫-免费查看答案！
请您不要关闭此页面,支付完成后点击支付完成按钮
遇到问题请联系在线客服QQ：
恭喜您！升级VIP会员成功
提示：请截图保存您的账号信息，以方便日后登录使用。
常用邮箱：
用于找回密码
确认密码：结构教程-动态脚本编程_www.knowsky.com
数据库库设计：树结构的数据读取
优质网站模板