js实现下拉刷新上滑加载更多效果

js实现下拉刷新上滑加载更多效果

在APP中我们经常会在页面下拉时看到一些动效,例如下拉图片跟随放大、下拉刷新出现loading动画等,这个交互细节在各个主流APP以及手机原生系统中随处可见,能为APP增添个性亮点。

一、背景

在我们的日常项目中,也会遇到这样的需求,在当前环境下,此类效果大多是靠原生来实现的,但是用原生实现有不少缺陷,原因如下:

  • 原生实现周期长;
  • 跨平台实现成本高;
  • 解决方案通用性差;
  • 运用到现有项目改造成本高;

那么我们的H5页面能否实现呢?下面和大家一起来探索。

继续阅读“js实现下拉刷新上滑加载更多效果”

Juicer – 一个Javascript模板引擎的实现和优化

让我们从一段代码说起,假设有一段这样的JSON数据:

var json={
	name:"流火",
	blog:"www.hujuntao.com"
};

我们需要根据这段JSON生成这样的HTML代码:

流火 (blog: www.hujuntao.com)

传统的Javascript代码一定是这个样子:

var html;
html=''+json.name+' (blog: '+json.blog+')';

不言而喻,这样的代码混杂了html结构和代码逻辑,而且代码不具可读性,不便于后期维护,于是便有了这样一个函数:

function sub(str,data) {
    return str
        .replace(/{(.*?)}/igm,function($,$1) {
            return data[$1]?data[$1]:$;
        });
}

有了这个函数,我们拼接字符串的工作就可以简化为:

var tpl='{name} (blog: {blog})';
var html=sub(tpl,json);

看到这里,不用我多说,我想通过这个例子直观的展现出前端模板引擎的好处所在,这么做能够完全剥离html和代码逻辑,便于多人协作和后期的代码维护。当然,当我们的业务逻辑需要对数据源进行循环遍历,if判断等的时候,这个简明的函数很显然并不能满足我们的需求,于是便有了如今这市面上众多的模板引擎,诸如Mustache, jQuery tmpl, Kissy template, ejs, doT, nTenjin, etc.

“如无必要,勿增实体。” 这是著名的奥卡姆剃须刀法则,简单的说就是避免重复造轮子。那么就会有童鞋质疑,既然已然有这么多现成的东西可用,为什么还要重新打造一个呢?

我个人认为一个完善的模板引擎应该兼顾这几点:

  • 语法简明
  • 执行效率高
  • 安全性
  • 错误处理机制
  • 多语言通用性

而市面上现有的模板引擎没有做到兼顾以上几点,比如Mustache支持多种语言,通用性不错,不过性能稍差,而且语法不支持高级特性,例如遍历的时候无法做if判断,也无法获得index索引值,jQuery tmpl依赖jQuery,缺乏可移植性,Kissy template虽然依赖Kissy, 不过性能和语法都值得推荐,doT/nTenjin 性能和灵活性都很不错,但是语法需要用原生的js来写,写好的模板代码可读性稍差。

鱼和熊掌不可兼得,语法的处理,安全性的输出过滤和错误处理机制的引入在一定程度上都会或多或少降低模板引擎的性能,因此就需要我们权衡。Juicer 在实现上首先将性能看做第一个重要的指标,毕竟性能好坏直接影响用户的感知,同时兼顾了安全性和错误处理机制(即便这样会导致性能的略微下降)。

首先来看下jsperf上同几个主流模板引擎的性能对比。

可以看到,性能上比传统模板引擎均有提升,下边的介绍主要从语法、安全性和错误处理,以及如何使用这几个方面介绍下Juicer.

