I recently read the discussion https://stackoverflow.com/questions/62617/whats-the-best-way-to-separate-php-code-and-html
I am facing a similar dilemma.
Currently working on a WordPress website which has a LOT of sliders, animated dropdowns, forms and other components. Each of component is used multiple times throughout the website, so I've created a PHP file for each of these components and I use include to insert them wherever they are required.
Now the file I am including contains HTML & JS {for initializing control}
And finally when I looked at the generated html page in browser, it was chaotic! HTML & JS mixed everywhere!
I wanted to know if its better to include everything in one big JS file and include it on top of every page or its more efficient to have small JS blocks in the section?
In my opinion, if the HTML/JS is valid, there's nothing wrong with it being a bit messy - the end user will never see it anyway. As for what's best from a design point of view, it really depends on the situation.
Personally, I think it's alright to have a big JS file that's included in every page, but some people prefer to output the code in small blocks where it's needed. Ultimately, it really depends on what the program is and what works best for you.
If the JS code is targeted to just a particular section or page i think it is better to include it in page itself instead of a separate file but if it is meant to be used in multiple places then use a separate file as it will also be easier to maintain it that way.
Related
I've just stepped into a new field of HTML designing of websites. I'm using HTML, CSS, jQuery, JavaScript for designing purpose. I've designed one website using above technologies. It has almost forty(40) webpages of HTML design. Now the requirement changes in a design I've created are coming from client. For making those changes I've to make the change in almost all the files. This has become a headache for me. This is a very tedious job. Now I want to reuse the some HTML code in every file. Means Left menu should contain in a separate HTML file, Top Menu should contain in a separate HTML file, Footer menu should contain in a separate HTML file, Right menu should contain in a separate HTML file, etc. In short I want this common code in separate files and I should be able to include all of these files in every HTML file. So that I can do only the body of HTML page in different HTML files. Also the CSS and jQuery files should also be reusable. But I don't want to use any server side technology for including these files. SO can anyone help me in how to achieve this reusability and extensibility of a HTML code? Thanks in advance.
Use jquery, or make your pages PHP and just use one of these functions in php tags where you want the common parts, or pages.
include()
include_once()
require()
require_once()
Take a look at this for some more info on how to use, or do some easy quick google searches.
Edit: Here is a JQuery implementation then, which is all executed in the browser:
Inside some Script tags:
$(document).ready(function(){
$.get( "test.html" );
});
It follows the syntax on this page. Also, take a look at W3school's jquery tutorial. Also, you might want to look at this page at W3school to see how to add the contents of the html page where you want to.
The simplest way to share HTML across pages are Server Side Includes. Your user name seems to imply you know your PHP, so this would be the easiest way to handle it (use PHP). If you absolutely can't have it be a server-side solution, you can use JS to handle it instead.
A more complex, but likely preferred way to handle it is to use a template engine. Most Content Management Tools include just that. Wordpress would be one of the more common ones out there.
As for your CSS and JS, those should already be in separate files and you should be linking to them from within each HTML page.
I guess what I'm asking is that if grouping JavaScript is considered good practice, why don't more websites place the JavaScript and CSS directly into one HTML document?
why don't more websites place the JavaScript and CSS directly into one HTML document
Individual file caching.
External files have the advantage of being cached. Since scripts and styles rarely change (static) and/or are shared between pages, it's better to just separate them from the page making the page lighter.
Instead of downloading 500kb of page data with embedded JS and CSS, why not load 5kb of the page, and load from the cache the 495kb worth of JS and CSS - saves you 495kb of bandwidth and avoids an additional 2 HTTP requests.
Although you could embed JS and CSS into the page, the page will most likely be dynamic. This will make the page load a new copy all the time, making each request very heavy.
Modular code
Imagine a WordPress site. They are built using a tom of widgets made by different developers around the world. Handling that many code stuffed in one page is possible, but unimaginable.
if some code just short circuited or just didn't work on your site, it's easier to take out that code linking the external file, rather than scouring the page for the related code and possibly accidentally remove code from another widget.
Separation of concerns
It's also best practice to separate HTML from CSS and JS. That way, it's not spaghetti you are dealing with.
When you have a lot of code in a single document, it's harder to work with the code because you need more time to find the necessary string to change.
That is why it's good practice to divide code into separate files, with each of them solving its own special task, and then include them in code where it's necessary.
However, you can a write script which will join your files from the development version, which has many files, to a release version, which has fewer files, but this brings two problems:
People are often lazy to do additional coding to create this script and then change it when the structure of your project becomes more complex.
If you find a bug or add a small feature, you will need to rebuild your project again both in developed and release versions.
They separated them so that multiple webpages can use the same file. When you change a single file, multiple pages can aromatically updated also. In addition, big HTML file will cause a long time to download.
I'm writing a web app, using jsp to create the page content. I need a pretty good amount of javascript to make the app work. Does anyone have any recommendations on how to structure my project, such that it doesn't become a mess?
This is a broad question, but the basic problem is that I'm insert javascript code directly into my jsp content. Then I might have some external js files. Ids and such are strewn between multiple files. I'm not really sure what a best practice is for keeping this type of project organized. Do you always keep your javascript in separate files? There has to be a few hooks in the jsp pages though for them, right?
I tried using GWT because I'm really a c/java developer, and I was hoping it would help keep my project more organized (definitely helps) - but GWT is a pain to use with jsp, it really wants you to do all UI generation client side after the page is done loading, doesn't work for what I need to do.
Again, broad question, any tips would be great,
Thanks
JavaScript should be unobtrusive. That means that you use your JavaScript like CSS - target selectors on the page. The only 'hooks' you need are HTML classes and ids.
So keep all your JavaScript in separate files. It doesn't matter if you have it all in one file or in separate files, whatever works for you. This isn't quite true, there are technical reasons why you might choose one JavaScript file or lots of separate ones, but probably for now organise the files so they make sense. You can always use a tool to compile all your JavaScript into one file and minify it at the same time.
Put page-specific code (event handlers) inside the .jsp files, at the bottom, in an unobtrusive way (like Skilldrick) suggested.
Put general purpose methods (those reused in several .jsp files) in one (or more) javascript file(s) that you will link using . Try to find patterns in javascript code and create reusable library methods/components.
Use Enterprise Architect, Visio or some other software to architect your application (you might already be familiar with the MVC concept from the Java world). Make sure you put your JS functions into logical components. Each of these components will be a JavaScript file. Takes a little bit more time upfront, but you'll save a headache further down the line.
I'm very new to the JavaScript library world. I have used JS by itself before to create a mini social network but this is the first time I use a JS library and I really don't know how to go about this.
I'm planning to use Google Closure and I'm really not sure how I should go about organizing the code. Should I put everything in one file since it's a web app and should have one screen? Should I separate the code to many chunks and put them in different files? Or should I put different dialogs (like settings) in a separate page and thus a separate file?
Like all programmers I'm a perfectionist so please help me out with this one, thanks.
If you're using Closure, you can use the closure compiler. I'd recommend multiple js files that are compiled into a single resource by the compiler. You'd reference that single js file in your html, so you wouldn't have to link to all of them.
Then, since you have multiple JS file, you can organize them in a logical way that will help you separate logic from UI from communications, etc. Also, if you're writing unit tests (JsUnit) it will be easier to write one test file per js file.
Depends...
What I do is add all my code in one file(librarys are always in different files) and then even though some of it wont be used, there will be no need to add multiple scripts to the page. If you have 20 files with script, it can be very confusing knowing which one to use.
Hi I am relatively new to javascript development. At the moment I have a single javascript file with lots of little misc bits of code that get called in different part of the website. For example I have an event handler for some google maps stuff that is only called on 1 single page, I have some validation stuff for my contact page etc etc. My question, is how best to organise this code - given that each page only requires very little code but its different and specific per page?
Oh, I am using jquery if that makes a difference.
If there is nothing shared by each page from your js file and only a part of it is used by each page, the good way will be to separate each of those js code snippets for each page. This will simply improve page loading a little depending on the size of your javascript file.