一个完整的移动端项目的构建步骤——框架搭构2

首页部分

  这里暂且不管css和img部分,因为这里非常好处理,随便给css设置点东西,作为调试使用,接下来,开始正式的编写——

首先,将各种第三方插件全部加载进去,即

<script src="js/zepto.js"></script>
<script src="js/director.js"></script>

然后将下面的东西加载上去
<script src="js/module/baseModule.js"></script> ——基本模版
<script src="js/module/home.js"></script>    ——子模块特化home网页部分
<script src="js/module/rank.js"></script>    ——子模块特化rank网页部分
<script src="js/module/login.js"></script>    ——子模块特化login网页部分
<script src="js/route.js"></script>        路由调整用的js
<script src="js/init.js"></script>         中转站用的js

当然,里面的东西都是空。

然后,我们第一个书写baseModule部分。

我们会将多个网页的代码写在一个html中,通过display将其控制,显示或者隐藏,达到类似快速跳转的作用。而大部分的子页面中都存在重复东西,或者需要一个模板,所以我们专门建立这个网页共通模(mú)板。

时间: 2024-11-05 13:25:48

一个完整的移动端项目的构建步骤——框架搭构2的相关文章

一个完整的移动端项目的构建步骤——框架搭构1

首先是文件夹的构建,本来写得好好的一大串,结果浏览器崩了,懒得重写,所以这里就直接上图吧—— 其中—— css方面不用讲解了,事实上,这里可以用gulp进行处理的 img用来放图片的,不讲解了 js文件夹—— js文件夹里有一个module子文件夹,里面放的是各个子页面专用的js代码,这些代码被模块化后,统统放在这里,还有baseModule.js——所有的子页面都有共通的部分和不是的部分,不是的部分放在module里面,共同的部分就放这里了,为了减少代码 director.js——这个是第三方

一个完整的移动端项目的构建步骤——框架搭构4

1 window.routeModule = (function() { 2 //pageMap --> 页面映射存储关系表 3 var pageMap = { 4 home: homeModule, 5 rank: rankModule, 6 login: loginModule 7 } 8 //我为了控制每个页面进去.离开操作,我引入下面的逻辑 9 10 //缓存页面存储关系表 11 var pageCacheMap = { 12 //页面有没有被初始化的关系表 13 } 14 15 var

一个完整的移动端项目的构建步骤——框架搭构3

本章讲的是路由部分 再init中,代码非常少,只有这么点: new Router({ '/:pageName': function (pageName) { //执行对应的路由变化 routeModule.routers(pageName); }.bind(this) }).init('/home'); 这里主要是靠着监听到的哈希函数,然后将其作为参数传给下一个文件,可以看成定位用的代码. 哈希函数是什么,详细的请看教程,这里简单来说就是地址栏最后的一段字符串—— 上面的,#/rank和#/ho

一个完整的移动端项目的构建步骤——框架搭构6

基础的网页基本上之前讲的东西便足够了,但是网页基本上是离不开后台的数据的,当后台需要传一组数据过来让网页加载的时候,我们该怎么办? 首先,下面是rank页面,页面中显示一些程序的排名—— 1 <section style="display:none" id="rank" style="display:block" class="rank"> 2 <div class="rule_desc"

一个完整的移动端项目的构建步骤——框架搭构7

基本代码已经完成了,现在我们需要一点完善. 首先,在右上角有一个[详细规则]的字符串,我们需要给它添加事件——点击之后弹出一个遮罩层,遮罩层里面出现一个div,上面写了各种东西.这个div的最底部是一个超链接,可以接着进行跳转.点击遮罩层,除了div以外的部分,可以让遮罩层自动消失. 尽管这个只要利用jquery稍稍改进一下就可以了,但是这里我们需要用模块处理,好处就是,以后想要用遮罩的时候直接引用就好.于是,首先写一个模块: 1 window.Layer = (function(){ 2 3

做一个完整的Java Web项目需要掌握的技能

原文链接:http://blog.csdn.net/JasonLiuLJX/article/details/51494048 最近自己做了几个Java Web项目,有公司的商业项目,也有个人做着玩的小项目,写篇文章记录总结一下收获,列举出在做项目的整个过程中,所需要用到的技能和知识点,带给还没有真正接触过完整Java Web项目的同学一个比较完整的视角,提供一个所谓的"大局观",也以便于同学们更有针对性地学习.当然,这里所用到的例子项目是非常初级,简单的项目,所以大神们就可以不用往下看

做一个完整的Java Web项目需要掌握的技能[转]

转自:http://blog.csdn.net/JasonLiuLJX/article/details/51494048 最近自己做了几个Java Web项目,有公司的商业项目,也有个人做着玩的小项目,写篇文章记录总结一下收获,列举出在做项目的整个过程中,所需要用到的技能和知识点,带给还没有真正接触过完整Java Web项目的同学一个比较完整的视角,提供一个所谓的"大局观",也以便于同学们更有针对性地学习.当然,这里所用到的例子项目是非常初级,简单的项目,所以大神们就可以不用往下看了.

手动搭建一个完整的angular实践项目

以下我记录如何简单的搭建一个angular项目, 比较适合有前端基础,但又没有使用过angular的前端开发人员,因为我看到网上的教程又都配套的使用了一些其他框架或者打包工具,以及进行一些复杂的开发环境配置,不利于初级的人学习和理解.后续我也会陆续写几篇结合不同工具框架,以及在混合app开发中搭建angular框架项目. 应用场景: 基于angular的PC端web项目,采用require加载资源,使用angularAMD和angularCSS实现按需加载angular的controllers和

为大家提供一个完整的Hibernate Annotation项目_源码下载

http://www.meimeidu.com/Theme/Details/163371/http://www.meimeidu.com/Theme/Details/163370/http://www.meimeidu.com/Theme/Details/163369/http://www.meimeidu.com/Theme/Details/163368/http://www.meimeidu.com/Theme/Details/163367/http://www.meimeidu.com/T