1.berserkJS,新浪微博开源并使用的一个前端性能测试工具,据说它做得比phantomjs还更易用更好。
2.phantomJS,常用于单元测试,据说淘宝和百度是在用它的。
3.chrome’s devtools,按F12键就可以打开。非常详细。
4.web performance api,w3c组织制定的一个浏览器性能测试API,目前Chrome支持最好,可以使用js直接调用实现NB的性能检测。https://github.com/getwingm/web-performance
分类目录归档:Javascript
cordova的命令集
附上cordova常用命令列表
命令 说明
cordova create <工程路径> <包名> <工程名> 创建cordova工程,例如:cordova create helloworld “org.commom.helloworld” “helloworld”
cordova platforms add android 添加平台支持。
cordova build android 给cordova项目添加android平台。
cordova run android 编译和运行项目。
cordova install android 将编译好的应用程序安装到模拟器上。
cordova plugin add <插件完全限定名> 给项目添加插件。
cordova plugin remove <插件完全限定名> 删除插件。
cordova plugin list 查看插件列表。
cordova build android 编译代码
cordova emulate android 在模拟器上运行(前提是创建好AVD)
cordova serve android 在浏览器运行
cordova run android 通过USB直接安装到真机
—————————–
插件:http://plugins.cordova.io/
如以上我们看到的,Cordova默认提供的程序界面和功能非常简单。当然你可以根据你的需要,运行标准Web开发技术对页面进行设计。但是当你需要和不同的设备进行通讯交互时,你就需要借助于一些插件,以便能够访问Cordova提供的核心API。
一般来说,你添加一个插件的目的是为了利用Cordova的API访问设备。详细的可用插件列表你可以在社区中看到(http://plugins.cordova.io/)。当然你也可以自定义自己的插件。
你可以用CLI搜索可用的插件,比如:
cordovaplugin search bar code
你可以通过以下命令安装插件,比如:
cordovaplugin add org.apache.cordova.device //设备API
cordovaplugin add org.apache.cordova.network-information //网络(事件)
cordovaplugin add org.apache.cordova.battery-status //电池(事件)
cordovaplugin add org.apache.cordova.device-motion //加速器
cordovaplugin add org.apache.cordova.device-orientation //罗盘
cordovaplugin add org.apache.cordova.geolocation //定位
cordovaplugin add org.apache.cordova.camera //摄像头
cordovaplugin add org.apache.cordova.media-capture //媒体文件处理
cordovaplugin add org.apache.cordova.media //媒体文件处理
cordovaplugin add org.apache.cordova.file //文件访问
cordovaplugin add org.apache.cordova.file-transfer //文件传输
cordovaplugin add org.apache.cordova.dialogs //对话框
cordovaplugin add org.apache.cordova.vibration //震动
cordovaplugin add org.apache.cordova.contacts //联系人
cordovaplugin add org.apache.cordova.globalization //全球化
cordovaplugin add org.apache.cordova.splashscreen //闪屏
cordovaplugin add org.apache.cordova.inappbrowser //打开新的浏览器窗口
cordovaplugin add org.apache.cordova.console //调试控制台
你可以用以下命令查看所有已经安装的插件
cordovaplugin ls
使用以下命令删除插件:
cordovaplugin rm org.apache.cordova.console
Plugin add高级选项
上面的安装方式是从registry.cordova.io库中按照id获取插件,这是一个非常通用的做法。你可以在安装时指定版本,比如:
cordovaplugin add org.apache.cordova.console@latest
cordovaplugin add org.apache.cordova.console@0.2.1
其中的latest表示获取最新版本。中间用@分隔。
如果插件不是在默认库中,而是在其他地方,则你可以指定URL:
cordovaplugin add https://github.com/apache/cordova-plugin-console.git
当然你需要先安装git。
Merge目录
前面提到,一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你确实需要为某个平台定制一些内容,又该怎么办呢?
项目根目录下有一个merges目录。我们以一个实例来讲解:
1) 修改www\css目录下的index.css文件,设置event.received的样式为红色: background-color:#FF0000;
2) 修改platforms\android\assets\www\css中的index.css文件,设置.event.received的样式为蓝色:background-color:#0000FF;
3) 在merges\android目录下新建一个css目录。
复制www\css中的index.css文件到该目录下。
修改该目录下的index.css文件中的.event.received的样式为绿色:background-color:# 00FF00;
仿真器中运行,你会发现最终呈现的结果为绿色。由此我们可知:
1) Merges目录中没有对应文件时,platform下的文件会被跟目录(www)下的文件覆盖。(即:如果Merges目录中不存在index.css文件,最终颜色将为红色)
2) Merges目录中存在对应文件时,platform下的文件会被merges下的文件覆盖。可见Merges目录主要用于为平台定制功能。
帮助命令
通过以下命令查看帮助信息:
cordova help
更新命令
以下语句更新cordova:
npm update -g cordova
cordova更新完成后,你还需要更新项目:
cordovaplatform update android
注意:
因为各版本之间差异较大,执行更新时请事先仔细阅读官方文档,以免发生数据丢失或错误。
jquery异步请求的超时处理
方法一:加timeout定时器的get或getJSON函数。
方法二:利用adjax函数处理。
function get_device_list(){
{% autoescape off %}
svcs ={{servers}};
{% endautoescape %}
for (var i=0; i< svcs.length; i++)
{
var svc = svcs[i];
var loadid = ‘#tryloading’ + i.toString();
var url = ‘http://’ + svc + ‘/listalldevices.json’;
if(0){
$.get(url, {}, handle_device_list(svc, loadid));
setTimeout(handle_device_list_error(svc, loadid), 10000);
}else{
var req = {‘url’:url,
‘data’:{},
‘type’:’GET’,
‘datatype’:’json’,
‘success’:handle_device_list(svc, loadid),
‘error’:handle_device_list_error(svc, loadid)};
$.ajax(req);
}
}
}
href=”#”形式使用推荐
在bootstrap中,常使用这样的方式来表示hover和normal的状态。但这样可能会导致页面存在页面跳转的刷新效果,这种效果不一定是符合我们预期,所以有时需要屏蔽这种效果,因此推荐如下两种使用方法。
第一种:<a href=”javascript:void(0);” onclick=”function()”></a>
第二种:
<a href=”javascript:;” onclick=”function()”></a>
第一种void(0)值是计算一个空值,第二种是执行一个空js串(注意双引号内的冒号和逗号),在W3C中不推荐在href语句中执行JS脚本,因此使用onclick的方式响应本地脚本,才是符合W3C的推荐。
控制模态窗口的两种方法
第一种:针对类属性,进行遍历所有项,并为其添上click属性。
$(“.stopall”).each(function(index){
$(this).click(function(e) {
$(‘#msgtxt-dialog’).modal()
stop_all_spider($(e.currentTarget))
});
})
$(“.startnew”).each(function(index){
$(this).click(function(e) {
var target = $(e.currentTarget)
var host = target.parent().parent().children(“td:nth-child(1)”).html();
var prj = target.parent().parent().children(“td:nth-child(2)”).html();
var spider = target.parent().parent().children(“td:nth-child(3)”).html();
var nodeParent = $(“#startnew-dialog”);
var label1 = nodeParent.find(“#host”);
var label2 = nodeParent.find(“#project”);
label1.html(host);
label2.html(prj);
$(‘#startnew-dialog’).modal()
});
})
第二种:
<!– 按钮触发模态框 –>
<button class=”btn btn-primary btn-lg” data-toggle=”modal”
data-target=”#myModal”>
开始演示模态框
</button>
<!– 模态框(Modal) –>
<div class=”modal fade” id=”myModal” tabindex=”-1″ role=”dialog”
aria-labelledby=”myModalLabel” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<button type=”button” class=”close”
data-dismiss=”modal” aria-hidden=”true”>
×
</button>
<h4 class=”modal-title” id=”myModalLabel”>
模态框(Modal)标题
</h4>
</div>
<div class=”modal-body”>
在这里添加一些文本
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-default”
data-dismiss=”modal”>关闭
</button>
<button type=”button” class=”btn btn-primary”>
提交更改
</button>
</div>
</div><!– /.modal-content –>
</div><!– /.modal –>
getJSON函数实现自定义参数
$(document).ready(get_xxxx_list);
function get_xxxx_list(){
{% autoescape off %}
svcs ={{servers}};
{% endautoescape %}
for (var i=0; i< svcs.length; i++)
{
var svc = svcs[i]
var url = ‘http://’ + svc + ‘/xxxx.json’;
$.getJSON(url, {}, handle_xxxx_list(svc));
}
}
function handle_xxxx_list(server){
return function(json, status){
if(status == “success”){
for(var prj in json.d3all){
var objprj = json.d3all[prj]
for(var i = 0; i < objprj.length; i++){
var spider = objprj[i]
alert(server + prj + spider)
}
}
}else{
}
}
}
Javascript & Jquery 遍历Json
/*
author: liulf
function:
var __db_cpcj=vCpcj;
var __db_cp=vCp;
var vCp={“cppage”:[
{“cpdh”:”A01000101″,”page”:”1″,”ca”:”1309-36-0″,”mc”:”硫铁矿“,”ename”:”Pyrite”,”bm”:”黄铁矿“},
{“cpdh”:”A01000201″,”page”:”1″,”ca”:”1309-36-0″,”mc”:”硫精砂“,”ename”:”Pyrite concentrate;Sulfur concentrate”,”bm”:””},
{“cpdh”:”A01000202″,”page”:”1″,”ca”:”1309-36-0″,”mc”:”硫精矿粉“,”ename”:
“Powdered pyrite concentrate;Pyrites concentrate,powder;Sulfur concentrate,powder”,”bm”:”硫精矿“},
{“cpdh”:”A02000101″,”page”:”1″,”ca”:””,”mc”:”磷矿石“,”ename”:”Phosphorus ore”,”bm”:””},
{“cpdh”:”A02000111″,”page”:”2″,”ca”:””,”mc”:”磷矿砂“,”ename”:”Phosphorite grit”,”bm”:””},
{“cpdh”:”A02000201″,”page”:”2″,”ca”:””,”mc”:”磷矿粉“,”ename”:”Phosphate rock powder”,”bm”:””},
{“cpdh”:”A03000101″,”page”:”2″,”ca”:”12447-04-0″,”mc”:”硼矿石“,”ename”:”Ascharite;Boric ore”,”bm”:”硼镁矿“},
{“cpdh”:”A04000101″,”page”:”2″,”ca”:””,”mc”:”钾长石“,”ename”:”Potash feldspar;Potassium feldspars”,”bm”:””},
{“cpdh”:”A04000201″,”page”:”2″,”ca”:”12003-63-3″,”mc”:”长石粉“,”ename”:”Feldspar powder”,”bm”:””},
{“cpdh”:”A04000301″,”page”:”2″,”ca”:””,”mc”:”光卤石“,”ename”:”Carnallite”,”bm”:””}
]}
*/
function ObjSearch()
{
this.kw = ”;
this.searchCpcj= function()
{
$(vCpcj).each(function(){
});
}
this.searchCp = function()
{
// var json = eval(vCp.cppage)
// for(var i=0; i<json.length; i++)
// {
// alert(json[i].cpdh+” ” + json[i].page)
// break;
// }
$.each(vCp.cppage,function(index,content){
document.write(‘<div>’+content.cpdh+'</div><br />’);
});
}
}
——————————————–js———————————
如何遍历jsonc对象?其实方法很简单。
比如有如下json对象:
var obj ={“name”:”冯娟“,”password”:”123456″,”department”:”技术部“,”sex”:”女“,”old”:30};
遍历方法:
for(var p in obj)
{
str = str+obj[p]+’,’;
return str;
}