• ajax hash调用实例


    $('[com-view]').on('click', function (e) {
            // render($(this).data('view'));
            // hashRoute.render($(this).data('view'));
            view.render($(this).data('view'));
        })
    
        // 路由
        var HashRoute = function HashRoute(params) {
            var _self = this;
            this.init = function () {
                window.addEventListener('DOMContentLoaded', function () {
                    console.log('DOMContentLoaded');
                })
                $(document).ready(_self.setRoute);
                // 1.直接更改浏览器地址,在最后面增加或改变#hash; 
                // 2.通过改变location.href 或 location.hash的值; 
                // 3.通过触发点击带锚点的链接; 
                // 4.浏览器前进后退可能导致hash的变化,前提是两个网页地址中的hash值不同
                window.addEventListener('hashchange', _self.setRoute)
            }
    
            this.setRoute = function () {
                var route = layui.router();
                // layer.msg('只想弱弱提示<br>' + location.href);
                // console.log(route.href);
                if(route.href != undefined) {
                    route.href = route.href.substr(route.href.length - 1, 1) == '/' ? route.href + setter.entry : route.href;
                }
    
                ajaxModel.ajaxMethod({
                    url: setter.views + (route.href ? route.href : setter.entry) + setter.engine,
                    dataType: 'html',
                    successfn: function (e) {
                        $('.layadmin-tabsbody-item.layui-show').html(e);
                    },
                    errorfn: function (e) {
                        // e.status === 404 ? _self.render('tips/404') : _self.render('tips/error');
                    }
                })
            }
    
            this.skip = function (path) {
                location.hash = '#/${path}'
            }
    
            this.render = function (u) {
                location.hash = _self.correctRouter(u);
            }
    
            this.correctRouter = function (e) {
                return /^//.test(e) || (e = "/" + e),
                    e.replace(/^(/+)/, "/").replace(new RegExp("/" + setter.entry + "$"), "/");
            }
    
        };
        // const hashRoute = new HashRoute()
        // hashRoute.init();
    

    参考

    // 该写法为了满足多条件下的 CommonJs,Node.js, window,layui
    
    (function (name, factory) {
    	// 检测上下文是否为AMD或者CMD
    	var hasDefine = typeof define === "function",
    		// 检查上下文环境是否为Node
    		hasExports = typeof module !== 'undefined' && module.exports,
    		hasLayui = this.layui && layui.define;
    
    	if (hasDefine) {
    		// AMD 环境或者 CMD环境
    		define(factory);
    	} else if (hasExports) {
    		// 定义为普通的Node模块
    		module.exports = factory();
    	} else if (hasLayui) {
    		layui.define(['jquery', 'ajaxModel', 'setter'], function (exports) {
    			exports('view', factory());
    		});
    	} else {
    		// window对象
    		this[name] = factory();
    	}
    }
    
    )('view', function () {
    	"use strict";
    	var $ = layui.jquery,
    		setter = layui.setter,
    		ajaxModel = layui.ajaxModel;
    
    	var _self = null;
    	var View = function View(params) {
    		_self = this;
    	};
    
    	View.prototype.init = function () {
    		window.addEventListener('DOMContentLoaded', function () {
    			console.log('DOMContentLoaded');
    		})
    		$(document).ready(_self.setRoute);
    		// 1.直接更改浏览器地址,在最后面增加或改变#hash; 
    		// 2.通过改变location.href 或 location.hash的值; 
    		// 3.通过触发点击带锚点的链接; 
    		// 4.浏览器前进后退可能导致hash的变化,前提是两个网页地址中的hash值不同
    		window.addEventListener('hashchange', _self.setRoute)
    	}
    
    	View.prototype.setRoute = function () {
    		var route = layui.router();
    		// layer.msg('只想弱弱提示<br>' + location.href);
    		// console.log(route.href);
    		if (route.href != undefined) {
    			route.href = route.href.substr(route.href.length - 1, 1) == '/' ? route.href + setter.entry : route.href;
    		}
    
    		ajaxModel.ajaxMethod({
    			url: setter.views + (route.href ? route.href : setter.entry) + setter.engine,
    			dataType: 'html',
    			successfn: function (e) {
    				$('.layadmin-tabsbody-item.layui-show').html(e);
    			},
    			errorfn: function (e) {
    				// e.status === 404 ? _self.render('tips/404') : _self.render('tips/error');
    			}
    		})
    	}
    
    	View.prototype.skip = function (path) {
    		location.hash = '#/${path}'
    	}
    	View.prototype.render = function (u) {
    		location.hash = _self.correctRouter(u);
    	}
    
    	View.prototype.correctRouter = function (e) {
    		return /^//.test(e) || (e = "/" + e),
    			e.replace(/^(/+)/, "/").replace(new RegExp("/" + setter.entry + "$"), "/");
    	}
    
    
    	return new View(); // 返回构造
    
    });
    
  • 相关阅读:
    Java堆栈详解
    JVM 图形化监控工具
    Tomcat 7优化前及优化后的性能对比
    Java 枚举常见7种用法
    GitHub上如何删除repository仓库
    eclipse下使用git上传(下载)代码至(从)github
    标准的软件工程过程之文档标准
    maven添加本地非repository中的jar包
    Junit初级篇
    mongodb拷贝数据库copyDatabase()。实现释放磁盘空间的方法。
  • 原文地址:https://www.cnblogs.com/snmic/p/10400421.html
Copyright © 2020-2023  润新知