require.js与引导程序结合实现简单的页面登录和页面跳转功能

小颖的这个演示其实很简单的，大家一起来先来看看页面效果图：

目录：

代码：

inde.html

！DOCTYPE htmlhtmlhead元字符集='utf-8 '元http-equiv='内容-类型' Content=' text/html；charset=UTF-8'/titlerequire.js小演示/标题链接rel='样式表href='css/bootstrap.css' rel='外部nofollow' link rel='样式表href='css/base.css' rel='外部不跟随！-加载require.js文件，也可能造成网页失去响应。解决办法有两个，一个是把它放在网页底部加载，另一个是写成下面这样： - !-script src=' http : js/require。js ' delay async=' true '/script-！异步属性表明这个文件需要异步加载，避免网页失去响应工业工程。不支持这个属性，只支持推迟，所以把推迟也写上。 - !-加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在射流研究…目录下面。只需要写成下面这样就行了： - !-script src=' http : js/require。js ' data-main=' src/main。js '/script-script type=' text/JavaScript ' data-main=' js/app ' src=' http : js/lib/require。js/script/head dy div class=' view-container '/div/body/html js下的文件：

app.js

需要js。config({ baseurl : ' js/lib '，paths: { jquery: ' jquery '，app: './app ' } })；需要(['app/main']，function(){ })；js/app下的文件：

main.js

定义(['jquery']，函数($){ $(function(){ if(location。hash==' # log in ')} { loads(hashToPath(' log in '))；} else { location.hash=' # login}加载(HashTopath(location。哈希))；/* 监听hashchange切换视图*/$(窗口)。on('hashchange '，函数{ var hash=location。哈希；if(hash.indexOf('_ ')！==-1){ hash=hash.substring(0，hash。indexof(' _ ')；} loads(HashTopath(hash))；});函数HashTopath(hash){ if(hash。索引of(' # ')！==-1){ hash=hash。子串(1)；}返回" app/"哈希"/"哈希；}函数loads(path) { require([path]，函数(视图){视图。load()；});} });});BaseController.js

define(function(){ var setTemplate=function(template){ this。模板=模板；};var render=函数（容器){ //获取模板this.template//加载页面集装箱。innerhtml=TemplateStr};返回{ setTemplate:setTemplate，render : render } })；Base.js

define(function(必选)){ var viewContainer=null函数getViewContainer(){ 0返回ViewContainer？视图容器：视图容器=$('。视图容器')[0];}返回{ GetViewContainer : GetViewContainer } })；js/app/登录下的文件：

login.html

div class=' log in-content ' form class=' form-horizontal ' div class=' form-group ' label class=' col-sm-2 col-xs-2 control-label ' id=' userName ' userName/label div class=' col-sm-5 col-xs-5 '输入类型=' text ' class=' form-control ' id=' inputuser name '/div/div class=' form-group ' label class=' col-sm-2 col-xs-2 control-label ' Password/label

定义（功能（要求){ var Base=必需('应用/基础')，控制器=必选('./base controller’)，模板=require('text！/登录。html ')；/** * 对外暴露函数，用于视图加载*/var load=function(){ render()；bind()；run()；};/** * 视图渲染*/function render(){ controller。settemplate(模板);控制器。渲染(基础。getviewcontainer())；} /** * 事件绑定*/function bind(){ $(“# log in”).on('click '，function(){ if($(' # inputUserName ')).val()=='小颖$('#inputPassword ').val()==1028){ alert('登陆成功！');location.hash=' home}else { alert('登陆失败!');} });} /** * 除事件绑定*/function run() { $(' .视图-容器')。css(“”背景，' URL(图片/星日奎3。jpg)中心/封面不重复’)；}返回{ load : load }；});js/app/home下的文件：

home.html

div class='home-content '欢迎小颖/divhome.js

定义（功能（要求){ var Base=必需('应用/基础')，控制器=必选('./base controller’)，模板=require('text！/家。html ')；/** * 对外暴露函数，用于视图加载*/var load=function(){ render()；bind()；run()；};/** * 视图渲染*/function render(){ controller。settemplate(模板);控制器。渲染(基础。getviewcontainer())；} /** * 事件绑定*/function bind() { } /** *除事件绑定*/function run() { $(' .视图-容器')。css(“”背景图像',' ');}返回{ load : load }；});js/lib下分别是：jquery.js、require.js、text.js这三个文件，小颖就不在这里展示了，大家可以在网上下一个，小颖把text.js下载地址给大家提供出来嘻嘻：text.js

以上所述是小编给大家介绍的require.js与引导程序结合实现简单的页面登录和页面跳转功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！