快速構建SPA框架SalutJS--項目工程目錄三

時間 2019-12-14

標籤快速構建 spa 框架 salutjs 項目工程目錄简体版

原文原文鏈接

配置文件

在開始咱們的第一個界面以前，咱們須要把初始的html和config文件配置好。html很是簡單，只須要一個div做爲最外部的容器包裹着全部界面便可：javascript

<!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文件css

//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：html

//採用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.htmljava

<!-- 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。相應地應用到了不少默認樣式。git