qpf.js 是一个JavaScript方法集合,提供了一些类似PHP常用的函数, 可提高PHP用户对js的开发的效率。

使用说明(Installation)

推荐使用方法:
1.下载 qpf.js 文件,并放入到项目中
2.在页面引入此文件 <script type="text/javascript" src="qpf.js"></script>
3.使用 qpf.方法名(参数) 的形式调用方法, 如下:

//比如输出文本到页面方法:
qpf.echo('Hello world!'); 	

公共 (一些常用的方法)

echo qpf.echo(strs)
输出内容到当前web页面,即调用`document.write(s)`;
echo_r qpf.echo_r(strs)
输出内容到当前web页面,带换行;
echor qpf.echor(strs)
输出内容到控制台;

示例
qpf.echo_r('ok-echo_r'); // 输出内容到页面, 带br换行。
qpf.echo('ok-echo'); // 输出内容到页面,例如html代码
qpf.echor('ok-echor'); // 输出内容到控制台,F12查看。





 显示一个明确的XML/HTML元素的包括所有后代元素的交互树
	                			
示例
qpf.print_r(['api', 'app', 'oop']);// 输出数组   0=api, 1=app, 2=oop, 
qpf.print_r({u:'pit', p:'win', id:123}); // 输出对象  u=pit, p=win, id=123,
qpf.print_r(['api', 'app', 'oop'], false); // 将返回,不直接输出
	                			

qpf.empty qpf.empty(var)
检查一个变量是否为空, 为空即true; 有值fasle;

示例
var a;
var b = "";
var c = {};
var e = [];
qpf.empty(a); // true
qpf.empty(b); // true
qpf.empty(c); // true
qpf.empty(e); // true
qpf.empty(null); // true
qpf.empty(0); // true
qpf.empty(0.0); // true
qpf.empty(false); // true
	                			

qpf.require qpf.require(files, successCallback, percentCallback)
异步载入JS文件(不影响页面渲染), 可加载一组js, 可计算进度

示例 输出
参数1: [必须]要加载的文件或文件集合(序列数组)
参数2: [可选]加载任全部完成是执行的回调函数
参数3: [可选]每执行完成一个任务, 就执行的回调函数

# 实例1 载入一个文件
qpf.require('qpf.js');

# 示例2 一次载入多个文件
var files = [
	qpf.root+'/lib/require.min.js',
	qpf.root+'/lib/html5.min.js',
];

qpf.require(files, function(errorArr, sucessArr) {
	// errorArr 数组加载失败的文件, errorArr.length 可获得失败数量
	// sucessArr 加载成功的文件
	qpf.echor('全部载入完成!');
}, function(percent, file, status) {
	// percent 当前加载的进度范围[0~0.5~1] 100%值为1, 方便自行计算css宽度.
	// 需百分比值可,  percent = parseInt(percent * 100); 转换为100% = 100
	
	// file 当前加载的文件地址
	
	// status 加载是否成功[true|false]
	
	if(status){
		//加载成功, 由于会自动写入js到页面, 无需仍和操作.
		
	} else {
		// 加载失败
	}
	
	//-- 注意 --//
	// - 由于通过ajax批量下载js代码后缓存, 最后在批量写入到页面DOM. 
	// - 所以percentCallback()最后一次, 转入值为 (1, 'all', true); 代表写入成功.
	// - 在外部自行计算进度数量时需注意. 否则多一个文件进度.
});

- 注意事项 -
- 加载一个失败的文件, 只会进行记录. 需自行处理业务逻辑.
- 加载集合中, 出现加载失败, 不会影响整体进度计算和加载流程. (等于不会失败的流程.)
- 失败终止问题: 由于是游览器脚本, 阻断页面流程没有意义. 体验极差.

测试工具:


0%
# 控制台输出(当前页面的实例)
[qpf_require_js][失败]: 20 : ./static/js/qpf.null9.js
[qpf_require_js][成功]: 40 : ./static/js/qpf.null1.js
[qpf_require_js][成功]: 60 : ./static/js/qpf.null2.js
[qpf_require_js][成功]: 80 : ./static/js/qpf.null3.js
[qpf_require_js][成功]: 100 : all
[qpf_require_js][结束]: 全部载入任务完成!

								

qpf.requireImg qpf.requireImg(sources, callback, callbackEach)
预加载图片, 加载完成通过回调创建img标签来显示图片.

