分类目录归档:Javascript

前端性能测试工具

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

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”>

&times;

</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;

}