三水清专注

前端开发

,分享Javascript/CSS/PHP等Web前端开发技巧

使用iweibo,30行js写个微博机器人

iweibo是我写的一个新浪微博的node sdk,使用方便简单,下面的不到30行js代码就可以实现一个自动发天气预报的微博机器人。

var bdTemplate = require('./baiduTemplate').template;
var iweibo = require('iweibo');
var Weibo = iweibo.Weibo;
var access_token = 'xxxxx';
iweibo.set({
    appkey: 'xxxxxxxx',
    appsecret: 'xxxxxxxxxxxxxxx'
});
 
var weibo = new Weibo(access_token, '');
function getWeather(callback) {
    var html = '#< %=city%>天气#< %=date_y%>[< %=week%>]:< %=temp1%>,< %=weather1%>,< %=wind1%>,< %=index_d%> 明天:< %=temp2%>,< %=weather2%>,< %=wind2%>';
    var json = weibo.get('http://m.weather.com.cn/data/101010100.html').done(function(err, data) {
        data = JSON.parse(data).weatherinfo;
        html = bdTemplate(html, data);
        callback(html);
    });
}
 
getWeather(function(html) {
    weibo.api('statuses/update', {
        status: html
    }).done(function(err, result) {
        console.log(result);
    }).fail(function(err, result) {
        console.log('出错啦!!' + JSON.stringify(result));
    });
});

继续阅读全文……

新浪微博node sdk:iweibo

iweibo是我第一个发到npm的模块,之前也有node开发,但是没有放到npm上,所以有必要写个博客记录下。呵呵~

起因是一个讨论组童鞋反应某node sdk不好用,于是谈着谈着就有了自己写个的想法。

新浪微博的node sdk很多了,为什么要选择我的呢?原因:

  1. 都比较老了
  2. 不专注
  3. api使用太麻烦

下面介绍下我自己写的新浪微博node sdk:
继续阅读全文……

Gruntjs——前端任务管理工具

Gruntjs是前端项目构建工具,基于node的命令行工具。很多公司或者js项目都是用gruntjs来搭建,例如jQuery,twitter,Qunit等。主要功能有:

  1. 合并文件
  2. 压缩html/js/css/图片文件
  3. 语法检测
  4. 单元测试(基于Qunit)
  5. watch功能

相对于Ant的打包工具,grunt更加灵活,语法采用json,比xml语法更加简洁,作为前端工程师可能更喜欢写json。

GruntJS的安装

Grunt是基于nodejs的,所以安装GruntJS之前,需要保证你的电脑有nodejs环境,node环境比之前安装简单多了,现在windows平台只需要下载node安装程序,一路next就可以了。

安装grunt-cli

在命令行中,执行npm install -g grunt-cli,来安装grunt-cli

安装grunt插件

在项目路径下的命令行中,输入npm install grunt-plugin-name --save-dev 就可以完成插件安装,或者直接修改grunt的package.json,然后执行npm install,npm会自动安装想用插件。

创建GruntJS管理项目

每个GruntJS都包括两个文件:

  1. package.json:依赖模块+你可能用到的变量和说明,例如:version、name
  2. Gruntfile.js:node module写法的任务管理文件

package.json

一个典型的package.json内容如下:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-jshint": "~0.1.0",
    "grunt-contrib-concat": "~0.1.1",
    "grunt-contrib-uglify": "~0.1.0",
    "grunt-contrib-watch": "~0.1.4"
  }
}

继续阅读全文……

双屏切图:使用livereload实现自动刷新

livereload是一个web开发辅助工具,当我们修改完html、css和js的时候会自动刷新浏览器,解放码农的双手。这样在双屏切图、写js代码的时候会提高很多效率。livereload有很多版本,比如基于ruby的版本,我们今天介绍的是node+grunt+chrome插件一体化方案。

我们使用的这个livereload的基本原理是试用node开启一个websocket服务,并且检测文件变化,浏览器打开一个页面时候,引入固定的livereload.js(chrome插件会帮忙加上)会建立ws请求,当node检测到文件变化,则自动推送消息给浏览器,实现刷新。

livereload环境搭建

  1. nodejs安装
  2. grunt安装
  3. grunt-contrib-watch:npm install grunt-contrib-watch –save-dev
  4. grunt-livereload:npm install grunt-livereload –save-dev
  5. chrome插件:安装

编写grunt的Gruntfile.js文件

进入项目根目录,安装grunt基本服务(参考grunt使用介绍),然后修改Gruntfile.js内容,添加如下:

livereload: {
    options: {
        base: 'public',
    },
    files: ['src/**/*']
}
watch: {
    all:{
        files: ['src/js/touch.js', 'src/sass/*.scss'],
        tasks: ['jshint', 'compass:dev'],
    },
    //grunt watch:js|css
    js:{
        files: ['src/js/touch.js'],
        tasks: ['jshint'],
    },
    css:{
        files: ['src/sass/*.scss'],
        tasks: ['compass:dev'],
    }
}
grunt.loadNpmTasks('grunt-livereload');
 
