DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Jayant Raj Singh
Jayant Raj Singh

Posted on

I am not able to understand 'factory'

A few days ago I came across the following code

(function (factory) {
    var jQuery;
    if (typeof define === 'function' && define.amd) {
        // AMD (Register as an anonymous module)
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS
        try {
            jQuery = require('jquery');
        } catch(e) {}
        module.exports = factory(jQuery);
    } else {
        // Browser globals
        var _OldCookies = window.Cookies;
        var api = window.Cookies = factory(window.jQuery);
        api.noConflict = function() {
            window.Cookies = _OldCookies;
            return api;
        };
    }
}
Enter fullscreen mode Exit fullscreen mode

Can somebody please explain to me what is 'factory' and how it is being used in the above code.

I know factory functions are used to create objects but I am not able to understand how it is used here.

(This is my very first post here, so sorry for any mistakes)

Also, How to use emojis on dev.to

Top comments (5)

Collapse
 
somedood profile image
Basti Ortiz • Edited on

The answer to your question (at least I think so?)

I believe the factory function returns the object that came as a result of successfully require-ing 'jquery' in the try block (with a little bit of magic internally since the factory callback function was passed in as an argument to what seems to be an IIFE).

What the factory function returns (given a successfully loaded module via the require function in the try block) is then stored in module.exports, thus exporting 'jquery'.

TL;DR: What that code snippet does is export the jQuery library.

How to use emojis

For Chrome, you can focus on the text box you want to use an emoji for. Then you can right-click to bring up the context menu. You should be able to see an entry called Emoji at the top. Selecting that entry brings up the native Emoji Keyboard of your OS. If not, then you can try to update Chrome.

For Windows in general, you can focus on the text box and use the keyboard shortcut Win + . to bring up the native Emoji Keyboard of Windows 10. And voila! That's it. You can keep typing to run a search on all the emojis.

Collapse
 
webjayant profile image
Jayant Raj Singh

I understand what are you saying here.
Here is the whole code.

The first IIFE is taking factory as an argument, but where is the factory coming from.

jQuery does the same

Collapse
 
somedood profile image
Basti Ortiz

From my best efforts to understand the code, I think it has misplaced a parenthesis after the } in line 26. Adding the missing parenthesis and fixing the respective closing parentheses at line 163 should reveal that the factory function is defined by the argument to the first IIFE.

Honestly, I question that this code even works. The way the code has been formatted is so strange and obscure. I don't even know if it's a syntax error or just poor formatting.

Thread Thread
 
webjayant profile image
Jayant Raj Singh

The problem is with the way the code is formatted.


;(function(factory){
    ...
    ...
}(function (){
    ...
    ...
}))

the code formatted like above thus there is no error and the code works fine.

The only problem is that this type of formatting creates a lot of confusion (It took me two days, and your help in deciphering it)

this would have been a better approach

function factory (){
    ...
    ...
}

(function(factory){
    ...
    ...
})()
Thread Thread
 
somedood profile image
Basti Ortiz

Yup, agreed. Perhaps you could submit a pull request to format the code. That way, you can help people who are just as curious of the code understand it better. Contributions are always welcome (and needed) in the open-source world.

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout πŸ˜†