模拟Quintus引擎框架编码

古城微笑少年丶 2022-07-24 08:24 128阅读 0赞

**最近看了Quintus引擎，感觉他的JS 架构做的不错，所以就自己模拟了一套。**

**其实，效果的话，没有效果，比较枯燥，但是他的JS de 格式写的着实不错，继承，重写一一用到，接下来看代码：**

**示例1：**

**创建index.html文件**

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
            <title>模拟Quintus引擎  de  JS</title>
            <style> body { padding: 0; margin: 0 } </style>
        </head>
    
        <body>
            这里是模拟JS
        </body>
        <script src="../../build/jquery.min.js"></script>
        <script src="../../build/underscore-min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/main-showBy.js"></script>
        <script> var By = mainBy().include("ShowBy"); By.input.csdn("bai"); </script>
    
    </html>

**PS：main.js、main-showBy.js的文件分别是我自己创建的。**

**不懂underscore-min.js的请移步：**[这里写链接内容][Link 1]

**main.js文件**

/* Simple JavaScript Inheritance * By John Resig http://ejohn.org/ * MIT Licensed. */
    // Inspired by base2 and Prototype
    (function() { 
        var initializing = false,
            fnTest = /xyz/.test(function() { 
                xyz;
            }) ? /\b_super\b/ : /.*/;
        // The base Class implementation (does nothing)
        this.Class = function() { };
    
        // Create a new Class that inherits from this class
        Class.extend = function(prop) { 
            var _super = this.prototype;
    
            // Instantiate a base class (but only create the instance,
            // don't run the init constructor)
            initializing = true;
            var prototype = new this();
            initializing = false;
    
            // Copy the properties over onto the new prototype
            for (var name in prop) {
                // Check if we're overwriting an existing function
                prototype[name] = typeof prop[name] == "function" &&
                    typeof _super[name] == "function" &&
                    fnTest.test(prop[name]) ?
                    (function(name, fn) { 
                        return function() { 
                            var tmp = this._super;
    
                            // Add a new ._super() method that is the same method
                            // but on the super-class
                            this._super = _super[name];
    
                            // The method only need to be bound temporarily, so we
                            // remove it when we're done executing
                            var ret = fn.apply(this, arguments);
                            this._super = tmp;
    
                            return ret;
                        };
                    })(name, prop[name]) :
                    prop[name];
            }
    
            // The dummy class constructor
            function Class() { 
                // All construction is actually done in the init method
                if (!initializing && this.init)
                    this.init.apply(this, arguments);
            }
    
            // Populate our constructed prototype object
            Class.prototype = prototype;
    
            // Enforce the constructor to be what we expect
            Class.prototype.constructor = Class;
            // And make this class extendable
            Class.extend = arguments.callee;
    
            return Class;
        };
    })();
    
    var mainBy = function(opts) { 
        var By = {};
    
        if (opts) {
            _(By.options).extend(opts);
        }
    
        By._aaa = function() { 
            console.log("AAA");
        }
    
        By._bbb = function() { 
            console.log("BBB");
        }
    
        By._ccc = function() { 
            console.log("CCC");
        }
    
        By.extend = function(obj) { 
            alert(obj);
            _(By).extend(obj);
            return By;
        };
    
        // Syntax for including other modules into By
        By.include = function(mod) { 
            _.each(By._normalizeArg(mod), function(m) { 
                m = mainBy[m] || m;
                m(By);
            });
            return By;
        };
    
        By._normalizeArg = function(arg) { 
            if (_.isString(arg)) {
                arg = arg.replace(/\s+/g, '').split(",");
            }
            if (!_.isArray(arg)) {
                arg = [arg];
            }
            return arg;
        };
    
        By.Evented = Class.extend({
            bind: function(event, target, callback) { 
                // Handle the case where there is no target provided
                if (!callback) {
                    callback = target;
                    target = null;
                }
                // Handle case for callback that is a string
                if (_.isString(callback)) {
                    callback = target[callback];
                }
    
                this.listeners = this.listeners || {};
                this.listeners[event] = this.listeners[event] || [];
                this.listeners[event].push([target || this, callback]);
                if (target) {
                    if (!target.binds) {
                        target.binds = [];
                    }
                    target.binds.push([this, event, callback]);
                }
            },
    
            trigger: function(event, data) { 
                if (this.listeners && this.listeners[event]) {
                    for (var i = 0, len = this.listeners[event].length; i < len; i++) {
                        var listener = this.listeners[event][i];
                        listener[1].call(listener[0], data);
                    }
                }
            },
    
            unbind: function(event, target, callback) { 
                if (!target) {
                    if (this.listeners[event]) {
                        delete this.listeners[event];
                    }
                } else {
                    var l = this.listeners && this.listeners[event];
                    if (l) {
                        for (var i = l.length - 1; i >= 0; i--) {
                            if (l[i][0] == target) {
                                if (!callback || callback == l[i][1]) {
                                    this.listeners[event].splice(i, 1);
                                }
                            }
                        }
                    }
                }
            },
    
            debind: function() { 
                if (this.binds) {
                    for (var i = 0, len = this.binds.length; i < len; i++) {
                        var boundEvent = this.binds[i],
                            source = boundEvent[0],
                            event = boundEvent[1];
                        source.unbind(event, this);
                    }
                }
            }
    
        });
    
        return By;
    
    }

