|
|
這一定會(huì)是一個(gè)可愛(ài)的工具,節(jié)省時(shí)間不說(shuō),而且可以清晰的記錄和比較數(shù)據(jù).下面說(shuō)一下我的思路.(之后我將使用這個(gè)工具測(cè)試一個(gè)js的兼容性問(wèn)題,敬請(qǐng)關(guān)注)
本工具已經(jīng)制作完成,但是不具通用性,需要和后臺(tái)配合使用,需要和數(shù)據(jù)庫(kù)交互,而且后臺(tái)交互的性能不太好,普通的電腦無(wú)法承受(我的3GHZ的cpu,2G內(nèi)存都不能直接打開(kāi)多個(gè)瀏覽器窗口,可能是我數(shù)據(jù)庫(kù)的操作過(guò)于頻繁).雖然放在公共服務(wù)器上速度可以接受,但是不能拿出來(lái)給大家測(cè)試,因?yàn)槎鄠€(gè)人運(yùn)行,再好的服務(wù)器也受不了.
工具是js+php+mysql制作的,并不是有的人想象的把多個(gè)瀏覽器引擎整合到一個(gè)軟件里,我可沒(méi)那水平.
使用的時(shí)候,只需要在js里寫好測(cè)試數(shù)據(jù)和測(cè)試方法,傳到一個(gè)測(cè)試實(shí)例里,然后在所有瀏覽器里打開(kāi)一次這個(gè)窗口,js會(huì)統(tǒng)計(jì)數(shù)據(jù),然后把數(shù)據(jù)存儲(chǔ)到后臺(tái),之后js通過(guò)ajax獲取所有的數(shù)據(jù),將其解析成表格顯示在網(wǎng)頁(yè)中.最后結(jié)果是如果你的電腦夠強(qiáng),所有的瀏覽器里的網(wǎng)頁(yè)都會(huì)顯示一個(gè)列表,里面有所有瀏覽器的測(cè)試數(shù)據(jù),如下:
之后就可以比較結(jié)果了.是不是很方便呢
原理:
首先將此功能抽象成一個(gè)組件,組件接受三個(gè)參數(shù),一個(gè)是輸入對(duì)象組,二是測(cè)試方法,三是組件配置參數(shù).
在之后的組件初始化階段,組件將遍歷輸入對(duì)象組中的所有對(duì)象,將對(duì)象傳給測(cè)試方法,測(cè)試方法返回一個(gè)測(cè)試數(shù)據(jù),組件將測(cè)試結(jié)果記錄在一個(gè)對(duì)象中.
復(fù)制代碼 代碼如下:
/**
* 這是一個(gè)測(cè)試對(duì)象在不同瀏覽器中屬性的對(duì)象,可以同時(shí)在任何瀏覽器中測(cè)試,需要和后臺(tái)腳本交互
* 請(qǐng)?jiān)O(shè)置好輸入數(shù)據(jù)和輸出數(shù)據(jù)后,在要測(cè)試的瀏覽器中打開(kāi)頁(yè)面,結(jié)果將附加到列表中.
*
* @param {array} testObject 待測(cè)試的對(duì)象列表,每個(gè)對(duì)象都必須有一個(gè)唯一的標(biāo)示做主鍵,而且有一個(gè)描述,
* testObject的格式如下{"in1":{obj:**,des:"dd"},"in2":{obj:**,des:"dd"}}
* @param {function} testMethod 測(cè)試的方法,程序會(huì)向此方法傳入兩個(gè)參數(shù),一個(gè)是對(duì)象索引一個(gè)是對(duì)象.同時(shí)在此方法里可以用this引用test實(shí)例,此方法必須返回一個(gè)字符串,表示執(zhí)行結(jié)果
* @param {json} config 配置參數(shù)
*/
(function(){
var CrossBrowserTest=function(testObjects,testMethod,config){
這個(gè)組件對(duì)對(duì)象參數(shù)格式和組件內(nèi)的數(shù)據(jù)存儲(chǔ)器的格式,以及向后臺(tái)發(fā)送字符串的格式,后臺(tái)返回?cái)?shù)據(jù)的格式有著嚴(yán)格規(guī)定:
其中:testObject的格式如下{"in1":{obj:**,des:"dd"},"in2":{obj:**,des:"dd"}}
組件內(nèi)的數(shù)據(jù)存儲(chǔ)器的格式如下(this.data):{“in1”:{des:”描述",data{“ie6”:{outDes:"ie6里的輸出結(jié)果"},”ie7”:{outDes:"ie7里的輸出結(jié)果"}}},"in2”:…}
在發(fā)送數(shù)據(jù)的時(shí)候,用一個(gè)函數(shù)將json轉(zhuǎn)換成字符串格式,這個(gè)函數(shù)如下:
復(fù)制代碼 代碼如下:
function obj2str(o){
var r = [];
if(typeof o =="string") return "/""+o+"/"";
if(typeof o == "object"){
if(!o.sort){
r[0]="{"
for(var i in o){
r[r.length]="/""+i+"/"";
r[r.length]=":";
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="}"
}else{
r[0]="["
for(var i =0;i<o.length;i++){
r[r.length]=obj2str(o[i]);
r[r.length]=",";
}
r[r.length-1]="]"
}
return r.join("");
}
return o.toString();
}
在后臺(tái),php會(huì)把這個(gè)json字符串通過(guò)json_decode函數(shù)轉(zhuǎn)換成一個(gè)php的數(shù)組,之后存到數(shù)據(jù)庫(kù)里.
而從數(shù)據(jù)庫(kù)里取數(shù)據(jù)的時(shí)候,php從數(shù)據(jù)庫(kù)里取出數(shù)據(jù),轉(zhuǎn)換成數(shù)組格式,然后用json_encode函數(shù)轉(zhuǎn)換成json字符串,傳到前臺(tái),前臺(tái)用eval執(zhí)行得到數(shù)據(jù).
在后臺(tái),對(duì)json數(shù)據(jù)進(jìn)行了分解,分解成了一條條的數(shù)據(jù),然后存到了數(shù)據(jù)庫(kù)里,這里數(shù)據(jù)庫(kù)讀取頻繁,造成性能下降.
數(shù)據(jù)庫(kù)有6個(gè)字段,分別為:主鍵,對(duì)象主鍵(區(qū)分不同的對(duì)象),瀏覽器類型(相同的對(duì)象里有不同瀏覽器的測(cè)試結(jié)果),對(duì)象的描述,測(cè)試的結(jié)果,時(shí)間.
瀏覽器的類型測(cè)試使用了下述的方法:
復(fù)制代碼 代碼如下:
M.getBrowser=function(){
return {
//此函數(shù)判斷瀏覽器類型,為了簡(jiǎn)便,返回一個(gè)數(shù)字表示,
//1.ie6;2.ie7; 3.ie8;4,Firefox;5.chrome;6.Opera;7.Safari;0.無(wú)法檢測(cè)的瀏覽器
//其他瀏覽器可以自行添加
whichOS:function(){
var useragent=navigator.userAgent.toLowerCase();
return (/MSIE 6/i.test(useragent)==true&&1)||
(/MSIE 7/i.test(useragent)==true&&2)||(/MSIE 8/i.test(useragent)==true&&3)||
(/Firefox/i.test(useragent)==true&&4)||
(/Chrome/i.test(useragent)==true&&5)||
(/Opera/i.test(useragent)==true&&6)||
(/Safari/i.test(useragent)==true&&7)||0
},
nowOsString:function(){
var useragent=navigator.userAgent.toLowerCase();
return (/MSIE 6/i.test(useragent)==true&&"ie6")||
(/MSIE 7/i.test(useragent)==true&&"ie7")||(/MSIE 8/i.test(useragent)==true&&"ie8")||
(/Firefox/i.test(useragent)==true&&"Firefox")||
(/Chrome/i.test(useragent)==true&&"Chrome")||
(/Opera/i.test(useragent)==true&&"Opera")||
(/Safari/i.test(useragent)==true&&"Safari")||"sorry,我不認(rèn)識(shí)你的瀏覽器!"
}
}
}()
數(shù)據(jù)是用對(duì)象主鍵和瀏覽器類型共同區(qū)分的(可以獲取唯一的數(shù)據(jù))
對(duì)象初始化完成后,就開(kāi)始處理數(shù)據(jù)了,首先在本瀏覽器里執(zhí)行一次測(cè)試,將測(cè)試數(shù)據(jù)放入一個(gè)臨時(shí)對(duì)象里,然后將這個(gè)臨時(shí)對(duì)象通過(guò)ajax發(fā)送到后臺(tái),后臺(tái)把這條數(shù)據(jù)存到數(shù)據(jù)庫(kù)(如果已經(jīng)存在就不存儲(chǔ)了)
然后設(shè)置一個(gè)定時(shí)器,定時(shí)到后臺(tái)取數(shù)據(jù),這個(gè)取到的數(shù)據(jù)是后臺(tái)數(shù)據(jù)庫(kù)里存儲(chǔ)的,可能包括了多個(gè)的瀏覽器的數(shù)據(jù),取到數(shù)據(jù)后,啟動(dòng)dom構(gòu)建函數(shù),和渲染函數(shù),更新網(wǎng)頁(yè)的內(nèi)容.
基本原理就是這樣,這樣說(shuō)真是抽象的很,但是很抱歉,這個(gè)東西沒(méi)法拿出來(lái)跟大家分享,不是我不想分享,是實(shí)在是有困難.不過(guò)如果你感興趣可以下載源代碼,將源代碼里的sql導(dǎo)入到一個(gè)mysql表里,然后在php文件里配置下,修改下,我這個(gè)封裝的不是很好,因?yàn)榭紤]到這個(gè)東西的重用性也不用太好了.沒(méi)時(shí)間搞別的了.
測(cè)試代碼打包下載
JavaScript技術(shù)：在一個(gè)瀏覽器里呈現(xiàn)所有瀏覽器測(cè)試結(jié)果的前端測(cè)試工具的思路，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
