为开发者准备的 10 个新鲜的框架

一个框架就是一个软件应用，它可以帮助开发者进行快速设计和开发动态站点。每个月都会有那么几个开发者发布一些五花八门的框架，来使得开发工作更加轻松和高效。 本文中，我们收集了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 Details

值得收藏的十二条Jquery随身笔记

1、关于页面元素的引用 通过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

javascript eval和JSON之间的联系

如果您想详细了解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表达式

eval评估JavaScript语句

JSON的格式 JSON的格式是由大括号和由冒号（：）构成的名值对所组成的。注意JSON格式与对象字面量 (object literals) 的区别：JSON的名字部分严格用引号+名字来表示。 举例说明 对象的字面量

JSON对象

eval和JSON 由于Ajax的兴起，JSON这种轻量级的数据格式作为客户端与服务器之间的传输格式逐渐地流行起来，进而出现的问题是如何将服务器端构建好的JSON数据转化为可用的JavaScript对象。利用eval函数无疑是一种简单而直接的方法。在转化的时候需要将JSON字符串的外面包装一层圆括号：

为什么要加括号？ 加上圆括号的目的是迫使eval函数在评估JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：

JSON格式的名字部分为什么要加引号？ 因为eval函数会将{foo:”bar”}解释成合法的JavaScript语句，而非表达式。但是人们往往想要的是让eval将这段代码解释成一个对象。所以JSON格式会强制你去在名字的外侧加上引号再结合圆括号，这样eval就不会错误的将JSON解释成代码块。 举例说明 eval错误解析语义

eval正确解析JSON

结论 理解eval的工作原理和json的严格的限定格式，合理结合eval和json应用于JavaScript的数据传递和对象转换。 following this format:

  from:http://www.jb51.net/article/21688.htm

View Details

SVG+css3 圆形loading

<!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有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。这段时间做的一个项目，用到数组的地方很多，自以为js高手的自己居然无从下手，一下狠心，我学！呵呵。学了之后才知道，js数组的功能强大很，远比VB,C#强多了,大家慢慢看吧

View Details