고급 퀘 스 트 6 - 전단 디자인 모드

3171 단어
구조 함수 모드, 혼합 모드, 모듈 모드, 공장 모드, 단일 모드, 구독 모드 의 범례 를 작성 합 니 다.
  • 구조 함수 모드
  • function Person(name, age) {
            this.name = name
            this.age = age
            }
    
            Person.prototype.sayName = function() {
                return this.name
            }
    
    var student = new Person("jack", 30)
    
  • 혼합 모드
  • var Person = function(name, age) {
        this.name = name
        this.age = age
    }
    
    Person.prototype.sayName = function() {
        console.log(this.name)
    }
    
    var Student = function(name, age, score) {
        Person.call(this, name, age)
        this.score = score
    }
    //Student.prototype = Object.create(Person.prototype)
    Student.prototype = create(Person.prototype)
    
    function create(parentObj) {
        function F(){}
        F.prototype = parentObj
        return new F()
    }
    
    Student.prototype.sayScore = function() {
        console.log(this.score)
    }
    
    var stu1 = new Student("jack", 18, 60)
    
  • 모듈 모드
  • var Person = (function() {
        var name = "jack"
        function sayName() {
            console.log(name)
        }
        return {
            name: name,
            sayName: sayName
        }
    }())
    
    Person
    
  • 공장 모델
  • function createPerson(name) {
            var person = {
                name: name
                }
            person.sayName = function() {
                    console.log(this.name)
                }
                return person
            }
    
    createPerson("mary").sayName()
    

    혹시
    function createPerson(name) {
        var person = {
            name: name,
            sayName: function() {
                console.log(this.name)
            }
        }
        return person
    }
    
    createPerson("mary").sayName()
    
  • 단일 모드
  • var People = (function(){
        var instance
        function init(name) {
            return {
                name: name
            }
        }
    
        return {
            createPeople: function(name) {
                if(!instance) {
                    instance = init(name)
                }
                return instance
            }
        }
    }())
    
    console.log(People.createPeople("jack"))
    console.log(People.createPeople("mary"))
    
  • 구독 모드 게시
  • var EventCenter = (function(){
        var events = {}
        function on(evt, handler) {
            events[evt] = events[evt] || []
            events[evt].push({handler: handler})
        }
    
        function fire(evt, args) {
            if(!events[evt]) {
                return
            }
            for(i=0; i

    게시 구독 모드 로 이벤트 관리자 쓰기
    var EventCenter = (function(){
        var events = []
    
        function on(evt, handler) {
            events[evt] = events[evt] || []
            events[evt].push({handler: handler})
        }
    
        function fire(evt, args) {
            if(!events[evt]) {
                return
            }
            for(i=0; i

    좋은 웹페이지 즐겨찾기