示例
参数1: [必须]图片地址或图片地址集合(序列数组)
参数2: [可选]全部加载完成,执行的回调方法
参数3: [可选]每加载一个回调一次的回调方法

# 实例1  加载一张图片
qpf.requireImg('a.png');

# 实例2 加载一组图片
var path = './static/img';
var sources = [
	path + "/e_img.png",
	path + "/mail_img.png",
	path + "/somun_img.png",
	path + "/juz.png",
];
qpf.requireImg(sources, function(errorArr, sucessArr) {
	// errorArr加载失败的图片列表, sucessArr加载成功的图片列表
	console.log("加载失败数量:", errorArr.length);
}, function(percent, src, status) {
	// percent 当前加载的进度范围[0~0.5~1] 100%值为1, 方便自行计算css宽度.
	// 需百分比值可,  percent = parseInt(percent * 100); 转换为100% = 100
	
	// src 当前加载的文件地址
	
	// status 加载是否成功[true|false]
	
	if(status){
		//-- 加载成功将图片显示的方法 -- //
		$("#qpf_require_list").append("<img src='" + src + "'/><br>");
	} else {
		// 加载失败
	}
	
	
});


测试工具:

0%

qpf.requireCss qpf.requireCss(sources, callbackAll, callbackEach)
载入一个或多个css文件. 全部完成执行回调, 每载入一次执行的回调.

示例
参数1: 序列ID数组, 可单个字符串文件
参数2: 可选, 全部载入后执行的回调
参数3: 可选, 每载入成功一个执行一次的回调, 可获得(percent)进度和(src)当前css路径.

# 示例1
qpf.requireCss('a.css');

# 示例2
var sources = ['a.css', 'b.css']; // 必须序列数组
qpf.requireCss(sources, function(errorArr, sucessArr) {
	// 因为css地址错误返回404会完成进度. 所以不提供无用的参数.
	// 通过查看控制台的错误.
}, function(percent, src, status) {
	// percent 进度
	// src 资源css路径
	// status 当前css是否载入成功, [true|false]
});


								

qpf.autoload qpf.autoload.*()
自动加载组件依赖(css,js,img), 可动态注册组件并加载. 依赖载入成功执行回调.

示例 文档
# 第一步注册组件
qpf.autoload.reg(name, conf);
name: [必须]组件名称,字符串
conf: [必须]配置对象, 可包含3个属性, {js:[],css:[],img:[]}, 属性是可选的.无需图片可不设置.
*注: 该方法返回qpf.autoload对象,即可连贯操作.例如qpf.autoload.reg(name, conf).ext(name, callback);

# 第二步加载组件
qpf.autoload.ext(name, callback);
name: 组件名, 对应注册时的字符串
callback: [可选] 组件依赖载入完成后,执行的回调函数.
*注: 反复的调用一个组件. 不会重复载入依赖资源.

示例:
var conf = {
		'js': [
			qpf.root + '/../qpf-ui-examples/static/js/qpf.null1.js',
			qpf.root + '/../qpf-ui-examples/static/js/qpf.null2.js',
			qpf.root + '/../qpf-ui-examples/static/js/qpf.null3.js',
		],
		'css': [
			qpf.root + '/css/btn.css',
			qpf.root + '/css/icon.css',
			qpf.root + '/css/txt.css',
		],
		'img': [
			qpf.root + '/../qpf-ui-examples/static/img/e_img.png',
			qpf.root + '/../qpf-ui-examples/static/img/juz.png',
			qpf.root + '/../qpf-ui-examples/static/img/mail_img.png',
			qpf.root + '/../qpf-ui-examples/static/img/somun_img.png',
		],
};

qpf.autoload.reg('test', conf); // 注册

// 当需要是进行调用. 回调函数会传入加载详情对象, 例如{count: 10, load: 10, error: 0, info: {…}}
qpf.autoload.ext('test', function(o){
	qpf.echor(o); // 输出详情
	// 执行..test组件 初始化什么的.
});

{
	count: 总文件数量,
	load:  载入成功数量,
	error: 失败文件数量,
	info:{
		img: 0, // 图片数量
		css: 0, // css数量
		js: 0, // js数量
		err: [], // 载入出错的资源路径
	}
}

	                			

qpf.createJs qpf.createJs()
动态写入js代码到页面qpf.createJs('alert("ok");'),

示例
qpf.createJs('(function(d){})(window);');
								

类型 (一些类型检查的方法)

