JavaScript 고급 프로그래밍 학습 노트 js 고급 기술_기본 지식

Chapter 18 고급 기술
1. 고급 함수
1.1 범위 안전 생성자
① new 연산자를 사용하지 않고 생성자를 직접 호출하면 이 객체의 늦은 바인딩으로 인해 전역에 매핑됩니다. 개체 창으로 인해 개체 속성 오류가 창에 추가됩니다.

코드 복사 코드는 다음과 같습니다.

함수 Person(이름,나이,직업) {
this.name = 이름;
this.age = age;
this.job = job;
}
Var person = Person("제이",29,"가수") ; // 창 개체에 속성이 추가됩니다.

②범위 안전 생성자

코드 복사 코드는 다음과 같습니다.

함수 Person(이름, 나이, 직업){
if(이 인스턴스 of Person){
this.name = 이름
this.age = age
}else; return new Person(name,age);
}
}

③위의 범위 안전 생성자를 사용하여 패턴 상속을 도용하고 프로토타입 체인이면 이 상속이 깨질 가능성이 높습니다.
□ 이 문제는 생성자 훔치기가 프로토타입 체이닝이나 기생 합성과 결합되면 해결될 수 있습니다.

코드 복사 코드는 다음과 같습니다.

기능 다각형(측면){
if(this 인스턴스ofPolygon){
this.sides = sides;
this.getArea = function{return 0;}
}else{
return new Polygon(sides);
}
function Rectangle(width,height){
Polygon.call(this,2);
this.width = width
this.height = height; getArea = function (){
return this.width * this.height;
}
Rectangle.prototype = new Polygon()
var ect = new Rectangle(5, 10);
alert(ret.sides); //2


1.2 지연 로딩 함수
① 지연 로딩은 함수 실행 분기가 한 번만 발생함을 의미합니다. 언제. 첫 번째 호출 중에 함수는 적절한 방식으로 실행되는 다른 함수로 덮어쓰므로 원래 함수에 대한 호출은 실행 분기를 거칠 필요가 없습니다.
■장점:

□실제로 함수가 호출될 때만 실행되는 적절한 코드.
□이 함수에 대한 첫 번째 호출은 추가 두 번째 함수 호출로 인해 약간 느려지지만, 후속 호출은 여러 조건을 피하기 때문에 빠릅니다.




코드 복사

코드는 다음과 같습니다. function create XHR(){ if(typeof XMLHttp 요청 != "정의되지 않음"){

createXHR = function(){

return new XMLHttpRequest()
}
}else if(typeof ActiveXObject != "정의되지 않음") {
createXHR = function(){
if(typeof 인수.callee.activeXString != "string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0" ,"MSXML2 .XMLHttp"];
for(vai I = 0, len = versions.length; I < len; i ){
try{
Var xhr = new ActiveXObject(version[i] );
Arguments.callee.activeXString = version[i];
Return xhr;
}catch(ex){
//skip
}
}
return new ActiveXObject(arguments.callee.activeXString);
};
}else{
createXHR = function(){
throw new Error("사용 가능한 XHR 개체가 없습니다."); 🎜>} ;
}
return createXHR();
}


1.3 함수 바인딩
① 함수 바인딩 함수를 생성하려면 특정 매개변수를 지정하면 됩니다. 환경 다른 함수를 호출하십시오.
②간단한 바인딩() 함수는 함수와 환경을 받아들이고, 모든 매개변수를 그대로 전달하면서 주어진 환경에서 주어진 함수를 호출하는 함수를 반환합니다.

코드 복사

코드는 다음과 같습니다. 함수 바인딩(fn, context){ return function(){ return fn.apply(context, Arguments); };

}

③Bound 함수는 일반 함수보다 오버헤드가 더 많습니다. 여러 함수 호출로 인해 약간 느려지므로 필요한 경우에만 사용하는 것이 가장 좋습니다.
1.4 함수 커링
정의: 하나 이상의 매개변수 세트를 사용하여 함수를 만드는 데 사용됩니다. 함수 커링에 대한 기본 접근 방식은 함수 바인딩과 동일합니다. 즉, 함수를 반환하려면 클로저를 사용하세요. 둘 사이의 차이점은 함수가 호출될 때 반환 함수도 일부 들어오는 매개 변수를 설정해야 한다는 것입니다.

코드 복사

코드는 다음과 같습니다.

function bin(fn, context){
var args = Array.prototype.slice.call(arguments, 2);
return function(){
var innerArgs = Array.prototype .slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return fn.apply(context,finalArgs)
}

2. 고급 타이머
①JavaScript는 단일 스레드 프로그램이며 타이머는 간격 후에 대기열에 코드를 추가합니다.
②코드 세트를 실행한 후 페이지의 다른 처리를 수행할 수 있도록 짧은 시간 동안 JavaScript 프로세스가 반환됩니다.
2.1 타이머 중복
①setInterval()은 이 타이머에 대한 다른 코드 인스턴스가 없는 경우에만 타이머 코드를 대기열에 추가합니다.
□일부 간격은 건너뜁니다.
□여러 타이머 코드 실행 간격이 예상보다 짧을 수 있습니다.
②setInterval()의 두 가지 단점을 피하고 연결된 setTimeout() 호출을 사용하십시오.

코드 복사 코드는 다음과 같습니다. :

setTimeout(function(){
//처리
if(조건){
setTimeout(arguments.callee, 간격);
}
} , 간격);

2.2 항복 프로세스
① JavaScript 장기 실행 스크립트 제한 사항: 코드가 특정 시간 이상 또는 특정 수의 명령문 이상 실행되면 더 이상 실행되지 않습니다. .
②기능을 완료하는 데 200ms 이상이 걸리는 경우 타이머를 사용할 수 있는 일련의 작은 작업으로 나누는 것이 가장 좋습니다.
3Array Blocking 기술: 처리할 항목에 대한 대기열을 만든 후 타이머를 사용하여 처리할 다음 항목을 꺼낸 후 다른 타이머를 설정합니다.

코드 복사 코드는 다음과 같습니다.

함수 청크(배열, 프로세스, 컨텍스트) {
setTimeout(function(){
var item = array.shift();
process.call(context,item);
if(array.length>0){
setTimeout (arguments. callee, 100);
}
}
}

2.3 함수 조절
①DOM 작업은 DOM이 아닌 상호 작용보다 더 많은 메모리와 CPU 시간을 필요로 합니다. DOM 관련 작업을 너무 많이 수행하면 브라우저가 중단되거나 충돌이 발생할 수 있습니다.
②기능 조절 아이디어: 일부 코드는 중단 없이 계속 실행될 수 없습니다. 🎜>
코드 복사

코드는 다음과 같습니다. var processor = { timeoutId : null, / /실제 처리 methodperformProcessing: function(){

//실제 실행 방법

},
//초기 처리 호출 방법
process: function(){
clearTimeout(this. timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){
that.performProcessing();
},100);
//실행 시작
Processor.process();
□단순 모드
function throttle(method,context){
clearTimeout(mehtod.tId); tId = setTimeout(function(){
method.call(context);
},100);
}


3. 이벤트는 디자인입니다. 느슨하게 결합된 코드를 생성하는 기술인 관찰자(observer)라는 패턴입니다.
□객체는 객체의 수명주기에서 흥미로운 순간이 도래했음을 나타내는 이벤트를 게시할 수 있습니다.
□다른 객체는 객체를 관찰하고 흥미로운 순간을 기다릴 수 있습니다. 와서 코드를 실행하여 응답합니다.
②관찰자 패턴은 주체(subject)와 관찰자(observer)라는 두 가지 유형의 객체로 구성됩니다.
□주체는 이벤트 게시를 담당하며, 관찰자는 이러한 이벤트를 구독하여 주제를 관찰합니다.
□주체는 관찰자에 대해 아무것도 모르며, 관찰자가 없어도 독립적으로 존재할 수 있고 정상적으로 기능할 수 있습니다.
③사용자 정의 이벤트: 이벤트를 관리하는 개체를 만들고 다른 개체가 해당 이벤트를 수신할 수 있도록 합니다.

코드 복사


코드는 다음과 같습니다.

function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor : EventTarget,
addHandler : function(type,handler){
if(typeof this.handlers[type] == "정의되지 않음"){
this.handlers[유형] = [];
}
this.handlers[유형].push(handler);
},
fire : function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length; ihandlers[i](event);
}
}
},
removeHandler : function(type, handler){
if(this.handlers[type] instanceof Array){
var handlers = this.handlers[ 유형];
for(var i=0,len=handlers.length; iif(handlers[i] === handler){
break;
}
}
Handlers.splice(i,1);
}
};

④使useEventTarget类型 의 사용자 정의 이벤트:

复主代码 代码如下:

function handlerMessage(event){
alert("메시지 수신:" event.message);
}
//创建一个新对象
var target = new EventTarget();
//添加一个事件处理程序
target.addHandler("message",handleMessage);
//触发事件
target.fire({type:"message",message:"hello world!"});
//删除事件处理程序
target.removeHandler("message",handleMessage);

⑤使用实例

复代码 代码如下:

function Person(이름,나이){
eventTarget.call(this);
this.name = 이름;
this.age = 나이;
}
inheritPrototype(Person, EventTarget);
Person.prototype.say = function(message){
this.fire({type:"message", message:message});
};
function handlerMessage(event){
alert(event.target.name "says: " event.message);
}
//创建新person
var person = new Person("Nicholas",29);
//添加一个事件处理程序
Person.addHandler("message",handleMessage);
//지금 1만 가지 방법, 它触发消息事件
person.say("안녕하세요");

4.拖放
功能：①拖放②添加了자정사례

复主代码 代码如下:

var DragDrop = function(){
var dragdrop = new EventTarget();
var 드래그 = null;
var diffX = 0;
var diffY = 0;
function handlerEvent(event){
//获取事件和对象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//确정사件类型
switch(event.type){
case "mousedown" :
if(target.className.indexOf("draggable")>-1){
끌기 = 대상;
diffX = event.clientX - target.offsetLeft;
diffY = event.clientY - target.offsetTop;
dragdorp.fire(
{
type:"dragstart",
target : dragging,
x : event.clientX,
y : event.clientY
}
);
휴식;
case "mousemove" :
if(draging !== null){
//获取事件
event = EventUtil.getEvent(event);
//指定位置
draging.style.left = (event.clientX - diffX) "px";
draging.style.top = (event.clientY - diffY) "px";
//触发自정义事件
dragdrop.fire(
{
type : "drag",
target : dargging,
x : event.clientX,
y : event.clientY
}
);
}
휴식;
case "mouseup" :
dargdorp.fire(
{
type : "dragend",
target : dragging,
x : event.clientX,
y : event .clientY
}
);
끌기 = null;
휴식;
}
}
//공공共接구
dragdrop.enable = function() {
EventUtil.addHandler(document, "mousedown", handlerEvent);
EventUtil.addHandler(document, "mousemove", handlerEvent);
EventUtil.addHandler(document, "mouseup", handlerEvent);
};
dragdrop.disable = function(){
EventUtil.removeHandler(document, "mousedown", handlerEvent);
EventUtil.removeHandler(document, "mousemove", handlerEvent);
EventUtil.removeHandler(document, "mouseup", handlerEvent);
};
드래그 드롭 반환;
}();

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.