//api.js源码
/*
* APICloud JavaScript Library
* Copyright (c) 2014 apicloud.com
*/
(function(window){
var u = {};
var isAndroid = (/android/gi).test(navigator.appVersion);
var uzStorage = function(){
var ls = window.localStorage;
if(isAndroid){
ls = os.localStorage();
}
return ls;
};
function parseArguments(url, data, fnSuc, dataType) {
if (typeof(data) == 'function') {
dataType = fnSuc;
fnSuc = data;
data = undefined;
}
if (typeof(fnSuc) != 'function') {
dataType = fnSuc;
fnSuc = undefined;
}
return {
url: url,
data: data,
fnSuc: fnSuc,
dataType: dataType
};
}
u.trim = function(str){
if(String.prototype.trim){
return str == null ? "" : String.prototype.trim.call(str);
}else{
return str.replace(/(^\s*)|(\s*$)/g, "");
}
};
u.trimAll = function(str){
return str.replace(/\s*/g,'');
};
u.isElement = function(obj){
return !!(obj && obj.nodeType == 1);
};
u.isArray = function(obj){
if(Array.isArray){
return Array.isArray(obj);
}else{
return obj instanceof Array;
}
};
u.isEmptyObject = function(obj){
if(JSON.stringify(obj) === '{}'){
return true;
}
return false;
};
u.addEvt = function(el, name, fn, useCapture){
if(!u.isElement(el)){
console.warn('$api.addEvt Function need el param, el param must be DOM Element');
return;
}
useCapture = useCapture || false;
if(el.addEventListener) {
el.addEventListener(name, fn, useCapture);
}
};
u.rmEvt = function(el, name, fn, useCapture){
if(!u.isElement(el)){
console.warn('$api.rmEvt Function need el param, el param must be DOM Element');
return;
}
useCapture = useCapture || false;
if (el.removeEventListener) {
el.removeEventListener(name, fn, useCapture);
}
};
u.one = function(el, name, fn, useCapture){
if(!u.isElement(el)){
console.warn('$api.one Function need el param, el param must be DOM Element');
return;
}
useCapture = useCapture || false;
var that = this;
var cb = function(){
fn && fn();
that.rmEvt(el, name, cb, useCapture);
};
that.addEvt(el, name, cb, useCapture);
};
u.dom = function(el, selector){
if(arguments.length === 1 && typeof arguments[0] == 'string'){
if(document.querySelector){
return document.querySelector(arguments[0]);
}
}else if(arguments.length === 2){
if(el.querySelector){
return el.querySelector(selector);
}
}
};
u.domAll = function(el, selector){
if(arguments.length === 1 && typeof arguments[0] == 'string'){
if(document.querySelectorAll){
return document.querySelectorAll(arguments[0]);
}
}else if(arguments.length === 2){
if(el.querySelectorAll){
return el.querySelectorAll(selector);
}
}
};
u.byId = function(id){
return document.getElementById(id);
};
u.first = function(el, selector){
if(arguments.length === 1){
if(!u.isElement(el)){
console.warn('$api.first Function need el param, el param must be DOM Element');
return;
}
return el.children[0];
}
if(arguments.length === 2){
return this.dom(el, selector+':first-child');
}
};
u.last = function(el, selector){
if(arguments.length === 1){
if(!u.isElement(el)){
console.warn('$api.last Function need el param, el param must be DOM Element');
return;
}
var children = el.children;
return children[children.length - 1];
}
if(arguments.length === 2){
return this.dom(el, selector+':last-child');
}
};
u.eq = function(el, index){
return this.dom(el, ':nth-child('+ index +')');
};
u.not = function(el, selector){
return this.domAll(el, ':not('+ selector +')');
};
u.prev = function(el){
if(!u.isElement(el)){
console.warn('$api.prev Function need el param, el param must be DOM Element');
return;
}
var node = el.previousSibling;
if(node.nodeType && node.nodeType === 3){
node = node.previousSibling;
return node;
}
};
u.next = function(el){
if(!u.isElement(el)){
console.warn('$api.next Function need el param, el param must be DOM Element');
return;
}
var node = el.nextSibling;
if(node.nodeType && node.nodeType === 3){
node = node.nextSibling;
return node;
}
};
u.closest = function(el, selector){
if(!u.isElement(el)){
console.warn('$api.closest Function need el param, el param must be DOM Element');
return;
}
var doms, targetDom;
var isSame = function(doms, el){
var i = 0, len = doms.length;
for(i; i<len; i++){
if(doms[i].isEqualNode(el)){
return doms[i];
}
}
return false;
};
var traversal = function(el, selector){
doms = u.domAll(el.parentNode, selector);
targetDom = isSame(doms, el);
while(!targetDom){
el = el.parentNode;
if(el != null && el.nodeType == el.DOCUMENT_NODE){
return false;
}
traversal(el, selector);
}
return targetDom;
};
return traversal(el, selector);
};
u.contains = function(parent,el){
var mark = false;
if(el === parent){
mark = true;
return mark;
}else{
do{
el = el.parentNode;
if(el === parent){
mark = true;
return mark;
}
}while(el === document.body || el === document.documentElement);
return mark;
}
};
u.remove = function(el){
if(el && el.parentNode){
el.parentNode.removeChild(el);
}
};
u.attr = function(el, name, value){
if(!u.isElement(el)){
console.warn('$api.attr Function need el param, el param must be DOM Element');
return;
}
if(arguments.length == 2){
return el.getAttribute(name);
}else if(arguments.length == 3){
el.setAttribute(name, value);
return el;
}
};
u.removeAttr = function(el, name){
if(!u.isElement(el)){
console.warn('$api.removeAttr Function need el param, el param must be DOM Element');
return;
}
if(arguments.length === 2){
el.removeAttribute(name);
}
};
u.hasCls = function(el, cls){
if(!u.isElement(el)){
console.warn('$api.hasCls Function need el param, el param must be DOM Element');
return;
}
if(el.className.indexOf(cls) > -1){
return true;
}else{
return false;
}
};
u.addCls = function(el, cls){
if(!u.isElement(el)){
console.warn('$api.addCls Function need el param, el param must be DOM Element');
return;
}
if('classList' in el){
el.classList.add(cls);
}else{
var preCls = el.className;
var newCls = preCls +' '+ cls;
el.className = newCls;
}
return el;
};
u.removeCls = function(el, cls){
if(!u.isElement(el)){
console.warn('$api.removeCls Function need el param, el param must be DOM Element');
return;
}
if('classList' in el){
el.classList.remove(cls);
}else{
var preCls = el.className;
var newCls = preCls.replace(cls, '');
el.className = newCls;
}
return el;
};
u.toggleCls = function(el, cls){
if(!u.isElement(el)){
console.warn('$api.toggleCls Function need el param, el param must be DOM Element');
return;
}
if('classList' in el){
el.classList.toggle(cls);
}else{
if(u.hasCls(el, cls)){
u.removeCls(el, cls);
}else{
u.addCls(el, cls);
}
}
return el;
};
u.val = function(el, val){
if(!u.isElement(el)){
console.warn('$api.val Function need el param, el param must be DOM Element');
return;
}
if(arguments.length === 1){
switch(el.tagName){
case 'SELECT':
var value = el.options[el.selectedIndex].value;
return value;
break;
case 'INPUT':
return el.value;
break;
case 'TEXTAREA':
return el.value;
break;
}
}
if(arguments.length === 2){
switch(el.tagName){
case 'SELECT':
el.options[el.selectedIndex].value = val;
return el;
break;
case 'INPUT':
el.value = val;
return el;
break;
case 'TEXTAREA':
el.value = val;
return el;
break;
}
}
};
u.prepend = function(el, html){
if(!u.isElement(el)){
console.warn('$api.prepend Function need el param, el param must be DOM Element');
return;
}
el.insertAdjacentHTML('afterbegin', html);
return el;
};
u.append = function(el, html){
if(!u.isElement(el)){
console.warn('$api.append Function need el param, el param must be DOM Element');
return;
}
el.insertAdjacentHTML('beforeend', html);
return el;
};
u.before = function(el, html){
if(!u.isElement(el)){
console.warn('$api.before Function need el param, el param must be DOM Element');
return;
}
el.insertAdjacentHTML('beforebegin', html);
return el;
};
u.after = function(el, html){
if(!u.isElement(el)){
console.warn('$api.after Function need el param, el param must be DOM Element');
return;
}
el.insertAdjacentHTML('afterend', html);
return el;
};
u.html = function(el, html){
if(!u.isElement(el)){
console.warn('$api.html Function need el param, el param must be DOM Element');
return;
}
if(arguments.length === 1){
return el.innerHTML;
}else if(arguments.length === 2){
el.innerHTML = html;
return el;
}
};
u.text = function(el, txt){
if(!u.isElement(el)){
console.warn('$api.text Function need el param, el param must be DOM Element');
return;
}
if(arguments.length === 1){
return el.textContent;
}else if(arguments.length === 2){
el.textContent = txt;
return el;
}
};
u.offset = function(el){
if(!u.isElement(el)){
console.warn('$api.offset Function need el param, el param must be DOM Element');
return;
}
var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var rect = el.getBoundingClientRect();
return {
l: rect.left + sl,
t: rect.top + st,
w: el.offsetWidth,
h: el.offsetHeight
};
};
u.css = function(el, css){
if(!u.isElement(el)){
console.warn('$api.css Function need el param, el param must be DOM Element');
return;
}
if(typeof css == 'string' && css.indexOf(':') > 0){
el.style && (el.style.cssText += ';' + css);
}
};
u.cssVal = function(el, prop){
if(!u.isElement(el)){
console.warn('$api.cssVal Function need el param, el param must be DOM Element');
return;
}
if(arguments.length === 2){
var computedStyle = window.getComputedStyle(el, null);
return computedStyle.getPropertyValue(prop);
}
};
u.jsonToStr = function(json){
if(typeof json === 'object'){
return JSON && JSON.stringify(json);
}
};
u.strToJson = function(str){
if(typeof str === 'string'){
return JSON && JSON.parse(str);
}
};
u.setStorage = function(key, value){
if(arguments.length === 2){
var v = value;
if(typeof v == 'object'){
v = JSON.stringify(v);
v = 'obj-'+ v;
}else{
v = 'str-'+ v;
}
var ls = uzStorage();
if(ls){
ls.setItem(key, v);
}
}
};
u.getStorage = function(key){
var ls = uzStorage();
if(ls){
var v = ls.getItem(key);
if(!v){return;}
if(v.indexOf('obj-') === 0){
v = v.slice(4);
return JSON.parse(v);
}else if(v.indexOf('str-') === 0){
return v.slice(4);
}
}
};
u.rmStorage = function(key){
var ls = uzStorage();
if(ls && key){
ls.removeItem(key);
}
};
u.clearStorage = function(){
var ls = uzStorage();
if(ls){
ls.clear();
}
};
/*by king*/
u.fixIos7Bar = function(el){
if(!u.isElement(el)){
console.warn('$api.fixIos7Bar Function need el param, el param must be DOM Element');
return;
}
var strDM = api.systemType;
if (strDM == 'ios') {
var strSV = api.systemVersion;
var numSV = parseInt(strSV,10);
var fullScreen = api.fullScreen;
var iOS7StatusBarAppearance = api.iOS7StatusBarAppearance;
if (numSV >= 7 && !fullScreen && iOS7StatusBarAppearance) {
el.style.paddingTop = '20px';
}
}
};
u.fixStatusBar = function(el){
if(!u.isElement(el)){
console.warn('$api.fixStatusBar Function need el param, el param must be DOM Element');
return;
}
var sysType = api.systemType;
if(sysType == 'ios'){
u.fixIos7Bar(el);
}else if(sysType == 'android'){
var ver = api.systemVersion;
ver = parseFloat(ver);
if(ver >= 4.4){
el.style.paddingTop = '25px';
}
}
};
u.toast = function(title, text, time){
var opts = {};
var show = function(opts, time){
api.showProgress(opts);
setTimeout(function(){
api.hideProgress();
},time);
};
if(arguments.length === 1){
var time = time || 500;
if(typeof title === 'number'){
time = title;
}else{
opts.title = title+'';
}
show(opts, time);
}else if(arguments.length === 2){
var time = time || 500;
var text = text;
if(typeof text === "number"){
var tmp = text;
time = tmp;
text = null;
}
if(title){
opts.title = title;
}
if(text){
opts.text = text;
}
show(opts, time);
}
if(title){
opts.title = title;
}
if(text){
opts.text = text;
}
time = time || 500;
show(opts, time);
};
u.post = function(/*url,data,fnSuc,dataType*/){
var argsToJson = parseArguments.apply(null, arguments);
var json = {};
var fnSuc = argsToJson.fnSuc;
argsToJson.url && (json.url = argsToJson.url);
argsToJson.data && (json.data = argsToJson.data);
if(argsToJson.dataType){
var type = argsToJson.dataType.toLowerCase();
if (type == 'text'||type == 'json') {
json.dataType = type;
}
}else{
json.dataType = 'json';
}
json.method = 'post';
api.ajax(json,
function(ret,err){
if (ret) {
fnSuc && fnSuc(ret);
}
}
);
};
u.get = function(/*url,fnSuc,dataType*/){
var argsToJson = parseArguments.apply(null, arguments);
var json = {};
var fnSuc = argsToJson.fnSuc;
argsToJson.url && (json.url = argsToJson.url);
//argsToJson.data && (json.data = argsToJson.data);
if(argsToJson.dataType){
var type = argsToJson.dataType.toLowerCase();
if (type == 'text'||type == 'json') {
json.dataType = type;
}
}else{
json.dataType = 'text';
}
json.method = 'get';
api.ajax(json,
function(ret,err){
if (ret) {
fnSuc && fnSuc(ret);
}
}
);
};
/*end*/
window.$api = u;
})(window);
其中源码中使用到很多少见但很实用的原生javascript属性及方法
1.nodeType
nodeType属性可返回节点的类型
最重要的节点类型是
元素类型 节点类型
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
补充:
值-元素类型
1-ELEMENT
2-ATTRIBUTE
3-TEXT
4-CDATA
5-ENTITY REFERENCE
6-ENTITY
7-PI (processing instruction)
8-COMMENT
9-DOCUMENT
10-DOCUMENT TYPE
11-DOCUMENT FRAGMENT
12-NOTATION
由此引申出nodeName nodeValue
nodeName 属性含有某个节点的名称
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document
注释:nodeName所包含的XML元素的标签名称永远是大写
nodeValue
对于文本节点,nodeValue属性包含文本
对于属性节点,nodeValue属性包含属性值
nodeValue属性对于文档节点和元素节点是不可用的
2、JSON.stringify()方法 与 JSON.parse()方法
作用:这个函数的作用是为了系列化对象
也就是说把原来对象的类型转换成字符串类型(或者更确切的说是json类型的)。
语法:
JSON.stringify(value [, replacer] [, space])
value:是必须要的字段。就是你输入的对象,比如数组啊,类啊等等。
replacer:这个是可选的。它又分为2种方式,一种是方法,第二种是数组。
情况一:我们先说数据,通过我们后面的实验可以知道,它是和第一个有关系的。一般来说,我们系列化后的结果是通过键值对来进行表示的。
比如说:
name:"lan",age:25
这种形式。
所以,如果这种形式的话,如果第二个的值在第一个存在,那么的话就以第二个的值做key,第一个值为value进行表示,如果不存在,sorry,忽略。【是不是有点抽象,我也这么觉得,不过你等一下看实验 就OK了。。呼呼。】
情况二:如果是方法,那很简单,就是说把系列化后的每一个对象(记住 是每一个)传进方法里面进行处理。
space:很好理解,用什么来做分隔符的。
1.如果省略的话,那么显示出来的值 就没有分隔符。直接输出来
2.如果是一个数字的话,那么它就定义缩进几个字符,当然 如果大于10 ,则最大值为10.
3.如果是一些转义字符,比如“\t”,表示回车,那么它每行一个回车。
4.如果仅仅是字符串,OK,就在每行输出值的时候把这些字符串附加上去就OK。当然,最大长度也是10个字符。
开始用实例说明;
1.只有一个参数的情况下:
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
var json = JSON.stringify(student);
alert(student);
结果如下:
有些人可能会怀疑JSON.stringify的作用,OK。那假如,我们不要这个函数。代码下面的样子:
var student = new Object();
student.name = "Lanny";
student.age = "25";
student.location = "China";
// var json = JSON.stringify(student);
alert(student);
恭喜你 得到的结果是:
没骗你吧,继续。
2.第二个参数存在,并且第二个参数还是function的时候
var students = new Array() ;
students[0] = "Lanny";
students[1] = "dong";
students[2] = "I love you";
var json = JSON.stringify(students,switchUpper);
function switchUpper(key, value) {
return value.toString().toUpperCase();
}
alert(json);
//var json = JSON.stringify(students, function (key,value) {
//return value.toString().toUpperCase();
//});
上面的方法也可以换成下面的,2个都是一样,只是写法有那么一点点的不一样而已。
得到结果如下:
3.第二个参数存在,并且第二个参数不是function,而是数组的时候。
3.1 【误区】如果第一个参数是数组,第二个参数也是数组的话,只显示第一个参数的值。
比如: