标签:struct before 默认方法 mon 叠加 事件 lower async url
在开始我们的第一个界面之前,我们需要把初始的html和config文件配置好。html非常简单,只需要一个div作为最外部的容器包裹着所有界面即可:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0,width=device-width" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta http-equiv="Access-Control-Allow-Origin" content="*"> <!--全屏模式--> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 基础样式文件 --> <link rel="stylesheet" type="text/css" href="css/pdw.css"> <!-- 业务样式文件 --> <link rel="stylesheet" type="text/css" href="css/app.css"> <title>Bonjour</title> </head> <body> <!-- 最外层容器 --> <div id="pageWindow"></div> <!-- 引入require 载入入口文件 --> <script data-main="construction/app" src="construction/require.js"></script> </body> </html>
接下来我们在construction目录中配置config文件和入口app.js文件
//Config.js define(function(){ //配置文件 return { //模块跳转规则,在需要跳到下一个模块的默认方法需要配置 PAGERULES: { A: [‘a‘, ‘c‘, ‘g‘, ‘i‘],//每个模块文件下包含的界面名称小写 B: [‘b‘, ‘d‘, ‘h‘, ‘k‘], F: [‘f‘, ‘p‘, ‘y‘, ‘u‘], Z: [‘z‘], Nav: [‘footer‘, ‘header‘] }, //入口界面,即如果地址栏中没有输入hash 跳入哪个界面 entrePage: ‘A‘, //公共文件的名称 commonJsModule: ‘Nav‘, //界面切换动画时长 单位毫秒 pageTransformDelay: 300, //动画弹出时长 maskTransformDelay: 300, //html模板文件加载的路径配置 loadHtmlPath: ‘js/tpl/tpl‘, //模块文件加载的路径配置 loadJsPath: ‘use/‘, //ajax请求超时时间 ajaxDelay: 7000 } }); //app.js var IP = ‘localhost‘; require.config({ baseUrl: ‘js/‘, urlArgs:‘version=1.0‘, paths: { salut: ‘base/salut‘, config: ‘Config‘ } }); //require(function(base, page) { (function(root){ require([‘config‘], function(C){ console.log(C) var hash = root.location.hash.replace(/^#\/?/gi, ‘‘); if(hash.indexOf(‘?‘)> -1 ) { hash = hash.split(‘?‘)[0]; } var config = C.PAGERULES; if(hash.indexOf(‘/‘)) { hash = hash.split(‘/‘)[0].toLocaleLowerCase(); } for(var i in config) { if(config[i].indexOf(hash) >-1 ) hash = i; } hash != ‘‘ ? hash: C.entrePage; //首次加载文件 require([C.loadJsPath + hash], function(){ Backbone.history.start(); }); }); })(window);
配置完基础文件后我们开始配置我们的第一个配置界面文件A.js:
//采用amd模式加载基础js define([‘salut‘], function(_PRO_) { //全局依赖变量pdw:创建项目界面模块 e: 公共事件函数 router:路由模块 var PDW = _PRO_.PDW, router = _PRO_.Router, _exprots = {}; //定义一个事件公共方法 function refreshPage(e) { _exprots.A.children[‘g‘].reloadView({ word: ‘bonjour mademoiselle, je suis programs‘ }); } //A界面 _exprots.A = PDW.createPage({ //视图名称 * name: ‘a‘, //界面标题 + 无需赘述 title: ‘A界面‘, //切换到此界面时是否重新获取数据,刷新本界面 applyChange: false, //路由名称 +无需赘述,如果没有配置路由名称,则该界面没有加入路由规则当中去。一般是弹出界面无需配置此项 route: ‘A‘, //声明类型[normal, mask, navigate, child] 默认是normal type: ‘normal‘, //如果该界面是某个界面的子界面,必须声明父级节点的id //parent: ‘a‘, //界面加载需要的数据地址 url: ‘http://‘ + IP + ‘:8800/?way=a‘, //配置该页面的导航条 nav: [‘Footer‘, ‘Header‘], //本界面导航呈现的数据模型 navInfo: {iconLeft: ‘lattice‘, iconRight: ‘me‘}, //backbone的界面扩展数据 view: { //渲染之前的调用函数 beforeRender: function() { }, //渲染界面后的回调函数 afterRender: function() { //console.log(this.$el); }, //注册界面事件 pageEvent: { /*自定义事件 事件名 事件绑定元素-> 事件执行的方法名 : 事件的注册方法 同样的方法会叠加,如C界面也有toPage,那么执行完C界面的toPage方法之后会 回执行此处方法, 这个前提是tap目标选择器和父级一样,因为子界面在父界面之下,父界面的方法会捕获子界面方法 */ ‘tap .J-async-module->goPageB‘: function(e) { router.myNavigate(‘B‘); }, ‘tap .J-refresh->refreshPage‘: refreshPage, ‘tap .J-changeNav->changeNavA‘: function() { _exprots.A.children[‘i‘].reloadView({ word: ‘12121 212121212‘ }); }, ‘tap .J-local-module->goPageC‘: function() { router.myNavigate(‘C/123/789‘, function() { this.addDataToModel({ message: ‘hello i am a message from page A‘ }) }); } } }, //缺省模型数据 model: { defaults: { say: ‘hello‘, List: ‘a ha good morning‘, other: ‘‘ } } }); return _exprots; });
完了我再在js/tpl创建对应的模板文件tpla.html
<!-- A界面 --> <script type="text/template" id="tpla"> <div class="banner salut-banner"> <ul class="warper salut-warper"> <li class="">1</li> <li class="">2</li> <li class="">3</li> <li class="">4</li> <li class="">5</li> </ul> </div> <p class="sault-description">如果发现界面有salut-warper的元素,Salut会自动帮助你生成一个可以滑动的容器,结构如上</p> <a class="salut-btn J-async-module">去B界面</a> <p class="sault-description">点击按钮去B界面,异步加载B界面依赖的资源,如js html模板等</p> <a class="salut-btn J-local-module">去C界面</a> <p class="sault-description">点击按钮去C界面,并且将数据传入C界面。由于C是写在当前界面 无需再次请求资源文件</p> </script>
为你的界面添加样式,在app.css中写css。然后再地址栏中输入localhost:port/page_main#A.边可以看到我们的界面了。可以看到,salut为你创建了一个名为a的div,然后给它添加了若干class。相应地应用到了很多默认样式。
我们按照之前的规则创建第二个模块B,由于A和B是不同的模块文件,需要用到异步加载。现在由一个界面跳入另外一个界面需要用到一个方法:
router.myNavigate(‘B‘);
通过myNavigate方法,可以实现两个不同模块之间的跳转。
本次讲述了怎么样创建界面以及如何实现两个界面之间的交互。欢迎大家关注salut项目,并对它多多提出意见和建议。 https://github.com/constantince/Salut
标签:struct before 默认方法 mon 叠加 事件 lower async url
原文地址:https://www.cnblogs.com/constantince/p/5632482.html