Hello World

touch & canvas 的简单使用~~涂鸦板

如题,研究touch时突发奇想和canvas结合,做了这么个涂鸦板。js代码请直接查看页面源代码,无非是对touchstart等touch事件的使用,以及如何在canvas内部划线

一个比较悲催的问题是,“清空”方法在ios内有效,但在android上表现不好~~~换用canvas的clearRect方法也没能成功

另外还遇到了两个比较麻烦的问题,第一个是用jquery绑定touch事件,在event对象上取不到pageX、Y,查了jqueryMobile的源码,发现需要通过event.originalEvent.touches取得,即源码里的getEventData方法;另一个问题是用脚本设置canvas的width总是不成功,google了N次,发现其一是需要直接设置dom的width属性,而不是style里的width,其二是设置时,直接使用数字,后面不要带“px”,比如: document.getElementById(canvasId).width=’400′

温馨提示:请使用触屏设备

xxxxx


业界杂谈 日志

一年又一年

间总是过的很快,前几天忙着“优化“自己一年前写做的东西~~忍不住有点感慨。

每看到一段写的很烂的代码,或者找不到要改的逻辑在哪儿时,总会怀疑:这是我写的吗?真的是我写的吗~~(不是你还有谁!!)如果时间允许,真想再重构一次~~可惜时间不允许呀。

去年做这一版时,正是刚开始专js的时候,当时一知半解,又自以为是,很多做法现在看来不仅效率低下,开发麻烦,而且用户体验也不好~~如果当时身边有个js牛人指点指点可能会好很多。

而这一版之前的一版,大约也是在再上一年写的。那时对js的理解还仅停留在jquery和最初级的面向对象的层次,所以那一版虽然功能比较简单,不过两三千行代码,但页面执行已经相当之慢,逻辑乱的改一个小地方也要找半小时。

看过一个微薄说人身体的细胞每7年就会更换一遍,从这层意义上说,7年以后的你就是另外一个人了。可是看自己的代码,似乎一年以后就是另外一个自己了,作为每时每刻都会诞生新东西的行业,程序员需要不间断的学习充实自己,然后不停的去否定,去更新以前的自己,然后就慢慢变成更好的另一个自己。

希望自己可以克服惰性,继续保持谦卑的学习心态~~~~

Hello World 业界杂谈

IE出没,当心!!

有多少前端攻城湿,就有多少IE受害者~~~ →_→

    这段时间开始搞webview,html5~~~~本来以为总算可以暂时逃离IE的魔咒了,可是没想到的是,除了iphone和android,还有个wp7,wp7里还有个IE9,之前听说IE9支持html5,所以开始并没有把它放在心上,可是真正要用它的时候,问题来了

    开始的时候是习惯的拿alert测试,没反应,把页面内容删光,只剩一个alert也不行,google一下,以为是客户端对webview功能做了限制,去找客户端同事,人家很委屈的说,没做任何限制~~~好吧,不能alert,换其他方法测试

    然后是发觉click绑定有时不成功,开始以为绑定方法不对,试遍了jquery的的live、click、bind,和DOM的onclick,都不行,将同样的页面直接用wp7的IE9打开,于是又去找客户端,这次同事认真查了wp7的手册,回复给我一段文档,大意是说:wp7的webview只支持简单的html显示。可是其他很多js功能是可以用的~~~嗯,也就是说具体支持哪些js功能~~没准~~~~这便是悲剧之源

    后来,死马当活马医,将链接的“href=javascript:void(0)”,改成“href=#”,click绑定居然起效了~~~~尼玛的微软,连最屎的IE6都支持“void(0)”

    做技术的有句话:发现了问题就等于解决了问题~~~~可是对于眼下这种薛定谔的猫的问题,真的没办法了,除非有时间一个一个试去~~~~可惜没时间~~~~无奈,降格,把你当wap用总可以吧!!!

蒙娜丽莎

Hello World

mamp日志名对端口的影响

看到这个题目,你可能会说:端口和日志名有毛关系~~~可刚才我碰上的一个问题,就是通过修改日志名搞定的

mamp已经用了两年多了,之前一直用默认的80端口,没有出过问题。这次因为项目需要,需要修改端口,但改了以后,apache总是启不来,去查apache_error,说“ could not open transfer log file /Applications/MAMP/logs/apache_access_log.”,可这个apache_access_log是有的呀,于是去google“mamp 端口”,也没找到这种问题的答案

后来才注意到“apache_access_log”后面的“.”,于是试着将httpd.conf里的日志名有apache_access_log改为apache_access.log,再启动,居然就成功了!!

这么看,这个问题应该是mamp的一个bug:修改端口后,apache再记日志时可能对日志名做了处理,没有扩展名的给加了一“.”~~~~可是“apache_access_log”是mamp里httpd.conf的默认配置呀!!

