在开始单页面开发之前，首先先从制作多页面开始，为了简洁的说明，采取了简化了的简单的web登陆注册页面模型(如下图)
页面模型图
首先建立一个项目文件目录， 如下图
项目目录图
然后在html文件夹中建立4个空白的html页面，分别取名为index.html, login.html, register.html和goal.html, 代码如下
index.html
index.html的html部分
index.html的js部分
login.html
login,html的html部分
login.html的js部分
register.html
register.html的html部分
register.html的js部分
goal.html的代码很简单，仅仅作为测试页
共同样式如下图所示
css部分1
css部分2
css部分3
css部分4
最后得到的页面截图如下
index
login
register
总结：
在传统开发web页面的时候，使用多页面的形式开发，每个页面的开发流程一般都是先根据美工图进行html结构化，再通过样式美化，最后在js上处理业务逻辑。
在样式美化上，个别不规则的图片可以用css内联svg代码来实现，这样减少页面的引用的同时，还能灵活的更改代码要实现不同的图片。
业务逻辑的流程一般都是先选取dom元素，然后注册事件，通过事件更改页面布局，前后端数据交互等。
后续更新：传统多页面形式相比较单页面失去了很多灵活性，下次更新将每个页面对象化，通过一个html页面的js引入多个对象，然后操作页面对象来切换不同的页面。
原生开发移动web单页面(step by step)2——Page对象
原生开发移动web单页面(step by step)3——App对象
原生开发移动web单页面(step by step)4——tap事件与slide事件
网友评论