qpf.is_Undefined qpf.is_Undefined(var)
判断变量为Undefined, void 0;

示例
var a;
var b = 'src';
qpf.is_Undefined(a); // true
qpf.is_Undefined(b); // false
	                			

qpf.is_NaN qpf.is_NaN(var)
判断给定的值是`NaN` (NaN是唯一不等于自己的数字)

qpf.is_Element qpf.is_Element(var) | qpf.is_DOM(var)
判断变量为DOM元素

qpf.is_object qpf.is_object(var)
判断变量是否是对象

qpf.is_array qpf.is_array(var)
判断变量是否是数组

qpf.is_function qpf.is_function(var)
判断变量是否是函数

qpf.is_number qpf.is_number(var)
判断变量是整数或浮点数

qpf.is_string qpf.is_string(var)
判断变量是否是字符串

qpf.is_null qpf.is_null(var)
判断变量是否为`null`

qpf.is_bool qpf.is_bool(var)
判断变量为布尔

字符串 (操作文本的方法)

qpf.strlen qpf.strlen(strs, num)
返回字符个数或字节长度, 一个汉字字符对应的字节: GBK-2 utf8-3

示例
var strs = "a中文bcd";
qpf.strlen(strs); // 6
qpf.strlen(strs, 2); // 8, 一个汉字按2个字节, gbk长度
qpf.strlen(strs, 3); // 10, 一个汉字占3个字节, utf8
	        					

qpf.str_repeat qpf.str_repeat(str, num)
把一段字符串重复指定次数
str : [必选] 被重复的字符串
num : [必选]必须大于0, 重复次数

示例
var str = "love";
qpf.str_repeat(str, 0); // ''  null-string
qpf.str_repeat(str, 1); // love
qpf.str_repeat(str, 2); // lovelove
qpf.str_repeat(str, 3); // lovelovelove
	        					

qpf.explode qpf.explode('-', 'string', 2);
把字符串通过指定分隔符, 拆分为数组;

示例
参数1: 分隔符
参数2: 被分割的字符串, 需要包含分隔符
参数3: [可选] 限制返回数组元素的个数, 默认返回全部;

var str = "love-my-app";
qpf.explode('-', str); // ["love", "my", "app"]
qpf.explode('-', str, 2); // ["love", "my"]
								

qpf.substr qpf.substr(str, start, length)
返回字符串的一部分

示例
参数1: 字符串
参数2: 起始位置, 从0开始
参数3: [可选]截取长度, 默认到结尾

var str = "abcedfg";
qpf.substr(str, 0); // abcedfg
qpf.substr(str, 3); // edfg
qpf.substr(str, 0, 3); // abc
qpf.substr(str, 3, 1); // e
								

qpf.subString qpf.subString(str, len, hasDot)
截取字符串为指定长度(支持中文), 被截取掉的部分可用`...`代替

示例
参数1: 字符串
参数2: 限定的长度, 一个汉字占2个长度, 超过的将截掉
参数3: [可选] 被截掉的字符串替换, 例如`...`

var str = "a中文bcedfg";
qpf.substring(str, 3, '...'); // a中...
qpf.substring(str, 4, '...'); // a中...
qpf.substring(str, 5, '...'); // a中文...
qpf.substring(str, 10); // a中文bcedf , 无替换符号
								

qpf.strpos qpf.strpos(str, val, start)
查找字符串第一次出现的位置, 大小写敏感

示例
参数1: 完整字符串
参数2: 查找的内容
参数3: [可选] 设置查找的起始位置

var str = "root/string/user";
qpf.strpos(str, '/'); // 4
qpf.strpos(str, '/', 5); // 11
								

qpf.trim qpf.trim(str, type)
去除字符串中的空格, type 1-所有空格(默认) 2-前后空格 3-前空格 4-后空格

示例
var str = " a b c ";
qpf.trim(str); // "abc"
qpf.trim(str, 2); // "a b c"
qpf.trim(str, 3); // "a b c "
qpf.trim(str, 4); // " a b c"
								

数学 (一些计算的方法)

qpf.rand qpf.rand(len, type)
生成随机字符串

示例
参数1: 生成字符串的长度, 默认32
参数2: 生成的类型, 默认3,  [ 1:纯数字,2:纯字母,3:字母数字组合 ,4:数字 字母 配置的所有字符]

