JQuery或Zepto单页应用路由Router

阅读更多
  • 之前一直都是在用AngularJs在做前台开发,这几天要做移动版页面,所以前端采用了Zepto+WEUI CSS来做,主要是因为Zepto比较小巧,用起来也JQuery一样锋利。
  • 用AngularJs时我们一直都是用ui-router做单页应用,为了保持PC端和移动链接地址一致,所以移动端也要采用ui-router风格的单页应用模式。找了一圈,发现vipspa可以实现这个功能,但跟我想要的还是有点儿不一样,于是拿来小改一下,改成ui-router风格的jquery或zepto的单页应用Router插件(见附件)。
  • 这里主要介绍如何使用。
  • index.html
  • 
    
    This is header.
    This is footer.
     
  • js 文件结构

  • JQuery或Zepto单页应用路由Router_第1张图片
     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
  • home

    console.log('This is the page home.');
     
     
  • content
  • content

    console.log('This is the page content.');
     
  • component
  • 这是器件页面 器件的uuid是:,id是:

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

  • JQuery或Zepto单页应用路由Router_第2张图片
     
  • 当我们进入index#/content路径是,我们可以进入content页面

  • JQuery或Zepto单页应用路由Router_第3张图片
     
  • 当我们进入index#/component/uuid001/item/item002的路径是,进入到component的页面,并获得路径中的参数

  • JQuery或Zepto单页应用路由Router_第4张图片
     这就是一个简单好用的Jquery router。
  • JQuery或Zepto单页应用路由Router_第5张图片
  • 大小: 3.2 KB
  • JQuery或Zepto单页应用路由Router_第6张图片
  • 大小: 2.6 KB
  • JQuery或Zepto单页应用路由Router_第7张图片
  • 大小: 15.3 KB
  • JQuery或Zepto单页应用路由Router_第8张图片
  • 大小: 11.4 KB
  • JQuery或Zepto单页应用路由Router_第9张图片
  • 大小: 11.2 KB
  • vipspa.min.zip (1.5 KB)
  • 下载次数: 186
  • 查看图片附件

你可能感兴趣的:(Jquery,zepto,vipspa,单页路由)