快速构建SPA框架SalutJS--项目工程目录 三

Posted 舟遥遥以轻飏,风飘飘而吹衣

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速构建SPA框架SalutJS--项目工程目录 三相关的知识，希望对你有一定的参考价值。

配置文件

在开始我们的第一个界面之前，我们需要把初始的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

 

以上是关于快速构建SPA框架SalutJS--项目工程目录 三的主要内容，如果未能解决你的问题，请参考以下文章

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

快速构建express项目

Vue.js：使用vue-cli快速构建项目

Vue.js：使用vue-cli快速构建项目

如何快速开发SPA应用

FastApi快速构建一个web项目