Function Description:
1. Simple application of Require.js
2.BASEURL Application (Load paths under different folders)
3.shim use (dependency: e.g. Jquery-ui need to rely on jquery)
4.require method Invocation (including callback method use)
1. Directory Structure of files
main.js Code
Require.config ({baseUrl:"JS", paths: {jquery:' jquery-1.7.2 ', Bootstrap_alert:' Bootstrap-alert ', Model1:' Model1/model1 ', Model2:' Model2/model2 ', Math:' Utils/math ', jquery_ui:' Jquery_plugin/jquery-ui ',}, shim:{' JQUERY_UI ': {deps: [' jquery '],//jquery_ui relies on jqueryExports: "JQUERY_UI" } }});//after the JS file is loaded, the code executedRequire ([' jquery ', ' Bootstrap_alert ', ' model1 ', ' model2 ', ' jquery_ui '], function($,bootstrap_alert,model1,model2,jquery_ui) {alert ($.ui.version);});varMath = require ([' math '],function(math) {Math.add (1,3);});
chad.html Code
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>Insert Title here</title><ScriptData-main= "Main"src= "Require.js"></Script></Head><Body><Scripttype= "Text/javascript"> </Script></Body></HTML>
Model1.js Code
Alert ("Model1 folder-->model1.js loaded successfully");d efine ("Model1", [],function () { // var param1 = 1; var param2 = "params"; Add function Add () { alert ("Add"); } Delete function del () { alert ("delete"); } Edit function edit () { alert ("edit"); } Query function Find () { alert ("find"); } return { add:add, Del:del, edit:edit, find:find, param1:param1, param2:param2 };}); model2.js Code--->>
Alert ("Model2 folder-- model2.js load succeeded");d efine ("Model2", ["Model1"],function (model1) { model1.del (); alert (model1.param1); Function page () { alert ("page"); } return { page:page };});
The simple application of Require.js-Lan