如何创建和实现自定义JavaScript库

Question

I am new to javaScript and am unsure how to go about creating a new js library and referencing this in another js file.

If I have a standalone file Utilities.js

var Utilities= 
{
   show: function(input)
   {
      alert(input);
   }
};

Am I missing something as to how a library should be defined standalone?

My second question is how to use that is sub-sequent js files. What I did so far is:

<script type="text/javascript" src="resources/Utilities.js"></script>

In my index.html. Is this enough to reference it as:

Utilities.show("Hello");

In any other java script file?

I tested it in this fashion and got and error "Utilities is not defined"

NOTE: This is just an example and not my full and practical purpose.

Answer 1

1. It is OK to use object literals, but you can define libraries using other patterns (module, revealing module, constructors, etc).

I recommend these links to understand primitives, scopes, closures, object literals, etc.

http://bonsaiden.github.io/JavaScript-Garden/

http://jsbooks.revolunet.com/

2. To call the method inside index.html you need to add a tag.

   <script> Utilities.show("Hello"); </script>

But this approach it's not recommended. Instead of it, you can create a new JS file to run your library code.

<script type="text/javascript" src="resources/Utilities.js"></script> <script type="text/javascript" src="resources/main.js"></script>

In main.js

Utilities.show("Hello");

Hope it helps.

Answer 2

Yes, including that Javascript file with that global variable declared is enough to call your methods this way Utilities.show("Hello"); from another Javascript file loaded after Utilities.js or inside a <script></script> section of your html.

But you can actually improve it a little, following the module pattern and exposing only the functions you really need to the global scope (you'll likely write some functions that the users of your library should not call directly, this allows you to do it in a clean way):

var Utilities=Utilities||(function () {

   //Accessible only here
   var privateArray=[];

   //Cannot be called from outside this function
   var privateFunction=function(){
   }

   //Return only what must be publicly accessible, in this
   //case only the show() method
   return {
      show: function(input){
         privateFunction();
         alert(input);
      }
   }
})();

That (function () { /* Code */})(); , defining a new scope for your code will also avoid name clashes with other global javascript object/functions.

Answer 3

Given the fact that you gave, within yout question, zero context of what you're trying to achieve, the best answer to your original question is that it depends .

If you just need a bunch of files and you're done (like in your example, Utilities.js and a few more) then you're ok with the way you're heading to.

But of course, you'll allways want to scale your front end and thus you should adhere to some architectural pattern. So, if you're building a client side (browser-side) application, then you should really implement your libraries using the module pattern, and begin your project from a good project example / scaffold.

On the other hand, if you're rendering the html on server (eg you're using PHP to render the final html file that will be sent to browser) and you just need some thin functionality in the browser, the way you begun can be okay if you're careful. Also, you can still implement the module pattern here too, although I strongly suggest that you should make use of namespacing to have a clear separation of concerns.

Answer 4

In browser based javascript you can't just call functions from different files yet. In Es6 there are ways. But not yet. Which mean just because you have some variable or function etc then you cant reference it automatically in another file.

Unless both files are loaded into one html and are loaded in order.

Alternatively you could run task runner like grunt and 'merge' them upon each build.

Javascript doesnt have special concept of library, in es6 it's a little different, everything is an object.

What you are doing is just creating an object. and yes it will work.