qpf.rand(); // CmxTAvYPNczvPdek4OUobemZztUjYGXi - 即 rand(32,3)
qpf.rand(32,1); // 80098523481204409501260122164463
qpf.rand(32,2); // yOCBfJdlsWqVzJQXBkjilOwkbyDmLdAl
qpf.rand(32,3); // lHbKEAbpV8YPdNpzsbEFlUhT90pjMVoD
qpf.rand(32,4); // 'sSs%kQQvsLX(iXghgpyzcZ40vM(AUOKP'

								

qpf.int qpf.int(strs)
转换值为整数; 浮点数去小数, 负数转正数, 以数字开头的字符串保留开头数字, 无法转换返回0;

示例
qpf.int('2.1'); // 2
qpf.int(2.1); // 2
qpf.int(-9); // 9
qpf.int('12aaa'); // 12
qpf.int('aaa12'); // 0
qpf.int('abc'); // 0
								

qpf.flot45 qpf.flot45(num, n)
小数点四舍五入到n位, 默认保留2位小数点;

示例
qpf.flot45(2.123456); // 2.12 默认保留2位
qpf.flot45(2.125456); // 2.13
qpf.flot45(2.125456, 1); // 2.1 
qpf.flot45(2.125456, 3); // 2.125
								

qpf.flotInt qpf.flotInt(num, up)
小数取整, 例如`-0.6 > -1`

示例
qpf.flotInt(2.4); // 3  默认向上取
qpf.flotInt(2.4, true); // 3
qpf.flotInt(2.4, false); // 2  向下取整
qpf.flotInt(-0.6, false); // -1 向下取整
								 

qpf.intlen qpf.intlen(int)
返回整数占用的字符串长度.

示例
var y = 1234;
qpf.intlen(y); // 4
								 

数组 (操作数组的方法)

在js中数组的键值key支持较弱, 尽量使用序列数组`['val1', 'val2', ...]`

数组操作
var arr = ['app', 'api', 'uid']; // 创建序列数组
var karr = []; karr['name'] = 'qpf'; karr[2] = 'api'; // 创建键值数组
	                			

qpf.is_array qpf.is_array(arr)
判断变量是否是一个数组

示例
var arr = ['app', 'api', 'uid'];
var obj = {'name':'user01', 'pwd':123};
qpf.is_array(arr); // true
qpf.is_array(obj); // false
	                		

qpf.count qpf.count(arr)
统计数组元素的个数

示例
var arr = ['app', 'api', 'uid'];
qpf.count(arr); // 3
	                			

qpf.in_array qpf.in_array(array, value)
判断指定值是否在数组中, 并返回元素值的键值, 支持序列和键值数组.

示例
var arr = ['app', 'api', 'uid'];
qpf.in_array(arr, 'app'); // 0
qpf.in_array(arr, 'api'); // 1
qpf.in_array(arr, 'uid'); // 2

var karr = [];
karr['a'] = 'app';
karr['b'] = 'api';
karr[4] = 'oop';
karr['c'] = 'uid';
qpf.in_array(karr, 'app'); // a
qpf.in_array(karr, 'oop'); // 4

var obj = {'name':'user01', 'pwd':123};
qpf.in_array(obj, 'user01'); // name
	                			

qpf.isset qpf.isset(array, key)
判断数组是否设置了指定元素, 设置了返回true(不管元素值). 否则false

示例
var karr = [];
karr['a'] = 'app';
karr['b'] = 'api';
karr[4] = 'oop';
karr['c'] = 'uid';

qpf.isset(karr, 'a'); // true
qpf.isset(karr, 4);  // true
qpf.isset(karr, 1);  // false
	                			

qpf.unset qpf.unset(strs)
从数组中删除指定键值

示例
# 键值数组
参数1: 数组
参数2: 键值名称, (键值名不能是数字)

var arr = [];
arr['a'] = 'ok';
qpf.unset(arr, 'a');
qpf.echor(arr); // [];

# 序列数组
参数1: 数组
参数2: 删除的起始位置, 从0开始.
参数2: 删除的元素个数, 0 代表不删除

var arr = ["love", "my", "app"];
qpf.unset(arr, 1, 1);
qpf.echor(arr); // ["love", "app"];
								

qpf.implode qpf.implode(str, '-')
将数组组合成字符串, 配合`explode()`方法使用

示例
参数1: 索引数组
参数2: [可选] 分隔符, 默认为逗号;