grunt.registerTask('live', ['livereload', 'watch:css']);

继续阅读全文……

PHP判断客户端是否为手机移动设备

//判断是否属手机
function is_mobile() {
	$user_agent = $_SERVER['HTTP_USER_AGENT'];
	$mobile_agents = Array("240x320","acer","acoon","acs-","abacho","ahong","airness","alcatel","amoi","android","anywhereyougo.com","applewebkit/525","applewebkit/532","asus","audio","au-mic","avantogo","becker","benq","bilbo","bird","blackberry","blazer","bleu","cdm-","compal","coolpad","danger","dbtel","dopod","elaine","eric","etouch","fly ","fly_","fly-","go.web","goodaccess","gradiente","grundig","haier","hedy","hitachi","htc","huawei","hutchison","inno","ipad","ipaq","ipod","jbrowser","kddi","kgt","kwc","lenovo","lg ","lg2","lg3","lg4","lg5","lg7","lg8","lg9","lg-","lge-","lge9","longcos","maemo","mercator","meridian","micromax","midp","mini","mitsu","mmm","mmp","mobi","mot-","moto","nec-","netfront","newgen","nexian","nf-browser","nintendo","nitro","nokia","nook","novarra","obigo","palm","panasonic","pantech","philips","phone","pg-","playstation","pocket","pt-","qc-","qtek","rover","sagem","sama","samu","sanyo","samsung","sch-","scooter","sec-","sendo","sgh-","sharp","siemens","sie-","softbank","sony","spice","sprint","spv","symbian","tablet","talkabout","tcl-","teleca","telit","tianyu","tim-","toshiba","tsm","up.browser","utec","utstar","verykool","virgin","vk-","voda","voxtel","vx","wap","wellco","wig browser","wii","windows ce","wireless","xda","xde","zte");
	$is_mobile = false;
	foreach ($mobile_agents as $device) {
		if (stristr($user_agent, $device)) {
			$is_mobile = true;
			break;
		}
	}
	return $is_mobile;
}
//使用很简单
if( is_mobile() ){
//Your Code
}

继续阅读全文……

怎么清空javascript数组

这是一个很基础的问题,但是我们往往经常做错。

当一个数组需要清空的时候,很多人使用下面的方法:

a = [];

我们知道javascript变量存储方式分为引用类型和直接量。数组属于对象,即引用类型,引用的是变量指针地址,之所以这样设计也是为了节省内存。

再说到上面的请空数组的方式,如果采用直接赋值一个新数组的方式,那么之前引用的数组可能不会被释放(有其他的引用),例如下面的代码:
继续阅读全文……

javascript的类型数组(Typed Array)

在《javascript canvas图片像素》中提到了类型数组(Typed Array),javascript这是一种快速操作二进制数据的解决方案。
随着web发展和html5的推进,javascript来处理音视频、二进制文件和网络协议等都成为了可能,这时候原生的数组Array已经不能够满足需求,需要一种快速操作二进制流的东东产生,于是ArrayBuffer类型和Typed Array诞生了。
类型数组介绍
类型化数组类型表示可编制索引和操纵的ArrayBuffer对象的各种识图。所有数组类型的长度固定不变。如下表所示:

继续阅读全文……

html5 canvas 图片像素

html5 canvas图像转换成数组

html5的canvas可以进行图片处理,图片是由像素组成的。我们知道canvas有方法getImageData,返回的对象中可以取出,image的data 数组(类似数组的Type Array类型数组,Uint8ClampedArray)。

假设canvas宽高是500*400,那么应该有200000个像素点,而通过getImageData().data获取的data数组的length是800000。我们还知道rgba表示颜色的方法,r=red,g=green,b=blue,a=alpha;即红绿蓝三原色和透明值。

所以这个data数组是每四个数组值代表一个像素点。这样一来,一个图像就转化成了数据表示的数组。如下面的代码:

var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
	ctxt.drawImage(img, 0, 0);
	var data = ctxt.getImageData(0, 0, 480, 480).data;
	console.log(data, data.toString());
}
img.src = 'img/pic.jpg';

图像数组的遍历

如上面的代码,我们可以看到数组data就是图片转换成的数组,那么遍历这个数组就可以取得图片的像素点内容:

var data = ctxt.getImageData(0, 0, 480, 480).data;
for(var i =0,len = data.length; i<len ;i+=4){
	var red = data[i],
		green = data[i+1],
		blue = data[i+2],
		alpha = data[i+3];
 
}

继续阅读全文……

第1页 / 共40页 1234567891011
返回顶部