配置文件

在开始我们的第一个界面之前，我们需要把初始的html和config文件配置好。html非常简单，只需要一个div作为最外部的容器包裹着所有界面即可：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5.     <meta name="format-detection" content="telephone=no" />
  6.     <meta name="viewport" content="user-scalable=no,initial-scale=1.0,maximum-scale=1.0,width=device-width" />
  7.     <meta name="apple-mobile-web-app-capable" content="yes" />
  8.     <meta http-equiv="Access-Control-Allow-Origin" content="*">
  9.     <!--全屏模式-->
  10.     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  11.     <!-- 基础样式文件 -->
  12.     <link rel="stylesheet" type="text/css" href="css/pdw.css">
  13.     <!-- 业务样式文件 -->
  14.     <link rel="stylesheet" type="text/css" href="css/app.css">
  15. 	<title>Bonjour</title>
  16. </head>
  17. <body>
  18. <!-- 最外层容器 -->
  19. <div id="pageWindow"></div>
  20. <!-- 引入require 载入入口文件 -->
  21. <script data-main="construction/app" src="construction/require.js"></script>
  22. </body>
  23.  
  24. </html>

接下来我们在construction目录中配置config文件和入口app.js文件

  1. //Config.js
  2. define(function(){
  3. 	//配置文件
  4. 	return {
  5. 		//模块跳转规则，在需要跳到下一个模块的默认方法需要配置
  6. 		PAGERULES: {
  7. 			A: ['a', 'c', 'g', 'i'],//每个模块文件下包含的界面名称小写
  8. 			B: ['b', 'd', 'h', 'k'],
  9. 			F: ['f', 'p', 'y', 'u'],
  10. 			Z: ['z'],
  11. 			Nav: ['footer', 'header']
  12. 		},
  13. 		//入口界面,即如果地址栏中没有输入hash 跳入哪个界面
  14. 		entrePage: 'A',
  15. 		//公共文件的名称
  16. 		commonJsModule: 'Nav',
  17. 		//界面切换动画时长 单位毫秒
  18. 		pageTransformDelay: 300,
  19. 		//动画弹出时长
  20. 		maskTransformDelay: 300,
  21. 		//html模板文件加载的路径配置
  22. 		loadHtmlPath: 'js/tpl/tpl',
  23. 		//模块文件加载的路径配置
  24. 		loadJsPath: 'use/',
  25. 		//ajax请求超时时间
  26. 		ajaxDelay: 7000
  27. 	}
  28. });
  29. //app.js
  30. var IP = 'localhost';
  31. require.config({
  32. 	baseUrl: 'js/',
  33. 	urlArgs:'version=1.0',
  34. 	paths: {
  35. 		salut: 'base/salut',
  36. 		config: 'Config'
  37. 	}
  38. });
  39. //require(function(base, page) {
  40. (function(root){
  41. 	require(['config'], function(C){
  42. 		console.log(C)
  43. 		var hash = root.location.hash.replace(/^#\/?/gi, '');
  44. 		if(hash.indexOf('?')> -1 ) {
  45. 			hash = hash.split('?')[0];
  46. 		}
  47. 		var config = C.PAGERULES;
  48. 		if(hash.indexOf('/')) {
  49. 			hash = hash.split('/')[0].toLocaleLowerCase();
  50. 		}
  51. 		for(var i in config) {
  52. 			if(config[i].indexOf(hash) >-1 ) hash = i;
  53. 		}
  54. 		hash != '' ? hash: C.entrePage;
  55. 		//首次加载文件
  56. 		require([C.loadJsPath + hash], function(){
  57. 			Backbone.history.start();
  58. 		});
  59. 	});
  60. })(window);

　第一个界面

配置完基础文件后我们开始配置我们的第一个配置界面文件A.js：

  1. //采用amd模式加载基础js
  2. define(['salut'], function(_PRO_) {
  3. 	//全局依赖变量pdw:创建项目界面模块 e: 公共事件函数 router:路由模块
  4. 	var PDW = _PRO_.PDW, router = _PRO_.Router, _exprots = {};
  5. 	//定义一个事件公共方法
  6. 	function refreshPage(e) {
  7. 		_exprots.A.children['g'].reloadView({
  8. 			word: 'bonjour mademoiselle, je suis programs'
  9. 		});
  10. 	}
  11. 	//A界面
  12. 	_exprots.A = PDW.createPage({
  13. 		//视图名称 *
  14. 		name: 'a',
  15. 		//界面标题 + 无需赘述
  16. 		title: 'A界面',
  17. 		//切换到此界面时是否重新获取数据，刷新本界面
  18. 		applyChange: false,
  19. 		//路由名称 +无需赘述，如果没有配置路由名称，则该界面没有加入路由规则当中去。一般是弹出界面无需配置此项
  20. 		route: 'A',
  21. 		//声明类型[normal, mask, navigate, child] 默认是normal
  22. 		type: 'normal',
  23. 		//如果该界面是某个界面的子界面，必须声明父级节点的id
  24. 		//parent: 'a',
  25. 		//界面加载需要的数据地址
  26. 		url: 'http://' + IP + ':8800/?way=a',
  27. 		//配置该页面的导航条
  28. 		nav: ['Footer', 'Header'],
  29. 		//本界面导航呈现的数据模型
  30. 		navInfo: {iconLeft: 'lattice', iconRight: 'me'},
  31. 		//backbone的界面扩展数据
  32. 		view: {
  33. 			//渲染之前的调用函数
  34. 			beforeRender: function() {
  35.  
  36. 			},
  37. 			//渲染界面后的回调函数
  38. 			afterRender: function() {
  39. 				//console.log(this.$el);
  40. 			},
  41. 			//注册界面事件
  42. 			pageEvent: {
  43. 				/*自定义事件 事件名 事件绑定元素-> 事件执行的方法名 : 事件的注册方法
  44. 				 同样的方法会叠加，如C界面也有toPage，那么执行完C界面的toPage方法之后会 回执行此处方法,
  45. 				 这个前提是tap目标选择器和父级一样，因为子界面在父界面之下，父界面的方法会捕获子界面方法
  46. 				*/
  47. 				'tap .J-async-module->goPageB': function(e) {
  48. 					router.myNavigate('B');
  49. 				},
  50. 				'tap .J-refresh->refreshPage': refreshPage,
  51. 				'tap .J-changeNav->changeNavA': function() {
  52. 						_exprots.A.children['i'].reloadView({
  53. 							word: '12121
  54. 							212121212'
  55. 						});
  56. 				},
  57. 				'tap .J-local-module->goPageC': function() {
  58. 					router.myNavigate('C/123/789', function() {
  59. 						this.addDataToModel({
  60. 							message: 'hello i am a message from page A'
  61. 						})
  62. 					});
  63. 				}
  64. 			}
  65. 		},
  66. 		//缺省模型数据
  67. 		model: {
  68. 			defaults: {
  69. 				say: 'hello',
  70. 				List: 'a ha good morning',
  71. 				other: ''
  72. 			}
  73. 		}
  74. 	});
  75. 	return _exprots;
  76. });

完了我再在js/tpl创建对应的模板文件tpla.html

  1. <!-- A界面 -->
  2. <script type="text/template" id="tpla">
  3. 	<div class="banner salut-banner">
  4. 	  <ul class="warper salut-warper">
  5. 	    <li class="">1</li>
  6. 	    <li class="">2</li>
  7. 	    <li class="">3</li>
  8. 	    <li class="">4</li>
  9. 	    <li class="">5</li>
  10. 	  </ul>
  11. 	</div>
  12. 	<p class="sault-description">如果发现界面有salut-warper的元素，Salut会自动帮助你生成一个可以滑动的容器，结构如上</p>
  13. 	<a class="salut-btn J-async-module">去B界面</a>
  14. 	<p class="sault-description">点击按钮去B界面，异步加载B界面依赖的资源，如js html模板等</p>
  15. 	<a class="salut-btn J-local-module">去C界面</a>
  16. 	<p class="sault-description">点击按钮去C界面，并且将数据传入C界面。由于C是写在当前界面 无需再次请求资源文件</p>
  17. </script>

为你的界面添加样式，在app.css中写css。然后再地址栏中输入localhost:port/page_main#A.边可以看到我们的界面了。可以看到，salut为你创建了一个名为a的div，然后给它添加了若干class。相应地应用到了很多默认样式。

交互和跳转

我们按照之前的规则创建第二个模块B，由于A和B是不同的模块文件，需要用到异步加载。现在由一个界面跳入另外一个界面需要用到一个方法：

  1. router.myNavigate('B');

通过myNavigate方法，可以实现两个不同模块之间的跳转。

结束

本次讲述了怎么样创建界面以及如何实现两个界面之间的交互。欢迎大家关注salut项目，并对它多多提出意见和建议。https://github.com/constantince/Salut

快速构建SPA框架SalutJS--项目工程目录 三的更多相关文章

  1. 快速构建SPA框架SalutJS--项目工程目录 一

    起因 刚进公司那会儿,接的是一个微信APP应用,SPA是前人搭起来的,用到的技术主要是backbone和zepto.后来那人走了,就卤煮一个人把项目接了下来.项目越是到后面,越发觉了诸多弊端,不停的增 ...

  2. 快速构建SPA框架SalutJS--项目工程目录 二

    目录结构 上面这张图是salut的目录文档,从github上将其下载后直接运行node run和 node json 可以直接启动项目.下面逐个介绍每个目录的存放的文件和作用. constructio ...

  3. 使用 Spring Boot 快速构建 Spring 框架应用--转

    原文地址:https://www.ibm.com/developerworks/cn/java/j-lo-spring-boot/ Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2 ...

  4. 使用 Spring Boot 快速构建 Spring 框架应用,PropertyPlaceholderConfigurer

    Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...

  5. 使用 Spring Boot 快速构建 Spring 框架应用

    Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...

  6. Myeclipse项目工程目录中各种Libraries的含义

    MyEclipse工程目录下一般会有以下几类Libraries,如图: 各种Libraries的含义如下: JRE System Library:Java SE 的常用库文件集合,构建任何Java项目 ...

  7. Maven项目工程目录

    maven工程目录规范: src/main/java   存放项目的.java文件 src/main/resources   存放项目的资源文件,如spring.hibernate配置文件 src/t ...

  8. maven项目工程目录约定

    使用maven创建的工程我们称它为maven工程,maven工程具有一定的目录规范,如下: src/main/java —— 存放项目的.java文件 src/main/resources —— 存放 ...

  9. 快速构建hibernate框架

    手动配置Hibernate框架的配置,极易出现问题,在Eclipse的web项目中,我们可以快速配置,方便快捷 一.导入Hibernate框架所需要的jar文件 二. 窗口—Perspective—打 ...

随机推荐

  1. 在Workload Automation中实现suspend分析

    1. 背景 这里涉及到两个工具analyze_suspend.py和Workload Automation. 下面analyze_suspend.py简称为ASPY,Workload Automati ...

  2. 什么是设计思维Design Thinking——风靡全球的创造力培养方法

    “把学习带到现实中,让孩子用自己的力量创造改变,可以直接提升他们的幸福感和竞争力.” 这是“全球孩童创意行动”的发起人——Kiran Sethi在TED演讲时说的一句话,这个行动旨在引导中小学生主动寻 ...

  3. oracle中数据类型对应java类型

    地址: http://otndnld.Oracle.co.jp/document/products/oracle10g/102/doc_cd/Java.102/B19275-03/datacc.htm ...

  4. jQuery.on() 函数详解 【转载】

    注意事项 1:on()为指定元素的一个或多个事件绑定事件处理函数.(可传递参数) 2:从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind(). d ...

  5. json & pickle 序列化

    #!/usr/bin/python # -*- coding: utf-8 -*- # 序列化: 例如把字典写进文件 info = { 'name': 'alex', 'age': 22 } f = ...

  6. codeForces 472D 最小生成树

    题目大意:给出一个图中点的两两距离,问是否是一棵树,若是,求出平均边权最大的点 prim最小生成树,若原图是树,则最小生成树的距离就是原距离.否则不是. 搞出来树了,第二问随便dfs就好了. #inc ...

  7. BZOJ_4870_[Shoi2017]组合数问题_矩阵乘法

    BZOJ_4870_[Shoi2017]组合数问题_矩阵乘法 Description Input 第一行有四个整数 n, p, k, r,所有整数含义见问题描述. 1 ≤ n ≤ 10^9, 0 ≤ ...

  8. 计算机17-3,4作业C

    C.Class Degisn Description 定义一个Circle类,有成员变量(或称之为域)x,y(圆心坐标)r(圆半径),成员方法intersect()两个圆是否相交的判断方法,和所需要的 ...

  9. unison+inotify的Web目录同步方案

    1.在Linux下做WEB目录文件同步 一般有如下几种方式: ----------------------------------------------- 1)       nfs实现web数据共享 ...

  10. Vue.js 牛刀小试（持续更新~~~）

    一.前言 这个系列的文章开始于今年9月从上一家公司辞职后,在找工作的过程中,觉得自己应该学习一些新的东西,从前几章的更新日期也可以看出,中间隔了很长的时间,自己也经历了一些事情,既然现在已经稳定了,就 ...