Language helpers

Language helpers are a set of jQuery plugins. They are described in the following sections.

$.Object

The $.Object plugin contains the following three useful methods:

  • same: It compares two objects
  • subset: It checks if an object is a set of another object
  • subsets: It returns the subsets of an object

same

The same method can compare two objects. It supports nested objects. We can also specify if the comparison is case sensitive or if we can skip a particular property comparison.

Let's paste the following code into the jquerymx_object.js file:

steal(
    'jquery/lang/object',
    function ($) {
        window.object_1 = {
            property_1: 'foo',
            property_2: {
                property_1: 'bar',
                property_2: {
                    property_1: 'Hello JMVC!'
                }
            }
        };

        window.object_2 = {
            property_1: 'foo',
            property_2: {
                property_1: 'bar',
                property_2: {
                    property_1: 'HELLO JMVC!'
                }
            }
        };
    }
);

In the console, run the following command:

$.Object.same(object_1, object_2);

It should return false.

Now try to ignore the case:

$.Object.same(object_1, object_2, {property_2: 'i'});

It should return true, since property_2 and all its children are compared with the ignore case flag.

To ignore the case in a particular property we can specify it as follows:

$.Object.same(object_1, object_2, {property_2: {property_2: { property_1: 'i'}}});

The result should be true as well.

$.Observe

The $.Observe plugin provides an observer pattern for the JavaScript objects and arrays.

Let's paste the following code into the jquerymx_observe.js file:

steal(
    'jquery/lang/observe',
    'jquery/lang/observe/delegate',
    function ($) {
        window.data = {
            accNumber: {
                iban: 'SWISSQX',
                number: 6987687
            },
            owner: {
                fName: 'Nicolaus',
                lName: 'Copernicus'
            }
        };

        window.oData = new $.Observe(data);

        oData.bind('change', function (e, attr, how, newVal, oldVal) {
            console.log('event: ', e, '| attribute changes: ', attr, '| how changes: ', how, '| new value: ', newVal, '| old value: ', oldVal);
        });
    }
);

In the console, run the following command:

oData.attr('accNumber.number'),

Next, run the following command:

data.accNumber.number;

The same number should be displayed.

Change the value of the number property using the following command:

oData.attr('accNumber.number', 123456);

Since we bound the anonymous function to the change event, which is emitted when any of the observable object property has changed, console.log with all passed information, should be displayed.

Please note that oData is a copy of data, so the command:

oData.attr('accNumber.number'),

Is different from:

data.accNumber.number;

$.String

The $.String plugin contains useful string methods.

Let's paste following code into the jquerymx_string.js file:

steal(
    'jquery/lang/string',
    'jquery/lang/string/deparam',
    'jquery/lang/string/rsplit',
    function ($) {

    }
);

deparam

This method converts URL parameters into an object literal.

In the console run the following command:

$.String.deparam('en=1&home=a3373dsf6wfd&page[main]=uy7887d'),

It should convert string into the following object:

{
    en: '1',
    home: 'a3373dsf6wfd',
    page: {
        main: 'uy7887d'
    }
}

$.toJSON

The $.toJSON plugin contains useful object methods.

Let's paste the following code into the jquerymx_tojson.js file:

steal(
    'jquery/lang/json',
    function ($) {
        window.object_1 = {
            property_1: 'foo',
            property_2: {
                property_1: 'bar',
                property_2: {
                    property_1: 'Hello JMVC!'
                }
            }
        };
    }
);

In the console, run the following command:

$.toJSON(object_1);

It should return a JSON representation of a given object.

$.Vector

The $.Vector plugin contains useful methods to create and operate on vectors.

Let's paste the following code into the jquerymx_vector.js file:

steal(
    'jquery/lang/vector',
    function ($) {

    }
);

In the console, run the following command:

new jQuery.Vector(1,2);

It should return a new Vector instance.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.99.71