标签归档:web develop

善用HTML5″data”自定义属性

制作一些和后台交互非常多的网站的时候,经常需要后台语言输出一些数据到html里,最方便的莫过于在html标签里放进某个属性,来保存这个标签所需要的部分信息,以便调用。比如

<li indexNum="01" lang="cn">围城</li>
<li indexNum="02" lang="en">冰与火之歌</li>

例子中,这两本书为了保存书的序号和语言,使用了两个非法的Attribute:“indexNum”和“lang”。
如果在validator.w3.org中进行合法性检测会显示“Attribute indexNum not allowed on element li at this point.”

推荐用HTML5的新属性data,以上的语句就可以变为

<li data-indexNum="01" data-lang="cn">围城</li>
<li data-indexNum="02" data-lang="en">冰与火之歌</li>

想访问的话,可以用传统的访问属性的方法,也可以用Jquery的.data()方法:

$("li:first").data("indexNum")=="01" //true
$("li:first").data()  //这里将获得一个JSON格式的对象,可以进行对象内的属性修改

具体还是参考官方文档吧:http://api.jquery.com/data/

推荐用JSON来写对象工厂方法

推荐用JSON来写工厂方法(Factory Method),本人特别喜欢使用JSON的格式,主要原因是条理清晰,整体感强。
推荐用JSON写工厂方法,很好理解,新建对象,然后返回就行了。可读性非常强,推荐下
下面这个例子是用工厂的方法定义两个”角色”对象

var wordspace=document.getElementById("spotlight");
var Character={
    crate:function(name,lv,exsist){ //传了3个值
        var newobj={
            name:name,
            lv:lv,
            exsist:exsist||false,
            spotlight:function(){
                wordspace.innerHTML+='Name: '+this.name+' Level: '+this.lv+' Exsist: '+this.exsist;
            },
            destroy:function(){
                wordspace.innerHTML+='Name: '+this.name+' is Gone!!';
                return null;
            }
        };
        return newobj;
    }
};
var Character1=Character.crate('Vurtne', '23'); //创件角色对象,可读性比常规工厂方法强
var Character2=Character.crate('DrakeDog', '85', true);
Character1.spotlight();
console.log(Character1);
//断开引用,好让环境自动释放内存
Character1=Character1.destroy();
console.log(Character1);

参考资料

发布 WordPress手机版 WordPress Mobile Reader

这是一个WordPress的手机版阅读器,用Ajax去请求博客的RSS XML内容
纯粹前端,没用用到PHP
由于Ajax限制,它必须和博客同域名(跨域名解决方案看底部更新)

托管在Google,使用方法、Wiki页面、问题、BUG里面很全了,

大家也可以在此文章下面评论也可以在项目页里评论

Host by GoogleCode : http://code.google.com/p/wpmr/

Demo: https://blog.regou.me/m/

—————8月30日跟新跨域名解决方案————
可以配置 .htaccess 文件,来允许Cross-origin resource sharing,从而跨域名阅读博客,甚至无需空间直接在下到本地阅读博客

相关文章:http://dev.opera.com/articles/view/dom-access-control-using-cross-origin-resource-sharing/#SettingResponseHeaders
只需要在博客域名下的.htaccess里添加这么一行就可以让任意域对其进行XHR请求

Header set Access-Control-Allow-Origin *

要注意,IE10以下浏览器或过低版本的Firefox Opera Safari不支持此功能

得到了ifttt的邀请,于是试用了一下

ifttt  意思是 if this then that   如果A发生了,那么就去做B。

是新一代网络服务(有没有人告诉我这就是Web3.0)??

登录了以后就可以创建任务了,现在我们来设想下:

如果 我在GoogleReader里顶了一个文章 那么就  在Twitter里发出微博进行提示,告诉我的博友

创建开始后,会让你绑定GoogleReader帐号和推特帐号,接着会让你编辑发的内容:
打算发布的包含
然后点Done就完成了:

If    New liked item in my Google Reader Then Post a new tweet to my twitter

类似的还有 如果我这边天气明天有雨那么就 发个短信告诉我(如下图) 等等….注意填手机号的时候要在前面加0086
它会发个4位pin码,你填上就认证成功啦!
如果下雨

ifttt目前支持非常多的服务(点这里查看),从各种博客服务到微博服务,从天气到时间,从添加了个书签到新闻发布。都能成为你的if – then中间的条件!

网页开发几个好用的Chrome插件

作为一个6年的Opera用户,不禁感叹Chrome的强大了

1.浏览器兼容性检测工具

https://chrome.google.com/webstore/detail/fcillahbnhlpombgccogflhmgocfifma?hl=zh-CN

这个不用解释,不过貌似有点不准……他提示我主页有9处text-align属性不支持IE8以下浏览器,说的不错,可是我只有一处text-align啊!

2.CSSCAN

https://chrome.google.com/webstore/detail/nnklpgoldelpoigiacfpnpphpkkmbdkb?hl=zh-CN

即CSS Scan强烈推荐,单机图标后鼠标指在哪就可以显示目标的CSS设置,抄袭网站利器!

3.PHP Console

https://chrome.google.com/webstore/detail/nfhmhhlpfleoednkpnnnkolmclajemef

php开发专用,.NET请无视