❗ 奶奶的,最近境遇这种坑爹的问题

业界杂谈 日志

LAMP人分享交流会

昨天长途跋涉去中关村参加了“第13期#LAMP人#主题分享交流会”,感觉很不错,对得起一天的时间。

这次是木瓜移动专场,第一场是关于移动游戏市场的,与技术关系不大;第二场“社交网络动态框架”,内容实际是web开发在手机客户端的应用;第三场是在讲使用木瓜移动平台做游戏,讲游戏平台前,有一大半时间是在将计算机视频处理~~~汗,技术含量太高了,听了个热闹;最后还有个Any Share环节,分别是phonegap介绍和svn的使用小技巧

收获最大的是第二场,由木瓜移动的研发总监李章晶讲的手机客户端如何与web开发相结合。不同于简单的webview,他所说的方法,将手机客户端与webview结合的更紧密,使用高度定制化的浏览器:1. 客户端会保存web页面的html等资源,并结合svn自动更新  2. webview的ajax请求实际是走的客户端的tcp,节约了http的连接时间  3. 客户端和web页面通过js交互,使更新页面内容变得很简单~~~不懂客户端开发,具体细节记不清了

另外,后面的PhoneGap介绍,也是蛮有吸引力的的,可以使用html/js/css开发跨平台的手机应用,有时间的时候会去做些尝试

整体感觉,昨天下午比之前参加两次百度技术沙龙的收获更多。后者的分享基本是分享者在讲自己的东西,听者只能是借鉴一些共通的经验;而昨天下午的技术分享,基本都是就技术论技术,特别是第二场李章晶的分享,确实是在给听众介绍实际的方法~~~还有最重要的一点,前者是有小礼品的 ; )  ~~~当然,这里没有贬低百度技术沙龙的意思呀~~~分享思路不同而已

Hello World

webview开发环境搭建

本来,手机客户端webview的开发环境与普通web开发的区别并不大,无非是浏览器不同而已,但为了能够像用firebug一样,用客户端查看webview页面时,能时时的看到网络请求,并且,在不换客户端的情况下,可以让客户端连接本地开发服务器,无疑将对开发过程有很大帮助。

1. 让客户端链接本地服务,在mac环境下,还是比较简单的:

首先,Airport改为internet共享模式,然后让手机的wifi链接你的Airport,这样,手机所有的网络请求都要经过你的mac才能出去。然后再通过修改hosts,讲客户端webview的请求转到别的服务器,比如本地开发环境上。具体的做法如下:

1). 先关闭Airport,打开 系统偏好设置–》共享–》internet共享,在右侧选择“Airport”,在弹出框中输入网络名称、密码,再选中左侧的“internet共享”~~~mac端设置完毕

2). 打开手机(iphone)wifi设置,选择你刚才共享的网络

3). 修改mac的hosts。比如你以太网的ip是 192.168.1.1,客户端webview的访问的域名是 webview.test.com,修改hosts,添加一行“192.168.1.1  webview.test.com”,注意,不是localhost

over~~~这一条,可是我独创的呀

2. 像firebug一样监控手机的网络请求

1). 在上面前两步的基础上,还需要一个工具:paros。paros的官网已经被墙了,但可以点这里下载,下载paros-3.2.13-unix.zip,解压,执行里面的sh,可以看到它的界面,在tools–》options中选择local proxy,在Address 中输入AirPort的ip地址,输入端口8080。此时AirPort的ip地址,可以在mac的 系统偏好设置–》网络 中找到,比如: “AirPort”有自分配的 IP 地址“169.214.26.22”

2).  打开手机的wifi设置,选择Airport,选择“手动”,在服务器和端口中,输入你前一步的ip和端口

ok,经过这些设置,你口可以在paros中监控手机的所有网络请求了啦~~

windows的用户要看是否可以将无线网络改为internet共享,否则,上面的两条都做不到

——–

参考:http://www.cnblogs.com/ydhliphonedev/archive/2011/10/27/2226935.html

Hello World 他山石

[转]Mongo db 与mysql 语法比较

mongodb与mysql命令对比

传统的关系数据库一般由数据库(database)、表(table)、记录(record)三个层次概念组成,MongoDB是由数据库(database)、集合(collection)、文档对象(document)三个层次组成。MongoDB对于关系型数据库里的表,但是集合中没有列、行和关系概念,这体现了模式自由的特点。

MySQL

MongoDB

说明

