浅析jQuery Address Plugin

泡在网上的日子 / 文 发表于2014-12-21 20:51 次阅读 jQuery

你是否经历过这样的场景,坐在电脑前,打开网页,看到吸引人的图片,我们兴冲冲的点了进去,一看究竟。
进去后我们大呼上当,“什么破玩意儿啊”,接下来你会怎么做?
关闭网页?又或者是点击“后退”?如果你是“后退综合症”患者,点一下后退,不动,再点一下,又不动,~!@#$%^ 果断关毕这个网页~~

如果我是开发者,我有一个非常多页面的网站,为了不让页面重载,我用Ajax加载这些页面。
但是连我这样的小白都知道,Ajax请求不会改变url,浏览器没法保存历史记录,“前进” “后退”根本不能用~
自己想办法解决,当然没问题,onhashchange啊~iframe啊,肯定要花你不少时间,其实有个jQuery有个插件,把这个问题解决了,叫jQuery Address plugin~


使用jQuery Address plugin很简单,加一个文件,写几句代码:

<script type="text/javascript" src="jquery.address-1.4.js"></script>
    <script type="text/javascript">
        $.address.state('这里需要基本URL,地址不改变部分,一般为初始化进入页面地址').init(function(event) {
            //插件初始化,一般这里调用 $('.nav a').address(); 实现链接单击监听
        }).change(function(event) {
            //当页面地址更改的时候调用,即#号之后的地址更改
        }).internalChange(function(event) {
            //内部地址更改,即非通过手动更改URL#号后的内容
        }).bind('externalChange',function(event) {
            //外部地址更改,手动修改URL#号后的内容
        });
    </script>


你肯定想问,他是怎么实现的呢?我看了一下源码,总结了几个关键点:

1.自定义事件
Address定义了四个自定义事件(init,change,internalChange,externalChange),
   首次载入时,触发init()事件;
   其中只要url变化,会触发change()事件;
   点击链接自动改变url时,会触发内部变化internalChange()事件;
   点击浏览器前进后退时,会触发外部变化externalChange()事件。


_update:更新器,触发相应的自定义事件

    _update = function(internal) {
        _trigger(CHANGE);
        _trigger(internal ? INTERNAL_CHANGE : EXTERNAL_CHANGE);
        _st(_track, 10);
    },


_trigger:触发器,触发自定义事件,继承自jquery的trigger()方法。事件触发后,返回一系列location信息:

{
        value: $.address.value(),
        path: $.address.path(),
        pathNames: $.address.pathNames(),
        parameterNames: parameterNames,
        parameters: parameters,
        queryString: $.address.queryString()
    }

2.检测hash变化,此处要考虑浏览器兼容性

IE6、7要定时检测hash变化,其他浏览器用window.onhashchange监测。

if (!_supportsState()) {
        if ((_msie && _version > 7) || (!_msie && ('on' + HASH_CHANGE) in _t)) {
            if (_t.addEventListener) {
                _t.addEventListener(HASH_CHANGE, _listen, FALSE);
            } else if (_t.attachEvent) {
                _t.attachEvent('on' + HASH_CHANGE, _listen);
            }
        } else {
            _si(_listen, 50);
        }
    }
    listen = function() {
        if (!_silent) {
            var hash = _href(),
                diff = _value != hash;
            if (diff) {
                if (_msie && _version < 7) {
                    _l.reload();
                } else {
                    if (_msie && _version < 8 && _opts.history) {
                        _st(_html, 50);
                    }
                    _value = hash;
                    _update(FALSE);
                }
            }
        }
    }

支持HTML5的浏览器,引用了新的API,就是history.pushState和history.replaceState,通过这个接口可以做到无刷新改变页面URL。pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。

   if (_supportsState()) {
        _h[_opts.history ? 'pushState' : 'replaceState']({}, '', 
                _opts.state.replace(/\/$/, '') + (_value === '' ? '/' : _value));
    }

响应前进、后退操作,window对象上提供了onpopstate事件。

$(window).bind('popstate', _popstate).bind('unload', _unload);
    _popstate = function() {
        if (_value != _href()) {
            _value = _href();
            _update(FALSE);
        }
    },

IE6、7浏览器要创建iframe/frame,用来保存hash信息:

if (_msie && _version < 8) {
        var frameset = _d.getElementsByTagName('frameset')[0];
        _frame = _d.createElement((frameset ? '' : 'i') + 'frame');
        if (frameset) {
            frameset.insertAdjacentElement('beforeEnd', _frame);
            frameset[frameset.cols ? 'cols' : 'rows'] += ',0';
            _frame.noResize = TRUE;
            _frame.frameBorder = _frame.frameSpacing = 0;
        } else {
            _frame.style.display = 'none';
            _frame.style.width = _frame.style.height = 0;
            _frame.tabIndex = -1;
            _d.body.insertAdjacentElement('afterBegin', _frame);
        }
        _st(function() {
            $(_frame).bind('load', function() {
                var win = _frame.contentWindow;                
                _value = win[ID] !== UNDEFINED ? win[ID] : '';
                if (_value != _href()) {
                    _update(FALSE);
                    _l.hash = _crawl(_value, TRUE);
                }
            });
            if (_frame.contentWindow[ID] === UNDEFINED) {
                _html();
            }
        }, 50);
    }
    _html = function() {
        var src = _js() + ':' + FALSE + ';document.open();document.writeln(\'<html><head><title>' + 
            _d.title.replace('\'', '\\\'') + '</title><script>var ' + ID + ' = "' + encodeURIComponent(_href()) + 
            (_d.domain != _l.hostname ? '";document.domain="' + _d.domain : '') + 
            '";</' + 'script></head></html>\');document.close();';
        if (_version < 7) {
            _frame.src = src;
        } else {
            _frame.contentWindow.location.replace(src);
        }
    },

创建的iframe/frame,包含location的hash信息:

<IFRAME style="DISPLAY: none; WIDTH: 0px; HEIGHT: 0px" tabIndex=-1 src="javascript:false;document.open();document.writeln('<html><head><title>jQuery Address Events</title><script>var jQueryAddress = "%2Fjquery%2Faddress%2Fsamples%2Fevents%2Fabout";</script></head></html>');document.close();" jQuery1333892941446="10">
        <HTML>
        <HEAD>
          <TITLE>jQuery Address Events</TITLE>
             <SCRIPT>var jQueryAddress = "/jquery/address/samples/events/about";</SCRIPT>
           </HEAD>
           <BODY></BODY>
     </HTML>
    </IFRAME>


收藏 赞 (4) 踩 (1)
上一篇:放弃Bootstrap&Foundation,迎接Semantic UI?
emantic UI—完全语义化的前端界面开发框架,跟Bootstrap和Foundation比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。文章里详细介绍了Semantic UI自身的功能特性和优缺点。
下一篇:Simditor图片上传
上篇文章( Simditor使用方法 )只是简单的默认配置,我们可自定义工具栏按钮使其更丰富和实现上传图片功能 初始化编辑器 scripttype=text/javascript$(function(){toolbar=[title,bold,italic,underline,strikethrough,color,|,ol,ul,blockquote,code,table,|,