Ken GPL Computer Blog: Javascript Arrays - Don't Reinvent the Wheel

There are several Javascript packages out there and one of the extremely useful ones is called UnderscoreJS.

I'm presuming that you installed NodeJS and you're familiar with RequireJS. If not, view those blogs that I linked. You'll also need some kind of editor; I recommend Sublime Text which is available for both Windows and Mac OS.

Create the following directory structure:

app\
js\lib\src\

Create this file, call it index.html, and save it in the root directory of your application.

<html>
<head>
<meta charset="utf-8">
<title>RequireJS, Underscore, Arrays</title>
</head>
<body>
<script src="http://requirejs.org/docs/release/2.2.0/comments/require.js" data-main="js/lib/src/config"></script>

<h1>RequireJS, Underscore, Arrays</h1>

<div id="ARRAY"></div>
<div id="FIRST"></div>
<div id="LAST"></div>
<div id="INDEXOF_B"></div>
<div id="LAST_INDEXOF_B"></div>
<div id="SIZE"></div>
<div id="UNIQ"></div>
<div id="ARRAY2"></div>
<div id="UNION"></div>
<div id="INTERSECTION"></div>

</body>
</html>

Create that config.js file under js/lib/src.

requirejs.config({

baseUrl: 'js/lib/src',
    paths: {
        'jquery': [
             '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min',
              '../lib/jquery-2.1.1.min'
        ],
        'underscore': 'http://underscorejs.org/underscore',
        'app': '../../../app'
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

Create a main.js file amd save it under the app directory. This is where we can demonstrate various UnderscoreJS Javascript functions for arrays.

require(['config', 'display'], function(config, display) {
var array = ['A', 'B', 'C', 'D', 'E', 'B', 'F'];
var first = _.first(array);
var last = _.last(array);
var indexOf = _.indexOf(array,'B');
var lastIndexOf = _.lastIndexOf(array,'B');
var size = _.size(array);
var uniq = _.uniq(array);

var array2 = ['F', 'A', 'C', 'T', 'S'];
var union = _.union(array, array2);
var intersection = _.intersection(array, array2);

display.showName("ARRAY", array);
display.showName("FIRST", first);
display.showName("LAST", last);
display.showName("INDEXOF_B", indexOf);
display.showName("LAST_INDEXOF_B", lastIndexOf);
display.showName("SIZE", size);
display.showName("UNIQ", uniq);
display.showName("ARRAY2", array2);
display.showName("UNION", union);
display.showName("INTERSECTION", intersection);
})

Finally, create a file called display.js, and save it under js/lib/src.

define(['underscore', 'jquery'], function() {
var showName = function(div, value) {

value = '<b>' + div + ':</b> ' + value;
div = '#' + div;
$(div).html(value);

};

return {
showName: showName
};

});

Run your server and view the results. Go to the UnderscoreJS page to see all of the other useful functions. Remember: If there is a Javascript package that makes coding easier, use it!

Have fun!

Tuesday, July 12, 2016

Javascript Arrays - Don't Reinvent the Wheel

No comments:

Post a Comment