**main-showBy.js文件**

mainBy.ShowBy = function(By) { 
    
        By.InputSystem = By.Evented.extend({
            init:function(){ 
                console.log("进入ShowBy的初始化方法");
            },
            csdn: function(name) { 
                console.log("进入ShowBy的By.InputSystem方法---" + name);
            },
            bindKey: function(key, name) { 
                By.input.keys[KEY_NAMES[key] || key] = name;
            }
    
        });
    
        By.input = new By.InputSystem();
        console.log("bai123__" + By);
    
        By.addClassBai = function(){ 
            console.log("进入ShowBy的addClassBai方法");
        }
    
        return By;
    }

--------------------

**示例2：**

<!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
            <title>模拟JS</title>
            <style> body { padding: 0; margin: 0 } </style>
        </head>
    
        <body>
            这里是模拟JS
        </body>
        <script src="../../build/jquery.min.js"></script>
        <script src="../../build/underscore-min.js"></script>
        <script src="js/main.js"></script>
        <script src="js/main-showBy.js"></script>
        <script src="js/main-Sprite.js"></script>
        <script> var By = mainBy().include("ShowBy,Sprite"); By.input.csdn("baiyu"); By.Paddle = By.Sprite.extend({ init: function() { console.log("进入Q.Paddle 的初始化方法"); }, setUp:function(){ console.log("进入Q.Paddle 的setUp()方法"); } }); By.init(); </script>
    
    </html>

**引入三个文件**

**（1）main.js文件**

