JavaScript module pattern with example

Question

I can t find any accessible examples showing how two  or more  different modules are connected to work together   So  I d like to ask whether anyone has time to write an example explaining how modules work together

User · Answer

You can find Module Pattern JavaScript here http   www sga su module-pattern-javascript

User · Answer

I would really recommend anyone entering this subject to read Addy Osmani s free book    Learning JavaScript Design Patterns     http   addyosmani com resources essentialjsdesignpatterns book   This book helped me out immensely when I was starting into writing more maintainable JavaScript and I still use it as a reference  Have a look at his different module pattern implementations  he explains them really well

User · Answer

Here https   toddmotto com mastering-the-module-pattern you can find the pattern thoroughly explained  I would add that the second thing about modular JavaScript is how to structure your code in multiple files  Many folks may advice you here to go with AMD  yet I can say from experience that you will end up on some point with slow page response because of numerous HTTP requests  The way out is pre-compilation of your JavaScript modules  one per file  into a single file following CommonJS standard  Take a look at samples here http   dsheiko github io cjsc

User · Answer

In order to approach to Modular design pattern  you need to understand these concept first   Immediately-Invoked Function Expression  IIFE     function              Your code goes here          There are two ways you can use the functions  1  Function declaration 2  Function expression   Here are using function expression   What is namespace     Now if we add the namespace to the above piece of code then   var anoyn    function             What is closure in JS   It means if we declare any function with any variable scope inside another function  in JS we can declare a function inside another function   then it will count that function scope always  This means that any variable in outer function will be read always   It will not read the global variable  if any  with the same name  This is also one of the objective of using modular design pattern avoiding naming conflict   var scope    I am global   function whatismyscope         var scope    I am just a local       function func    return scope       return func    whatismyscope       Now we will apply these three concepts I mentioned above to define our first modular design pattern   var modularpattern    function            your module code goes here     var sum   0        return           add function                 sum   sum   1              return sum                     reset function                 return sum   0                                 alert modularpattern add           alerts  1 alert modularpattern add           alerts  2 alert modularpattern reset         alerts  0   jsfiddle for the code above   The objective is to hide the variable accessibility from the outside world   Hope this helps  Good Luck

User · Answer

I thought i d expand on the above answer by talking about how you d fit modules together into an application   I d read about this in the doug crockford book but being new to javascript it was all still a bit mysterious   I come from a c  background so have added some terminology I find useful from there   Html  You ll have some kindof top level html file   It helps to think of this as your project file   Every javascript file you add to the project wants to go into this  unfortunately you dont get tool support for this  I m using IDEA    You need add files to the project with script tags like this            lt script type  text javascript  src  app native MasterFile js    gt  lt  script gt           lt script type  text javascript  src  app native SomeComponent js    gt  lt  script gt    It appears collapsing the  tags causes things to fail - whilst it looks like xml it s really something with crazier rules   Namespace file  MasterFile js  myAppNamespace         that s it   This is just for adding a single global variable for the rest of our code to live in   You could also declare nested namespaces here  or in their own files    Module s   SomeComponent js  myAppNamespace messageCounter   function         var privateState   0       var incrementCount   function              privateState    1              return function  message            incrementCount              TODO something with the message                 What we re doing here is assigning a message counter function to a variable in our application   It s a function which returns a function which we immediately execute   Concepts  I think it helps to think of the top line in SomeComponent as being the namespace where you are declaring something   The only caveat to this is all your namespaces need to appear in some other file first  - they are just objects rooted by our application variable   I ve only taken minor steps with this at the moment  i m refactoring some normal javascript out of an extjs app so I can test it  but it seems quite nice as you can define little functional units whilst avoiding the quagmire of  this    You can also use this style to define constructors by returning a function which returns an object with a collection of functions and not calling it immediately

[javascript] JavaScript module pattern with example

Examples related to javascript

Examples related to module