您的位置：首页 > 产品设计 > UI/UE

[置顶] 项目中requireJS的应用例子

2015-08-04 14:52 441 查看

页面:

<#-- 页脚 -->
<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(); }
});
});
}
});

login.js
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

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航