项目中requireJS的应用例子

最新推荐文章于 2020-03-31 15:14:15 发布

kenhins

最新推荐文章于 2020-03-31 15:14:15 发布

阅读量5.1k

点赞数

分类专栏： requireJs Javascript

本文链接：https://blog.csdn.net/kenhins/article/details/47276609

版权

Javascript 同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

requireJs

5 篇文章 0 订阅

订阅专栏

页面:

<#-- 页脚 -->
<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"] }
    }
  });
//libs
require(["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
  
});

kenhins

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
项目中requireJS的应用例子

页面: --> app.js/******require-global-config.js******/require.config({ "baseUrl" : "/assets/js", pa
复制链接

扫一扫