组件的封装方法比较高级方法★★★★★★★

Posted 2021-03-22 shimily

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件的封装方法比较高级方法★★★★★★★相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的封装</title>
    <style type="text/css">
        .main{ width: 500px; height: 500px; border: red 1px solid; margin: 0 auto;  text-align: center; }
        .cover{margin: 10px auto;}
        .btn{margin: 0 auto;padding: 2px 20px; border: red 1px solid; text-align: center; color: #000; cursor: pointer;}
    </style>
</head>
<body>

    <div class="main box">
        <div class="cover">
            <img src="images/guagua-cover3.png" class="pictureOver" alt="">
        </div>
        <div class="anniu">
            <span class="btn close">关闭</span>
            <span class="btn open">打开</span>
        </div>
    </div>

<script src="https://act.mcake.com/fangli/2019/wap/commonjs/jquery.min.js"></script>
<script src="js/Scratch.js"></script>
<script type="text/javascript">

/*实例化方法*/
var scratch = new Scratch({
    canvasId: ‘box‘,
    close:".close",
    open:".open",
    cover:".cover",
    cursor: {
        x: ‘-20‘,
        y: ‘-20‘
    },
    radius: 20,
    nPoints: 1000,
    percent: 30,
    pointSize: { x: 5, y: 5},
    callback: function () {/*刮刮之后的函数*/
        console.log("回调函数");
    }
});

</script>
</body>
</html>

js:

     var Scratch = (function () {

    /**
     * Merge properties between two objects
     * @param obj1
     * @param obj2
     * @returns {{}}
     */
    function mergeOptions(obj1, obj2){
        var obj3 = {};
        for (var key in obj1) { obj3[key] = obj1[key]; }
        for (var key in obj2) { obj3[key] = obj2[key]; }
        return obj3;
    }

    /**随机函数
     * Generate a random number
     * @param min
     * @param max
     * @returns {Number}
     */
    function randomPoint(min, max) {
        var random = Math.abs(Math.random()*(max - min) + min);
        return random = parseInt(random.toFixed(0), 10);
    }

    /**
     * Scratch constructor
     * @param options
     * @constructor
     */
    var Scratch = function(options) {
    
        this.cursor = {
            png: ‘‘, // Modern browsers
            cur: ‘‘, // for IE
            x: 0,
            y: 0,
            default: ‘auto‘
        };
        this.pointSize = {
            x: 5,
            y: 5
        };
        this.defaults = {
            canvasId: ‘‘, // Canvas id
            open:"",
            cover:"",
            cursor: this.cursor, // Custom pointer
            sceneWidth: 302, // Canvas width
            sceneHeight: 60, // Canvas height
            radius: 40, // Radius of scratch zone
            nPoints: 10, // n points for clear canvas
            pointSize: this.pointSize,
            percent: null,
            callback: null
        };
        
        this.options = mergeOptions(this.defaults, options); /*此处使得可以直接获得this.options.canvasId*/
        this.options.cursor = mergeOptions(this.cursor, options.cursor);
        this.options.pointSize = mergeOptions(this.pointSize, options.pointSize);
         console.log(this.options.canvasId);
        // init Scratch
        this.init();
    };

    Scratch.prototype.init = function () {
        var _this = this; // Save the "this" :)

        console.log("初始化成功");
        console.log(this.options.btn);
         console.log(this.options.cover);
         /*打开*/
        $(this.options.open).click(function(){
            _this.show();
        });
        /*关闭*/
        $(this.options.close).click(function(){
            _this.hide();
        });
        };


    //显示
    Scratch.prototype.show = function() {
        console.log("22");
    
        $(this.options.cover).fadeIn(500);

        this.options.callback();
    };
    //隐藏
    Scratch.prototype.hide = function() {
        $(this.options.cover).fadeOut(200);
        
        this.callback(this.options.callback);
    };
    //回调
    Scratch.prototype.callback = function(callback) {
        if (callback != null && this.percent >= this.options.percent) {
            callback();
        }
    };

    return Scratch;
})();

技术图片

以上是关于组件的封装方法比较高级方法★★★★★★★的主要内容，如果未能解决你的问题，请参考以下文章

类的高级概念

微信小程序自定义组件的使用以及调用自定义组件中的方法

如何快速封装Jquery小组件？例如去掉字符串中的所有空格，封装和使用都比较简单

js组件封装，调用的方法怎么写

Vue组件之全局组件与局部组件