博客 - 分类：JS/Ajax/AS

写高质量的jQuery

2011-08-5 下午 - JS/Ajax/AS - -

看了一篇关于jQuery性能提升的文章，十分认同，总结一下(原文一共是十点，我省略了一部分)：

1.尽量只用id选择器和标签选择器，比如jQuery(“#selector”)、jQuery(“TagName”)，减少class选择器的使用，避免伪类选择器和属性选择器。

2.查找子节点时推荐使用find，比如jQuery(“body”).find(“p”)。

3.利用delegate将事件委托，例如给一个长列表逐个绑定事件，就可以使用delegate。delegata方法请参看jQuery API。

4.尽量减少DOM结构的改动(如.append()、.insertBefore()和.insetAfter())，避免不了也要记得先合并再一次性插入，大范围的DOM结构改动，可以利用detach方法先取出，操作好之后再插入。detach方法请参看jQuery API。

5.循环，尽量使用js原生的for或while，减少使用jQuery的each方法。

原文比较详细的并以数据说明了造成性能问题的原因，有兴趣就马上猛击过去了解。

4 Comments »

minify优化网站

2011-07-5 下午 - JS/Ajax/AS -

项目地址：minify

作用：合并(减少HTTP请求)、精简、Gzip压缩和缓存JavaScript和CSS文件。

配置：Apache+PHP，开启Mod Rewrite。

下载：minify_2.1.3.zip

安装：解压后将min文件夹复制到网站根目录。

使用：

<script src="http://youDomain.com/min/f=/js/a.js,/js/b.js,/js/c.js"></script>

整个过程非常简单，只要你的服务器配置支持到位，基本就是傻瓜式的操作了。如果要配置得更加详细，比如缓存文件、控制是否压缩代码…等等，那么请参看Minify CookBook和Wiki，也可以看口碑网UED的文章在服务端合并和压缩JavaScript和CSS文件。

效果预览：http://11gz.com/demo/js-ajax/minify/index.html，请配合相关查看http请求记录的工具(HttpWatch/FireBug)浏览该代码。

No Comments »

记录一下：windows下配置node.js

2011-06-22 下午 - JS/Ajax/AS -

现如今，node大热，不弄弄，那不落伍了！服务器端嘛，首先还是配置环境，第一步走出去了，后面的就好说了，一步步来嘛！我平时都是用的windows，这里就只记录windows啦！

第一步：安装Cygwin

Cygwin网站：http://cygwin.com/，Cygwin是什么就不多说了，反正是必须的！先下载setup文件，就算安装完了这个文件也别删，以后万一还有用得着的地方！如果首次安装有些包忘记装了，还得用这个再次安装！我一开始就忘记了好几个包，导致浪费了好多时间！主要是记得第一个界面时选择“install from internet”，否则就会失败！

这里要装的包有：

Devel
  • gcc-g++: C++ compiler
  • gcc-mingw-g++: Mingw32 support headers and libraries for GCC C++
  • gcc4-g++: G++ subpackage
  • git: Fast Version Control System – core files
  • make: The GNU version of the ‘make’ utility
  • openssl-devel: The OpenSSL development environment
  • pkg-config: A utility used to retrieve information about installed libraries
  • zlib-devel: The zlib compression/decompression library (development)
Editor
  • vim: Vi IMproved – enhanced vi editor
Python
  • 全部
Web 分类
  • wget: Utility to retrieve files from the WWW via HTTP and FTP
  • curl: Multi-protocol file transfer command-line tool

接下来就是下载了，有朋友建议选择日本的镜像，挺快！然后就是漫长的等待了。

如果你是win7用户

  1. cmd命令行
  2. 进入cygwin安装目录下的bin子目录
  3. 运行ash.exe进入shell模式
  4. ./rebaseall -v
  5. 没有错误，完成，exit退出ash，关闭命令行窗口

第二步：安装Node.js

  1. 运行Cygwin
  2. 输入 wget http://nodejs.org/dist/node-v0.4.7.tar.gz 回车，下载node.js安装包。
  3. 输入 tar xf node-v0.4.7.tar.gz 回车。
  4. 输入 cd node-v0.4.7 回车。
  5. 输入 ./configure 回车。
  6. 输入 make 回车，可能要等一段时间！
  7. 输入 make install 回车。

一切正常的话，node.js安装成功！现在可以输入 node –version 回车，查看node.js版本啦

第三步：设置DNS并创建测试文件

cygwin的安装目录下找到etc文件夹，创建一个resolv.conf，添加代码：


nameserver 8.8.8.8
nameserver 8.8.4.4

保存，关闭！

现在可以开始测试了，返回父目录，也就是cygwin的安装目录，新建一个js文件，命名test.js，输入：

  1. var http = require('http');
  2. http.createServer(function (request, response) {
  3.   response.writeHead(200, {'Content-Type': 'text/html'});
  4.   response.end('<b>Hello World</b>');
  5. }).listen(8888);
  6. console.log('Server running at http://127.0.0.1:8888/');

回到cygwin命令窗口中输入 node /example.js 回车。

命令窗口中显示 Server running at http://127.0.0.1:8888/

打开浏览器，输入http://127.0.0.1:8888/，成功了吧！

npm下载、安装、使用

npm是nodejs的软件包管理器，可以用它安装所需软件包并发布自己为nodejs写的软件包，它还管理软件包的依赖关系并做了其它一些很酷的事情。

  1. 一行命令下载并安装npm

    $ curl http://npmjs.org/install.sh | sh

  2. npm安装node扩展包，同样是一行命令下载并安装好软件包

    $ npm install <包名>

一些链接：

6 Comments »

imglazyload图片延迟加载(jQuery)

2011-06-20 下午 - JS/Ajax/AS - -

这个小效果还是3个月前写的，太忙，一直没空更新blog，刚好有点空闲，抽出来简单弄弄了~

container容器，attr属性，timeout延时。这些都可以有自己灵活控制的！原理简单不过了，图片先不设置src属性，浏览器就不会产生请求，监听起滚动条和窗口大小的事件，通过判断图片是否处于当前可视区域(offset的left和top方向分别小于scrollTop+clientHeight和scrollLeft+clientWidth)来控制图片是否显示，显示则设置img对象的src属性为标签中自定义属性的值！

主要代码

this.container = $(this.options.container);
this.imgNum = this.container.find('img['+ this.options.attr +']');
var _this = this;
if(this.imgNum.length){
    this.timer&&clearTimeout(this.timer);
    this.timer = setTimeout(function(){
        var arr = [],gc = _this.getClient();
        $.each(_this.imgNum,function(i,o){
            if($(o).offset().top <= gc.top && $(o).offset().left <= gc.left){
                var attrval = $(o).attr('lazysrc');attrval&&$(o).attr('src',attrval).removeAttr('lazysrc').hide().fadeIn();
            }else{
                arr.push(o);
            }
        });
        _this.imgNum = arr;
    },this.options.timeout);
}else{
    $(window).unbind('scroll',this.check);
    $(window).unbind('resize',this.check);
}

返回当前屏幕显示范围

return{'top':document.documentElement.clientHeight+Math.max(document.documentElement.scrollTop,document.body.scrollTop),'left':document.documentElement.clientWidth+Math.max(document.documentElement.scrollLeft,document.body.scrollLeft)};

demo展示：http://www.11gz.com/demo/js-ajax/imglazyload.html

No Comments »

ECMAScript 5的兼容性

2011-04-2 上午 - JS/Ajax/AS -

Kangax:ECMAScript 5 compatibility table

1 Comment »

jQuery+easing缓动的动画

2011-03-5 下午 - JS/Ajax/AS - -

jQuery实现动画再简单不过了，只是要实现更酷的效果还需要插件来帮忙，easing就是一款帮助jQuery实现缓动动画的插件，经过试用，效果很不错，记录一下使用方法吧！

下载该插件：jquery.easing.1.3.js　jquery.easing.compatibility.js

演示地址：http://www.11gz.com/demo/js-ajax/easing/index.html

方法介绍：

  • def：默认方式设置
  • swing：默认方式加载
  • Quad：二次方缓动(t)
  • Cubic：三次方缓动
  • Quart：四次方缓动
  • Quint：五次方缓动
  • Sine：正弦曲线缓动
  • Expo：指数曲线缓动
  • Circ：圆形曲线的缓动
  • Elastic：指数衰减的正弦曲线缓动
  • Back：超过范围的三次方缓动
  • Bounce：指数衰减的反弹缓动

关于In、Out、Inout的说明：

  • easeIn：加速度缓动；
  • easeOut：减速度缓动；
  • easeInOut：先加速度至50%，再减速度完成动画。

缓动方式的翻译来自：JavaScript Tween算法及缓动效果

如何应用：

slideUp|slideDown|slideToggle|fadeIn|fadeOut|fadeToggle

$(element).slideUp(duration,easing,[callback]);

fadeTo

$(element).fadeTo(duration,opacity,easing,[callback]);

animate

$(element).animate({properties},duration,easing,callback);

jQuery1.4+版本更可以：

$(element).animate({left:[100,'swing'],top:[100,'easeOutBounce']});

或者

jQuery(myElement).animate({left:100,top:100},{specialEasing:{left: 'swing',top:'easeOutBounce'}});

具体可参阅jquery1.4+的API。

4 Comments »

jQuery实现dialog(对话框)

2011-03-1 上午 - JS/Ajax/AS - -

话说系统默认的对话框使用方便，但是功能单一且比较的难看(不能自定义样式)，那么自己来写代码扩展一些更复杂的功能并美化一下。本代码采用面向对象思想对一些属性和方法进行了封装，性能有待测试，欠妥之处，欢迎指正！

dialog

演示地址：http://www.11gz.com/demo/js-ajax/dialog/index.html

设置参数object说明：

  • width：显示宽度，默认为400px
  • title：标题，默认为“小提示”
  • show：是否显示dialog，如果要做到延迟显示，设置此属性为false，默认为true
  • modal：是否显示半透明遮罩背景，默认为不显示 false
  • closeDelay：自动关闭的延时时间，单位：毫秒 默认为0，不延时关闭

会自动关闭的小提示

dc_dialog.popTip("自动关闭的小提示","这是个会自己关闭的气泡小提示","2000",{'modal':true});

参数1：提示窗口的标题；　参数2：提示的内容文本；　参数3：停留时间(毫秒)　参数4：object

弹一个小提示

dc_dialog.popTip("小提示2","这仅仅是一个小提示2","0",{'modal':false});

参数1：提示窗口的标题；　参数2：提示的内容文本；　参数3：停留时间(0为不自动关闭)　参数4：object
ps：如果不需要显示遮罩层，可省略后两个参数
dc_dialog.popTip("小提示2","这仅仅是一个小提示2");

弹一个确认框，confirm

dc_dialog.confirm("你支持这个决定吗？",['是','否'] , function(val) {alert("你选择了: " + val);}, {title:"一个确认否定的框",'modal':true});

参数1：问题；　参数2：选项；　参数3：成功后的回调函数　参数4：object

异步加载数据

dc_dialog.load("load.html",{'title':'异步加载的信息','width':'600px','modal':true});

参数1：加载页面的url地址；　参数2：object

iframe

dc_dialog.frame("frame0","iframe.html",{'title':'一个iframe','width':'600px','modal':true});

参数1：iframe的id和name；　参数2：加载页面的url地址；　参数3：object

本代码有参考【jQuery插件】一个简易弹出层效果之处，感谢 愚人码头

1 Comment »

利用jQuery实现跨域的Ajax

2011-02-19 上午 - JS/Ajax/AS - - - -

说到Ajax的跨域，还真是个让人头痛的问题，实现的方法有多种，这里仅记录使用jQuery的getJSON实现跨域，需要用到json数据。

简单json格式如下：

[{"a":"1","b":"2"},{"a":"3","b":"4"}]

主体代码：

$.getJSON('http://您的域名/文件名?jsoncallback=?',function(dt){
    $.each(dt,function(i,item){
        alert(item.a);
    });
});

jsoncallback=?，这个必不可少，后端程序会get这个参数，这里就不做解释了，具体请参看jQuery API里的说明。

后端PHP：

<?php
header('Content-Type: application/json; charset=utf-8');
$callback = $_GET['jsoncallback'];
echo $callback.'([{"a":"1","b":"2"},{"a":"3","b":"4"}])';
?>

这里仅仅只是一个简单的json示范，可以动态生成更复杂的json以适应项目需求。

说明一下：由于jQuery的getJSON使用的是get方式请求数据，因此数据量不能太大，否则导致接收失败。

既然说到Ajax跨域了，再记录一个PHP中简单的方法吧，利用file_get_content()把整个文件读入一个字符串中，性能可能略低。

<?php
@header("Content-Type: text/html; charset=utf-8");
@header("Expires: -1");
@header("Cache-Control: no-store, private, post-check=0, pre-check=0, max-age=0", FALSE);
@header("Pragma: no-cache");
$vcontent=file_get_contents("http://您的域名/文件名");
echo $vcontent;
?>

关于js跨域跨域还可参看：支付宝前端开发组：也来谈谈”完美”跨域

1 Comment »

Page 1 of 3123