'JavaScript' 标签

2013年冒出来的优秀 jQuery 插件

随着移动互联网时代崛起,响应式WEB程序流行,JS也在大秀自己的优美之处,现在越来越多不可以思议的JS插件不断被创新出来,有时候你都不知道应该选择那个好。

  1. jQuery Scroll Path 用于自定义滚动路径
  2. freetile.js 高效,动态响应和网页内容布局
  3. gridster.js 可拖动直观的网格布局 jQuery 插件
  4. Fancy Input CSS3 文字输入效果
  5. Superscrollorama 滚动动画效果
  6. jQuery File Upload 多个文件,拖放上传支持,还支持续传。
  7. jQuery Validation Engine 表单验证 jQuery 插件,连IE6 也兼容
  8. kerning.js 网页排版控制
  9. equalize.js 用于平衡元素的高度或宽度
  10. MeanMenu 响应菜单插件,隐藏或显示菜单,控制屏幕宽度等
  11. Toolbar.Js Web 应用程序和网站风格
  12. Smart Menus 让网站菜单上在所有设备上正常工作
  13. NProgress 动画进度条
  14. NProgress Web排版;用于字体宽度大小和行高
  15. Device.js 容易地编写适合(IOS,Android,黑莓,Windows phone)的CSS和/或JavaScript。

让网站加载速度更快的14条规则

这些规则是加快加载您的网页关键:

规则1 – 减少HTTP请求
规则2 – 使用内容分发网络 CDN
规则3 – 添加Expires头
第4条 – Gzip组件
规则5 – 将样式表放在顶部
第6条 – 脚本放在底部
第7条 – 避免CSS表达式
第8条 – 使用外部JavaScript和CSS
第9条 – 减少DNS查找
第10条 – 压缩JavaScript
第11条 – 避免重定向
第12条 – 删除重复的脚本
第13条 – 配置ETag的
第14条 – AJAX可缓存

谷歌的关于性能最佳实践:

优化缓存 -使您的应用程序的数据和逻辑 完全关闭网络
最大限度地减少往返时间 -减少串行请求-响应周期的数量
请求的开销最小化 -减少上传大小
有效载荷的大小最小化 -减少反应,下载和缓存页面的大小
优化浏览器渲染 -改善浏览器的页面布局
优化移动 新! -调谐网站为移动网络和移动设备的特点

14 Rules for Faster-Loading Web Sites | stevesouders
Web Performance Best Practices | developers.google

网站开发工具 Meteor

一直以来IBM在我的眼中都是硬件中牛叉级别的科技公司,例如它的笔记本ThinkPad(被联想收购),BladeCenter(刀片服务器),没想到它们在web developer中也是无比的牛叉。IBM也是一家百年级的科技巨头企业。站在科技领域屹立百年不倒,实属不易!

无意中浏览到了developerworks,见到了许多不错的内容,例如这个Meteor。

Meteor 是一种新的 JavaScript 框架,用于自动化和简化实时运行的 Web 应用程序的开发。

事实上,Meteor 提供了两个 MongoDB 数据库:一个客户端缓存数据库和服务器上的一个 MongoDB 数据库。当一个用户更改一些数据时(例如通过单击 Save),在浏览器中运行的 JavaScript 代码会更新本地 MongoDB 中的相应的数据库项,然后向服务器发出一个 DDP 请求。该代码立即像操作已获得成功那样继续运行,因为它不需要等待服务器回复。与此同时,服务器在后台更新。如果服务器操作失败或返回一个意外结果,那么客户端 JavaScript 代码会依据从服务器新返回的数据立即进行调整。这种调整称为延迟补偿,向用户提供了更高的认知速度。

显然,甚至连 Meteor 的模板系统也是为简化实时通信而设计的。在大多数 Web 框架中,您可以轻松地混合使用超文本标记语言 (HTML) 和代码,或者与 HTML 等效的标记,比如 HTML 抽象标记语言 (Haml)。这使您能够轻松地将来自数据库的动态值插入发送给用户的页面中。在这之后,您应该负责准备提供一个系统来观察对数据的更改,然后更新您的标记。但是,Meteor 中的模板系统用于记录访问了模板中的哪些数据,并自动回调,以便在底层数据更改时调用此 HTML,使实时模板变得更加简单快捷。
By developerworks

前端代码标准最佳实践:javascript篇

推荐一边鸟儿可以看的关于Javascript入手的好文!

最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,JavaScript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系列博客的念头。前端代码有其固有的灵活性,这就导致了目前前端代码非常混乱的局面,本系列文章希望能起到抛砖引玉的作用,让更多的人重视前端代码的质量,编写更标准的前端代码。

本系列文章共有三篇,分别讨论HTML,CSS,Javascript,本篇将讨论Javascript。

javascript是灵活性非常高的一种脚本语言,使得用其实现的同样功能有多种多样的写法,那么在项目中如果没有统一的规范,就会造成javascript代码难以维护,随着项目的深入,性能j也越来越差,文件也越来越大。所以尽早制定统一的编码规范是非常必要的,下面是整理的一些javascript规范供大家参考。

(1)编码格式
好的编码格式,不同人有不同的看法,但是在同一个项目中一定要有统一的格式。下面是常用的编码格式:

1,缩进: 不使用tab(x09)缩进,以4个空格作为逻辑的缩进。

九款优秀的HTML5开发工具

以下介绍的9款应用工具已经能够帮助开发者在程序中集成HTML5功能。

一、Adobe Edge

目前还处于预览阶段的Adobe Edge是用HTML5、CSS、JavaScript开发动态互动内容的设计工具。内容可以同时兼容移动设备和桌面电脑。Edge的一个重要功能是Web工具包界面,方便确保页面在不同浏览器中的架构一致性,此外Edge还将整合TypeKit这样的字体服务。

动画和图形可以添加到HTML元素中,程序也能通过Edge自身的代码片段库或者JavaScript代码进行扩展。动画可以在独立的时间线上进行嵌套,还能实现互动功能。符合可以服用并通过API和代码片段控制。通过Edge设计的内容可以兼容iOS和Android设备,也可以运行在火狐、Chrome、Safari和IE9等主流浏览器。

二、Adobe Dreamweaver CS6

Adobe Dreamweaver CS6作为一个Web设计软件,提供了对HTML网站和移动程序的可视化编辑界面。其Fluid Grid排版系统整合CSS样式表功能,提供自适应版面的跨平台兼容性。开发者可以完全实现Web设计的可视化操作,无需为代码所困。

用户不但还能在Live View中预览,还提供多屏幕预览功能。开发者可以通过MultiScreen预览面板查看HTML5内容的渲染效果。Live View通过WebKit渲染引擎支持HTML5。

三、Adobe ColdFusion 10

ColdFusion是用来开发企业Web程序的服务器端技术,通过Websockets、互动表单、视频和地理标签等HTML5技术创建富媒体用户体验。