일반적으로 사용되는 프런트 엔드 개발 디자인 패턴은 무엇입니까?

프론트 엔드 개발 디자인 패턴에는 1. 모듈 패턴, 2. 생성자 패턴, 4. 혼합 패턴, 6. 구독-게시 패턴 등이 있습니다.

일반적으로 사용되는 프런트엔드 개발 디자인 패턴은 모듈 패턴, 생성자 패턴, 팩토리 패턴, 하이브리드 패턴, 싱글톤 패턴 및 구독입니다. - 릴리스 모드.

프런트 엔드 개발 디자인 패턴

모듈 패턴: # 🎜🎜 #

즉시 실행 함수 표현식에 정의된 변수 및 메서드는 외부 세계에서 접근할 수 없으며, 외부에 제공되는 인터페이스를 통해서만 "제한적으로" 접근할 수 있습니다. 🎜#

var Person = (function(){    
var name = "xin";    
var age = 22;    
function getName(){        
return name;
    }    
function getAge(){        
return age;
    }    
return {        
getName: getName,        
getAge: getAge
    }
})();
console.log(age); // 报错:age未定义
console.log(name); // 报错:name未定义
console.log(Person.age); // undefined
console.log(Person.name); // undefined只能通过Person提供的接口访问相应的变量
console.log(Person.getName()); // xin
console.log(Person.getAge()); // 22

Factory 패턴

function Person(name,age){    
this.name = name;    
this.age = age;
}
Person.prototype = {    
constructor: Person;
    printName: function(){        
console.log(this.name);
    },    printAge: function(){        
console.log(this.age);
    }
}var person = new Person('xin', 22);
person.printName(); // xin
person.printAge(); // 22

단일 케이스 패턴

function Person(name,age){    
this.name = name;    
this.age = age;
};
Person.prototype.printName = function(){    
console.log(this.name);
}function Student(name,age){
    //继承 Person 的属性
    Person.call(this,name,age);
}function create(prototype){    
function F(){};
    F.prototype = prototype;    
    return new F();
}
//让Student的原型指向一个对象,该对象的原型指向了Person.prototype,通过这种方式继承 Person 的方法
Student.prototype = create(Person.prototype);
Student.prototype.printAge = function(){    
console.log(this.age);
}var student = new Student('xin',22);
student.printName(); // "xin"

게시-구독 패턴

게시-구독 패턴은 개체 간의 일대다 종속 관계를 정의하는 관찰자 패턴이라고도 합니다. 객체의 상태가 변경되면 해당 객체와 관련된 모든 종속성이 모두 통보됩니다.

게시-구독 모델은 비동기 프로그래밍에서 널리 사용되며 다중 이벤트 처리의 대안입니다. 함수는 동일한 이벤트를 구독할 수 있습니다. 이벤트가 발생하면 해당 이벤트에 해당하는 여러 이벤트 처리 함수가 실행되어 객체 간에 하드 코딩된 알림 메커니즘을 더 이상 명시적으로 호출할 필요가 없습니다. 모듈 간의 결합 정도를 줄입니다. 비록 서로의 세부 사항을 알 수는 없지만 서로의 통신에 영향을 미치지는 않습니다. 🎜#DOM 이벤트는 DOM 노드의 이벤트를 모니터링하는 일반적인 게시-구독 모델입니다. dom 노드가 작동되면 해당 이벤트가 트리거되고 응답 함수가 실행됩니다. 이벤트 함수는 dom 노드에서 전혀 알 수 없으므로, 어떤 이벤트인지, 어떻게 트리거할지 걱정하지 말고 실행하면 됩니다. .

Custom event

SpecifyPublisher "publish-subscribe" 이 관계는 객체로 표현되고, 키는 이벤트 이름을 나타내며, 값은 메시지를 게시하는 구독자 명단, 캐시 목록 순회 및 구독자의 콜백 함수를 순서대로 실행하는 것과 동일한 이벤트 핸들러로 구성된 배열입니다

function Person(name, age){    
var person = new Object();
    person.name = name;
    person.age = age;
    person.printName = function(){        
    console.log(this.name);
    };
    person.printAge = function(){        
    console.log(this.age);
    }    
    return person;
}
var person = Person('xin',22);

실용 응용# 🎜🎜#

var Singleton = (function (){    
var instance;    
function init(){        
return {
        };
    }    return {        
    getInstance: function(){            
    if(!instance){
               instace = init();
            }            return instance;
        }
    };
})();

위 내용은 일반적으로 사용되는 프런트 엔드 개발 디자인 패턴은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!