{"id":10131,"date":"2014-08-06T08:41:04","date_gmt":"2014-08-06T13:41:04","guid":{"rendered":"http:\/\/jianmingli.com\/wp\/?p=10131"},"modified":"2014-08-06T08:41:04","modified_gmt":"2014-08-06T13:41:04","slug":"include-another-javascript-file-in-javascript-file","status":"publish","type":"post","link":"https:\/\/jianmingli.com\/wp\/?p=10131","title":{"rendered":"Include another JavaScript File in JavaScript File"},"content":{"rendered":"<div class='toc wptoc'>\n<h2>Contents<\/h2>\n<ol class='toc-odd level-1'>\n\t<li>\n\t\t<a href=\"#Use_HeadJS\">Use HeadJS<\/a>\n\t\t<ol class='toc-even level-2'>\n\t\t\t<li>\n\t\t\t\t<a href=\"#Example\">Example<\/a>\n\t\t\t<\/li>\n\t\t<\/ol>\n\t<li>\n\t\t<a href=\"#Use_LABjs\">Use LABjs<\/a>\n\t\t<ol class='toc-even level-2'>\n\t\t\t<li>\n\t\t\t\t<a href=\"#Example_1\">Example<\/a>\n\t\t\t<\/li>\n\t\t<\/ol>\n\t<li>\n\t\t<a href=\"#Use_RequireJS\">Use RequireJS<\/a>\n\t\t<ol class='toc-even level-2'>\n\t\t\t<li>\n\t\t\t\t<a href=\"#Example_2\">Example<\/a>\n\t\t\t<\/li>\n\t\t<\/ol>\n\t<li>\n\t\t<a href=\"#Use_jQuery_.getScript\">Use jQuery .getScript<\/a>\n\t\t<ol class='toc-even level-2'>\n\t\t\t<li>\n\t\t\t\t<a href=\"#Example_3\">Example<\/a>\n\t\t\t<\/li>\n\t\t<\/ol>\n\t<li>\n\t\t<a href=\"#References\">References<\/a>\n\t<\/li>\n<\/ol>\n<\/ol>\n<\/div>\n<div class='wptoc-end'>&nbsp;<\/div>\n<span id=\"Use_HeadJS\"><h2>Use HeadJS<\/h2><\/span>\n<p>* This one works for me.<br \/>\n* Reference: <a href=\"http:\/\/headjs.com\/\">http:\/\/headjs.com\/<\/a><\/p>\n<span id=\"Example\"><h3>Example<\/h3><\/span>\n<pre lang=\"javaScript\">\r\n<script src=\"js\/head.js\"><\/script>\r\n<script>\r\nhead.js(\r\n  \"js\/common.js\", \r\n  \"js\/main.js\");\r\nhead.ready(function(){\r\n\tfindAll();\r\n});\r\n<\/script>\r\n<\/pre>\n<span id=\"Use_LABjs\"><h2>Use LABjs<\/h2><\/span>\n<p>* Reference: <a href=\"https:\/\/github.com\/getify\/LABjs\">https:\/\/github.com\/getify\/LABjs<\/a><\/p>\n<span id=\"Example_1\"><h3>Example<\/h3><\/span>\n<pre lang=\"javaScript\">\r\n    <script src=\"js\/LAB.min.js\"><\/script>\r\n    <script type=\"text\/javascript\">\r\n        jQuery(document).ready(function() {\r\n        $LAB\r\n        .script(\"js\/common.js\").wait()\r\n        .script(\"js\/main.js\").wait(function(){\r\n            SetupPage();\r\n        });\r\n      });\r\n    <\/script> \r\n\r\n<\/pre>\n<span id=\"Use_RequireJS\"><h2>Use RequireJS<\/h2><\/span>\n<p>* Reference: <a href=\"http:\/\/requirejs.org\/docs\/1.0\/\">RequireJS Home<\/a><\/p>\n<span id=\"Example_2\"><h3>Example<\/h3><\/span>\n<p>* Download <em>require.js<\/em> from <a href=\"http:\/\/requirejs.org\/docs\/1.0\/docs\/download.html#requirejs\">here<\/a><br \/>\n* Place <em>require.js<\/em> in <em>js<\/em> sub-directory<br \/>\n* Create a <strong>test.js<\/strong> file. This is the entry JavaScript file:<\/p>\n<pre lang=\"javaScript\">\r\nalert(\"Hello from test.js\");\r\nrequire([\"common\"], function(common) {\r\n   alert(\"js\/common.js loaded and executed.\");\r\n\r\n   \/\/ Here you can use anything you defined in the loaded script\r\n   testAlert(\"Hello again from test.js\");\r\n});\r\n<\/pre>\n<p>* Create a <strong>common.js<\/strong> file which is to be included in <em>test.js<\/em>:<\/p>\n<pre lang=\"javaScript\">\r\nfunction testAlert(msg) {\r\n    alert(\"From common.js: \" + msg);\r\n}\r\n<\/pre>\n<p>* Use <em>test.js<\/em> in <strong>test.html<\/strong> page:<\/p>\n<pre lang=\"html\">\r\n<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <title>My Sample Project<\/title>\r\n        <!-- data-main attribute tells require.js to load\r\n             scripts\/main.js after require.js loads. -->\r\n        <script data-main=\"js\/test\" src=\"js\/require.js\"><\/script>\r\n    <\/head>\r\n    <body>\r\n        <span id=\"My_Sample_Project\"><h1>My Sample Project<\/h1><\/span>\r\n    <\/body>\r\n<\/html>\r\n<\/pre>\n<p>* Test by pointing to <em>test.html<\/em> page<\/p>\n<span id=\"Use_jQuery_.getScript\"><h2>Use jQuery .getScript<\/h2><\/span>\n<span id=\"Example_3\"><h3>Example<\/h3><\/span>\n<p>* To be included JavaScript file (<em>js\/common.js<\/em>):<\/p>\n<pre lang=\"javaScript\">\r\nfunction testAlert(msg) {\r\n    alert(\"From common.js: \" + msg);\r\n}\r\n<\/pre>\n<p>* Primary JavaScript file (<em>js\/test.js<\/em>):<\/p>\n<pre lang=\"javaScript\">\r\nalert(\"Hello from test.js\");\r\n$.getScript(\"js\/common.js\", function(){\r\n\r\n   alert(\"js\/common.js has been loaded.\");\r\n\r\n   testAlert(\"Hello again from test.js\");\r\n});\r\n<\/pre>\n<p>* In HTML page: (<em>test.html<\/em>)<\/p>\n<pre lang=\"html\">\r\n<head>\r\n    <script src=\"js\/test.js\" type=\"text\/javascript\"><\/script>\r\n<\/head>\r\n<\/pre>\n<p>* Test by pointing browser to <em>test.html<\/em> page:<\/p>\n<span id=\"\"><h6><a href=\"https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_1.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_1.jpg\" alt=\"js_include_1\" width=\"238\" height=\"143\" class=\"aligncenter size-full wp-image-10132\" \/><\/a><\/h6><\/span>\n<span id=\"_1\"><h6><a href=\"https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_2.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_2-300x120.jpg\" alt=\"js_include_2\" width=\"300\" height=\"120\" class=\"aligncenter size-medium wp-image-10133\" srcset=\"https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_2-300x120.jpg 300w, https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_2.jpg 344w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/h6><\/span>\n<span id=\"_2\"><h6><a href=\"https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_3.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_3-300x122.jpg\" alt=\"js_include_3\" width=\"300\" height=\"122\" class=\"aligncenter size-medium wp-image-10134\" srcset=\"https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_3-300x122.jpg 300w, https:\/\/jianmingli.com\/wp\/wp-content\/uploads\/2014\/07\/js_include_3.jpg 340w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/h6><\/span>\n<span id=\"References\"><h2>References<\/h2><\/span>\n<p>* <a href=\"http:\/\/stackoverflow.com\/questions\/950087\/how-to-include-a-javascript-file-in-another-javascript-file\">How to include a JavaScript file in another JavaScript file?<\/a><br \/>\n* <a href=\"http:\/\/www.creativebloq.com\/javascript\/essential-javascript-top-five-script-loaders-8122862\">Essential JavaScript: the top five script loaders<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use HeadJS * This one works for me. * Reference: http:\/\/headjs.com\/ Example Use LABjs * Reference: https:\/\/github.com\/getify\/LABjs Example Use RequireJS * Reference: RequireJS Home Example * Download require.js from here * Place require.js in js sub-directory * Create a test.js &hellip; <a href=\"https:\/\/jianmingli.com\/wp\/?p=10131\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[18],"tags":[497,496],"class_list":["post-10131","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-include","tag-javascript-2"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8cRUO-2Dp","_links":{"self":[{"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/10131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10131"}],"version-history":[{"count":5,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/10131\/revisions"}],"predecessor-version":[{"id":10167,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/10131\/revisions\/10167"}],"wp:attachment":[{"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10131"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10131"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}