var str = ["love", "my", "app"];
qpf.implode(str); // love,my,app
qpf.implode(str, '-'); // love-my-app
qpf.implode(str, '|'); // love|my|app
								

qpf.forItem qpf.forItem(a, callfunc)
遍历数组

示例
// 序列数组
qpf.forItem = function(a, callfunc) {
	for (var i = 0; i < a.length; i++) {
		callfunc(i, a[i], a);
	}
}

var arr = [];
for (var i = 0; i < a.length; i++) {
	qpf.echor( i ); // 序列索引
	qpf.echor( arr[i] ); // 值
}

// 键值数组
for(var key in arr) {
	qpf.echor( key ); // 键名
	qpf.echor( arr[key] ); // 键值
}
								

qpf.array_merge qpf.array_merge(arr1, arr2)
合并两个数组,后面覆盖前面

示例
var conf1 = []; 
conf1['name'] = 'conf1';
conf1['path'] = '/root';
conf1['type'] = 'conf';

var conf2 = [];
conf2['name'] = 'conf2';
conf2['path'] = '/home';

qpf.array_merge(conf1, conf2); // [name: "conf2", path: "/home", type: "conf"]

var obj1 = {name:'obj1', type:'obj'};
var obj2 = {name:'obj2'};
qpf.array_merge(obj1, obj2); // {name: "obj2", type: "obj"}
								

qpf.array_merge_and qpf.array_merge_and(arr1, arr2)
连接两个序列数组, 不支持键值数组

示例
var arr = ['app', 'api', 'uid'];
var arr2 = ['oop'];
qpf.array_merge_and(arr, arr2); // ["app", "api", "uid", "oop"]
								

qpf.array_del_right qpf.array_del_right(arr) | qpf.array_pop(arr)
删除数组最右的一个元素, 末尾

示例
var arr = ['app', 'api', 'uid'];
qpf.array_del_right(arr); // uid
								

qpf.array_add_right qpf.array_add_right(arr, value) | qpf.array_push(arr, value)
向数组末尾添加一个或多个元素

示例
var arr = ['app', 'api', 'uid'];
var arr2 = ['oop'];
qpf.array_add_right(arr, 'oop'); // 4
qpf.array_add_right(arr, 'oop', 'pad'); // 5
qpf.array_add_right(arr, arr2); // 4
								

qpf.array_del_left qpf.array_del_left(arr) | qpf.array_shift(arr)
删除数组最左的一个元素, 首个

示例
var arr = ['app', 'api', 'uid'];
qpf.array_del_left(arr); // app
								

qpf.array_add_left qpf.array_add_left(arr, value) | qpf.array_unshift(arr, value)
向数组末尾添加一个或多个元素

示例
var arr = ['app', 'api', 'uid'];
var arr2 = ['oop'];
qpf.array_add_left(arr, 'oop'); // 4
qpf.array_add_left(arr, 'oop', 'pad'); // 5
qpf.array_add_left(arr, arr2); // 4
								

qpf.array_reverse qpf.array_reverse(arr)
颠倒数组, 第一个元素变成最后一个. 最后一个变第一个. 无返回值.

示例
var arr = ['app', 'api', 'uid'];
qpf.array_reverse(arr);
qpf.echor(arr); // ["uid", "api", "app"]
								

qpf.array_sort qpf.array_sort(arr)
普通排序, 针对数组的值(val)排序

示例
参数1: 数组
参数2: [可选] 数据类型,默认`str`, 对数字排序需设置`int`
					
var arr = ["a", "b", "A", "B"];
qpf.array_sort(arr);
qpf.echor(arr); // ["A", "B", "a", "b"]

var arr2 = [14, 2, 19 , 8];
qpf.array_sort(arr, 'int');
qpf.echor(arr); //  [2, 8, 14, 19]
								

qpf.array_sort_data qpf.array_sort_data(arrObj, keyName, type)
对二维数据数组进行排序, 参照某个元素的值来排序,支持数字和字符串

示例
参数1: 数组
参数2: 排序参照键名
参数3: 0升序, 1降序

var temp = [
     {"name":"user0",score:20,"age":10},
     {"name":"user1",score:30,"age":15}
   ];
var temp1 = qpf.array_sort_data(temp,"score",1);
qpf.echor(temp1); // 打印
0: {name: "user1", score: 30, age: 15} 
1: {name: "user0", score: 20, age: 10}
								

对象 (操作对象的方法)

qpf.property_exists qpf.property_exists(obj, key)
检查对象是否有指定的属性;

