如何用js造轮子

写了一个非常通俗易懂的造轮子的方法

 

<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>

function cake($c) {
    this.c = $c;
    this.init();
}
cake.prototype = {                                                       // 也可以var p = cake.prototype，后边都是p.init=function(){}; p.w1=function(){}
　　constructor: cake,
    init: function() {
        this.w1();
        this.w2();
        this.w3();
    },
    w1: function() {
        this.c.css('width', '200');
    },
    w2: function() {
        this.c.css('height', '200');
    },
    w3: function() {
        this.c.css('border', '1px solid red');
    }
}
$('.wrap').each(function() {
    new cake($(this));
})

 

---

 补充一个

.active {
    color:red;
}

 

<button class="btn">cilck</button>
<p class="active">aaaaaa</p>
<script src="js/main.js"></script>
<script>
	let line = new Line();
</script>

main.js

class Line {
    constructor () {
        this.btn = this.$('.btn');
        this.pTxt = this.$('p');
        this.init();
    }
    init () {
        this.btnEvent();

    }
    // 选择器
    $ (select) {
        return document.querySelector(select);
    }

    // btn点击事件
    btnEvent () {
        /*this.btn.addEventListener('click', e => {
            e.preventDefault();
            this.pTxt.innerHTML = 'bbbbbbbbb'
        });*/
        this.btn.addEventListener('click', function(e) {
            e.preventDefault();
            this.pTxt.classList.toggle('active');
        }.bind(this));
    }
}

 

　　

 

转载于:https://www.cnblogs.com/futai/p/6640595.html