mysqld mongod 服务器守护进程
mysql mongo 客户端工具
mysqldump mongodump 逻辑备份工具
mysql mongorestore 逻辑恢复工具
db.repairDatabase() 修复数据库
mysqldump mongoexport 数据导出工具
source mongoimport 数据导入工具
grant * privileges on *.* to … Db.addUser()Db.auth() 新建用户并权限
show databases show dbs 显示库列表
Show tables Show collections 显示表列表
Show slave status Rs.status 查询主从状态
Create table users(a int, b int) db.createCollection(“mycoll”, {capped:true,size:100000}) 另:可隐式创建表。 创建表
Create INDEX idxname ON users(name) db.users.ensureIndex({name:1}) 创建索引
Create INDEX idxname ON users(name,ts DESC) db.users.ensureIndex({name:1,ts:-1}) 创建索引
Insert into users values(1, 1) db.users.insert({a:1, b:1}) 插入记录
Select a, b from users db.users.find({},{a:1, b:1}) 查询表
Select * from users db.users.find() 查询表
Select * from users where age=33 db.users.find({age:33}) 条件查询
Select a, b from users where age=33 db.users.find({age:33},{a:1, b:1}) 条件查询
select * from users where age<33 db.users.find({‘age’:{$lt:33}}) 条件查询
select * from users where age>33 and age<=40 db.users.find({‘age’:{$gt:33,$lte:40}}) 条件查询
select * from users where a=1 and b=’q’ db.users.find({a:1,b:’q’}) 条件查询
select * from users where a=1 or b=2 db.users.find( { $or : [ { a : 1 } , { b : 2 } ] } ) 条件查询
select * from users limit 1 db.users.findOne() 条件查询
select * from users where name like “%Joe%” db.users.find({name:/Joe/}) 模糊查询
select * from users where name like “Joe%” db.users.find({name:/^Joe/}) 模糊查询
select count(1) from users Db.users.count() 获取表记录数
select count(1) from users where age>30 db.users.find({age: {‘$gt’: 30}}).count() 获取表记录数
select DISTINCT last_name from users db.users.distinct(‘last_name’) 去掉重复值
select * from users ORDER BY name db.users.find().sort({name:-1}) 排序
select * from users ORDER BY name DESC db.users.find().sort({name:-1}) 排序
EXPLAIN select * from users where z=3 db.users.find({z:3}).explain() 获取存储路径
update users set a=1 where b=’q’ db.users.update({b:’q’}, {$set:{a:1}}, false, true) 更新记录
update users set a=a+2 where b=’q’ db.users.update({b:’q’}, {$inc:{a:2}}, false, true) 更新记录
delete from users where z=”abc” db.users.remove({z:’abc’}) 删除记录
db. users.remove() 删除所有的记录
drop database IF EXISTS test; use testdb.dropDatabase() 删除数据库
drop table IF EXISTS test; db.mytable.drop() 删除表/collection
db.addUser(‘test’, ’test’) 添加用户readOnly–>false
db.addUser(‘test’, ’test’, true) 添加用户readOnly–>true
db.addUser(“test”,”test222″) 更改密码
db.system.users.remove({user:”test”})或者db.removeUser(‘test’) 删除用户
use admin 超级用户
db.auth(‘test’, ‘test’) 用户授权
db.system.users.find() 查看用户列表
show users 查看所有用户
db.printCollectionStats() 查看各collection的状态
db.printReplicationInfo() 查看主从复制状态
show profile 查看profiling
db.copyDatabase(‘mail_addr’,’mail_addr_tmp’) 拷贝数据库
db.users.dataSize() 查看collection数据的大小
db. users.totalIndexSize() 查询索引的大小

mongodb语法

MongoDB的好处挺多的,比如多列索引,查询时可以用一些统计函数,支持多条件查询,但是目前多表查询是不支持的,可以想办法通过数据冗余来解决多表查询的问题。

MongoDB对数据的操作很丰富,下面做一些举例说明,内容大部分来自官方文档,另外有部分为自己理解。

 

查询colls所有数据

db.colls.find() //select * from colls

通过指定条件查询

db.colls.find({‘last_name’: ‘Smith’});//select * from colls where last_name=’Smith’

指定多条件查询

db.colls.find( { x : 3, y : “foo” } );//select * from colls where x=3 and y=’foo’

 

指定条件范围查询

db.colls.find({j: {$ne: 3}, k: {$gt: 10} });//select * from colls where j!=3 and k>10

 

查询不包括某内容

db.colls.find({}, {a:0});//查询除a为0外的所有数据

 

支持<, <=, >, >=查询,需用符号替代分别为$lt,$lte,$gt,$gte

db.colls.find({ “field” : { $gt: value } } );

db.colls.find({ “field” : { $lt: value } } );

db.colls.find({ “field” : { $gte: value } } );

db.colls.find({ “field” : { $lte: value } } );

 

也可对某一字段做范围查询

db.colls.find({ “field” : { $gt: value1, $lt: value2 } } );

 

不等于查询用字符$ne

db.colls.find( { x : { $ne : 3 } } );

 

in查询用字符$in

db.colls.find( { “field” : { $in : array } } );