a. 语法

  • 循环 {@each}…{@/each}
  • 判断 {@if}…{@else if}…{@else}…{@/if}
  • 变量(支持函数)${varname|function}
  • 注释 {# comment here}

详细的语法请参考 Juicer Docs.

b. 安全性

安全性,简单地说就是对输出数据在输出前进行一次转义过滤,避免XSS这样的脚本注入攻击,简单扫下盲,举个XSS的例子。

var json={
	output:'alert("XSS");'
};

如果JSON数据是第三方接口返回或者含有用户输入(像BBS、评价)的内容,我们如果赤裸裸的将output写到页面上就会执行恶意的js代码,所以Juicer默认是对数据输出做了安全转义的,当然如果不想被转义,可以使用$${varname}。

juicer.to_html('${output}',json);
//输出:<script>alert("XSS");</script>

juicer.to_html('$${output}',json);
//输出:<script>alert("XSS");</script>

c. 错误处理

如果没有错误处理,当模板引擎编译(Compile)或者渲染(Render)出错时候就会引起后续js代码停止执行,可想而知,如果因为一个逗号或者JSON数据的偶发错误导致整个页面挂掉,是我们不能接受的。但是Juicer在遇到这些错误的时候不会影响后续代码的执行,只会在控制台打出一句警告(Warn)告知开发者模板解析出现错误。

juicer.to_html('${varname,,,,,,,}',json);
alert('hello, juicer!');

执行上边的代码就会看到控制台打出的“Juicer Compile Exception: Unexpected token ,”,但是不会因为错误导致后续的alert被阻塞掉。

实现原理

Juicer对一个模板的编译和渲染的过程主要有以下几个步骤:

  • 1、对模板代码进行语法分析
  • 2、分析后生成原生的Javascript代码字符串
  • 3、将生成的代码转为可重用的Function (Compiled Template)
var json={
	list:[
		{name:"benben"},
		{name:"liuhuo"}
	]
};
var tpl='{@each data.list as value,key}$${value.name}{@/each}';
var compiled_tpl=juicer.compile(tpl,{errorhandling:false});

我们通过compiled_tpl.render.toString()看下编译后的代码:

function anonymous(data) {
	var data = data || {};
	var out = '';
	out += '';
	for (var i0 = 0, l = data.list.length; i0 < l; i0++) {
		var value = data.list[i0];
		var key = i0;
		out += '';
		out += ((value.name));
		out += '';
	}
	out += '';
	return out;
}

是不是已经明白了Juicer的原理?这个编译后的函数就会每次帮我们完成从数据到html代码的拼装操作。

这里有几点优化的地方值得分享下:

  • 1、using += instead of array.push
  • 2、avoid using with {}
  • 3、cache the compiled template (function)

这几点优化在大数据量循环渲染时候性能提升显著,不过正因为放弃了with{}语句,所以JSON数据外层必须指定“data.”前缀,如果你觉得这点性能的提升不重要,也可以在options中指定loose:true(松散模式),这样就可以省去data. 前缀。

最后介绍下Options配置项,左侧为参数默认值。

{
	cache:true/false,
	loose:false/true,
	errorhandling:true/false
}

cache默认为true,即同一个模板编译后是否被juicer缓存,也就是说如果缓存开启的情况下,同一个模板第一次编译后,为了缩短耗时提升性能,后续不会再次执行编译的操作而是直接从缓存中去取编译好的模板函数。

Juicer的API. Juicer有两种使用方法,一种是通过

juicer.to_html(tpl,data,options);

直接根据提供的数据将模板转为html代码,另一种是通过compile方法先将模板编译好,在需要的时候再对模板进行数据的Render操作:

var compiled_tpl=juicer.compile(tpl,options);
compiled_tpl.render(data);

最后附上Juicer的项目地址,上边有详细的文档和Demo代码。
http://juicer.name

转载自:TaobaoUED

手机号码归属地查询api

《手机号码归属地API接口一》

淘宝网

API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443
参数:

  • tel:手机号码
  • 返回:JSON

拍拍

API地址: http://virtual.paipai.com/extinfo/GetMobileProductInfo?mobile=15850781443&amount=10000&callname=getPhoneNumInfoExtCallback
参数:

  • mobile:手机号码
  • callname:回调函数
  • amount:未知(必须)
  • 返回:JSON

财付通

API地址: http://life.tenpay.com/cgi-bin/mobile/MobileQueryAttribution.cgi?chgmobile=15850781443
参数:

  • chgmobile:手机号码
  • 返回:xml

百付宝

API地址: https://www.baifubao.com/callback?cmd=1059&callback=phone&phone=15850781443
参数:

  • phone:手机号码
  • callback:回调函数
  • cmd:未知(必须)
  • 返回:JSON

115

API地址: http://cz.115.com/?ct=index&ac=get_mobile_local&callback=jsonp1333962541001&mobile=15850781443
参数:

  • mobile:手机号码
  • callback:回调函数
  • 返回:JSON

Google Code Pretiffy轻量级代码高亮插件

Google Code Pretiffy 是 Google 的一个用来对代码进行语法着色的 JavaScript 库,支持 C/C++, Java, Python, Ruby, PHP, VisualBasic, AWK, Bash, SQL, HTML, XML, CSS, JavaScript, Makefiles和部分Perl。code.google.com、stackoverflow.com、api.jquery.com等知名网站都在使用它

DEMO见http://google-code-prettify.googlecode.com/svn/trunk/tests/prettify_test.html

特点

  • 工作基于前台页面
  • 即使代码中包含行号、链接等等,也可运行。
  • 简单的API :只需加载一点JS和CSS,以及添加一个onLoad事件。
  • 轻量级:绝对的小体积并不会阻碍加载页面。 可通过CSS定制样式。
  • 通过CSS定制的样式。主题库
  • 支持所有的C类语言,Bash类语言,XML类语言。无需指定语言。
  • 其它可扩展语言,你可以通过指定语言来支持。
  • 良好的跨浏览器支持。

安装方法:

1、在你的网页上加载JS和CSS文件


2、然后在html 的body标签中添加一个onload事件 onload=”prettyPrint()”

如果你加载了JQuery,则可以添加以下代码

$(document).ready(function(){
     prettyPrint();
})

到这里,你的google-code-prettify基本可以工作了。

使用方法:

你只需要把代码放进<pre>...</pre> 或者 <code>...</code>就可以实行代码高亮了。无需你指定哪种语言就可以工作了。当然,你也可以指定一种语言,<pre class=”prettyprint Language”>,将language 改为以下的一种语言。“bash”, “c”, “cc”, “cpp”, “cs”, “csh”, “cyc”, “cv”, “htm”, “html”, ”java”, “js”, “m”, “mxml”, “perl”, “pl”, “pm”, “py”, “rb”, “sh”, ”xhtml”, “xml”, “xsl”

打开行号

你可以使用linenums打开行号,这里有另外一种方法打开自动行号,请参见:让Google-code-prettify显示行号

设置代码的字体

通常程序的代码都是使用等宽字体,最常见的就是Courier New字体。而google-code-prettify并没有设置代码的字体。

打开 WordPress的wp-content/plugins/code-block-enabler/prettify.css文件,找到 pre.prettyprint的定义后面加上字体的定义,改为

pre.prettyprint { padding: 2px; border: 1px solid #888; font-family: Courier New; font-size: 9px;}

对于Wordpress用户

google code prettify for wordpress

更多请见使用手册:http://google-code-prettify.googlecode.com/svn/trunk/README.html

主页:http://code.google.com/p/google-code-prettify/

各大搜索引擎自动提示API

谷歌(Google)

  • Api地址:www.google.com/s?hl=zh-cn&sugexp=llsin&q=设计
  • window.google.ac.h([“设计”,[[“设计在线”,””,”0″],[“设计”,””,”1″],[“设计素材”,””,”2″],[“设计签名”,””,”3″],[“设计网”,””,”4″],[“设计中国”,””,”5″],[“设计路上”,””,”6″],[“设计图库”,””,”7″],[“设计公司”,””,”8″],[“设计欣赏”,””,”9″]],{“k”:1}])

百度(baidu)

  • Api地址:http://suggestion.baidu.com/su?wd=设计&p=3&cb=window.bdsug.sug
  • window.bdsug.sug({q:”设计”,p:false,s:[“设计之家”,”设计素材下载”,”设计签名”,”设计在线”,”设计师”,”设计英才网”,”设计软件”,”设计兵团”,”设计公司”,”设计说明”]});

搜搜(soso)

  • Api地址:http://www.soso.com/smart_web.q?w=设计
  • 设计 1c36589c53454a90dab8033f2f7124d7 0 设计阶段 0 0 设计装修 0 0 设计之家 0 0 设计签名 0 0 设计服务 0 0 设计兵团 0 0 设计师家具 0 0 设计师 0 0 设计素材之家 0 0 设计人生 0

有道(youdao)

  • Api地址:http://www.youdao.com/suggest2/suggest.s?query=设计&keyfrom=web.suggest&rn=10&o=aa
  • aa.updateCall({q:’设计’,r:[{c:’设计网名’},{c:’设计英才网’},{c:’设计之家’},{c:’设计签名’},{c:’设计在线’},{c:’设计个性签名’},{c:’设计素描图片’},{c:’设计师’},{c:’设计兵团’},{c:’设计图怎么做’}]})

搜狗(sogou)

  • Api地址:http://w.sugg.sogou.com/sugg/ajaj_json.jsp?key=设计&type=web
  • window.sogou.sug([“设计”,[“设计之家”,”设计英才网”,”设计在线”,”设计签名”,”设计师”,”设计兵团”,”设计网站”,”设计软件”,”设计网”,”设计中国”]],-1);

一淘(etao)

  • Api地址:http://suggest.taobao.com/sug?area=etao&code=utf-8&callback=KISSY.Suggest.callback&q=设计
  • KISSY.Suggest.callback({“result”: [[“设计师品牌 -原创”, “55740”], [“设计师”, “229765”], [“设计素材”, “49096”], [“设计感”, “32436”], [“设计师品牌”, “56416”], [“设计猫”, “22815”], [“设计师品牌女装”, “3603”], [“设计前线”, “933”], [“设计logo”, “54977”], [“设计阶段”, “301”]],”etaobook”:[[“设计中的色彩心理学”,”2346799″,”金容淑”,”人民邮电出版社”,”2011-1-1″], [“设计语言:经典标志设计密码(附光盘)”,”1840962″,”埃瓦米”,”华中科技大学出版社”,”2009-2-1″], [“设计密码(如何成为一名优秀的职业设计师)”,”1845460″,”魏来”,”中信出版社”,”2010-4-1″], [“设计观点”,”2401723″,”祝帅”,”辽宁科学技术出版社”,”2010-9-1″], [“设计的品格-探索×呈现×进化的InDesign美学”,”2239663″,”叶立群”,”人民邮电出版社”,”2010/9/1″]]})

雅虎(yahoo)

  • Api地址:http://s.aliyun.com/ajax.php?format=jsonp&q=设计
  • Proxy(“suggest_show”,[“\u8bbe\u8ba1\u53f2″,”\u8bbe\u8ba1\u6807\u5fd7″,”\u8bbe\u8ba1\u8f6f\u4ef6\u57f9\u8bad”,”\u8bbe\u8ba1\u8bf4\u660e”,”\u8bbe\u8ba1\u6784\u6210″,”\u8bbe\u8ba1\u7406\u5ff5″,”\u8bbe\u8ba1\u4e4b\u5bb6″,”\u8bbe\u8ba1\u7684\u6539\u9769″,”\u8bbe\u8ba1\u4e00\u5ea7\u6865″,”\u8bbe\u8ba1 \u767e\u4e8b\u901a”]);

必应(bing)

  • Api地址:http://sg1.api.bing.com/qsonhs.aspx?type=cb&cb=callback&q=设计
  • if(typeof callback == ‘function’) callback({“AS”:{“Query”:”设计”,”FullResults”:1,”Results”:[{“Type”:”AS”,”Suggests”:[{“Txt”:”设计之家”,”Type”:”SF”},{“Txt”:”设计之家”,”Type”:”AS”},{“Txt”:”设计在线”,”Type”:”AS”},{“Txt”:”设计签名”,”Type”:”AS”},{“Txt”:”设计师”,”Type”:”AS”},{“Txt”:”设计软件”,”Type”:”AS”},{“Txt”:”设计网”,”Type”:”AS”},{“Txt”:”设计模式”,”Type”:”AS”}]}]}} /* pageview_candidate */);