/* Simple JavaScript Inheritance * By John Resig http://ejohn.org/ * MIT Licensed. */
    // Inspired by base2 and Prototype
    (function() { 
        var initializing = false,
            fnTest = /xyz/.test(function() { 
                xyz;
            }) ? /\b_super\b/ : /.*/;
        // The base Class implementation (does nothing)
        this.Class = function() { };
    
        // Create a new Class that inherits from this class
        Class.extend = function(prop) { 
            var _super = this.prototype;
    
            // Instantiate a base class (but only create the instance,
            // don't run the init constructor)
            initializing = true;
            var prototype = new this();
            initializing = false;
    
            // Copy the properties over onto the new prototype
            for (var name in prop) {
                // Check if we're overwriting an existing function
                prototype[name] = typeof prop[name] == "function" &&
                    typeof _super[name] == "function" &&
                    fnTest.test(prop[name]) ?
                    (function(name, fn) { 
                        return function() { 
                            var tmp = this._super;
    
                            // Add a new ._super() method that is the same method
                            // but on the super-class
                            this._super = _super[name];
    
                            // The method only need to be bound temporarily, so we
                            // remove it when we're done executing
                            var ret = fn.apply(this, arguments);
                            this._super = tmp;
    
                            return ret;
                        };
                    })(name, prop[name]) :
                    prop[name];
            }
    
            // The dummy class constructor
            function Class() { 
                // All construction is actually done in the init method
                if (!initializing && this.init)
                    this.init.apply(this, arguments);
            }
    
            // Populate our constructed prototype object
            Class.prototype = prototype;
    
            // Enforce the constructor to be what we expect
            Class.prototype.constructor = Class;
            // And make this class extendable
            Class.extend = arguments.callee;
    
            return Class;
        };
    })();
    
    var mainBy = function(opts) { 
        var By = {};
    
        if (opts) {
            _(By.options).extend(opts);
        }
    
        By._aaa = function() { 
            console.log("AAA");
        }
    
        By._bbb = function() { 
            console.log("BBB");
        }
    
        By._ccc = function() { 
            console.log("CCC");
        }
    
        By.extend = function(obj) { 
            console.log("进入父类的extend继承方法");
            _(By).extend(obj);
            return By;
        };
    
        // Syntax for including other modules into By
        By.include = function(mod) { 
            _.each(By._normalizeArg(mod), function(m) { 
                m = mainBy[m] || m;
                m(By);
            });
            return By;
        };
    
        By._normalizeArg = function(arg) { 
            if (_.isString(arg)) {
                arg = arg.replace(/\s+/g, '').split(",");
            }
            if (!_.isArray(arg)) {
                arg = [arg];
            }
            return arg;
        };
    
        By.Evented = Class.extend({
            bind: function(event, target, callback) { 
                // Handle the case where there is no target provided
                if (!callback) {
                    callback = target;
                    target = null;
                }
                // Handle case for callback that is a string
                if (_.isString(callback)) {
                    callback = target[callback];
                }
    
                this.listeners = this.listeners || {};
                this.listeners[event] = this.listeners[event] || [];
                this.listeners[event].push([target || this, callback]);
                if (target) {
                    if (!target.binds) {
                        target.binds = [];
                    }
                    target.binds.push([this, event, callback]);
                }
            },
    
            trigger: function(event, data) { 
                if (this.listeners && this.listeners[event]) {
                    for (var i = 0, len = this.listeners[event].length; i < len; i++) {
                        var listener = this.listeners[event][i];
                        listener[1].call(listener[0], data);
                    }
                }
            },
    
            unbind: function(event, target, callback) { 
                if (!target) {
                    if (this.listeners[event]) {
                        delete this.listeners[event];
                    }
                } else {
                    var l = this.listeners && this.listeners[event];
                    if (l) {
                        for (var i = l.length - 1; i >= 0; i--) {
                            if (l[i][0] == target) {
                                if (!callback || callback == l[i][1]) {
                                    this.listeners[event].splice(i, 1);
                                }
                            }
                        }
                    }
                }
            },
    
            debind: function() { 
                if (this.binds) {
                    for (var i = 0, len = this.binds.length; i < len; i++) {
                        var boundEvent = this.binds[i],
                            source = boundEvent[0],
                            event = boundEvent[1];
                        source.unbind(event, this);
                    }
                }
            }
    
        });
    
        return By;
    
    }

**（2）main-showBy.js文件**

mainBy.ShowBy = function(By) { 
    
        By.InputSystem = By.Evented.extend({
            init:function(){ 
                console.log("进入ShowBy的初始化方法");
            },
            csdn: function(name) { 
                console.log("进入ShowBy的By.InputSystem方法---" + name);
            },
            bindKey: function(key, name) { 
                By.input.keys[KEY_NAMES[key] || key] = name;
            }
    
        });
    
        By.input = new By.InputSystem();
        console.log("baiyu123__" + By);
    
        By.addClassBai = function(){ 
            console.log("进入ShowBy的addClassBai方法");
        }
    
        return By;
    }

**（3）main-Sprite.js文件**

mainBy.Sprite = function(By) { 
    
        By.SpriteSheet = Class.extend({
    
            init: function() { 
                console.log("进入Sprite的 By.SpriteSheet 初始化方法");
            },
            draw: function() { 
                console.log("进入Sprite的draw()方法");
            }
        });
    
        By.Sprite = By.extend({
            init: function() { 
                console.log("进入Sprite的 By.Sprite 初始化方法");
            }
    
        });
        //切勿混乱，一个是大写，一个是小写
        By.sprite = function(name,scenceObj){ 
            console.log("这里是mainBy.Sprite的带有参数的方法！" + name);
        }
    
        return By;
    
    }

--------------------

[Link 1]: http://www.css88.com/doc/underscore/