示例
var obj = {'name':'user01', 'pwd':123};
qpf.property_exists(obj, 'name'); // true
	        					

qpf.obj2str qpf.obj2str(obj)
对象转换为字符串

示例
var obj = {id:1234, name:ai};
var str = qpf.obj2str(location);
qpf.echor(str); //
(object): [object Object]
 id (number): 1234
 name (string): ai
 
测试工具:

								

qpf.json qpf.json.[tostr|parse](obj)
tostr--将JSON对象转换为字符串;parse--将字符串转换为JSON对象。

示例

tostr

# 转换简单数据类型 qpf.json.tostr({ author : 'user', age : 18, man : true, now : new Date() }); // {"author":"user","age":18,"man":true,"now":"2018-06-01T11:15:40"} # 多层嵌套的JSON var value = qpf.json.tostr({ now : new Date(), info : { age : 18, man : true, other : { homePlace : '北京' } } }); // {"now":"2018-06-01T11:18:43","info":{"age":18,"man":true,"other":{"homePlace":"北京"}}} # 参数不合法的情况下,转换会失败 var value = qpf.json.tostr({ el : document.body, fn : function(){ alert(1); }, u : undefined, flag : false }); // {"el":"[object HTMLBodyElement]","fn":function(){ alert(1); },"u":undefined,"flag":false}

parse

# 参数为合法的JSON格式字符串 var strJson = '{"author":"user","age":18,"man":true,"now":"2018-06-01T11:15:40"}'; qpf.json.parse(strJson); // {author: "user", age: 18, man: true, now: "2018-06-01T11:15:40"} # 参数不合法的情况 var strJson = "{a:1,b:2"; var json = qpf.json.parse(strJson); // null

组件 (实现特定功能)

qpf.ajax qpf.ajax(opt)
ajax请求, 支持post,get

示例
ajax({
    method: 'POST', // 默认`post`
    url: 'test.php', // 请求地址
    data: {
        name1: 'value1',
        name2: 'value2'
    },
    success: function (response) {
       console.log(response);
    },
    error: function (err) {
    	console.log(err);
    }
});
								 

qpf.print.* qpf.print.[show|clear|close](strs)
脱离页面流的信息输出!创建临时DIV来承载内容;
可多次调用,追加的写入,可清空,可卸载;

示例
qpf.print.show('test string!'); // 添加一条信息到呈现div中, div不存在自动创建

qpf.print.clear(); // 清空呈现div的内容

qpf.print.close(); // 删除呈现的div元素

# 点击测试 - 该方法无依赖,可独立执行



	                			

qpf.errorHandler qpf.errorHandler()
自定义格式的错误信息提示, 可拦截js的错误信息提示;

示例
qpf.errorHandler.on() // 开启

qpf.errorHandler.on(type, show), 
参数1-type:{1页面输出,2采用内置print.show()} 
参数2-show:控制台是否显示错误信息,默认true

qpf.errorHandler.off() // 关闭

效果展示:

