Category Archives: Hello World

Hello World

jqm如何刷新已经加载的页面

jquery mobile自带丰富的ui组件,更有codiqa提供了可视化的在线html生成工具,使用起来及其方便,很容易就可以搭建出漂亮的前端应用。

使用jqm的标准书写的组件,在其母“page”被加载时,jqm会将这些组件附加更加丰富的样式以及基础的事件处理程序,包括各种列表样式、icon、页面转场效果等等

但过度智能化也的使得使用中碰上了一个绕不开的问题,两周以来一直没找到好的解决办法:上面说,只有当一个page被加载时,jqm才会对html组件进行处理,附加样式和时间,而page一旦被加载过,再对这个page的内容进行修改,jqm就不会再对它做处理了,也用不了jqm的样式。

开始的时候,试了“$.mobile.initializePage()”,但是它只对第一个page的第一次加载有效,否则除非重新刷新页面页面。

然后又将希望寄托在“$.mobile.changePage(page, optional);”,但是只有当page是一个url地址时,被加载的页面才可会被jqm处理。

找遍了jqm中文和英文的api也再没有发现更好的办法

……….

今天,无意中,在一个叫做“移动互联网”的QQ群里看到了解决方法:“$(page).trigger(“pagecreate”);”~~~~有效!

pagecreate:jqm自定义的事件,页面初始化时,初始化之后触发

使用trigger(“pagecreate”)也就是强制jqm再对page做一次初始化

———————

Hello World

简单实用的js模板引擎

不足50行的js模板引擎,支持各种js语法:

<script id="test_list" type="text/html">
<%=
	for(var i = 0, l = p.list.length; i < l; i++){
		var stu = p.list[i];
=%>
	<tr>
		<td<%=if(i==0){=%> class="first"<%=}=%>><%==stu.name=%></td>
		<td><%==stu.age=%></td>
		<td><%==(stu.address || '')=%></td>
	<tr>
 
<%=
	}
=%>
</script>

“<%= xxx =%>”内是js逻辑代码,“<%== xxx =%>”内是直接输出的变量,类似php的echo的作用。“p”是调用下面build方法时的k-v对象参数,也可以在调用“new JTemp”时设置成别的参数名

调用:

$(function(){
	var temp = new JTemp('test_list'),
		html = temp.build(
			{list:[
           		{name:'张三', age:13, address:'北京'},
        		{name:'李四', age:17, address:'天津'},
        		{name:'王五', age:13}
        	]});
	$('table').html(html);
});

上面的temp生成以后,可以多次调用build方法,生成html

一下是模板引擎的代码:

var JTemp = function(){
	function Temp(htmlId, p){
		p = p || {};//配置信息,大部分情况可以缺省
		this.htmlId = htmlId;
		this.fun;
		this.oName = p.oName || 'p';
		this.TEMP_S = p.tempS || '<%=';
		this.TEMP_E = p.tempE || '=%>';
		this.getFun();
	}
	Temp.prototype = {
		getFun : function(){
			var _ = this,
				str = $('#' + _.htmlId).html();
			if(!str) _.err('error: no temp!!');
			var str_ = 'var ' + _.oName + '=this,f=\'\';',
				s = str.indexOf(_.TEMP_S),
				e = -1,
				p,
				sl = _.TEMP_S.length,
				el = _.TEMP_E.length;
			for(;s >= 0;){
				e = str.indexOf(_.TEMP_E);
				if(e < s) alert(':( ERROR!!');
				str_ += 'f+=\'' + str.substring(0, s) + '\';';
				p = _.trim(str.substring(s+sl, e));
				if(p.indexOf('=') !== 0){//js语句
					str_ += p;
				}else{//普通语句
					str_ += 'f+=' + p.substring(1) + ';';
				}
				str = str.substring(e + el);
				s = str.indexOf(_.TEMP_S);
			}
			str_ += 'f+=\'' + str + '\';';
			str_ = str_.replace(/\n/g, '');//处理换行
			var fs = str_ + 'return f;';
			this.fun = Function(fs);
		},
		build : function(p){
			return this.fun.call(p);
		},
		err : function(s){
			alert(s);
		},
		trim : function(s){
			return s.trim?s.trim():s.replace(/(^\s*)|(\s*$)/g,""); 
		}
	};
	return Temp;
}();

核心是将模板代码转变成了一个拼接字符串的function,每次拿数据call这个function。

因为主要是给手机(webkit)用的,所以没有考虑字符串拼接的效率问题,如果需要给IE实用,最好将字符串拼接方法改为Array.push()的形式

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


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的默认配置呀!!

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

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也可以这么玩