`
qq290063295
  • 浏览: 14924 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery或Zepto单页应用路由Router

Jqueryzeptovipspa单页路由
阅读更多
  • 之前一直都是在用AngularJs在做前台开发，这几天要做移动版页面，所以前端采用了Zepto+WEUI CSS来做，主要是因为Zepto比较小巧，用起来也JQuery一样锋利。
  • 用AngularJs时我们一直都是用ui-router做单页应用，为了保持PC端和移动链接地址一致，所以移动端也要采用ui-router风格的单页应用模式。找了一圈，发现vipspa可以实现这个功能，但跟我想要的还是有点儿不一样，于是拿来小改一下，改成ui-router风格的jquery或zepto的单页应用Router插件（见附件）。
  • 这里主要介绍如何使用。
  • index.html
  • <html lang="zh-CN">
<header>
<meta charset="utf-8"/>
</header>
<body>
	<!-- header -->
	<header>
		This is header.
	</header>
	
	<!-- main -->
	<div id="main">
		<div class="ui-view"></div>
	</div>
	
	<!-- footer -->
	<footer>
		This is footer.
	</footer>
	
	<script src="static/lib/zepto/zepto.min.js" type="text/javascript"></script>
	<script src="static/lib/vipspa/vipspa.min.js" type="text/javascript"></script>
	<script src="static/js/index/app.js" type="text/javascript"></script>
</body>
</html>
     
  • js 文件结构


  •  app.js
  • $(function() {
	vipspa.start({
		view: '.ui-view',// 装载视图的dom
		router: {
			'/home': {
				templateUrl: 'static/views/index/home.html',
				controller: 'static/js/index/controllers/home.js'
			},
			'/content': {
				templateUrl: 'static/views/index/content.html',
				controller: 'static/js/index/controllers/content.js'
			},
			'/component/:uuid/item/:itemid': {
				templateUrl: 'static/views/index/component.html',
				controller: 'static/js/index/controllers/component.js'
			},
			'defaults': '/home'// 不符合上述路由时，默认跳至
		},
		errorTemplateId: '#error'
	});
});
     
  • 视图片段文件结构


  •  
  • 每个视图就已经与每个Controller js绑定了，没个视图的展示与操作独立开来。
  • home
  • <p>home</p>
    console.log('This is the page home.');
     
     
  • content
  • <p>content</p>
    console.log('This is the page content.');
     
  • component
  • <h3>
这是器件页面
器件的uuid是：<span id="uuid"></span>，id是: <span id="itemid"></span>
</h3>
    var obj = vipspa.params;// 通过路由传递的参数

$('#uuid').text(obj.uuid);// 由:uuid指定位置的参数
$('#itemid').text(obj.itemid);// 由:itemid指定位置的参数
     
  • 效果
  • 当我们打卡index路径时，默认跳至home页面


  •  
  • 当我们进入index#/content路径是，我们可以进入content页面


  •  
  • 当我们进入index#/component/uuid001/item/item002的路径是，进入到component的页面，并获得路径中的参数


  •  这就是一个简单好用的Jquery router。
  • 大小: 3.2 KB
  • 大小: 2.6 KB
  • 大小: 15.3 KB
  • 大小: 11.4 KB
  • 大小: 11.2 KB
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    mobilerouterjs是轻量级web端单页面框架

    mobile-router.js 是轻量级web端单页面框架。 优势： 使用简单、方便、轻量，基于 history、window.onpopstate。... 无依赖，可与其他框架（库）搭配自由使用，例如：jquery, zepto, iscroll等。

    lcb:reactjs + react-router + alt.js + ratchet-2.0.2 + zepto.js 学习代码

    **React-Router**：React-Router是React生态中的路由管理库，它使得在单页应用中实现页面间的导航变得简单。通过定义路由规则，React-Router可以根据URL动态地渲染不同的组件，从而实现页面跳转而无需刷新整个页面。...

    基于vue2vueroutervueXES6scssaxioszeptovuecli

    `vue-router`是Vue.js官方的路由管理器，它允许我们在单页面应用(SPA)中定义和管理不同的视图。通过设置路由规则，我们可以根据URL导航到不同的组件，实现页面间的平滑过渡和数据传递。 `vuex`是Vue.js的状态管理库...

    backbone框架demo

    Backbone.js与jQuery有很好的兼容性，它默认依赖于jQuery（或Zepto）来处理DOM操作和事件。在"backbone框架demo"中，我们可以期待看到jQuery的选择器、事件绑定和Ajax请求等功能的使用。 8. **事件（Events）** ...

    JavaScript_Application_Architecture_with_Backbone.js

    - **Backbone.Router**：定义应用中的路由规则。 #### 八、总结 Backbone.js以其简洁的设计理念和强大的功能，为开发者提供了一个灵活高效的SPA开发框架。通过合理的模块划分和良好的设计模式应用，可以显著提升...

    backbone简介_动力节点Java学院整理

    Backbone.js 是一个轻量级的JavaScript库，专门设计用于构建客户端的MVC（模型-视图-控制器）应用程序。...在实际项目中，结合jQuery或Zepto等库，Backbone能够更好地处理DOM操作和事件处理，提高开发效率。

    devTools:常用的开发工具库、插件

    6. **vue-router**：作为Vue.js的官方路由库，vue-router用于管理SPA中的页面导航。它允许开发者定义路由规则，实现动态路由、命名视图、嵌套路由等功能，从而实现应用程序的页面跳转和状态管理。 7. **axios**：...

    js-libs:javascript库

    而对于大型的单页应用（SPA），则可能需要React、Angular或Vue这样的全面解决方案。 除了这些主流库，还有许多专注于特定领域的库，如D3.js用于数据可视化，Socket.io实现实时通信，Moment.js处理日期和时间等。...

    vue实现新闻展示页的步骤详解

    - Zepto.js：一个轻量级的JavaScript库，与jQuery API兼容，但专为现代浏览器优化，适用于快速开发。 - Vue.js：构建用户界面的渐进式框架，易于上手，集成数据绑定、组件化、虚拟DOM等特性。 - Vue.resource.js：...

Magicbox
Global site tag (gtag.js) - Google Analytics