分享15个加速web开发的JavaScript框架

JavaScript提供了多种方式来创建交互式网站和web程序。利用Javascript,可以实现移动html元素,创建多种自定义动画,来给你的访客一个更好的终端体验。

框架(framework)就是一个软件应用程序,它可以帮助开发者快速设计和开发一个动态网站。

这篇文章收集了15个比较流程的javascript框架,供大家收藏和使用。

继续阅读“分享15个加速web开发的JavaScript框架”

分享18个好用的网站速度和性能测试工具

网站的加载速度是网站性能等级的重要因素,Google排名也会考虑速度方面的因素,虽然影响不大,但仍然是站长们应该注意的地方。原因很简单,没有人愿意为打开一个网页等待半天时间。换句话说,如果你的网站打开速度慢,就会在不知不觉中流失大量游客。游客就是流量,流量减少会引起其他恶性影响。在埋头深入代码中试图提高网站速度之前,先要确定导致网站访问速度缓慢的真正原因是什么。本文收集了非常有用的WEB服务和工具,可以帮助你诊断和分析你的网站,让你更加全面的了解自己的网站性能。 继续阅读“分享18个好用的网站速度和性能测试工具”

HTML5离线缓存-manifest

应用缓存(又称 AppCache)可让开发人员指定浏览器应缓存哪些文件以供离线用户访问。即使用户在离线状态下按了刷新按钮,您的应用也会正常加载和运行。

html5便引入了cache manifest 文件,来实现离线缓存.

关于html5的离线存储,大致可分为:

localStorage, sessionStorage
indexedDB
web sql
application cache
继续阅读“HTML5离线缓存-manifest”

jQuery on() 方法

on() 方法为指定元素的一个或多个事件绑定事件处理函数

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素);也就是说即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。 继续阅读“jQuery on() 方法”

React Native – 使用 JavaScript 开发原生应用

前不久,Facebook 在F8开发者大会上正式开源了 React Native 项目。不过目前只有 iOS 版,Android 版还需要再等一段时间,这是最新的用 JavaScript 语言开发原生 App 的尝试,其示例代码相当简洁,内置控件也不少。Facebook 同时还为 React Native 开发了一款基于 Atom 的IDE——Nuclide,也已开源。 继续阅读“React Native – 使用 JavaScript 开发原生应用”

移动端优化文本大小、viewport宽度以及缩放等问题

这里介绍的也是一些基础的东西,比如如何避免文本字体大小被重置,如何适应不同设备浏览器的宽度等等。

1.避免文本字体大小重置

如果把iphone切换到横屏模式,页面的字体会突然的放大,页面字体大小被重置了,如何解决这个问题,只要在CSS部分加入下面的代码: 继续阅读“移动端优化文本大小、viewport宽度以及缩放等问题”

在移动设备上使用HTML5基础

跨浏览器的HTML5,使用起来也很简单,这里讲几点基础:

HTML5版本问题:

HTML5没有版本号,文档类型定义只用一句话,很简单<! doctype html>

旧版本的浏览器无法识别HTML5元素,也无法对这些元素设置样式。

CSS重置:

article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,

section,summary,time,mark,audio,video{

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

在旧版本浏览器中将下面元素设置为块元素:

article,aside,detail,figcaption,figure,footer,header,hgroup,
menu,nav,section {

display: block;

}

viewport

浏览器会根据viewport的下面的属性设置页面宽度,缩放程度

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

页面宽度设置为屏幕宽度,禁止缩放。

 

HTML5新标签

新标签有很多,这里选择几项来介绍。

1.heaader标签常用于封装h1-h6标签,用来表示页面的头部。header标签内通常还会使用title,subtitle或者tagline标签。

2.nav标签表示一个文件的导航,一般用来封装链接的。

3.footer标签用来表示页面的底部,footer标签一般用来放一些关于页面的基本信息,比如版权归属,以及一些页面的相关链接,联系地址的信息放到address标签下。

4.small标签用来把一些属性变为小号字体,它不适应于段落或是一长段文本,主要应用于短小文本。

5.article标签用于定义文章。

6.aside标签定义页面内容以外的内容,常用作侧边栏。

7.audio标签用于定义 声音:

<audio src=”someaudio.wav”>
您的浏览器不支持 audio 标签。
</audio>

8.canvas标签定义图形,它只是图形的容器,必须用脚本来绘制图形。