Dynamic loading of javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Manage dynamic loading of dependent JavaScript files with automatic versioning

License

mseifert9/Javascript-Dynamic-Loading-and-Version-Control

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Dynamic JavaScript Loader

Dynamic Loading of Javascript files and function with Version Control

This library will dynamically load javascript files (and functions), css, and images based on listed dependencies while also generating unique filenames for browser cache version control.

Javascript code is often dependent on the existence of existing classes, functions, and elements, especially document.body . Because it is difficult to guarantee the order of loading of javascript, there needs to be a way to sequence dependencies. Instead of loading all javascript files up front (which also slows down load times), most files can be loaded dynamically and in the correct order from within javascript code.

Implementation for Dynamic Loading

There are two basic ways to determine the necessary order of loading files

1. dependants: files and functions are loaded after a file loads. For example,
   1. the DragDrop class may have two supporting classes, Draggable and Droppable. If we load DragDrop, we want to automatically load Draggable and Droppable. Therefore, within the dragdrop.js class file, we specify a rule which auto loads the two other classes.
   1. a file with an existing object has been loaded. e.g. The function foo() must exist before the file bar.js is loaded.
   2. some custom condition has been met. e.g. document.body must be loaded before the function sayHello() is executed.

   The first method (dependants) is accomplished by listing within each .js file, a list of dependent files. Each file is listed with an associated object name which will be used as verification that the dependent file has been loaded. This list is passed as an array of objects with the following properties:

    file: name of file or function to load ns: name of the object whose existence will verify that the file has been loaded dir: optional directory for the file (defaults to js - or whatever is specified in the path variable $ms.STATIC_JS_COMMON) subDir: optional sub-directory under one of the path variables 

   For example, in my dragdrop.js file, I have the following:

    var dependants = [ , , ] $ms.sourceFiles.add(dependants); $ms.sourceFiles.load(); 

   The second method (dependencies) is accomplished by listing the dependencies in a file other than the one being loaded. Dependencies are

   For example, in the demo, hello.js the following dependant declarations are specified:

    /* * this file has two dependants which will be automatically queued for loading * 1. /js/foo/bar.js - which supplies $ms.FooBar.secretMessage() * 2. /img/star-18.png - which requires the document 'load' event to fire before the image is appended to the docuement */ $ms.sourceFiles.add([ , // preload image ]> ]); $ms.sourceFiles.load(); 

   A second example shows the pre-loading of an image file.

   NOTE: Special function which can be specified for the file property :

    $ms.sourceFiles.onloadTest Tests for document.body being loaded 

   Implementation for File Versioning

   A common solution for maintaining javascript file versions is to dynamically append javascript filenames with a timestamp. If a file is modified, its timestamp changes and therefore the filename changes, refreshing browser caches with the new version. The php filemtime() function is used for this purpose and in this library, it is wrapped in the php fucntion version() . An .htaccess RewriteRule is used to strip out the timestamps from the filenames. For example, the file mseifert.js can be read with a timestamp using:

   However, when javascript files are loaded dynamically, we are running on the local machine and have lost the ability to directly use php for timestamp information. This library overcomes that limitation by calling moddate.php with the initializing of file versioning:

   demo.php (the main php file)

   • Loads the javascript common library (mseifert-sourcefiles.js)
   • Loads the javascript demo file hello.js with timestamp information added to the filename.

   Version checking is turned with a simple call, passing the directories to be polled on the server

   Removes the timestamp from the filename

    RewriteEngine On #Rules for Versioned Static Files RewriteRule ^(js|js-common|css|css-common|img|img-common)/(.+)\.(5)+\.(js|css|php|jpg|gif|png)(.*)$ $1/$2.$4$5 [L] 

   — Contains the PHP constants and JS variables which contain URL and absolute paths to the files on the server. — The server translates the URL paths to absolute paths in order to find the files and read the timestamps. — This file must be loaded BEFORE any others in this project. See common.php for further info. — Also contains common php functions including error checking code.

   — Called by javascript requesting file information for dynamically loaded files. — Returns timestamp information for the files in directories specified

   — The javascript project library. — This file contains the common namespace functions as well as including the sourceFiles object which contains the functions that manage the queue and versioning. — This file must be loaded BEFORE any calls to the sourcefile functions.

   A sample javascript file which creates the user interface and loads depandant files (javascript and image).

   A sample javascript file to demonstrate dynamic loading using a dependency declaration.

   An image file to demonstrate dynamic loading of an image (used to prelaod images for performance and user experience).

   This project uses the com.mseifert javascript namespace. In addition to the namespace, two global variables are used as shortcuts:

    $msRoot = com.mseifert $ms = $msRoot.common 

   These variables are defined first in common.php so that the path variables are immediately available. These variable are defined again in mseifert-sourcefiles.js. This second definition will keep existing properties and add to them using the nifty getChildClasses function.

   common.php contains the definitions for path variables.

    /* * javascript: URL paths must be defined * php: URL and absolute (FULL) paths must be defined * LINK_ paths are the urls for the cookie enabled domains - e.g. http://design.mseifert.com/demo * STATIC_ paths are the urls for the cookieless domains (can be the same as LINK_ if there is not a separate cookieless domain) - * e.g. http://staticdesign.mseifert.com/demo * FULL_ paths are the absolute paths which correspond to the urls - e.g. "/home/yourid/public_html/design/demo" * FULL_TOP_ROOT and STATIC_TOP_ROOT are the root of the Server in the domain tree (absolute and url respectively) * FULL_SITE_ROOT and STATIC_SITE_ROOT are the root of the Site (domain). * if there is only one domain on the server, * SITE_ROOT and TOP_ROOT paths will be the same * having both SITE_ROOT and TOP_ROOT defined allows pulling files from anywhere on the server for any of its site * in other words, it allows different sites to share images, js, and css resources * STATIC_IMG_COMMON, STATIC_CSS_COMMON, STATIC_JS_COMMON are default url subdirectories - e.g. http://static-design/demo/img * FULL_IMG_COMMON, FULL_CSS_COMMON, FULL_JS_COMMON are the absolute equivalents * if root paths are left blank and only sub directories are specified for STATIC_JS_COMMON, STATIC_CSS_COMMON, STATIC_IMG_COMMON * the current directory will be used as the relative root for all paths. This is the default. */   

   A live working demo of this library can be found at http://design.mseifert.com/demo-sourcefile/demo.php It is very basic and shows the two basic work flows described above: dependants and dependencies.

   The demo consists of dynamically loading the function $ms.Hello.sayHello(«Click Me») which displays the label «Click Me.» This function has the two dependencies:

   hello.js loads two dependant files,

   • star-18.png — demonstrating preloading of images
   • /foo/bar.js — demonstrating loading depandant js files and also custom directories

   Clicking on the «Click Me» label will access functions from /foo/bar.js and use the loaded image star-18.png.

   The path variables in common.php can be left blank and the project will use the default subdirectories of js, css, and img relative to the installation. To modify this project for your own purposes, see common.php for customizing the paths.

   About

   Manage dynamic loading of dependent JavaScript files with automatic versioning

   Источник

   How to dynamically load a JS file in JavaScript

   Many candidates are rejected or down-leveled due to poor performance in their System Design Interview. Stand out in System Design Interviews and get hired in 2023 with this popular free course.

   Typically, we load a JavaScript file using the script tag:

   Dynamic loading

   In some situations, we want to load third-party script files like Google Analytics and Google Ads dynamically in JavaScript.

   Those files can be loaded asynchronously in JavaScript.

   To load a JavaScript file dynamically:

   • Create a script element.
   • Set the src , async , and type attributes.
   • Append the script element to the body.
   • Check if the file loaded or not in the load event.

   Create a script element

   let scriptEle = document.createElement("script"); 

   Set the src , async , and type attributes.

   • src : the file path
   • type : file type — «text/javascript»
   • async : if we set async to false , then the file will be loaded and executed first before proceeding to the next action.

   scriptEle.setAttribute("src", "https://www.mywebsite.com/test.js"); 

   Append the script element to the body

   document.body.appendChild(scriptEle); 

   Check the load event

   scriptEle.addEventListener("load", () => < console.log("File loaded") >); scriptEle.addEventListener("error", (ev) => < console.log("Error on loading file", ev); >); 

   Let’s combine all the pieces

   function loadJS(FILE_URL, async = true) < let scriptEle = document.createElement("script"); scriptEle.setAttribute("src", FILE_URL); scriptEle.setAttribute("type", "text/javascript"); scriptEle.setAttribute("async", async); document.body.appendChild(scriptEle); // success event scriptEle.addEventListener("load", () =>< console.log("File loaded") >); // error event scriptEle.addEventListener("error", (ev) => < console.log("Error on loading file", ev); >); > loadJS("file1_path", true); // If we set async false, file2 is loaded and executed first, then file3 will be loaded loadJS("file2_path", false); loadJS("file3_path", true); 

   Using Promise to load the script file

   const loadScript = (FILE_URL, async = true, type = "text/javascript") => < return new Promise((resolve, reject) => < try < const scriptEle = document.createElement("script"); scriptEle.type = type; scriptEle.async = async; scriptEle.src =FILE_URL; scriptEle.addEventListener("load", (ev) =>< resolve(< status: true >); >); scriptEle.addEventListener("error", (ev) => < reject(< status: false, message: `Failed to load the script ＄` >); >); document.body.appendChild(scriptEle); > catch (error) < reject(error); >>); >; loadScript("file1_url") .then( data => < console.log("Script loaded successfully", data); >) .catch( err => < console.error(err); >); 

   Источник

   Читайте также:  Present continuous tense html