安科网

JQuery或Zepto单页应用路由Router

85173253

85173253

2016-08-09

关注 关注
  • 之前一直都是在用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 文件结构

  • JQuery或Zepto单页应用路由Router
     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'
	});
});
     
  • 视图片段文件结构

  • JQuery或Zepto单页应用路由Router
     
  • 每个视图就已经与每个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页面

  • JQuery或Zepto单页应用路由Router
     
  • 当我们进入index#/content路径是，我们可以进入content页面

  • JQuery或Zepto单页应用路由Router
     
  • 当我们进入index#/component/uuid001/item/item002的路径是，进入到component的页面，并获得路径中的参数

  • JQuery或Zepto单页应用路由Router
     这就是一个简单好用的Jquery router。

zepto jquery 单页 ui-router

85173253

85173253

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

zepto快速入门教程

* DOM操作配置对象：jquery不同使用配置对象添加id，class。。。

小仙儿 2020-03-01

jquery和zepto的异同

文件大小比较小 只有8k左右 ,是目前功能库中最小的一个，尽管不大，zepto 所提供的工具足以满足开发程序的需要，大多数在jquery中常用的API和方法Zepto 都有，Zepto 和API大部分都能和jquery兼容 所以用起来和jquery差不多。

80437916 2020-02-01

Android、IOS浏览器的适配问题整理

移动端、 兼容/适配 、 IOS点击事件300ms延迟 、点击穿透 、 定位失败 ...onTouchmove 、 ontouched 、 ontouchstart 、 ontouchcancel。此问题是由于区分单击事件和双击屏幕缩放的历史原因造成的。2

zhoutaifeng 2020-01-17

为什么Web前端变的越来越复杂，变得更加难学了

前端发展了也有些年头了，曾记得很多年前，聊起前端，都觉得是很简单，那个时候都没有前端工程师这个职位。可现在，前端已经逆袭了，已经不是原来的样子了,各种技术层出不穷，显的越来越高深莫测了。前端真的变得那么难了吗？在我看来，前端还是原来的前端，虽然有些关变换，

xxuncle 2019-12-29

Zepto的使用

随着移动端的愈加火爆，目前很多HTML5的框架都在支持移动方向，比如：Vue.js，zepto.js，React Native等等。Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库， 它与jquery 有着类似的api。Zepto的设计

89463661 2019-12-26

webpack 转化未模块化的 js 库

script-loader 把我们指定的模块 JS 文件转成纯字符串，exports-loader 将需要的 js 对象 module.exports 导出，以支持 import 或 require 导入。怎样拿到一个包含更多模块的 zepto 包 ？通过

PowerITxiang 2019-11-04

Zepto.js

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zept

cloudwiseAPM 2017-05-26

jQuery，zepto源码的简单实现记录

本文记录jQuery，Zepto对js的一些封装库的知识，我希望从本文开始去深入学习js这门语言，以及在面向对象，原型上封装的使用。让自己在js方面有能够有一定进步。共勉jQuery库简单的jQuery库的实现需要先了解闭包，立即执行函数以及JavaScr

88570299 2019-07-01

你不需要 jQuery，但你需要一个 DOM 库

写这篇文章的目的，一方面是介绍一下自己编写的模块化 DOM 库 domq.js，另一方面是希望大家对 jQuery 有一个正确的认识，即使 jQuery 已经逐渐退出历史舞台，但是它的 API 将会以另外一种形式存在下去。jQuery 不会死去从 Git

momode 2019-07-01

为什么我们的web前端变的越来越复杂

前端发展了也有些年头了，曾记得很多年前，聊起前端，都觉得是很简单，那个时候都没有前端工程师这个职位。可现在，前端已经逆袭了，已经不是原来的样子了,各种技术层出不穷，显的越来越高深莫测了。前端真的变得那么难了吗？在我看来，前端还是原来的前端，虽然有些关变换，

Xhj 2019-06-29

Zepto 源码分析 4 - 核心模块入口

承接第三篇末尾内容，本篇结合官方 API 进入对 Zepto 核心的分析，开始难度会比较大，需要重点理解几个核心对象的关系，方能找到线索。Create a Zepto collection object by performing a CSS select

Awara 2019-06-29

Zepto 源码分析 3 - qsa 实现与工具函数设计

承接第一篇末尾内容，本部分开始进入 zepto 主模块，分析其设计思路与实现技巧：。};先从第一个与原型链构造不直接相关的工具函数 qsa 说起，观察 Zepto 的设计思路。selector.slice : selector, // Ensure tha

New丶Elements 2019-06-29

Zepto 源码分析 2 - Polyfill 设计

在进入 Zepto Core 模块代码之前，本节简略列举 Zepto 及其他开源库中一些 Polyfill 的设计思路与实现技巧。IE 模块 / CSSOM 相关 PolyfillZepto 的 IE 模块 src/ie.js 中仅仅包含了一个兼容性降级

ftl 2019-06-29

Zepto 源码分析 1 - 进入 Zepto

选择 Zepto 的理由Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery

thisisid 2019-06-29

前端学习 从零开始

之后可以模仿一些网站做些页面。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。

FruitHardCandy 2018-04-18

Zepto.js

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要

cloudwiseAPM 2017-05-26

zepto源码ajax模块学习

在学习zepto的源码的时候，不得不称赞这些人的厉害，我虽然能看明白，但是要我写，估计吭哧吭哧写不出来。虽然现在很少人使用zepto了，但是学习这些源码我相信每次看都能给咱们不同的感受。Deferred对象待会讲，deferred我认为是zepto设计最巧

野风技术札记 2019-06-28

zepto源码Callback

Callback模块是用来管理回调函数，也作为deferred延迟对象得基础部分，现在一起来看看他的源码。在加入参数进行实验，首先加入memory. 然后就是各个参数的的初始化，memory表示如果options.memory为true，则保存data，f

mzy000 2019-06-28

Zepto和jQuery获取select元素的选中值的文本

$("select[name=provience] option").not(function(){ return !this.selected }).text();

xiuping0 2016-05-17

requirejs直接引用zepto的方法

zepto并没有直接支持requirejs的引入，所以需要修改下源码，在v1.1.6版本line900处

aganliang 2016-04-12
85173253

85173253

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号