directorjs和requirejs和artTemplate模板引擒建立的SPA框架

分为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框架的更多相关文章
- artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
- artTemplate模板引擎
artTemplate模板引擎 <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </ ...
- 一个简单的模板引(han)擎(shu)
自制一个简单的模板引(han)擎(shu) 原理 说大了 实际上是模板函数 原理呢就是简单的字符串替换 第一版 var data = { username: 'Muhha' } str = '< ...
- 高性能前端 art-template 模板
官网: https://aui.github.io/art-template/zh-cn/index.html nodejs 服务器端使用 第一步: 引入 art-template 的包 npm in ...
- django的小操作,查询效率up, 引用art-template模板+djangorestframework
Part1: 提高查询效率newses = News.objects.select_related('category', 'author').get(id=1) # category和author字 ...
- thinkjs——art-template模板用法
前言: 概述之前先附上此正式版介绍地址:https://github.com/aui/artTemplate or http://www.jq22.com/jquery-info1097,可以再看下 ...
- ajax请求数据填充表格———使用art-template模板提高效率
一.为什么要用art-template模板 在实习的一次项目中,因为需求中展示表格的字段有很多个,后端返回的也是json数据,这时候如果还是使用之前的字符串拼接,这样会开发得比较慢,而且容易出错,而且 ...
- nodejs中引入art-template模板
使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便.没关系,这里我们使用art-template模板引擎,使 ...
- koa art-template模板引擎的使用
art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...
随机推荐
- 如何使用 PsExec 执行远程命令
前言 这紧紧只是一篇纯技术分享.我们的程序在运行时需要连接多台目标机器,并拷贝目标机器上特定文件夹中的文件.为了方便访问,要在每台目标机器上建立一个特定用户,所以 PsExec 成了实现此功能的一个方 ...
- Java IO系统
理论上,我们可将任何程序分割为三部分:输入.处理和输出.这意味着 IO(输入/输出)是所有程序最为关键的部分.在这一章中,大家将学习Java 为此提供的各种类,如何用它们读写文件.内存块以及控制台 等 ...
- 【BZOJ】2017: [Usaco2009 Nov]硬币游戏(dp+神题+博弈论)
http://www.lydsy.com/JudgeOnline/problem.php?id=2017 这题太神了,我想了一个中午啊 原来是看错题一直没理解题解说的,一直以为题解是错的QAQ “开始 ...
- js计算百分比
function GetPercent(num, total) { /// <summary> /// 求百分比 /// </summary> /// <param na ...
- css position float (写的相当好)
对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...
- CopyOnWriteArrayList分析
ArrayList是比较常用的一个可变大小的数组集合,但是是不能同步的.如果多个线程同时访问一个ArrayList实例,其中至少一个线程从结构上修改了列表,那么它必须保持外部同步.一般通过加锁对象进行 ...
- boost数据结构any(很有用!)
any是一种特殊的容器,它只能容纳一个元素,但这个元素可以是任意类型; 可以用any保存任何类型,在任何需要的时候取出它; 这种功能和shared_ptr<void>类似,但是 ...
- android去权限反编译,签名,zipalign优化
反编译:上工具ApkTool 下载自行搜索google apktool github cd apktool目录 java -jar apktool_2.0.1.jar d xx.apk 生成xx目录 ...
- 一次显式GC导致的High CPU问题处理过程(转)
项目现场反馈系统出现性能问题,具体表现为:所有的客户端响应极其卡顿. 第一反应推测,难道是DB层面出现阻塞?检查v$session会话状态及等待类型未见异常,应该可以排除DB层面原因导致的可能. 继续 ...
- 最近5年133个Java面试问题列表
Java 面试随着时间的改变而改变.在过去的日子里,当你知道 String 和 StringBuilder 的区别就能让你直接进入第二轮面试,但是现在问题变得越来越高级,面试官问的问题也更深入. 在我 ...