jQloader 开源，集成 ajax、history、loading、orderTemplate

JohnLui 发布于2019-08-19 18:44 / 295人阅读

摘要：一款精简而丰富的微型框架，非常适合以为核心的项目使用。并集成指令模板进度条效果等功能。虽然支持载入页面的运行，但是由于安全限制以及可能出现的重复运行的问题，建议将所有写在主页面，事件以委托方式绑定。使用模式请求页面，这样可以保证是完全重载。

jQloader v0.2.3

一款精简而丰富的微型框架，非常适合以 jQuery 为核心的项目使用。
它的核心功能为 ajax + pushState 实现异步加载、路由、浏览器历史。并集成指令模板、进度条、loading效果等功能。

Home

https://moerj.github.io/jQloader

Features

指令模板，html 页面直接引入其他页面

动态加载，ajax 动态加载html页面

历史记录，ajax 页面会存入浏览器历史记录

路由机制，路由地址以#号连接在浏览器地址栏

自动载入效果，包括：进度条、蒙层等方式

Install

引入依赖 jQuery 或者 Zepto

HTML-Order jq-include

引入页面
ajax 方式请求一个页面，并放入在该容器中

jq-router

路由容器
整个浏览器窗口只能有一个jq-router，多余的将会被忽略。

用途：
呈现ajax页面的容器，用于显示地址栏#xxx.html部分的数据，如果页面上没有路由容器，则首次加载忽略路由地址。

提示：
当你需要一个页面有多个容器呈现其他 ajax 页面数据时，请使用 jq-include 指令。
jq-router 指令仅仅是用来读取浏览器历史数据和路由页面的。

可以直接使用 a 标签来请求一个页面，当你使用了 load 属性时，会屏蔽 herf 属性。
a 标签的锚点功能依然保留，但点击后标签不会改变地址栏，因为#号已被路由功能占用。_to be optimized_

私有属性：

load 点击后请求的url地址

to 请求到的页面存放容器，不设置时默认存放在 jq-router 容器

支持所有 Options 参数，属性参数可以为空，例如：

Options history

写入浏览器历史，默认 true

progress

加载时显示进度条，默认 true

loading

显示加载提示，并锁定界面，默认 false

cache

ajax开启缓存，默认 true

async

ajax请求异步，默认 true

title

请求数据后，改变浏览器tab页名称，默认 null

strict

严格模式加载 ajxa，默认 false
使用严格模式进行 ajxa 请求，此时请求会完全重载整个页面，防止重复js运行。
虽然支持 ajax 载入页面的 js 运行，但是由于安全限制以及可能出现的 js 重复运行的问题，建议将所有 js 写在主页面，事件以委托方式绑定。
若你还是想在 ajax 页面中写 js，有2种办法确保安全：

请确保这部分 js 没有对主页面和全局对象有事件绑定，不然很可能再次打开此页面时会重复绑定事件。

使用 strict 模式请求页面，这样可以保证是完全重载。

API loadPage

加载页面
ajax 方式加载页面到容器中

// 在一个 div 容器中加载页面
$("div").loadPage({
    url: "url string",  //请求地址，必须
    history: true,      //写入浏览器历史，默认 true
    progress: true,     //加载时显示进度条，默认 true
    loading: false,     //显示加载提示，并锁定界面，默认 false
    cache: true,        //开启缓存，默认 true
    async: true,        //异步，默认 true
    title: "string",    //浏览器tab页名称，默认 null
    strict: false       //严格模式加载 ajxa，默认 false
},function(){
    // callBack
})

loadFinish

加载页面后的回调
目标容器使用 loadPage 或者指令方式加载完数据后的回调

$("div").loadFinish(function () {
    // loadPage 完成，执行的代码
})

progressBar

加载进度条
loading 状态时顶部的进度条，页面加载时会自动执行。(注意：除非你有其他用途，通常进度条并不需要你去手动操作)

$.progressBar
.star()             //进度条开始
.stop()             //暂停
.reset()            //重置进度条 0%
.finish()           //走完进度条 100%
.setColor("color")  //设置进度条颜色

loadingMask

手动开启一个 loading 效果并锁定界面。
支持 FontAwesome 图标库，当引入后会有加载特效。

$.loadingMask
.show()
.hide()

专线服务私有云 ajax_history jquery_ajax_load orderTemplate jQloader

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79937.html

Ajax局部页面刷新和History API结合的陷阱

摘要：对于那些老网站或者老项目来说全盘改造成并不现实，于是就有了局部页面刷新这个解决方案。如果不知道局部页面刷新是何物请看这里，这里和这里。但实际上，第一次后退无法还原的内容陷阱，第二次后退页面刷新了一切恢复最初的样子。 ajax在现代网站已经得到非常普遍地应用，主要的好处大家都知道（异步加载数据，不用刷新整个浏览器，更小的数据传输尺寸）。对于那些老网站或者老项目来说全盘改造成ajax并不现...

JasinYip 2019-08-20 10:14 评论0 收藏0
vue 模仿今日头条demo

vue 头条 demo 写在前面总结一下写 demo 过程中遇到的一些问题，方便自己的学习总结！如有错误，还请指正！一直想学习使用 vue ，并准备以后在实际项目使用，之前跟着慕课网黄轶老师敲了一下饿了么商品购买页的demoele效果预览该 demo 借鉴自 hcy1996-github 这个项目，但内部内容，布局风格，完全不同，只为共同学习，共同交流数据接口直接打开今日...

simpleapples 2019-08-21 12:03 评论0 收藏0
PJAX是什么鬼【转载】

摘要：实际的效果见没有勾选的时候，点击链接是跳转的。为了支持，一个是在加载的时候判断浏览器是否支持另一个是当发现请求一段时间没有回复的时候可以设置参数，直接做页面跳转。背景目前看到的很多的pc端页面点击页面某块链接的时候，原本应该是页面的某个部分更新的，但是却整个页面刷新，整个页面都闪了一下。特别是看某些图集的页面，一个页面本来就几十张图看，看完眼睛都闪瞎了。用ajax加载数据可以解决这...

jindong 2019-08-20 13:58 评论0 收藏0