随着响应式网页设计逐渐进化成每个网站必备的一部分，越来越多的用户界面问题在设计面向手机、平板的网站时涌现。 在下面的展示中，我们展现了15款新生的响应式JQuery代码片段，它们能增强用户在手机、平板或是普通的浏览器上的用户体验， 用户界面类 MultiScroll Multiscroll 是一款强劲的JQuery插件，它能允许你创建分离的、有两个竖直滚动条的页面。它的强劲功效不仅体现在所有现代浏览器上(甚至IE8它也支持)，还适用于移动设备和平板。这款插件能让你即使是在响应式网站上也能利用这个华丽的效果。 如何使用: 实现这个效果很简单。所有你需要做的就是在<head>标签内引入脚本文件，然后把剩下的代码放在<body>标签内。 TourTip TourTip 是一种网页元素的交互式可视化指南。TourTip可以替代静态帮助信息接口或者是解释文本，通过添加一个页面指引，让用户更容易了解产品的新特性和新功 能。TourTip对于那些有关新产品或者介绍服务，又或者是帮助指南的一些介绍性网站或者登录页面都是非常有用的。其直观的界面使其解释任何事情都易如 反掌。 用法： TourTip可以根据用户的需求来定制构建，允许你“玩耍"多个变量，你仅仅只需要根据你的目的或者需求来调整它即可。 jQuery Tilted Page Scroll 这个高级的jQuery代码片段允许你使用一个页面滚动插件来创建一个三维倾斜的滚动效果。这个效果看起来很简单但是它对于你的博客或者是摄影集或者是组合网站来说，是一个非常好的体验。兼容性测试在现在的浏览器都测试通过了，当然不包含IE。 jQuery Tip Cards 该代码片段帮助你创建一个供用户翻阅的卡片布局集合。这个想法是非常有趣，它已经被Google的“Tips”项目实现。这个代码片段有许多不用的用途，你可以用它展示你最新的博客帖子，portfolio items，网页游戏等。 用法： 根据翻转卡的性质，你可以使用栈的方式存储内容，效果非常的棒！在head中连接脚本，同事把回调函数放到footer里。 Slinky.js Slinky.js 是一个用于创建优雅的带堆叠头的滚动导航列表的jQuery插件。当你在浏览器上体验它的时候，它会创建了一个类似移动设备的环境。因为它是轻量级的（大约1KB），它能带给你一个平滑的令人舒适的体验，并且它能与你最喜爱的浏览器的最新版本兼容。 用法： 在jQuery之后，使用script标签引入下载的文件，然后在你想激活Slinky的jQuery元素上调用.slinky()方法。 GoalProgress GoalProgress是一个允许你使用jQuery创建一个动画进度条的插件。填入必填项后，该插件会自动计算你当前的进度，并且用动画效果展示进度条。你可以在显示的数字前后指定显示文字。在各种事件或者活动的捐赠活动上，用该插件来显示捐赠情况是非常棒的。 用法: 你所需要做的就是引用该脚本的样式文件，在页面上创建一个空的html div元素然后初始化该脚本即可。 表单与输入类 Card 如果你在开发一个电子商务项目，这款轻量级却优美的代码片段就是你所需要的。Card 仅仅用一行的代码，你就能展现出用户需要输入的信用卡信息。创建支持4种卡的动画效果，给用户提供直观的体验，所有这一切都是免费与开源的。 如何使用: 在你的HTML中包含并引用需要的文件。初始化脚本然后在你的当前表单中创建或者替换输入的值，从而让它们具有响应式的样式。 Unibox Unibox是一款jQuery插件，它支持通用的搜索框用来提供基于查询的搜索提示。它提供丰富多样的内容展现方式-从链接到图片或者任何其他元数据-这些在用户提交标签后都会被展示。 如何使用： Unibox的安装有一点点复杂但没那么困难。在需要配置的页面引入脚本和CSS文件，并且安装服务端/客户端插件。由于该插件的运行方式是提供搜索提示，所以你除了在客户端安装脚本，在服务端也需要有对应的数据格式来支持。 Vanillabox Vanillabox是一款简单又现代的lightbox式样的JQuery插件，能被用于轻松的建立起一个图像画廊。它有着简单、最小化的设计，适用于所有现代浏览器。它是许多相似功能的插件中安装简单、轻量级的一款，可被用于替换之前已用的插件。 如何使用: 安装非常简单。仅仅把script和css在<head>中导入然后调用脚本就行了。 Media ToneDen Player ToneDen是一款纯js定制的音频播放器。它有一个完全可定制的界面，给你一连串的配置项来提升你的听觉体验。简易简洁的界面是赏心悦目的，并且也不会在页面上带来任何的混乱。 如何使用： 由于展示和播放音乐的方式有许多不同，所以定制播放器的方法也有很多。当谈到播放器的配置项时候，开发者做了一个很棒的工作，使得可以容易的使用它，它确实是相当高级先进。使用脚本来满足基本的需求，或对照文档来使用更多高级的配置。 Pizza Pie Charts 这款代码片段允许你在任何设备上呈现出一个pizza样式的图表。它是一款使用简便的插件，既能和Zurb的响应式框架契合，也能作为单独的脚本而 工作。关于这个插件没有什么可以介绍的，因为它仅有的一个选项就是展示pie或者开发者所称的pizza图表。这款插件十分优秀、方便使用与自定义，以至 于在这篇文章中如果不把它包含进来就是个错误。 用法: 引用css和js文件，然后你就已经拥有了一个基本的pie图表，但是别忘了HTML。 导航类 Fly Side Menu 如果你想创建一个由Airbnb驱动的菜单，这款插件就是你所需要的。它完全免费，兼容主流浏览器与移动设备。 用法: 这款插件给了你一点实验与自定义的空间，但是谨记：基础的选项虽然某种意义上限制不少，但是对于简单场合还是够用了的。 Hashtabber Hashtabber 是一款用于hashchange驱动的标签式内容选择器的JavaScript插件。考虑到它也适用于移动设备，你有多种方式来利用这款插件。它包括了一些预设定的主题以及一些自定义的方法。 用法: 在HTML中分别链接各个文件，然后建立一个HashTabber的section。 Headhesive.js Headhesive.js创建一个按需粘性标题头（ on-demand sticky header）。指定你想要固定的header，剩余的部分就会变得不可思议。使用很简单，有用的代码片段用于创建动画和粘性导航栏。 如何使用： 在你的文件夹里，提供了JavaScript文件和调用它们的脚注。 Anchorific.js Anchorific根据标题标签（header […]
View Details目前来看，JS框架以及一些开发包和库类有如下几个，Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx Dojo （JS library and UI component ）： Dojo 是目前最为强大的j s框架，它在自己的Wiki上给自己下了一个定义，dojo是一个用JavaScript编写的开源的DHTML工具箱。dojo很想做一个“大一统”的 工具箱，不仅仅是浏览器层面的，野心还是很大的。Dojo包括ajax, browser, event, widget等跨浏览器API，包括了JS本身的语言扩展，以及各个方面的工具类库，和比较完善的UI组件库，也被广泛应用在很多项目中，他的UI组件的 特点是通过给html标签增加tag的方式进行扩展，而不是通过写JS来生成，dojo的API模仿Java类库的组织方式。 用dojo写Web OS可谓非常方便。dojo现在已经4.0了，dojo强大的地方在于界面和特效的封装，可以让开发者快速构建一些兼容标准的界面。 优点：库相当完善，发展时间也比较长，功能强大，据说利用dojo的io.bind()可以实现comet，看见其功能强大非一般，得到IBM和SUN的支持 缺点：文件体积比较大，200多KB，初次下载相当慢，此外，dojo的类库使用显得不是那么易用，j s语法增强方面不如prototype。 Prototype （JS OO library）： 是一个非常优雅的JS库，定义了JS的面向对象扩展，DOM操作API，事件等等，以prototype为核心，形成了一个外围的各种各样的JS扩展库，是相当有前途的JS底层框架，值得推荐，感觉也是现实中应用最广的库类（RoR集成的AJAX JS库），之上还有 Scriptaculous 实现一些JS组件功能和效果。 优点：基本底层，易学易用，甚至是其他一些js特效开发包的底层，体积算是最小的了。 缺点：如果说缺点，可能就是功能是他的弱项 Scriptaculous （JS UI component based on prototype）： Scriptaculous 是基于prototype.js框架的JS效果。包含了6个js文件，不同的文件对应不同的js效果，所以说，如果底层用 prototype的话，做js效果用Scriptaculous那是再合适不过的了，连大名鼎鼎的digg都在用他，可见不一般 优点：基于prototype是最大的优点，由于使用prototype的广泛性，无疑对用户书锦上添花，并且在《ajax in action》中就拿Scriptaculous来讲述js效果 缺点：刚刚兴起，需要时间的磨练 yui-ext (JS UI component)： 基 于Yahoo UI的扩展包yui-ext是具有CS风格的Web用户界面组件能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯 javascript代码开发。真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid。许多组件实现了对数据源的支持，例如动态的布局，可编辑的表格控件，动态加载的Tree 控件、动态拖拽效果等等。1.0 beta版开始同Jquery合作，推出基于jQuery的Ext 1.0，提供了更多有趣的功能。 优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面太让让人震撼了。 缺点：太过复杂，整个界面的构造过于复杂。 Jquery ： jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你达到目的！并且简介的语法和高的效率一直是jQuery追求的目标， 优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext 重用了很多jQuery的函数 缺点：据说太嫩，历史不悠久。 Mochikit ： MochiKit 自称为一个轻量级的js框架。MochiKit 主要受到 Python 和 Python 标准库提供的很多便利之处的启发，另外还缓解了浏览器版本之间的不一致性。其中的 MochiKit.DOM 尤其方便，能够以比原始 JavaScript 更友好的方式处理 DOM 对象。MochiKit.DOM 大部分都是针对 XHTML […]
View Details这里集合的这组 HTML5 & CSS3 效果，有的是网站开发中常用的、实用的功能，有的是先进的 Web 技术的应用演示。不管哪一种，这些案例中的技术都值得我们去探究和学习。 超炫的 HTML5 粒子效果进度条 我喜欢粒子效果作品，特别是那些能够应用于实际的，例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果。看着这么炫的 Loading 效果，即使让我多等一会也无妨：） 源码下载 / 在线演示 使用 CSS3 打造一组质感细腻丝滑的按钮 CSS3 引入了众多供功能强大的新特性，让设计和开发人员能够轻松的创作出各种精美的界面效果。下面这些发出闪亮光泽的按钮，很漂亮吧？把鼠标悬停在按钮上，还有动感的光泽移动效果。 源码下载 / 在线演示 纯 CSS 绘制《辛普森一家》人物头像 一组纯 CSS 绘制的《辛普森一家》人物头像。《辛普森一家》（The Simpsons）是马特·格勒宁为美国福克斯广播公司创作的一部动画情景喜剧。 源码下载 / 在线演示 CSS & jQuery 制作一款漂亮的多彩时钟 大家可能见过各种各样的时钟效果，比如多年前非常流行的 Flash 制作的各种新奇的动画时钟，现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现。 源码下载 / 在线演示 傻眼了！竟然有如此逼真的雨滴效果 Rainyday.js 是一个轻量的 JavaScript 库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。 源码下载 / 在线演示 HTML5 Canvas 模拟可撕裂布料效果 这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示，效果逼真。你会看到，借助 Canvas 的强大绘图和动画功能，只需很少的代码就能实现让您屏息凝神的效果。 源码下载 / 在线演示 SVG 实现一个漂亮的页面预加载效果 展示如何使用 CSS 动画， SVG 和 JavaScript 创建一个简单的页面预加载效果。对于网站来说，这些预载入得画面提供了一种创造性的方法，使用户在等待内容加载的时候不会那么无聊。 源码下载 / 在线演示 结合 CSS3 & Canvas 模拟人行走的效果 HTML5 和 CSS3 […]
View Details作为一个前沿的 Web 开发者，对于 HTML5 和 CSS3 技术或多或少都有掌握。前几年这些新技术刚萌芽的时候，开发者们已经使用它们来小试牛刀了，如今这些先进技术已经遍地开发，特别是在移动端大显身手。这篇文章挑选了8个前沿的 HTML5 & CSS3 效果，记得收藏哦：） 温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。 HTML5 模拟现实物理效果 Ball Pool 是一个基于 HTML5 技术的实验，模拟现实物理效果，让你在 Web 中感受自然物体的运动。玩法介绍：可以随意拖动圆球、点击页面背景、晃动浏览器、双击页面背景或者按住鼠标左键，有不同的效果，赶紧来体验一下。 源码下载 在线演示 实现各种 CSS3 文本动画效果 这个插件集成了一些非常好的 JavaScript 库，提供一个方便使用的文本动画插件，可以让你为网页中的文字运用各种动画。 在线演示 源码下载 离开你网站时显示模态弹窗 Ouibounce 是一个微小的库，用于实现在用户离开你的网站的时候显示一个模式窗口。这个库可以帮助你增加着陆页的转换率。 Ouibounce 会在当鼠标光标移动到接近（或通过）视口（viewport）的顶部的时候触发。 源码下载 在线演示 实现各种好看的阴影效果 Shine.js 是一个用于实现漂亮阴影的 JavaScript 库。您可以设置动态光的位置，可定制的阴影。不依赖于第三方库，兼容 AMD。能在支持 textShadow 或 boxShadow 的浏览器中正常使用，如果有需要会自动添加前缀。 源码下载 在线演示 表单填写进度提示效果 Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 JavaScript 库，你需要做的就是添加表单，剩下的任务就交给 Fort.js 算法了，使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果，满足开发的各种场合需要。 源码下载 在线演示 HTML5 WebGL 实现逼真的云朵效果 使用 HTML5 WebGL 实现超逼真的云朵效果。WebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。 源码下载 在线演示 带有数字显示的加载进度条效果 有的时候，在我们的应用程序中，我们希望能够显示特定任务的百分比进度。这里分享的这款小巧的 JavaScript 插件就是实现这个功能，易于使用和定制，而且是是免费开源的。 立即下载 在线演示 自适应的占位符效果 在早期，我们都是通过使用 JavaScript 来实现占位符功能。而现在，HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果（Adaptive Placeholder），当你输入的时候，提示文字不会消失，而是以动画的方式移动到了输入框的上方。 源码下载 在线演示
View Details50 Useful CSS Frameworks, Libraries and Tools of 2014: CSS Libraries for Animation: CSS Shake Magic Animations Hover.css Saffron CSS Frameworks, Libraries for Spinners & Indicators: Single Element CSS Spinners SpinKit CSS Typography Libraries & Tools: typebase.css Type settings Type Rendering Mix Sassline CSS Frameworks & UI Kits: Kindling Webplate Flexbox Grid Fluidity Cute Grids Ice Cream Zen Grids ApplePie Pure CSS Components BASSCSS Responsee II CSS Icon Creation Tools: Glyphter Perfect Icons iconizr CSS Color Tools: Colors CSS Colours Pantone Sass CSS Reference and Reading: CSS Vocabulary […]
View Details一个框架就是一个软件应用，它可以帮助开发者进行快速设计和开发动态站点。每个月都会有那么几个开发者发布一些五花八门的框架，来使得开发工作更加轻松和高效。 本文中，我们收集了10个新的框架， 其中一些比其它的更为复杂，提供了更多的配置选项，组件，和接口选项。不管怎样，他们使得你可以在站点上创建出更棒的东西。希望你可以找到最适合你的需求的那一款，好好享受吧 !! 1. Famo.us Famo.us是个免费并且开源的JavaScript平台，用来构建手机应用和桌面体验。Famo.us与众不同的一点是它的JavaScript渲染引擎和3D物理引擎，赋予开发者力量和工具来创建本地高质量应用和动画，而且只需要用到JavaScript即可。 2. Concise Concise 的构建目标是使你可以拥有很多开箱即用的选项。它被重新构建之后，变的移动友好化，拥有了一个简单的网格系统，漂亮的字体，以及其它一些花边小应用。 不管怎样，它仍然没构建的十分精简，只有刚刚超过2,000行的CSS和几百行的JavaScript代码。Concise被特意构建成可定制化的, 可修补的和高端复杂的框架。 3. Ampersand.js Ampersand.js是一个高度模块化，松耦合，无架构（non-frameworky）的框架，用以构建高端JavaScript应用。它是一个定义良好的过程，把一系列故意设计的很小的模块组合起来。每一个东西都是一个CommonJS组件。没有AMD和UMD，默认情况下也没有捆绑任何类型的插件。CommonJS的清晰、简单和灵活性主导了一切。清楚的依赖关系，没有任何不必要的封装和缩减，没有任何不规矩的东西。只在package.json里清楚的声明了项目依赖。 4. OnSenUI Onsen UI是一个为PhoneGap/Cordova混合App提供的前端开发框架。它致力于创建易用的移动应用。同时，配合Monaca，可以很简单地开发后端特性和添加设备支持。OnSen UI自身使用Angular.js和Topcoat开发，由于其架构特性，可以便捷的使用Angular.js的特性。 5. Archteype Archteype是一个Compass/Sass框架，用于创建可配置的、可组合的UI模式和UI组件。Archteype有良好的文档以及自然的语法。 6. Headstart Headstart非常易用，分分钟就可以进行自动前端设定并运行起来。它使用一个文件夹结构来维护你需要依赖的所有东西，甚至包括对各种东西的优化，比如SVG图像和暗示。 7. Kickoff Kickoff 是一个用来构建可扩展响应式站点的轻量级前端框架。它是用Sass和Grunt构建的，使用MIT许可协议进行发布。 8. Tuktuk Tuktuk 是一个轻量级面向对象CSS框架，用来轻松的构建响应式可扩展站点。它包括十二列布局，还有表单，按钮，表格，字体等等很多。 9. Base Base是用SASS/LESS开发的一个强大的CSS预处理器，它可以帮助你创建简洁的、组织结构良好的CSS，便于长时间的轻松维护。Base支持所有主流的浏览器和注入IE7之类的遗留浏览器。 10. Scribe Scribe是一个富文本编辑器框架，由Guardian创建并开源出来。它对浏览器之间的不一致性进行了打包处理并且包含了合理的默认值。 from:http://www.oschina.net/translate/10-fresh-frameworks-for-developers
View Details1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。 如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。 以下几种写法都是正确的： $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 3、如何获取jQuery集合的某一项 对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。 有如下两种方法： $("div").eq(2).html(); //调用jquery对象的方法 $("div").get(2).innerHTML; //调用dom的方法属性 4、同一函数实现set和get Jquery中的很多方法都是如此，主要包括如下几个： $("#msg").html(); //返回id为msg的元素节点的html内容。 $("#msg").html("<b>new content</b>"); //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示b加粗的new content $("#msg").text(); //返回id为msg的元素节点的文本内容。 $("#msg").text("<b>new content</b>"); //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示<b>new content</b> $("#msg").height(); //返回id为msg的元素的高度 $("#msg").height("300"); //将id为msg的元素的css高度设为300 $("#msg").width(); //返回id为msg的元素的css宽度 $("#msg").width("300"); //将id为msg的元素的宽度设为300 $("input").val("); //返回表单输入框的value值 $("input").val("test"); //将表单输入框的value值设为test $("#msg").click(); //触发id为msg的元素的单击事件 $("#msg").click(fn); //为id为msg的元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。 包括两种形式： $("p").each(function(i){this.style.color=['#f00′,’#0f0′,’#00f'][ i ]}) //为索引分别为0，1，2的p元素分别设定不同的字体颜色。 $("tr").each(function(i){this.style.backgroundColor=['#ccc',’#fff'][i%2]}) //实现表格的隔行换色效果 $("p").click(function(){alert($(this).html())}) //为每个p元素增加了click事件，单击某个p元素则弹出其内容 6、扩展我们需要的功能 $.extend({min: function(a, b){return a < b?a:b; }, max: function(a, b){return a > b?a:b; } }); //为jquery扩展了min,max两个方法使用扩展的方法（通过“$.方法名”调用）： alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); 7、支持方法的连写 所谓连写，即可以对一个jquery对象连续调用各种不同的方法。 例如： $("p").click(function(){alert($(this).html())}) […]
View Details如果您想详细了解eval和JSON请参考以下链接： eval ：https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Functions/Eval JSON：http://www.json.org/ eval函数的工作原理 eval函数会评估一个给定的含有JavaScript代码的字符串，并且试图去执行包含在字符串里的表达式或者一系列的合法的JavaScript语句。eval函数将把最后一个表达式或者语句所包含的值或引用作为返回值。 举例说明 eval评估JavaScript表达式
|
1 2 3 |
<span class="sh_keyword" style="font-weight: bold; color: blue;">var</span> bar <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'bar'</span></span><span class="sh_symbol" style="color: #8b0000;">;</span><span class="sh_keyword" style="font-weight: bold; color: blue;"> var</span> foobar <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'"foo" + bar'</span></span><span class="sh_symbol" style="color: #8b0000;">);</span><span class="sh_predef_func" style="font-weight: bold; color: #00008b;"> alert</span><span class="sh_symbol" style="color: #8b0000;">(</span>foobar<span class="sh_symbol" style="color: #8b0000;">);</span> |
eval评估JavaScript语句
|
1 2 3 4 5 6 7 8 9 10 |
<span class="sh_keyword" style="font-weight: bold; color: blue;">var</span> bar <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'bar'</span></span><span class="sh_symbol" style="color: #8b0000;">;</span><span class="sh_comment" style="font-style: italic; color: #a52a2a;"> // if variable bar equals 'bar', foobar is the result of </span><span class="sh_comment" style="font-style: italic; color: #a52a2a;">// last executing statement: bar="foo-bar";</span><span class="sh_keyword" style="font-weight: bold; color: blue;"> var</span> foobar <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}'</span></span><span class="sh_symbol" style="color: #8b0000;">);</span><span class="sh_predef_func" style="font-weight: bold; color: #00008b;"> alert</span><span class="sh_symbol" style="color: #8b0000;">(</span>foobar<span class="sh_symbol" style="color: #8b0000;">);</span><span class="sh_comment" style="font-style: italic; color: #a52a2a;">// change the value</span>bar <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'foo'</span></span><span class="sh_symbol" style="color: #8b0000;">;</span><span class="sh_comment" style="font-style: italic; color: #a52a2a;"> // now our the last executed statement is: bar = "bar-foo";</span><span class="sh_comment" style="font-style: italic; color: #a52a2a;"> // therefore the value of variable foobar has been changed</span><span class="sh_comment" style="font-style: italic; color: #a52a2a;"> // into 'bar-foo'</span> foobar <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'if(bar == "bar") {bar="foo-bar";} else {bar = "bar-foo";}'</span></span><span class="sh_symbol" style="color: #8b0000;">);</span><span class="sh_predef_func" style="font-weight: bold; color: #00008b;"> alert</span><span class="sh_symbol" style="color: #8b0000;">(</span>foobar<span class="sh_symbol" style="color: #8b0000;">);</span> |
JSON的格式 JSON的格式是由大括号和由冒号（：）构成的名值对所组成的。注意JSON格式与对象字面量 (object literals) 的区别：JSON的名字部分严格用引号+名字来表示。 举例说明 对象的字面量
|
1 2 3 4 5 6 7 8 |
<span class="sh_keyword" style="font-weight: bold; color: blue;">var</span> objectLiteral <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_cbracket" style="color: red;">{</span> <span class="sh_predef_var" style="color: #00008b;">name</span><span class="sh_symbol" style="color: #8b0000;">:</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"Objector.L"</span></span><span class="sh_symbol" style="color: #8b0000;">,</span> age<span class="sh_symbol" style="color: #8b0000;">:</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"24"</span></span><span class="sh_symbol" style="color: #8b0000;">,</span> special<span class="sh_symbol" style="color: #8b0000;">:</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"JavaScript"</span></span><span class="sh_symbol" style="color: #8b0000;">,</span> sayName<span class="sh_symbol" style="color: #8b0000;">:</span> <span class="sh_keyword" style="font-weight: bold; color: blue;">function</span><span class="sh_symbol" style="color: #8b0000;">()</span> <span class="sh_cbracket" style="color: red;">{</span> <span class="sh_keyword" style="font-weight: bold; color: blue;">return</span> <span class="sh_keyword" style="font-weight: bold; color: blue;">this</span><span class="sh_symbol" style="color: #8b0000;">.</span><span class="sh_predef_var" style="color: #00008b;">name</span><span class="sh_symbol" style="color: #8b0000;">;</span> <span class="sh_cbracket" style="color: red;">}</span><span class="sh_cbracket" style="color: red;"> }</span><span class="sh_symbol" style="color: #8b0000;">;</span> |
JSON对象
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="sh_keyword" style="font-weight: bold; color: blue;">var</span> jsonFormat <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_cbracket" style="color: red;">{ </span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"summary"</span></span><span class="sh_symbol" style="color: #8b0000;">:</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"Blogs"</span></span><span class="sh_symbol" style="color: #8b0000;">, </span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"blogrolls"</span></span><span class="sh_symbol" style="color: #8b0000;">:</span> <span class="sh_symbol" style="color: #8b0000;">[</span> <span class="sh_cbracket" style="color: red;">{ </span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"title"</span></span><span class="sh_symbol" style="color: #8b0000;">:</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"Explore JavaScript"</span></span><span class="sh_symbol" style="color: #8b0000;">,</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;"> "link"</span></span><span class="sh_symbol" style="color: #8b0000;">:</span> <span style="font-family: 新宋体;"><span class="sh_string" style="color: red;">"http://example.com/"</span> </span> <span class="sh_cbracket" style="color: red;">}</span><span class="sh_symbol" style="color: #8b0000;">, </span> <span class="sh_cbracket" style="color: red;">{</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;"> "title"</span></span><span class="sh_symbol" style="color: #8b0000;">:</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"Explore JavaScript"</span></span><span class="sh_symbol" style="color: #8b0000;">,</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;"> "link"</span></span><span class="sh_symbol" style="color: #8b0000;">:</span> <span style="font-family: 新宋体;"><span class="sh_string" style="color: red;">"http://example.com/"</span> </span> <span class="sh_cbracket" style="color: red;">}</span> <span class="sh_symbol" style="color: #8b0000;">]</span><span class="sh_cbracket" style="color: red;"> }</span><span class="sh_symbol" style="color: #8b0000;">;</span> |
eval和JSON 由于Ajax的兴起，JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来，进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号：
|
1 |
<span class="sh_keyword" style="font-weight: bold; color: blue;">var</span> jsonObject <span class="sh_symbol" style="color: #8b0000;">=</span> <span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"("</span></span> <span class="sh_symbol" style="color: #8b0000;">+</span> jsonFormat <span class="sh_symbol" style="color: #8b0000;">+</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">")"</span></span><span class="sh_symbol" style="color: #8b0000;">);</span> |
为什么要加括号？ 加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
|
1 2 |
<span class="sh_predef_func" style="font-weight: bold; color: #00008b;">alert</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"{}"</span></span><span class="sh_symbol" style="color: #8b0000;">);</span> <span class="sh_comment" style="font-style: italic; color: #a52a2a;">// return undefined</span><span class="sh_predef_func" style="font-weight: bold; color: #00008b;"> alert</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">"({})"</span></span><span class="sh_symbol" style="color: #8b0000;">);</span><span class="sh_comment" style="font-style: italic; color: #a52a2a;">// return object[Object]</span> |
JSON格式的名字部分为什么要加引号？ 因为eval函数会将{foo:”bar”}解释成合法的JavaScript语句，而非表达式。但是人们往往想要的是让eval将这段代码解释成一个对象。所以JSON格式会强制你去在名字的外侧加上引号再结合圆括号，这样eval就不会错误的将JSON解释成代码块。 举例说明 eval错误解析语义
|
1 |
<span class="sh_predef_func" style="font-weight: bold; color: #00008b;">alert</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'{foo:"bar"}'</span></span><span class="sh_symbol" style="color: #8b0000;">));</span> <span class="sh_comment" style="font-style: italic; color: #a52a2a;">// return "bar", incorrect</span> |
eval正确解析JSON
|
1 |
<span class="sh_predef_func" style="font-weight: bold; color: #00008b;">alert</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'({"foo": "bar"})'</span></span><span class="sh_symbol" style="color: #8b0000;">));</span> <span class="sh_comment" style="font-style: italic; color: #a52a2a;">// return JSON object, correct</span> |
结论 理解eval的工作原理和json的严格的限定格式，合理结合eval和json应用于JavaScript的数据传递和对象转换。 following this format:
|
1 |
<span class="sh_predef_func" style="font-weight: bold; color: #00008b;">eval</span><span class="sh_symbol" style="color: #8b0000;">(</span><span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">'{'</span></span> <span class="sh_symbol" style="color: #8b0000;">+</span> jsonString <span class="sh_symbol" style="color: #8b0000;">+</span> <span class="sh_string" style="color: red;"><span style="font-family: 新宋体;">')'</span></span><span class="sh_symbol" style="color: #8b0000;">);</span> |
from:http://www.jb51.net/article/21688.htm
View Details<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title> <style> body { background: #fff; } .test { position: relative; width: 100px; height: 100px; } .test span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 20px; } .test svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke-dasharray: 1%, 300%; stroke-dashoffset: 0%; stroke: #ED6E5C; stroke-linecap: round; fill: none; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .test svg […]
View Details用 js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。这段时间做的一个项目，用到数组的地方很多，自以为js高手的自己居然无从下手，一下狠心，我学！呵呵。学了之后才知道，js数组的功能强大很，远比VB,C#强多了,大家慢慢看吧
View Details