项目中requireJS的应用例子

来源：互联网发布：mysql怎么分页编辑：程序博客网时间：2024/06/07 22:48

页面:

<#-- 页脚 --><html><body><#--弹窗模板--><div id="modal" class="modal"><div></div></div>    <#assign mainJS="/assets/js/controller/front/login/login">    <#-- 通过RequireJS加载JS代码  -->    <#if mainJS?has_content>      <script data-main="/assets/js/app.js" data-start="${mainJS}" src="/assets/js/require.js"></script>    <#else>      <script data-main="/assets/js/app.js" src="/assets/js/require.js"></script>    </#if>             <#--  <script type="text/javascript" src="/assets/js/require-main.js" src="${mainJS}""></script> -->                </body></html>

app.js

/******require-global-config.js******/require.config({    "baseUrl" : "/assets/js",        paths : {      "jquery" : "libs/jquery/jquery-1.11.1.min",      "bootstrap" : "libs/bootstrap/3.3.0/js/bootstrap.min",      "json": "libs/vendor/json2",      "css": "libs/vendor/require.css",      "util": "libs/vendor/underscore",      "hogan": "libs/vendor/hogan",      "templ": "libs/vendor/require.hogan",      "text": "libs/vendor/require.text",      "ie10-viewport-hack" : "libs/hacks/ie10-viewport-bug-workaround",      "bootstrap-modal-hack" : "utils/bootstrap-modal-hack",      "jquery.validate" : "libs/jquery-validation/jquery.validate.min",      "school-validate" : "utils/school-validate"    },        shim : {        "jquery": { exports: "jQuery" },        "util": { exports: "_" },        "json": { exports: "JSON" },        "bootstrap": { deps: ["jquery"], exports: "$.fn.transition" },        "backbone": { deps: ["jquery", "json", "util"], exports: "Backbone" },      "ie10-viewport-hack" : { "deps" : ["jquery"] },      "bootstrap-modal-hack" : { "deps" : ["jquery","bootstrap"] },      "jquery.validate" : { "deps" : ["jquery"] },      "school-validate" : { "deps" : ["jquery","jquery.validate"] }    }  });//libsrequire(["jquery", "bootstrap","css","json","hogan","templ", "text", "ie10-viewport-hack","bootstrap-modal-hack"],function () {            var $ = require("jquery"),            // the start module is defined on the same script tag of data-main.            // example: <script data-main="main.js" data-start="pagemodule/main" src="vendor/require.js"/>            startModuleName = $("script[data-main][data-start]").attr("data-start");        startModuleName=startModuleName + ".js";        console.log(startModuleName);        if (startModuleName) {            require([startModuleName], function (startModule) {                $(function(){                    var fn = $.isFunction(startModule) ? startModule : startModule;                    if (fn) { fn(); }                });            });        }    });

require(["jquery", "bootstrap", "ie10-viewport-hack", "bootstrap-modal-hack", "jquery.validate", "school-validate"], function($){    // DOM Ready  $(function(){            //验证码，换一张      $(".change-img").click(function(){          var src = $("#imgObj").attr("src");           var url = src + '?' + new Date().getTime();          $("#imgObj").attr("src",url);      });                         //注册验证    jQuery.validator.setDefaults({      errorElement : 'p',      errorClass : 'help-block',            highlight : function(element) {        $(element).closest('.form-group').addClass('has-error');      },            success : function(label) {        label.closest('.form-group').removeClass('has-error');        label.remove();      },            errorPlacement : function(error, element) {        element.parent('div').append(error);      }    });        $(".login-form").validate({      rules : {            username : {                required : true,                maxlength : 60            },            password : {                required : true,                minlength : 6,                maxlength : 20            },            validateCode :{                required : true,            }      },      messages : {          username : {              required : '请输入邮箱',              maxlength : '用户名最大长度不能超过60个字符。'          },          password : {              required : '请输入密码',              minlength : '密码长度不能小于6个字符。',              maxlength : '密码长度不能超过20个字符。'          },          validateCode :{              required : '请输入验证码'          }                },                submitHandler : function(form){             form.submit();          }/*          submitHandler: function(validator, form, submitButton) {              $.post(form.attr('action'), form.serialize(), function(jsonResult) {                  if("success" == jsonResult.status) {                                        } else {                      $('#onSuccessDiv').hide();                      $('span#errorMsg').html(jsonResult.errorMsg);                      $('#onFailureDiv').show();                  }              }, 'json');          }*/    });  }); // DOM Ready  });

0 0