Simple modularization of js based on jQuery

Keywords: Javascript JQuery

When many people cooperate to complete a web page, they often encounter the problem of the interaction of your js code. There are many modular front-end frameworks that should solve this problem. But I am not a front-end developer, those frameworks have not been used, only relatively familiar with jQuery, I want to use jQuery to solve this problem.

Firstly, there are two main aspects of interaction: one is duplication of function names defined in js code, which leads to coverage problems; the other is duplication of id, name, class and so on when js operates on page elements, which leads to wrong operation of objects.

For the first point, a Registration function is defined, and other custom methods are registered by calling the register function, which checks to see if the function already exists.For the second point, consider using div as a container (other label elements can also be used), a functional module is placed in a container, the JS of a module onLy operates on the elements of the corresponding container, and the module on ly interacts with the outside through the container (after modularization, a module on ly knows who its container is, and data transfer is on ly between modules and containers).

The following is the custom registration function $r, which has two parameters. The first parameter is the function module. It requires that the js code block of a function be written into a function and passed to the registration function. The second parameter is the module name string, which is separated by "." at multiple levels.

// Register function $r
window.$r = function(){
    var i, func, modelName, name, model, paramArr;
    func = arguments[0];
    modelName = arguments[1];
    if(typeof func != 'function'){
        console.error('The first parameter is not function');
        return;
    }
    if(typeof modelName != 'string'){
        console.error('The second parameter should be the module name string');
        return;
    }
    paramArr =  modelName.split('.');
    model = window;
    name = '';
    for(i=0; i<paramArr.length; i++){
        if(i == paramArr.length - 1){
            if(typeof model[paramArr[i]] != 'undefined'){
                console.error('Modular"' + modelName + '"Already exist');
                return;
            }
            model[paramArr[i]] = checkParamProxy;
            return checkParamProxy;
        }
        model = model[paramArr[i]] = model[paramArr[i]] || {};
        if(typeof model != 'object'){
            for(j=0; j<i; j++){}
            console.error('"' + name + paramArr[i] + '"No object');
            return;
        }
        name += paramArr[i] + '.';
    }
    
    function checkParamProxy($p){
        if(typeof $p == 'undefined'){
            console.error('Modular' + modelName + 'Need to pass in one jQuery Type parameters as containers');
            return;
        }
        if($p instanceof jQuery){
            return func.call($p, $p);
        }
        console.error('"' + $p + '"No jQuery object');
        return;
    }
}

Here is an example. The page code is as follows. There are two div s, container1 and container2, which are used as containers.

<html>
<head>
<meta charset="UTF-8"/>
<title>Register</title>
</head>
<body>
    <div id="container1" style="height: 100px;width: 100px;"></div>
    <div id="container2" style="height: 120px;width: 80px;"></div>
</body>
</html>

Register a js module that draws an inner tangent ellipse or circle, called graph.ellipse, and assign the jQuery object of container container1 as a parameter to graph.ellipse

// register graph.ellipse Modular
$r(function($c){ // $c Container jQuery Objects can also be passed through this To get
    $c.html('<div style="height: 100%;width: 100%; border: 2px solid #999999;border-radius: 50%;"></div>');
    
    $c.on('change', function(){
        var color = $c.data('color');
        $c.children().css({'border-color':color});
    })
    
    $c.trigger('loaded');
}, 'graph.ellipse');

graph.ellipse($('#container1')); // take container1 As a module container

In this way, a circle with a width of 100px is obtained.

In the graph.ellipse module, restrict operations to $c (in the example, $(' container1'), such as finding elements with $c.find(e|o|e) and adding elements with $c.append(content|fn), so as to ensure that they do not affect other modules. Module external interaction uses $c.trigger(type) and $c.on(type,fn) trigger binding event mechanism, such as $c.trigger('loaded') trigger a loaded load completion event in the example. The operation that needs to be performed after module loading is completed can be implemented externally with $('#container1').on('loaded',function(){// TODO graph. ellipse module loading is completed). To change the color of the circle outside, you can trigger the change event on the container with $(' container1'). data ({'color':'ae60'}). trigger ('change') to get a green circle.

Posted by Ghostgator on Sat, 11 May 2019 04:53:15 -0700

Programmer Group

Simple modularization of js based on jQuery

Hot Keywords