QPF :-(

JS Error #1 :

Uncaught ReferenceError: aaaaa is not defined
File: http://127.0.0.1/x/x/x/demo/qpf.js.html - line(64)

qpf.outPageWarn qpf.outPageWarn()
用户离开页面时进行警告,例如操作未完成时刷新或关闭页面,游览器提示防止失误操作!
提供 qpf.outPageCall(function(){}) 离开页面时执行回调;

示例
测试工具: 启用后关闭或刷新页面,来查看效果!

	                			

qpf.titleMove.* qpf.titleMove.on(int)
滚动当前页面的标题,默认需要20个字才开始, 可手动指定。
qpf.titleMove.on(1); 1个字就开始滚动
关闭滚动 qpf.titleMove.off(); 会恢复为开启前的静态标题名称,也可指定;
使用off('str')手动指定标题后, 可调用off()来恢复为原始标题;

示例
qpf.titleMove.on();// 默认需要20个字

测试工具:

qpf.ismyHost qpf.ismyHost()
检测是否被盗链, 返回布尔值。

示例
 在控制台查看结果!

qpf.test.unitTime qpf.test.unitTime(name)
计算代码段执行的时间,测试js执行时间

示例
qpf.test.unitTime('login'); // 单元名称
// 业务逻辑代码...
qpf.test.unitTime('login'); // 再次执行会将login消耗的时间输出到控制台
在控制台查看统计!
								

请求 (一些请求处理的方法)

qpf.request.get qpf.request.get(name, defValue, url)
获取当前或url中的GET请求参数;

示例
参数1: 要获得的参数名, 未指定将返回所有参数
参数2: 设置获取失败后, 返回的默认值, 不指定可传入`null`
参数3: 不设置, 表示当前URL地址.

// 获取所有查询参数的集合
var all = qpf.request.get(); 
all.id; 或 all['id'] // 110

// 获取指定查询参数,不存在使用默认值
qpf.request.get('uid', '110')

// 根据指定url来获取查询参数, 默认值为`null`时关闭该功能
qpf.request.get('name', null, 'http://a.com?name=qpf')

测试工具:
 发送到控制台
								

qpf.request.sendGet qpf.request.sendGet(sData, isAdd)
发送get参数 - 刷新页面用指定的查询参数访问

示例
var _temUrl = "xxx.com?type=1";
qpf.request.sendGet('id=110'); // 追加参数, 访问`xxx.com?type=1&id=110`
qpf.request.sendGet('id=110', false); // 重写参数访问`xxx.com?&id=110`

测试工具:


 发送到控制台
								

qpf.request.parseParams qpf.request.parseParams(strs)
把get形式的参数字符串转成对象, 例`id=54&tt=6`

示例
// 将查询参数转换为对象
var getP = qpf.request.parseParams("id=54&tt=6");
qpf.echor(getP.id);  // 54
								

request.cookie.* qpf.request.cookie.set(name, value, time) qpf.request.cookie.get(name) qpf.request.cookie.del(name)
(set)设置, (get)获取, (del)删除Cookie

示例
参数1: 变量名称
参数2: 变量值
参数3: 存储时间, 单位秒, 默认30天, 设置0游览器关闭就失效

// 设置cookie
qpf.request.cookie.set('qpf-cookie', 'cookie_200', 0);
// 获取cookie
qpf.echor(qpf.request.cookie.get('qpf-cookie'));
// 获取不到返回默认值
qpf.request.cookie.get('qpf-cookie', 'def-value');
// 删除cookie
qpf.request.cookie.del('qpf-cookie');

测试工具:




								

qpf.request.mao qpf.request.mao(id, setHash)
获取url中的锚点值, 跳转锚点例如`#id`, `.class`;

示例
qpf.request.mao(); // 返回当前url的锚点值, 返回 `#request`
qpf.request.mao('#number'); // 跳转到指定ID位置, url地址的#值也会改变
qpf.request.mao('#number', false); // 跳转到指定id位置, url地址的#值不会改变
qpf.request.mao('.qpf-mao-test', false); // 跳转到.class类元素位置, 第二个参数必须为false



测试工具

 
  >>数学位置
 >>公共位置
								

qpf.request.mao_move qpf.request.mao_move(id, setHash)
用法与mao()相同, 只是不能获取当前url锚点值, 移动也是动画移动到锚点

示例
qpf.request.mao_move('#number'); // 跳转到指定ID位置, url地址的#值也会改变
qpf.request.mao_move('#number', false); // 跳转到指定id位置, url地址的#值不会改变
qpf.request.mao_move('.qpf-mao-test', false); // 跳转到.class类元素位置, 第二个参数必须为false



测试工具
 
  >>数学位置
 >>公共位置
								

qpf.request.url qpf.request.url(bool)
获取当前url地址, 传入值true将返回完整url;

示例
qpf.request.url(); // 127.0.0.1:8020/QPF-UI/source/qpf-ui-examples/qpf.js.html
qpf.request.url(true); // http://127.0.0.1:8020/QPF-UI/source/qpf-ui-examples/qpf.js.html?__hbt=1527302507417#request.get
							


								


*.以下内容采用集中演示

qpf.request.host qpf.request.host()
当前访问域名或者IP与端口(例如`127.0.0.1:8020`)

qpf.request.scheme qpf.request.scheme()
获得当前协议类型, 返回值为`http`|`https`;

qpf.request.port qpf.request.port()
返回当前访问的端口号;`80|8080`

qpf.request.doamin qpf.request.doamin(bool)
返回当前请求的域名, 传值`true`将带协议

qpf.request.pathinfo qpf.request.pathinfo()
返回url路径信息, 例`/QPF-UI/source/qpf-ui-examples/qpf.js.html`

qpf.request.query qpf.request.query()
获得当前请求的查询 `c=index&name=top`

示例集合
# 获取主机名 `www.xx.com`|`127.0.0.1:80`

# 获得协议类型`http`|`https`

# 获取端口号`80`

# 获取域名`www.xx.com`|`http://www.xx.com`


# ptahinfo路径信息`/user/1223.html`

# 获取url查询字符串`id=1&type=3`

# 获取url中#值, 锚点

								

qpf.request.route qpf.request.route.[set|get]()
前台路由控制 (实验版本), 通过锚点来设置和获取请求路线

示例
实例:






*. 根据自己的业务逻辑进行修改
								

页面 (操作页面的方法)

qpf.page.f5 qpf.page.f5(time, noCache)
刷新当前页面, time(int:延迟多少毫秒), noCache(bool:不使用客户端缓存)

qpf.page.left qpf.page.left()
返回并刷新

qpf.page.exit qpf.page.exit()
关闭当前页面, 安全游览器可能无法关闭.

qpf.page.open_winTag qpf.page.open_winTag(url, id)
打开新标签页, 设置id后, 新url将覆盖打开的页面

qpf.page.open_winFull qpf.page.open_winFull(url, id)
打开全屏弹窗显示url页面

qpf.page.openWin qpf.page.openWin(url, id, top, left, width, height)
打开自定义窗口

区域示例
# 刷新页面
qpf.page.f5(); // 立即刷新,不使用缓存									
qpf.page.f5(0, false); // 立即刷新, 从客户端缓存里取当前页
qpf.page.f5(0); // 立即刷新,默认值为true. 从服务端取最新的页面
qpf.page.f5(1000); // 1秒后刷新, 单位ms毫秒

# 打开新标签页面
qpf.page.open_winTag('//www.quiun.com'); // 在标签栏打开一个新页面, 类似a链接;
qpf.page.open_winTag('//www.quiun.com', '_d'); // 指定一个窗口ID, 只打开一个新标签页, 再次点击永久在这个页面刷新url地址.
# 打开窗口, 需要设置top或left 窗口位置属性, 一般设置为0
var top = 0;
var left = 0;
var w = 400;
var h = 400;
qpf.page.openWin('//www.quiun.com', '_d', top, left, w, h); // 保持只弹出一个窗口
qpf.page.openWin('//www.quiun.com', '', top, left, w, h); // 点击一次弹出一个

qpf.page.open_winFull('//www.quiun.com');  // 打开全屏弹窗
qpf.page.open_winFull('//www.quiun.com', '_id'); // 打开全屏弹窗, 设置id, 只打开一个.











		            
								

qpf.page.parse() qpf.page.parse()
返回当前页面的宽高,滚动条位置, 根元素对象, 例{top: 60,left: 0,width: 100,height: 100, root: obj};

示例
var arr = qpf.page.parse(); // {top: 16492, left: 0, width: 1050, height: 21366, root: html}
// top 滚动条垂直位置. left滚动条水平位置. width页面宽度(不含滚动条, 可加17) , height页面宽度,  root页面根元素(document.documentElement||document.body)
arr.width // 1050


								

qpf.page.scroll.*() qpf.page.scroll.[y|setY|setX]()
移动滚烫条到指定位置. 默认都平滑移动.

示例
qpf.page.scroll.y(60); // 居于当前滚动条位置, 向下60 
qpf.page.scroll.y(60, true);  // 居于当前滚动条位置, 向上60 

// 第三个参数, 传递任意值, 都将瞬移.
qpf.page.scroll.y(60, true, 0); // 向上, 瞬移  

qpf.page.scroll.setY(500); // 设置垂直滚动条的位置. 



								

游览器 (一些游览器检查的方法)

qpf.client.userAgent qpf.client.userAgent 属性
获取游览器描述

qpf.client.broswer qpf.client.broswer()
返回游览器类型

qpf.client.version qpf.client.version()
返回游览器版本号

qpf.client.isAndroid qpf.client.isAndroid()
是否安卓

qpf.client.isIphone qpf.client.isIphone()
是否iPhone(苹果)

qpf.client.isIpad qpf.client.isIpad()
是否isIpad(苹果)

qpf.client.isMobile qpf.client.isMobile()
是否移动端

qpf.client.isWeixin qpf.client.isWeixin()
是否微信APP

qpf.client.isIE qpf.client.isIE()
是否IE游览器

qpf.client.ieVer qpf.client.ieVer()
返回IE版本[7~11]

全部示例