单页WEB应用（一），结构和布局

最新推荐文章于 2024-05-03 00:02:41 发布

置顶

若叶岂知秋vip

最新推荐文章于 2024-05-03 00:02:41 发布

阅读量5.6k

点赞数 1

分类专栏： Javascript Web前端工程化文章标签： javascript web应用 web富应用开发

本文链接：https://blog.csdn.net/gccll/article/details/54973034

版权

单页WEB应用（一），结构和布局

前两天买了两本书，一本《基于MVC的Javascript Web富应用开发》这本拿到手第二天大概的翻了一遍，没怎么深入去看，主要前面讲的基本的一些东西，后面的有些还没太看懂，所以大概的过了一遍；目前主要看的是这第二本《单页Web应用》，这个看到了第三章 Shell开发，看到这里代码也走了一遍，今天算是纠结在 uriAnchor 上纠结了一整天，最后才发现原来只是一个属性值的问题，痛苦ing……

本来不太想写这系列的博客记录的，但是由于今天的纠结，还是决定把这本书的读书笔记，写下来，每个环节给记录下，也方便自己理请思路，和研究其中相关的技术点和所用到的框架什么之类的，也方便以后再看第二遍的时候回顾下自己的思路和理解。

第一章和第二章主要内容大概就是创建项目文件结构，和一些基本文档结构定义和编码，因此放这一起记录。

单页应用文件结构定义

现在大家都在讲究模块化了，虽然这里目前还没用到这些，但是思想还是不能落下的，还是要划分下文件结构。

由于是单页应用，主页面也就只有一个，本书思想大概是在单个页面文件中定义出简单的整体结构，然后通过功能划分定义每个模块，最后通过组装到一起形成整个应用。

文档结构

都是简单的目录划分，就没必要一个个解释了，下面的 shell 其实就是整个文档结构的核心部分，算是容器吧（刚拿到这本书，看目录时候还以为是那种命令行的shell呢，要写个 shell 吓出身冷汗Σ( ° △ °|||)︴）


结构中，css, js的文件名称都一一对应相应的页面来命名，比如：shell模块的样式，就用 spa.shell.css 等

---+ css
    ---- spa.css            // 对应主页面的样式
    ---- spa.shell.css      // shell 模块的样式
---+ js
    ---+ jq             // 由于该书的应用是基于 jQuery 实现的所以
        ---- jquery-1.9.1.js

        // 这个是个 URI 管理插件，是模拟浏览器后退前进功能的关键，后面会单独研究这个东西，被坑了一天（笨啊~~）
        ---- jquery.uriAnchor-1.3.3.js  
    ---- spa.js
    ---- spa.shell.js
---- spa.html   // 这个是单应用主页面
---- layout.html // 这个有点像是临时用的，给模块事先测试布局的

布局和样式编码

页面布局

结构定义创建好了，接下来就是将整体的布局和样式编码弄起来了，至少能看着像个样子，这里简单的绘制了个布局图

单页应用整体布局图

单页应用布局图

上图中，文档主体在：spa.html，其他部分其实都在 layout.html 中实现布局测试，然后生成 html 代码字符串，形成shell模块，通过initModule 添加到文档主体的容器中。

主页面：spa.html包含单页应用整体架构容器

这个页面代码量不多，目前来说，后面应该也不会太多，毕竟使用了模块概念，这样也避免了单页代码量太大的不良后续。
```
// spa.html
// spa.test.js 是自己加的一个测试模块文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SPA</title>

    <link 
```

最低0.47元/天解锁文章

若叶岂知秋vip

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
单页WEB应用（一），结构和布局

单页WEB应用（一），结构和布局前两天买了两本书，一本《基于MVC的Javascript Web富应用开发》这本拿到手第二天大概的翻了一遍，没怎么深入去看，主要前面讲的基本的一些东西，后面的有些还没太看懂，所以大概的过了一遍；目前主要看的是这第二本《单页Web应用》，这个看到了第三章 Shell开发，看到这里代码也走了一遍，今天算是纠结在 uriAnchor 上纠结了一整天，最后才发现原来只是一个属
复制链接

扫一扫