JavaScript-工厂模式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript-工厂模式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1618字，纯文字阅读大概需要3分钟。

内容图文

工厂模式

• 将new操作单独封装
• 遇到new时，就要考虑该是否使用工厂模式

示例

当你去购买汉堡，直接点餐，取餐，不会自己亲手做

商店要“封装”做汉堡的工作，做好直接卖给买者

class Product {
    constructor(name) {
        this.name = name
    }
    init(){
        alert('init')
    }
    fun1(){
        alert('fun1')
    }
    fun2(){
        alert('fun2')
    }
}

class Creator {
    creat(name) {
        return new Product()
    }
}

// 测试
let creat = new Creator()
let p = creat.creat('p1')
p.init()
p,fun1()

工厂模式应用场景

jQuery-$('div')

class jQuery {
    constructor(selector) {
        let slice = Array.prototype.slice
        let dom = slice.call(document.querySelectorAll(selector))
        let len = dom ? dom.length : 0
        for (let i = 0; i < len; i++) {
            this[i] = dom[i]
        }
        this.length = len
        this.selector = selector || ''
    }
    append(node) {

    }
    addClass(name) {

    }
    html(data) {

    }
    // 此处省略若干 API
}
window.$ = function (selector) {
    return new jQuery(selector)
}

// 测试代码

var $p = $('p')
console.log($p)
console.log($.addClass)

React.createElement

react如何做？

//jsx语法
var profile = <div>
    <img src="avatar.png" className="profile" />
    <h3>{[user.firstName,user.lastName].join('')}</h3>
</div>

/*react手写dom*/
var profile = React.CreateElement("div",null,
    React.CreateElement("img",{src: "avatar.png", className: "profile"}),
    React.CreateElement("h3", null,[user.firstName, user.lastName].join(" "))
)

/*react内部代码*/

class Vnode(tag, attrs, children) {
    // ...省略内部代码...
}
React.CreateElement = function (tag, attrs, children) {
    return new Vnode(tag, attrs, children)
}

vue异步组件

Vue.component('asycn-example', function (reslove, reject) {
    setTimeout(function() {
        reslove({
            template: '<div>I am async!</div>'
        })
    })
})

设计原则验证

• 构造函数和创建者分离
• 符合开饭封闭原则

内容总结

以上是互联网集市为您收集整理的JavaScript-工厂模式全部内容，希望文章能够帮你解决JavaScript-工厂模式所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端