db.colls.find({j:{$in: [2,4,6]}});

 

not in查询用字符$nin

db.colls.find({j:{$nin: [2,4,6]}});

取模查询用字符$mod

db.colls.find( { a : { $mod : [ 10 , 1 ] } } )// where a % 10 == 1

$all查询

db.colls.find( { a: { $all: [ 2, 3 ] } } );//指定a满足数组中任意值时

$size查询

db.colls.find( { a : { $size: 1 } } );//对对象的数量查询,此查询查询a的子对象数目为1的记录

$exists查询

db.colls.find( { a : { $exists : true } } ); // 存在a对象的数据

db.colls.find( { a : { $exists : false } } ); // 不存在a对象的数据

$type查询$type值为bsonhttp://bsonspec.org/数 据的类型值

db.colls.find( { a : { $type : 2 } } ); // 匹配a为string类型数据

db.colls.find( { a : { $type : 16 } } ); // 匹配a为int类型数据

使用正则表达式匹配

db.colls.find( { name : /acme.*corp/i } );//类似于SQL中like

内嵌对象查询

db.colls.find( { “author.name” : “joe” } );

1.3.3版本及更高版本包含$not查询

db.colls.find( { name : { $not : /acme.*corp/i } } );

db.colls.find( { a : { $not : { $mod : [ 10 , 1 ] } } } );

sort()排序

db.colls.find().sort( { ts : -1 } );//1为升序2为降序

limit()对限制查询数据返回个数

db.colls.find().limit(10)

skip()跳过某些数据

db.colls.find().skip(10)

snapshot()快照保证没有重复数据返回或对象丢失

count()统计查询对象个数

db.students.find({‘address.state’ : ‘CA’}).count();//效率较高

db.students.find({‘address.state’ : ‘CA’}).toArray().length;//效率很低

group()对查询结果分组和SQL中group by函数类似

distinct()返回不重复值

——-

转自:http://www.cnblogs.com/xffy1028/archive/2011/12/03/2272837.html

 

 

 

Hello World 他山石

[转]phpize的安装

一直想装VLD却一直没装上,因为需要用到phpize,但这个工具大部分机子都没有装,上网搜了一下大部分都是讲phpize的应用没有讲怎么安装。

今天终于搜到了,不过是要在linux机器上,有yum命令就行。phpize是属于php-devel的内容,所以只要运行

yum install php-devel就行。
————
转自:http://hi.baidu.com/esky9/blog/item/4f643c273c18430e908f9d2a.html

Hello World 业界杂谈

书签里的js

如要你要去现在很流行的花瓣网去注册,会发现其中有一步,是让你将它的一个“采集到花瓣”的链接添加到你浏览器的书签里。当你使用这个浏览器再浏览其他网页时,点这个书签,就会弹出花瓣网采集该网页图片的界面~~
这是一个很nice的功能,已经有点类似客户端了,把这个书签里的“链接”拿出来,整理一下:

function(d,a,c,b){
	//首先检查document里面是否有'__huaban',如果没有,就去加载一段自己的js
	if(a[c] && typeof a[c].showValidImages=='function'){
		a[c].showValidImages()
	}else{
		b=a.createElement('script');
		b.id='huaban_script';
		b.setAttribute('charset','utf-8');
		b.src='http://huaban.com/js/pinmarklet.js?'+Math.floor(new Date());
		a.body.appendChild(b);
	}
}(window,document,'__huaban'));

对,这段代码就是取加载一段花瓣网自己的js~~~~~~ 😈 😈 在别人的页面上注入一段自己的代码,然后它就可以为所欲为了:除了抓图片,抓视频,还可以取cookie,修改页面css等等
除了书签外,还可以直接在地址栏执行js的逻辑,比如:javascript:alert(document.title);
其实,把js放在书签里,只是浏览器地址栏执行js的一种表现而已

Hello World

[转]手机前端之jquery Mobile学习——swipe

这是经常会在Android手机上出现的一个动作,那就是手指划过屏幕的时候执行动作。
手机上使用到的事件,可以使用live()和bind()来绑定。
swipe 在一秒钟的间隔内水平方向上拖动30px以上会触发该事件,(水平方向上拖动要保持在20px以内,否则不会触发).
swipeleft 在左边方向移动时触发该事件.
swiperight 在右边方向移动时触发该事件.
下面的代码以swipeleft为例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script src="/phonegap.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
        $("#home").live("swipeleft",function(){
            alert("我是滑动过来的!");          
        });
 
     });
    </script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="e" data-position="inline"><h1>swipeleft</h1></div>
<div data-role="content" style="text-align:center" >内容</div>
</body>
</html>

在Android模拟器上鼠标迅速向左滑动,则触发事件。

——转自:http://archive.cnblogs.com/a/2232011/
ps:不仅Android,ios也可以这么玩