나는 최근에 불평했다. 모든 사람들은 웹 프론트 엔드가 몇 년 전과 비교하여 매우 무거워 졌다는 것을 알고 있습니다. 다양한 JS 프레임 워크, 다양한 객체 및 많은 프로젝트, 공공 모듈이 추출됩니다.
이 모듈의 UI 표시는 동일하며 차이점은 배경 논리입니다. 예를 들어, 회사 여행에서 사업을 할 때는 일반적으로 비용 센터의 JS 공개 모듈이 있습니다. 고객은 에어 티켓을 예약 할 때이 비용 센터를 작성합니다. 이 비용 센터는 온라인, 오프라인 및 앱과 같은 예약 끝에 배포되며 이후 단계에서 고객 회사와의 월별 정산에도 편리합니다.
우리는 또한 프로젝트가 커지고 복잡하며 SOA가되면 많은 문제가 발생한다는 것을 알고 있습니다. 웹의 이론과 마찬가지로 모든 프론트 엔드 데이터는 신뢰할 수 없으므로 다른 팀의 인터페이스 데이터는 동일하지 않습니다. 프로젝트가 어렸을 때, 그다지 자신감이 없었으며 논리 오류가 발생할 때만 로그를 기록 할 것입니다. 정상적인 비즈니스 프로세스는 일반적으로 거의 기록되지 않습니다. 결국 정보 로그는보기 흉하게 보이며 서버 대역폭을 소비하고 웹의 성능을 낮추는 것도 있습니다.
그러나 프로젝트는 크다. 언젠가 프로젝트에서 이상한 버그가 발생하면 불완전한 로그에 의존하고 마지막으로 계면을 육안으로 선으로 추적합니다. 그러나 매개 변수가 너무 많으며 인터페이스 매개 변수 데이터를 정확하게 복원하는 것은 불가능합니다. 그러나 인터페이스의 반환 문제라고 확신하지만 전체 메시지를 얻을 수는 없습니다. 현재 인터페이스 제공 업체를 찾을 수 없습니다. 그 당시 나는 무력했다. 모든 라인에 로그인하는 것이 더 낫다고 생각한다면 좋을 것입니다.
수업을 배우고 나면 녹음 프로세스 로그의 추세가 점점 더 인기가되었으며 결국 연초의 주요 행사도 발생했습니다. 웹 백엔드가 이와 같은 혼란스러운 방식으로 많이 말했다. 그래서 현재 프론트 엔드에 로그를 녹음 할 필요는 없습니까? 우리는 그것이 공개 JS 모듈이기 때문에이 모듈은 자체적으로 일부 방법을 캡슐화해야하며, 타사 프로그램이 다음과 같은 자체 텍스트 노드를 작동하도록하는 것은 절대 불가능하다는 것을 알고 있습니다.
코드 사본은 다음과 같습니다.
<!-세 번째 모듈->
회사 : <input type = "text"id = "Company"value = "xxx Co., Ltd." />
직원 이름 : <input type = "text"id = "username"value = "Zhang San" />
<! --->
<script type = "text/javaScript">
// 비용 센터
var CostCenter = (function () {
var Company = (Document.GetElementById ( "Company") || "") && document.getElementById ( "Company"). 값;
var username = (document.getElementById ( "username") || "") && document.getElementById ( "username"). value;
var result = {
getInfo : function () {
return {회사 : 회사, 사용자 이름 : username};
},
검증 : function () {
반환 부울 (회사 && 사용자 이름);
}
};
반환 결과;
}) ();
</스크립트>
운영을 단순화하기 위해 타사 UI는 회사 이름 및 직원 이름에 대한 UI 노드를 제공하고 CostCenter 클래스를 캡슐화하여 읽기 방법을 제공합니다. 예정된 프로그램은 CostCenter.getInfo 만 읽어야하며 캡슐화에도 역할을합니다.
그러나 문제는 여기서 발생합니다. 실제 프로젝트에서는 여러 가지 이유로 CostCenter에서 값을 얻을 수 없습니다. 물론 일반적인 UI의 버그 일 수도 있습니다.
그러나 그 당시에는 값이 실제로 얻어 졌는지 확실하지 않지만, 값이 얻어지지 않더라도 원칙적으로 주문 제출을 방지 할 수 없었습니다. 따라서 버그를 철저히 추적하기 위해 로그 센터 싱글 톤 클래스를 작성하여 로그를 기록합니다. 일반적으로 JS를 사용하여 로그를 기록하는 방법이 있습니다.
<1> ajax
이 방법은 생각하기 쉽지만 기본 xmlhttprequest를 사용하는 경우 브라우저 호환성을 고려해야합니다. 그러나 기본이 필요하지 않은 경우 jQuery와 같은 타사 프레임 워크에 의존해야합니다. 그러나 결국 jQuery를 사용하지 않는 많은 회사가 있으므로 실제 요구에 따라 사용해야합니다.
코드 사본은 다음과 같습니다.
// 로그 센터
var logcenter = (function () {
var result = {
정보 : 함수 (제목, 메시지) {
// ajax 작동
$ .get ( "http://xxx.com", { "title": title, "message": message}, function () {
}, "우편");
}
};
반환 결과;
}) ();
<2> 이미지
DOM에는 이미지라는 객체가 있으므로 배경 URL을 요청하기 위해 SRC를 동적으로 할당 할 수 있으며 동시에 제목과 메시지 정보를 URL로 전달해야합니다. Image.src의 동적 방법은 브라우저 호환성 문제를 고려할 필요가 없습니다.
코드 사본은 다음과 같습니다.
// 로그 센터
var logcenter = (function () {
var result = {
정보 : 함수 (제목, 메시지) {
// ajax 작동
$ .get ( "http://xxx.com", { "title": title, "message": message}, function () {
}, "우편");
},
info_image : 함수 (제목, 메시지) {
//영상
var img = new Image ();
img.src = "http://www.baidu.com?title=" + title + "& message =" + message + "& temp =" + (math.random () * 100000);
}
};
반환 결과;
}) ();
위의 내용은이 기사의 주요 내용이며, 앞으로도 깊이 논의 할 것입니다.