JavaScript Modules : Quick Overview

As now most of the web application frameworks uses the modules so lets have a quick introduction what exactly is a module.

What is Module?:

Someone said- Good authors divide their books into chapters and sections; good programmers divide their programs into modules.

  • In JavaScript, the word “modules” refers to small units of independent, reusable code.  JavaScript modules export a value, rather than define a type. In practice, most JavaScript modules export an object literal, a function, or a constructor
  • Modules are highly self-contained with distinct functionality, allowing them to be shuffled, removed, or added as necessary, without disrupting the system as a whole
  • It is an object or collection of objects which can contain lots of logic inside it usually defined in its own file or a separate file.

For code implementations please visit to below links-

https://toddmotto.com/mastering-the-module-pattern/

https://www.codeproject.com/Articles/247241/Javascript-Module-Pattern

Advertisements

Bower VS NPM

If you are confused between Bower and NPM then this is definitely for you. In short Npm and Bower are both Project dependency management tools. Below are some basic differences between these two-

  • Used for-
    • NPM is most commonly used for managing Node.JS modules, but it works for the front-end too when combined with Browserify etc..
    • Bower is front-end Package Manager and used for managing front end components jQuery, Bootstrap and so on.
  • Dependency-
    • NPM does nested dependency tree means packages we added in our project can also be dependent on other dependencies and those can further have more dependencies and so on. So, NPM installs dependencies for each package separately, and as a result makes a big package dependency tree(node_modules\babel-core\node_modules\…) where there could be several version of the same package.  For client-side JavaScript this is unacceptable: you can’t add two different version for jQuery or any other library to a page.The reason many projects use both is that they use Bower for front-end packages and npm for developer tools like Yeoman, Grunt, Gulp, JSHint, CoffeeScript, etc.
    • Bower requires a flat dependency tree No nested versioning of packages. With Bower each package is installed once (jQuery will always be in the bower_components/jquery folder, regardless of how many packages depend on it) and in the case of a dependency conflict, Bower simply won’t install the package incompatible with one that’s already installed.

 

Programming is Easy…

 

How Logical Operators work in JavaScript?

Let’s understand the Logical Operators and how they work in JavaScript…

  1. Logical AND (&&)
  2. Logical OR (||)
  3. Logical NOT (!)

Logical operators are typically used with Boolean values but can also be used with non-Boolean values-

=> When values are Boolean then they return a Boolean value

=> When values are non-Boolean then they may return a non-Boolean value. In this case && and || operators actually return the value of one of the specified operands

LogicalOperators.PNG

LogicalOperators1.PNG

Programming is Easy…

 

What is ES-5, ES-6 or ES2015 and TypeScript? [ES = ECMAScript]

Before discussing ES5 or ES6 let’s discuss what actually is ECMAScript-

ECMAScript is a standard, JavaScript is an implementation of that standard. ECMAScript defines the standard and browsers implement it.

In a similar way, HTML specifications (most recently HTML5) are defined by the organising body and are implemented by the browser vendors. Different browsers implement specifications in different ways, and there’s varying amounts of support for different features.

  1. ES5-  ES5 is the JavaScript we know today and use in web applications. It does not require a build step to transform it into something that will run in today’s browsers.
  2. ES6 – Also called ES2015 is the next iteration of JavaScript with many enhanced features(http://es6-features.org) but it does not run in today’s browsers. So we need a transpiler like Babel that will export ES5 code means it will compile ES6 code to ES5 code that today’s browsers support and can be run easily in the today’s browsers.
  3. TypeScript – TypeScript is a typed superset of JavaScript that also compiles to plain JavaScript. This is pulling in features from ES6, ES7… Or future’s JavaScript. It help us to write safe JavaScript code means mistakes in JavaScript code can be noticed at development time due to it’s compile feature. As this is the superset of JavaScript so it contains JavaScript and some additional features as well.

 

We can view the all latest specification at-

ECMAScript – http://www.ecma-international.org/default.htm

ES2015 or ES6 – http://www.ecma-international.org/ecma-262/6.0/

ES2016 – https://www.ecma-international.org/ecma-262/7.0/

ECMA Proposals-  https://github.com/tc39/proposals

 

es5678.PNG

What is “this” value in JavaScript?

In JavaScript a function’s this keyword value is –

  1. determined by how a function is called. 
  2. never static and has a different value depending on how the function was invoked.

Below are the this values in different execution context- 

  • Global Context– In the global execution context (outside of any function), this refers to the global object, whether in strict mode or not.
  • Function Context – If code is not in strict mode, and because the value of this is not set by the call, this will default to the global object- In strict mode, however, the value of this remains at whatever it was set to when entering the execution context, so, in the following case, this will default to undefined 
    So, in strict mode, if this was not defined by the execution context, it remains undefined.
  • Custom value- To pass this value from one context to another we can use call or apply functionsWhere a function uses the this keyword in its body, its value can be bound to a particular object in the call using the call or apply methods which all functions inherit from Function.prototype

Can not find element using id having special character in jQuery ?

If you have special characters (!”#$%&'()*+,./:;?@[\]^`{|}~) in your HTML element’s name or ID then it can not be find using jQuery find method.  You have to escape the character with two backslashes \\.

For example, if you have an element with id=”foo.bar”, you can use the selector $(“#foo\\.bar”)

// Does not work:
$( "#some:id" )
// Works!
$( "#some\\:id" )
// Does not work:
$( "#some.id" )
// Works!
$( "#some\\.id" )

 

 

 

How to parse XML in JavaScript ?

If you are looking for how to parse XML in javascript then this article may can help you. Below is the basic concept for this-

<!DOCTYPE>
<html>
<head>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>

        var strXML = "<Students>" +
                        "<Student>" +
                            "<Name>Student 1</Name>" +
                            "<Class>Class 1</Class>" +
                         "</Student>" +
                         "<Student>" +
                            "<Name>Student 2</Name>" +
                            "<Class>Class 2</Class>" +
                        "</Student>" +
                     "</Students>";

        function parseXml(xml) {
            var parser = new DOMParser(strXML)
            var doc = parser.parseFromString(strXML, 'text/xml');

            var result = [];

            var arrTemp = doc.firstChild.childNodes;

            for (var i = 0; i < arrTemp.length; i++) {

                var tempObj = {};
                for (var j = 0; j < arrTemp[i].childNodes.length; j++) {
                    var node = arrTemp[i].childNodes[j];
                    tempObj[node.tagName] = node.textContent;
                }

                result.push(tempObj);
            }

            console.log(result);
        }

        window.onload = parseXml(strXML);
    </script>

</head>
<body>
</body>
</html>

XML to JSON

Programming is Easy…

When to use require and when to use define in Require.JS ?

Define :-  With define you register a module in require.js that you than can depend on in other module definitions or require statements i.e If you want to declare a module other parts of your application will depend on.

The define() function accepts two optional parameters (a string that represent a module ID and an array of required modules)
and one required parameter (a factory method). The return of the factory method MUST return the implementation for your module.

Using define() you are asking something like “run the function that I am passing as a parameter and assign whatever returns to the ID that I am passing but, before, check that these dependencies are loaded”.

Require:- With require you “just” load/use a module or javascript file that can be loaded by require.js

The require() function doesn’t have to return the implementation of a new module. Using require() you are saying something like “the function that I pass has the following dependencies, check that these dependencies are loaded before running it”.

The require() function is where you use your defined modules, in order to be sure that the modules are defined, but you are not defining new modules there.

Programming is Easy…