I'm not new to web dev but I was just wondering if you guys have some advice for me to improve:
Always when I write js or jQuery I write all the code like this in the <head> on my page:
<script>
$(document).ready(function() {
//All my functions and animations goes here…
});
</script>
Now, when I look around the web I see that most people have their functions and animations in a separate ".js"-file. And they often create classes aswell.
How does that work? What is the advantage of creating classes and have your functions in a separate file?
Thanks, VG
Advantages of putting your javascript into a separate file:
-
Reuse on multiple pages - You can more easily reuse the same javascript functions on multiple pages without having multiple separate copies of the code.
-
More efficient caching - The browser can much more efficiently cache your javascript which can lead to faster page load times. When using an external JS file, it can be loaded upon first use and then retrieved from the browser cache for all subsequent page loads that use that same JS file.
-
Separation of code from HTML - You get better separation of the different types of content on the page. The visual designer can work on the HTML while the software developer can work on the javascript and they are not working in the exactly same file.
Note: for performance reasons, you don't want to have a lot of small, separate external JS files as it takes longer to load lots of small JS files than it does one larger JS file.
Structuring code into classes/objects can have the following advantages:
-
Organization - It forces the developer to organize their code into blocks of functionality where you have an object with a given set of methods and properties. For anything other than a trivial project, this is a much cleaner way or organizing things than just a big list of javascript functions.
-
Encapsulation - Object oriented design causes you to put data into objects where it's much clearer who owns the data, who modifies the data, what it's lifetime is and what methods exist to modify the data. In addition, some data can be encapsulated inside the object so it can only be modified via the desired methods (not mucked with directly).
-
Testing - it can be much easier to write test suites for code organized into objects, methods and properties.
-
Self documenting - Code organized into objects, methods and properties is general much more self-documenting that a long list of procedures.
-
Modularity - It is typically easier to break object-oriented code into reusable modules than code that is not organized this way.
-
Extensibility - A good object oriented design can be much easier to extend and enhance through things like sub-classing and method overrides than straight procedural code.
-
Maintainability - For all the above reasons, good object oriented code can be easier to maintain.
FYI, many of the advantages of object oriented thinking and design can be found without using literal classes (which javascript doesn't even really have). It's more a matter of how you design and implement your code than it is a particular language syntax feature. For example, you can have an object oriented design in plain C which has no specific language concept of a class or object. In javascript lots of language elements are objects with extensible properties and methods so it's even easier to do object oriented design in javascript (in fact, it's hard to avoid doing it) because there are already objects all around you (the window object, all the DOM objects, etc...).
Menu
345
