브 라 우 저 에서 모든 브 라 우 저 테스트 결 과 를 보 여 주 는 전단 테스트 도구 의 사고방식

표준 적 인 게으름뱅이 로 서 저 는 테스트 도 구 를 만 들 고 싶 습 니 다.모든 브 라 우 저의 테스트 결 과 를 브 라 우 저 창 에 표시 하고 뚜렷 한 표 로 작성 하여 비교 하기 쉽 습 니 다.이것 은 반드시 귀여운 도구 이 고 시간 을 절약 할 수 있 습 니 다.그리고 데 이 터 를 선명 하 게 기록 하고 비교 할 수 있 습 니 다.다음은 제 생각 을 말씀 드 리 겠 습 니 다.2G 메모리 로 여러 개의 브 라 우 저 창 을 직접 열 수 없습니다.제 데이터 베 이 스 를 너무 자주 작 동 하 는 것 같 습 니 다).공공 서버 에 두 면 속 도 는 받 아들 일 수 있 지만 꺼 내 서 테스트 할 수 없습니다.여러 사람 이 실행 하기 때문에 아무리 좋 은 서버 라 도 견 딜 수 없습니다.도 구 는 js+php+my sql 로 만 들 어 졌 습 니 다.어떤 사람 이 상상 하 는 여러 개의 브 라 우 저 엔진 을 하나의 소프트웨어 에 통합 시 키 는 것 은 아 닙 니 다.저 는 그 수준 이 아 닙 니 다.사용 할 때 js 에 테스트 데이터 와 테스트 방법 을 적 고 테스트 인 스 턴 스 에 전송 한 다음 에 모든 브 라 우 저 에서 이 창 을 한 번 열 면 js 는 데 이 터 를 통계 한 다음 에 데 이 터 를 백 엔 드 에 저장 합 니 다.그 다음 에 js 는 ajax 를 통 해 가지 고 있 는 데 이 터 를 얻 고 표 로 분석 하여 웹 페이지 에 표시 합 니 다.마지막 결 과 는 컴퓨터 가 강하 다 면...모든 브 라 우 저의 웹 페이지 에는 하나의 목록 이 표 시 됩 니 다.그 안에 모든 브 라 우 저의 테스트 데이터 가 있 습 니 다.다음 과 같 습 니 다그 후에 결 과 를 비교 할 수 있 습 니 다.편리 하지 않 습 니까?원리:먼저 이 기능 을 하나의 구성 요소 로 추상 화하 고 구성 요 소 는 세 개의 매개 변 수 를 받 습 니 다.하 나 는 입력 대상 그룹 이 고,다른 하 나 는 테스트 방법 이 며,셋 째 는 구성 요소 설정 매개 변수 입 니 다.다음 구성 요소 초기 화 단계 에서구성 요 소 는 입력 대상 그룹의 모든 대상 을 옮 겨 다 니 며 대상 을 테스트 방법 에 전달 합 니 다.테스트 방법 은 테스트 데 이 터 를 되 돌려 줍 니 다.구성 요 소 는 테스트 결 과 를 한 대상 에 기록 합 니 다.배경 에서 데 이 터 를 되 돌려 주 는 형식 은 엄격 한 규정 이 있 습 니 다.그 중에서 testObject 의 형식 은 다음 과 같 습 니 다{"in1":{obj:*,des:"dd"},"in2":{obj:*,des:"dd"}구성 요소 안의 데이터 저장 소 형식 은 다음 과 같 습 니 다(this.data):{"in1":{des:"설명",data{"ie6":"ie6 의 출력 결과"},"ie7":"ie7 의 출력 결과"},"in2":...}데 이 터 를 보 낼 때..}하나의 함수 로 json 을 문자열 형식 으로 변환 합 니 다.이 함 수 는 다음 과 같 습 니 다.decode 함 수 는 phop 의 배열 로 변환 한 후 데이터베이스 에 저장 합 니 다.데이터베이스 에서 데 이 터 를 찾 을 때 phop 은 데이터베이스 에서 데 이 터 를 꺼 내 배열 형식 으로 변환 한 후 jsonencode 함수 가 json 문자열 로 변환 되 어 프론트 데스크 에 전 달 됩 니 다.프론트 데스크 는 eval 로 데 이 터 를 실 행 했 습 니 다.백 스테이지 에서 json 데 이 터 를 분해 하여 하나의 데이터 로 분해 한 다음 에 데이터 베이스 에 저 장 했 습 니 다.여기 데이터 베 이 스 는 읽 기 가 빈번 하여 성능 이 떨 어 졌 습 니 다.데이터 베 이 스 는 6 개의 필드 가 있 는데 각각 홈 키,대상 홈 키(서로 다른 대상 을 구분)입 니 다.브 라 우 저 형식(같은 대상 에 서로 다른 브 라 우 저의 테스트 결과 가 있 음),대상 에 대한 설명,테스트 결과,시간.브 라 우 저의 유형 테스트 는 다음 과 같은 방법 을 사용 합 니 다

 
/** 
*                     ,             ,          
*               ,             ,         . 
* 
* @param {array} testObject         ,                  ,       , 
* testObject     {"in1":{obj:**,des:"dd"},"in2":{obj:**,des:"dd"}} 
* @param {function} testMethod      ,             ,            .          this  test  ,            ,       
* @param {json} config      
*/ 
(function(){ 
var CrossBrowserTest=function(testObjects,testMethod,config){ 

데 이 터 는 대상 의 메 인 키 와 브 라 우 저 유형 을 공동으로 구분 하 는(유일한 데 이 터 를 가 져 올 수 있 음)대상 으로 초기 화 된 후 데 이 터 를 처리 하기 시 작 했 습 니 다.먼저 이 브 라 우 저 에서 테스트 데 이 터 를 임시 대상 에 넣 은 다음 에 이 임시 대상 을 ajax 를 통 해 배경 으로 보 냅 니 다.배경 에서 이 데 이 터 를 데이터베이스(이미 존재 하면 저장 하지 않 습 니 다)에 저장 한 다음 에 타 이 머 를 설정 하고 타 이 머 를 배경 으로 데 이 터 를 가 져 옵 니 다.이 데 이 터 는 배경 데이터 베이스 에 저 장 됩 니 다.여러 브 라 우 저의 데 이 터 를 포함 할 수 있 습 니 다.데 이 터 를 가 져 온 후에 dom 구축 함수 와 렌 더 링 함 수 를 시작 하여 웹 페이지 의 내용 을 업데이트 합 니 다.기본 원 리 는 바로 이 렇 습 니 다.이렇게 말 하면 정말 추상 적 이지 만 죄 송 하지만 이 물건 을 꺼 내 서 여러분 과 공유 할 수 없습니다.제 가 공유 하고 싶 지 않 은 것 이 아니 라 정말 어렵 습 니 다.하지만 관심 이 있다 면 소스 코드 를 다운로드 할 수 있 습 니 다.소스 코드 에 있 는 sql 을 my sql 표 에 가 져 온 다음 phop 파일 에 설정 하고 수정 하면 제 가 잘 봉 인 된 것 이 아 닙 니 다.이 물건 의 재 활용 성 을 고려 할 때 너무 좋 지 않 기 때 문 입 니 다.다른 것 을 할 시간 이 없습니다.