分为4块:
A : index.html壳子。    加载B  init-config.js,   加载D  header.html模板
B : init-config.js 个人信息+路由配置+权限+渲染单页。        加载C  navMenu.js
C: navMenu.js 处理头部+处理中间模板+总菜单。返回给B  init-config.js 
D: header.html模板。模板的作用,整个页面大部分除掉单页

A:Index.html:

一个空壳子,这个上面include进:header.html,   require.js,    init-config.js,

加进了所有的css,,,,配置了gulp打包的build,替换压缩后的文件,加入了百度统计

B:init-config.js

这个配置了:

Require.js的配置config
路由的map( 键 和 path路径+permission),

拿用户信息接口,返回了用户角色,姓名,权限码,存全局变量

Director.js的init方法,初始化路由

方法1,将路由map转化为对象,规则为:/aaa:function(){},键-方法,,键方法对,组合规则是directors的用法

方法2,即路由键对应的执行方法,当浏览器地址栏出现某/hash值的时候,获取此hash的路由map条目,拿到permission,

用户接口返回值判断是否登录-----》sso,

判断权限(permission与用户接口权限码,利用shiro-trie)------》403页,

去执行navMenujs拿到返回值-----》中间模板right。执行init方法(C模板介绍见后)

Ajax请求map的path路径的单页面,-------》渲染单页,根据right,是right.html(单页)或

CommonBus.html(单页),这个根据页面挖空的结构来。

C:navMenu。Js

配置所有工程的https://域名./

配置所有的菜单

清空container元素,移除所有监听

头部,登录,退出,用户名,游客的显示处理,监听登录/退出事件,-----》sso/首页

渲染头部模板,根据默认总菜单

渲染中间模板

渲染中间模板根据方法X

方法X:根据init传来的hash,window得来,拿到所有的一级菜单,二级菜单,三级菜单

D:header.html

所有二级菜单即各个工程,所有的页面,

整个页面(头部导航+中间模板(面包屑+左侧三级菜单等等))大部分都是这里拼的模板

架构

NavMenu.js所有工程公用,配置了总工程的菜单总表

单个工程如:investor的init-config.js只配置自己的map路由表

每个工程都有一个相同壳子A模块,每个工程有一个域名,每个工程有自己的路由表,每个工程有init-config。Js

即:A模块B模块各子工程具有自己的,

C模块D模块公用,放cdn。

C模块只作一个模块,define(‘C模块名’,【引用】,function(){});amd规范

D模块:公用,包括了各子工程的模板,nevMenu会根据哪个工程,渲染哪个工程的模板

头部导航几乎所有子工程可以公用模板。但是各子工程中间块设计不一样,所有有各自的中间模板。

directorjs和requirejs和artTemplate模板引擒建立的SPA框架的更多相关文章

  1. artTemplate模板引擎学习实战

    在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...

  2. artTemplate模板引擎

    artTemplate模板引擎         <li>索引 {{i + 1}} :{{value}}</li>     {{/each}} </ul> </ ...

  3. 一个简单的模板引(han)擎(shu)

    自制一个简单的模板引(han)擎(shu) 原理 说大了 实际上是模板函数 原理呢就是简单的字符串替换 第一版 var data = { username: 'Muhha' } str = '< ...

  4. 高性能前端 art-template 模板

    官网: https://aui.github.io/art-template/zh-cn/index.html nodejs 服务器端使用 第一步: 引入 art-template 的包 npm in ...

  5. django的小操作,查询效率up, 引用art-template模板+djangorestframework

    Part1: 提高查询效率newses = News.objects.select_related('category', 'author').get(id=1) # category和author字 ...

  6. thinkjs——art-template模板用法

    前言: 概述之前先附上此正式版介绍地址:https://github.com/aui/artTemplate  or http://www.jq22.com/jquery-info1097,可以再看下 ...

  7. ajax请求数据填充表格———使用art-template模板提高效率

    一.为什么要用art-template模板 在实习的一次项目中,因为需求中展示表格的字段有很多个,后端返回的也是json数据,这时候如果还是使用之前的字符串拼接,这样会开发得比较慢,而且容易出错,而且 ...

  8. nodejs中引入art-template模板

    使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便.没关系,这里我们使用art-template模板引擎,使 ...

  9. koa art-template模板引擎的使用

    art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...

随机推荐

  1. 阐述二维码的原理以及使用google api和PHP QR Code来生成二维码

    一.什么是二维码:二维码 (2-dimensional bar code),是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的.在许多种类的二维条码中,常用的码 ...

  2. Java 还是 C++?

    Java 特别象 C++:由此很自然地会得出一个结论:C++似乎会被Java 取代.但我对这个逻辑存有一些疑问. 无论如何,C++仍有一些特性是Java 没有的.而且尽管已有大量保证,声称Java有一 ...

  3. noip 模拟赛 After 17(递推+特殊的技巧)

    来源:Violet_II T1 好神的一题,我竟然没做出来QAQ 首先我们发现,答案是sigma(x[i]*x[j], i>j)+sigma(y[i]*y[j], i>j).显然只需要讨论 ...

  4. datagrid加分组后的效果

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAd8AAADdCAIAAAB13e+wAAAZgElEQVR4nO2d/28b533Hn7+APxnYgL ...

  5. Linux系统常用工具集

    整理Linux系统下一些日常工作中常用工具,旨在提高效率: 1.截图软件Shutter 2.通讯聊天工具pidgin 3.守护进程工具daemontools 4.远程桌面服务TigerVNC 5.Ma ...

  6. Java逍遥游记读书笔记<一>

    前言 必须先来一句,这是入门级别,高手勿喷~ 写Android的时候总有一些语句不是很理解,其实大部分是Java的内容,所以想系统的学下Java. 这本书——<Java逍遥游记>是在图书馆 ...

  7. MSDN--ASP.NET概述

    https://msdn.microsoft.com/zh-cn/library/4w3ex9c2(v=vs.100).aspx

  8. 第四篇:“ 不确定 "限制值的使用

    前言 前篇文章解释了限制值的五种类型以及获取它们的方法.但是对于其中可能不确定的类型( 45类型 ),当限制值获取函数返回-1的时候,我们无法仅通过这个函数返回值-1来判断是限制值获取失败还是限制值是 ...

  9. Office Developer Tools for Visual Studio 2012现在可用了

    [原文发表地址]   Now Available: Office Developer Tools for Visual Studio 2012 正如我以前写过的,我们正在为构建下一代Office和 S ...

  10. Delphi MessageBox

    MessageBox对话框是比较常用的一个信息对话框,其不仅能够定义显示的信息内容.信息提示图标,而且可以定义按钮组合及对话框的标题,是一个功能齐全的信息对话框信息提示图标,而且可以定义按钮组合及对话 ...