AppBaseJs 类库 网络常用的javascript函数及任何js类库

2019-09-13 23:52 来源:未知

响应式加强安排

2015/03/18 · CSS, HTML5, JavaScript · 响应式, 设计

本文由 伯乐在线 - fzr 翻译,黄利民 校稿。未经许可,禁止转载!
葡萄牙共和国语出处:24ways.org。招待参预翻译组。

24ways 在那10年中早已稳步庞大了。在因特网历史中那已是一个世代永世的了。回顾一下在前段时间里大家见证全体更换:Ajax的起来,移动设备的骤增,前端开辟工具不可预言的前景。

工具和本领来来往往,兴起收缩,但在过去的十年中有一件事于笔者来讲是一直未曾生成的:渐进式巩固。

渐进式巩固不是一门技能。它更像是一种思维格局。渐进式巩固鼓舞你去观念网页所提供的主导意义,并非去想叁个已造成网页如何体现的细小意思。所以渐进式巩固允许你以更抽象的议程思量焦点职能,并不是纠结于网页在不利的宽屏设备上的优良状态。

要是你早就规定要增加的骨干效率是怎么着–向购物栏中增多一件商品,公布一条新闻,分享一张图片–然后您能够以一种最简便的艺术完成该功效。那平时也代表要从能够的不适合时机的HTML出手。你所须求的平凡只是链接和表格。然后,只要您曾经使得该中央成效核心专门的学问,你就能够起来对更加多今世浏览器抓好际效果果以稳步提供更加好的顾客体验。

以这种格局行事的裨益不止是你的网页能够在旧式浏览器中央银行事(尽管只是主导能运作)。它还是能担保如若在今天的浏览器中出现的小毛病不至于产生大祸。

群众对渐进式巩固存在一个误会,认为渐进式巩固便是花时间解决旧式浏览器,但是谜底却反倒。将基本成效投入使用并不会花费太久。并且要是你早就完成这一部分办事,你就足以恣心纵欲地去测量试验新型最棒的浏览器技巧,脑中的意识是不怕它们今后还无法被相近援救,也未曾难题,因为你早就把最保证的东西投入使用了。

对待Web发展的关键在于意识到不会有最后的接口—大概会有好多独有一线差距但会借助于自由时刻大肆用户的性质和体积的接口。网址无需在每二个浏览器中都扳平。

确实理解了那么些就是一个高大地开发进取。你能够把日子开支在为越多浏览器提供最棒心得的还要保证能在另外塑造工作的地点落到实处大旨效率,并非努力使您的网址在出入巨大的浏览器中如出一辙。

允许本人以叁个简短的例子来发挥:导航。

先是步:大旨成效

设若我们未来有八个关于圣诞节12天欢乐的简练网址,一天二个页面。这么些基本职能也异常清楚了:

1、了然个中专擅一天。
2、从一天到另一天浏览。

率先个成效能够经过将文件用头条,段落以及具备常用的HTML结构化标签组装起来落成。第叁个则经过一名目好些个的超链接完结。
那正是说未来导航列表最契合放在哪个地方吗?个人来说,作者是三个跳转到页脚导航情势的听众。那一个情势先放网页内容,其次才是导航。页面顶端有多个饱含href属性的连年指向导航的价签。

XHTML

<a class="control" href="#menu">Menu</a> ... <nav id="menu" role="navigation">... <a class="control" href="#top">Dismiss</a></nav>

1
2
3
4
5
<a class="control" href="#menu">Menu</a>
...
 
<nav id="menu" role="navigation">...
<a class="control" href="#top">Dismiss</a></nav>

查看页脚超链导航航空模型型式的亲自去做。

由于唯有超链接,这些形式也只是在互联网初兴时代能在每三个浏览器上干活。Web浏览器要做的只是呈现超链接(正如名字所示)。

其次步:巩固型布局

在小荧屏设备上,举个例子移动电话,页脚链接方式是叁个一定轻易的消除办法。一旦有更加多的显示器空间可使用时,就能够运用CSS将导航重新定位在剧情之上。作者得以安装position属性为absolute,使用弹性布局盒,或许安装display属性为table。

CSS

@media all and (min-width: 35em) { .control { display: none; } body { display: table; } [role="navigation"] { display: table-caption; columns: 6 15em; } }

1
2
3
4
5
6
7
8
9
10
11
12
@media all and (min-width: 35em) {
  .control {
    display: none;
  }
  body {
    display: table;
  }
  [role="navigation"] {
    display: table-caption;
    columns: 6 15em;
  }
}

翻开宽屏样式的身体力行。

第三步:增强!

没有错。将来笔者曾经可感到全数人提供基本成效了,並且对宽屏也是有一定不错的响应风格设计。到此地本人能够告一段落脚步了,但渐进式巩固的实际上优点却是小编还从未大功告成的。从这时开头,笔者能够疯狂地为今世浏览器增多各类稀奇奇异的优化成效,而不用担忧不能够为旧式浏览器提供退路—退路已经希图好了。

实际小编想为小显示器的道具提供一个不错的屏外画布。下边是作者的规划:

1、 将导航放置在主内容下边。
2、 监听伪类为.control的链接是还是不是被点击并阻碍其影响。
3、 当那一个链接被点击后,为主题body切换赋予伪类.active。
4、 如若伪类.active存在,将内容滑出以展现导航。

上面是定点内容和导航的CSS代码:

CSS

@media all and (max-width: 35em) { [role="main"] { transition: all .25s; width: 100%; position: absolute; z-index: 2; top: 0; right: 0; } [role="navigation"] { width: 75%; position: absolute; z-index: 1; top: 0; right: 0; } .active [role="main"] { transform: translateX(-75%); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media all and (max-width: 35em) {
  [role="main"] {
    transition: all .25s;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  [role="navigation"] {
    width: 75%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
  }
  .active [role="main"] {
    transform: translateX(-75%);
  }
}

在自己的JavaScript代码中,笔者将会监听伪类.control链接上的别的点击事件,然后据此为本位body切换赋予伪类.active。

JavaScript

(function (win, doc) { 'use strict'; var linkclass = 'control', activeclass = 'active', toggleClassName = function (element, toggleClass) { var reg = new RegExp('(s|^)' toggleClass '(s|$)'); if (!element.className.match(reg)) { element.className = ' ' toggleClass; } else { element.className = element.className.replace(reg, ''); } }, navListener = function (ev) { ev = ev || win.event; var target = ev.target || ev.srcElement; if (target.className.indexOf(linkclass) !== -1) { ev.preventDefault(); toggleClassName(doc.body, activeclass); } }; doc.addEventListener('click', navListener, false); }(this, this.document));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
(function (win, doc) {
  'use strict';
  var linkclass = 'control',
    activeclass = 'active',
    toggleClassName = function (element, toggleClass) {
      var reg = new RegExp('(s|^)' toggleClass '(s|$)');
      if (!element.className.match(reg)) {
        element.className = ' ' toggleClass;
      } else {
        element.className = element.className.replace(reg, '');
      }
    },
    navListener = function (ev) {
      ev = ev || win.event;
      var target = ev.target || ev.srcElement;
      if (target.className.indexOf(linkclass) !== -1) {
        ev.preventDefault();
        toggleClassName(doc.body, activeclass);
      }
    };
  doc.addEventListener('click', navListener, false);
}(this, this.document));

本人已经绸缪妥帖了,是吗?哪有那么快!

//String原生对象扩大 置空左右端空格
String.prototype.trim = function(){
return this.replace(/(^[sntr]*)|([snrt]*$)/g, "");
};
//Date原生对象扩充 格式化输出
Date.prototype.format = function (string) {
var self = this;
var p = function p(s) {
return (s.toString().length == 1) ? "0" s : s;
};
return string ? string.replace(/dd?d?d?|MM?M?M?|yy?y?y?|hh?|HH?|mm?|ss?|tt?|zz?z?/g,
function (string) {
switch (string) {
case "hh": return p(self.getHours() < 13 ? self.getHours() : (self.getHours() - 12));
case "h": return self.getHours() < 13 ? self.getHours() : (self.getHours() - 12);
case "HH": return p(self.getHours());
case "H": return self.getHours();
case "mm": return p(self.getMinutes());
case "m": return self.getMinutes();
case "ss": return p(self.getSeconds());
case "s": return self.getSeconds();
case "yyyy": return self.getFullYear();
case "yy": return self.getFullYear().toString().substring(2, 4);
case "dddd": return self.getDayName();
case "ddd": return self.getDayName(true);
case "dd": return p(self.getDate());
case "d": return self.getDate().toString();
case "MMMM": return self.getMonthName();
case "MMM": return self.getMonthName(true);
case "MM": return p((self.getMonth() 1));
case "M": return self.getMonth() 1;
case "t": return self.getHours() < 12 ? Date.CultureInfo.amDesignator.substring(0, 1) : Date.CultureInfo.pmDesignator.substring(0, 1);
case "tt": return self.getHours() < 12 ? Date.CultureInfo.amDesignator : Date.CultureInfo.pmDesignator;
case "zzz":
case "zz":
case "z": return "";
}
}) : this.toString();
};
/*------------------------------------*/

代码如下:

至于作者:fzr

彩民之家高手论坛 1

微博:@fzr-fzr) 个人主页 · 笔者的稿子 · 26

彩民之家高手论坛 2

//取id元素
$: function(id) {
return typeof id === "string" ? doc.getElementById(id) : id;
},
//取name成分集合
$N:function(name){
return doc.getElementsByName(name);
},
//取tag成分集结
$T:function(tag, root){
return (root || doc).getElementsByTagName(tag);
},
//按属性名(是不是含有)、值、范围取成分集结
$A:function(attrName, attrValue, tag, root){
var elems = doc.all ? doc.all : this.$T( tag || "*",root || doc), result = [],
attVal = (typeof attrValue != "undefined")? new RegExp("(^|\s)" attrValue "(\s|$)") : null;
for(var i=0; i<elems.length; i ){
attr = elems[i][attrName] || elems[i].getAttribute(attrName);
if(typeof attr === "string" && attr.length > 0){
if(typeof attrValue === "undefined" || (attVal && attVal.test(attr))){
result.push(elems[i]);
}
}
}
return result;
},
//取body元素
$B: doc.body || docelem,
//取Class属性成分集合
$C:function(attrValue, tag, root){
return this.$A("className",attrValue, tag, root);
},
//取浏览器窗体宽度
getWinWidth: win.innerWidth || docelem.clientWidth || doc.body.clientWidth,
//取浏览器窗体中度
getWinHeight: win.innerHeight || docelem.clientHeight || doc.body.clientHeight,
//取元素样式
getStyle: function(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(doc.defaultView && doc.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = doc.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}else{
return null;
}
},
//获取成分显示屏坐标值
getPosition: function() {
return docelem.getBoundingClientRect && function(o){
var pos = o.getBoundingClientRect(), root = o.ownerDocument || o.doc;
return {left:pos.left root.documentElement.scrollLeft,top:pos.top root.documentElement.scrollTop};
} || function(o){
var x = 0, y = 0;
do{x = o.offsetLeft;y = o.offsetTop;}while((o=o.offsetParent));
return {left:x,top:y};
};
}(),
//设置反射率
setOpacity: function (elem,num){
if(elem.filters){
elem.style.filter = "alpha(opacity=" num ")";
}else{
elem.style.opacity = num/100;
}
},
//遮掩或展现成分
hide: function(elem){elem.style.display = "none";},
show: function(elem){elem.style.display = "block";},
toggle: function(elem){
elem.style.display = this.getStyle(elem,"display") === "none" ?"block":"none";
},
//成分Class属性操作
addClass: function(elem, clsName) {
if (elem.className === '') {
elem.className = clsName;
}else if (elem.className !== '' && (' ' elem.className ' ').indexOf(' ' clsName ' ') === -1) {
elem.className = elem.className ' ' clsName;
}
},
removeClass: function(elem, clsName) {
if (clsName && (' ' elem.className ' ').indexOf(' ' clsName ' ') > -1) {
elem.className = (' ' elem.className ' ').replace(' ' clsName ' ', ' ').replace(/^ | $/g,'');
}
},
//追加Html文本对象( 支持Table )
append: function(elem, text) {
if (typeof text === "string") {
if (elem.insertAdjacentHTML){
if (elem.tagName === "TABLE"){
var html = elem.outerHTML,ep = elem.parentNode,sl = html.length;
text = html.substr(0,sl-8) text html.substr(sl-8,sl);
ep.insertAdjacentHTML("beforeEnd", text);
ep.replaceChild(ep.lastChild,elem);
}else{
elem.insertAdjacentHTML("beforeEnd", text);
}
}else {
var rlt = null, rg = doc.createRange(), fm = rg.createContextualFragment(text);
rlt ? elem.insertBefore(fm, rlt) : elem.appendChild(fm);
}
}else if (typeof text === "object") elem.appendChild(text);
},
//删除成分
remove:function(elem){
if (elem.parentNode) elem.parentNode.removeChild(elem);
},
//置空成分内容及子节点
empty:function(elem){
while(elem.firstChild){
elem.removeChild(elem.firstChild);
}
},
//图像预加载
loadimages: function(){
var a = arguments,loads = function(){
if(doc.images){ if(!doc.ps) doc.ps = [];
var i,j=doc.ps.length; for(i=0; i<a.length; i )
if (a[i].indexOf("#")!=0){ doc.ps[j] = new Image; doc.ps[j ].src=a[i];}}
};
arguments.callee.caller ? loads():doc.ready(loads);
},

// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,未有则拉长
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实,本函数 toggleClassList 如若协理的话,
// 那么下边包车型客车代码就不会被施行,此处仅作示范,请灵活运用
// 2. classList API
// element 的class属性是或不是包涵 hide 那几个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};

正式符合测量检验

作者纵然在自家的代码中一度达成addEventListener函数。那并不是二个广安的比如。因为JavaScript不像HTML或CSS那样具备容错性。假若您利用了贰个浏览器不能够识别的HTML成分或性质,或是使用了二个浏览器不可能领略的CSS采取器,属性或是值,那都不是大主题材料。浏览器会忽略掉它无法识其他东西:既不会抛出荒唐也不会结束分析文件。

JavaScript就分歧了。要是您的JavaScript代码有错误,又恐怕选拔了二个浏览器不能够辨识的JavaScript函数或品质,浏览器会抛出荒谬,况兼会停下分析文件。这正是干什么JavaScript中特征在采纳此前务供给测量试验。那也印证将大旨职能依赖于JavaScript是不行不安全的。

就本身来讲,作者须要测量试验addEventListener函数的存在性:

JavaScript

(function (win, doc) { if (!win.addEventListener) { return; } ... var enhanceclass = 'cutsthemustard'; doc.documentElement.className = ' ' enhanceclass; }(this, this.document));

1
2
3
4
5
6
7
8
(function (win, doc) {
  if (!win.addEventListener) {
    return;
  }
  ...
  var enhanceclass = 'cutsthemustard';
  doc.documentElement.className = ' ' enhanceclass;
}(this, this.document));

BBC的大腕们称这种特征测量检验为正规符合测验。假诺叁个浏览器通过了该测量检验,它就直达了正式,所以它就获得了巩固质量。如若四个浏览器未能到达规范,它就从未抓好的天性。那也不算什么坏事,记住,网址没有须求在每种浏览器中都表现的均等。

本身期待确定保障自己的离线画布样式只可以动用于符合规范的浏览器。笔者会选择JavaScript为文书档案增加多个伪类.cutsthemustard:

JavaScript

(function (win, doc) { if (!win.addEventListener) { return; } ... var enhanceclass = 'cutsthemustard'; doc.documentElement.className = ' ' enhanceclass; }(this, this.document));

1
2
3
4
5
6
7
8
(function (win, doc) {
  if (!win.addEventListener) {
    return;
  }
  ...
  var enhanceclass = 'cutsthemustard';
  doc.documentElement.className = ' ' enhanceclass;
}(this, this.document));

当今自个儿能够行使已存在的类名来调治本人的CSS:

CSS

@media all and (max-width: 35em) { .cutsthemustard [role="main"] { transition: all .25s; width: 100%; position: absolute; z-index: 2; top: 0; right: 0; } .cutsthemustard [role="navigation"] { width: 75%; position: absolute; z-index: 1; top: 0; right: 0; } .cutsthemustard .active [role="main"] { transform: translateX(-75%); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media all and (max-width: 35em) {
  .cutsthemustard [role="main"] {
    transition: all .25s;
    width: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
  }
  .cutsthemustard [role="navigation"] {
    width: 75%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
  }
  .cutsthemustard .active [role="main"] {
    transform: translateX(-75%);
  }
}

查阅符合标准的加强型离线画布导航演示。记住,那只适用于小荧屏,所以你或然会须求将浏览器窗口压扁。

//事件绑定
bind: function () {
if (win.addEventListener) {
return function(elem, sType, fnc) {
elem.addEventListener(sType, fnc, false);
};
} else if (win.attachEvent) {
return function(elem, sType, fnc) {
elem.attachEvent("on" sType, fnc);
};
} else {
return function(){};
}
}(),
//解除事件绑定
unbind: function(elem, sType, fnc){
if(elem.removeEventListener){
elem.removeEventListener(sType, fnc, false);
}else if(elem.detachEvent){
elem.detachEvent("on" sType, fnc);
}else{
elem["on" sType] = null;
}
},
//禁止事件冒泡
stopPropagation: function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
//禁止暗许事件动作
preventDefault: function(ev) {
if (ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
},
//获取鼠标地点
getXY: function(ev){
return {
x:ev.pageX ? ev.pageX : ev.clientX docelem.scrollLeft,
y:ev.pageY ? ev.pageY : ev.clientY docelem.scrollTop
};
},
//绑定拖动事件
drag: function (obj, obj2){//obj:移动的靶子 obj2:拖动点
obj2 = obj2 || obj; //假设不设拖动点,那么拖动点即移动的对象
var x, y, ut = this;
obj2.onmousedown = function(e){
e = e || win.event;
ut.preventDefault(e);
obj.setCapture && obj.setCapture();
x = ut.getXY(e).x - parseInt(obj.style.left);
y = ut.getXY(e).y - parseInt(obj.style.top);
docelem.onmousemove = over;
docelem.onmouseup = up;
}
function over(e){
e = e || win.event;
obj.style.left = ut.getXY(e).x - x "px";
obj.style.top = ut.getXY(e).y - y "px";
}
function up(){
obj.releaseCapture && obj.releaseCapture();
docelem.onmousemove = null;
docelem.onmouseup = null;
}
},
//绑定横向滚动事件
sliderX : function (obj,x1,x2,overEvent,upEvent){
var x, t , ut = this;
obj.onmousedown = function (e){
e = e || win.event;
ut.preventDefault(e);
obj.setCapture && obj.setCapture();
t = ut.getXY(e).x - parseInt(obj.style.left);
docelem.onmousemove = over;
docelem.onmouseup = up;
}
function over(e){
e = e || win.event;
x = ut.getXY(e).x - t;
if(x<x1) x=x1;
if(x>x2) x=x2;
obj.style.left = x "px";
overEvent && overEvent(x);
}
function up(){
obj.releaseCapture && obj.releaseCapture();
docelem.onmousemove = null;
docelem.onmouseup = null;
upEvent && upEvent(x);
}
},
//绑定竖向滚动事件
sliderY : function (obj,y1,y2,overEvent,upEvent){
var y, t , ut = this;
obj.onmousedown = function (e){
e = e || win.event;
ut.preventDefault(e);
obj.setCapture && obj.setCapture();
t = ut.getXY(e).y - parseInt(obj.style.top);
docelem.onmousemove = over;
docelem.onmouseup = up;
}
function over(e){
e = e || win.event;
y = ut.getXY(e).y - t;
if(y<y1) y=y1;
if(y>y2) y=y2;
obj.style.top = y "px";
overEvent && overEvent(y);
}
function up(){
obj.releaseCapture && obj.releaseCapture();
docelem.onmousemove = null;
docelem.onmouseup = null;
upEvent && upEvent(y);
}
},
//设置cookie
setCookie:function(n, v, t){
var exp = new Date();
exp.setTime(exp.getTime() (t||24)*60*60*1000);
doc.cookie = n "=" escape(v) ";expires=" exp.toGMTString() ';path=/';
},
//获取cookie
getCookie:function(n){
var arr = doc.cookie.match(new RegExp("(^| )" n "=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]);
return null;
}
});
})(document,window);

点评:纵然目前的主流浏览器已经落成了多数的HTML5新特色,不过十分的多开垦者根本就没留意到那么些更简单,也很有用的API,本类别作品介绍那几个接口API,同期也期待能激励越来越多开采者去斟酌那多少个还不知名的API

拉长全数!

那唯有是多少个相对相比轻易的事例,但它表达了渐进式巩固背后的牵记:只要您早已为全体人提供了宗旨职能,就能够轻便为当代浏览器扩展最流行的巩固质量。

渐进式加强并不表示你不能够不为全体人都提供平等的作用—恰恰相反。那也是为啥要求及早鲜明你的着力功能是哪些,并且保障那些基本职能能够被超越百分之五十中央本事提供达成。在这一个点的底蕴上,你能够任性增添更加的多的不属于重视职务的特征。你能够在能辅助越多特点的浏览器上相应的丰硕越来越多的天性,比如CSS的动画效果,JavaScript的定位功效以及HTML中新的输入框类型。

正如小编所说的,渐进式巩固不是一门本领。它是一种观念格局。假诺您早已上马选择这种想念格局,你就已经盘算好了面前蒙受接下去的十年了。

赞 1 收藏 评论

你只怕感兴趣的篇章:

  • 用javascript达成包容IE7的类库 IE7_0_9.zip提供下载
  • 一实用的贯彻table排序的Javascript类库
  • JavaScript 应用类库代码
  • JavaScript类库D
  • Javascript类库的顶层对象名客商体验解析
  • stream.js 七个非常小、完全部独用立的Javascript类库
  • 5个至上的Javascript日期管理类库分享
  • Moment.js 不容遗失的超棒Javascript日期管理类库
  • javascript面向对象包装类Class封装类库深入分析
  • javascript拖拽上传类库DropzoneJS使用方法
  • JavaScript页面模板库handlebars的回顾用法

代码如下:

有一些些函数未经测验,应接大家提个意见

<div class="hide">
<!-- contextmenu 钦赐了使用哪个上下文菜单。 -->
<!-- !!!不晓得怎么,我的浏览器上这一个配置不起作用。 -->
<section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;">
<h1>点击此区域查看菜单</h1>
<!--
为了代码结构的不可磨灭,把menu元素放到了要接纳的成分内部,其实您也能够放置外界的其他位置:
-->
<!-- 增添菜单,至于图片Logo,请自身安装。add the menu -->
<menu type="context" id="mymenu">
<menuitem label="刷新页面" onclick="window.location.reload();" icon=";
<menu label="分享到..." icon=";
<menuitem label="微博今日头条" icon="" onclick="window.location.href=';
<menuitem label="Tencent腾讯网" icon="" onclick="window.location.href=';
</menu>
</menu>
</section>
</div>

//日期字符串格转日期
App.parseDate = function(date){
var dt = date instanceof Date ? date: Date(date.replace("-","/"));
return isNaN(dt.getTime()) ? null : dt ;
};
//Json字符串转对象
App.parseJSON = function(jsonString) {
var result = false;
try {
result = eval('(' jsonString ')');
}catch (e) {};
return result;
};
//取不另行独一值
App.getUid = function(){
return "uid" (new Date()).getTime() parseInt(Math.random()*100000);
};
//获取钦点范围的任性数
App.random = function (n1, n2){
return Math.floor(Math.random()*(n2-n1 1)) n1;
};
//秒转变为皮秒
App.s2ms = function (str){
var t = str.split(":");
return t[0] * 60000 t[1] * 1000;
};
//皮秒转变为秒
App.ms2s = function (ms){
return (ms/60000 ":" ms/1000`).replace(/.d /g,"").replace(/(^|:)(d)(?!d)/g,"$10$2");
};
//数字调换为编号
App.num2number = function (num, n){
return Array(n).join("0").concat(num).slice(-n);
};
//数字转化为华语
App.num2gb = function (n){
return "零一二三四五六七八九".split("")[n];
};
//Flash生成代码
App.getFlash = function (url, width, height, param){
var tagName = "", o1 = {width:width||1, height:height||1}, o2 = {};
if (this.isIE){
tagName = "object ";
o1.classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000";
o1.codebase = "";
o2.movie = url;
o2.quality = "high";
param && this.extend(o2, param);
}else{
tagName = "embed ";
o1.type = "application/x-shockwave-flash";
o1.pluginspage = "";
o1.src = url;
o1.quality = "high";
param && this.extend(o1, param);
}
if(o1.width<2&&o1.height<2) tagName ='style="position:absolute; top:-100px;" ';
var a1=[], a2=[], i;
for(i in o1) a1.push(i '="' o1[i] '"');
for(i in o2) a2.push('<param name="' i '" value="' o2[i] '" />');
return '<' tagName a1.join(' ') '>' a2.join('') '</' tagName '>';
};
//播放器生成代码
App.getPlayer = function (url, width, height, param){
var wmp = ["6bf52a52-394a-11d3-b153-00c04f79faa6","application/x-mplayer2"];
var rmp = ["CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA","audio/x-pn-realaudio-plugin"];
var mp = /.rm$/.test(url) ? rmp : wmp;
var tagName = "", o1 = {width:width||1, height:height||1}, o2 = {};
if (this.isIE){
tagName = "object ";
o1.classid = "clsid:" mp[0];
o2.url = url;
param && this.extend(o2, param);
}else{
tagName = "embed ";
o1.type = mp[1];
o1.src = url;
param && this.extend(o1, param);
}
if(o1.width<2&&o1.height<2) tagName ='style="position:absolute; top:-100px;" ';
var a1=[], a2=[], i;
for(i in o1) a1.push(i '="' o1[i] '"');
for(i in o2) a2.push('<param name="' i '" value="' o2[i] '" />');
return '<' tagName a1.join(' ') '>' a2.join('') '</' tagName '>';
};
//获取XMLHttp对象
App.xmlhttp = function (){
if (this.isFF) return new XMLHttpRequest();
var a = ["Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.5.0"];
for (var i=0,l=a.length;i<l;i ){
try{
return new ActiveXObject(a[i]);
}catch(e){}
}
return false;
};
//Get数据
App.get = function (url,callBack){
var x = this.xmlhttp();
x.open("get",url,true);
x.onreadystatechange = function(){
x.readyState==4 && (x.status==0||x.status==200) && callBack(x.responseText);
}
x.send(null);
};
//Post数据
App.post = function (url,arg,callBack){
var x = this.xmlhttp();
x.open("post",url,true);
x.setRequestHeader("Content-Length",arg.length);
x.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
x.onreadystatechange = function(){
x.readyState==4 && (x.status==0||x.status==200) && callBack(x.responseText);
}
x.send(arg);
};

代码如下:

复制代码 代码如下:

代码如下:

/*-----------------------------------
Web Application JavaScript Library
2009.11 janchie
------------------------------------*/

// From window or frame on domain 1, send a message to the iframe which hosts another domain
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");
// From inside the iframe on different host, receive message
window.addEventListener("message", function(event) {
// Make sure we trust the sending domain
if(event.origin == "") {
// Log out the message
console.log(event.data);
// Send a message back
event.source.postMessage("Hello back!");
}
]);
// message 只同意string 类型的多少,可是你可以利用 JSON.stringify 以及 JSON.parse 传递越来越多有含义的消息。

//证明对象
var App = {};
//对象承继或品质合并
App.extend = function(obj, hash) {
this.each(hash, function(key, value) {
obj[key] = value;
});
return obj;
};
//遍历
App.each = function(obj, func, context) {
var length = obj.length, i = -1;
if(length !== undefined) {
while( i < length) if(func.call(context, obj[i], i, obj, length) === false) break;
}
else for(var key in obj) if(obj.hasOwnProperty(key)) if(func.call(context, key, obj[key], obj) === false) break;
return obj;
};
(function(doc, win){
var string = Object.prototype.toString,
quirks = doc.compatMode === "BackCompat",
docelem = doc.documentElement,
ua = win.navigator.userAgent.toLowerCase(),
version = (ua.match( /.(?:rv|it|ra|ie)[/: ]([d.] )/ ) || [])[1],
isChrome = /chrome/.test(ua),
isWebKit = /webkit/.test(ua),
isSafari = !isChrome && isWebKit,
isOpera = /opera/.test(ua),
isIE = /msie/.test( ua ) && !isOpera,
isFF = /firefox/.test(ua);
//Dom加载
doc.ready = function(func) {
var isReady = false,doReady = function() {
if (isReady) return;
isReady = true; func();
};
if (isIE) {
if (docelem.doScroll && win.self == win.top) {
(function() {
if (isReady) return;
try {
docelem.doScroll("left");
} catch (error) {
setTimeout(arguments.callee, 0);
return;
}
doReady();
})();
}else {
if (isReady) return;
this.attachEvent("onreadystatechange", function() {
if (doc.readyState === "complete") {
doc.detachEvent("onreadystatechange", arguments.callee);
doReady();
}
});
}
win.attachEvent('onload', doReady);
}else if (isWebKit && version < 525) {
(function() {
if (isReady) return;
if (/loaded|complete/.test(doc.readyState))
doReady();
else
setTimeout(arguments.callee, 0);
})();
win.addEventListener('load', doReady, false);
}else {
if (!isFF)
this.addEventListener("DOMContentLoaded", function() {
doc.removeEventListener("DOMContentLoaded", arguments.callee, false);
doReady();
}, false);
this.addEventListener('load', doReady, false);
}
};
App.extend(App,{
//类型检查评定
isArray: function(v) { //是或不是为数组
return string.apply(v) === "[object Array]";
},
isFunction: function(v) { //是还是不是为函数体
return string.apply(v) === "[object Function]";
},
isNumber: function(v) { //是不是为数字
return typeof v === "number" && isFinite(v);
},
isDate: function(v) { //是不是为日期
return string.apply(v) === "[object Date]";
},
isElement: function(v) { //是或不是为Dom成分节点
return !!(v && v.nodeType === 1);
},
// 浏览器检验
isOpera: isOpera,
isChrome: isChrome,
isWebKit: isWebKit,
isSafari: isSafari,
isIE: isIE,
isFF: isFF,
isQuirks:quirks,
getVersion:version,

function testDataset(){
//
var intro = document.getElementById("intro");
// 注意那些不是 id属性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:" id
",website:" website
",blogUrl:" blogUrl
",myName:" myName
;
//
warn(msg);
};

autofocus Attribute
autofocus 属性确认保障当页面加载后,给定的 BUTTON,INPUT恐怕 TEXTAREA 元素能够自动获取大旨。

代码如下:

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

代码如下:

<div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="铁锚" data-blog-url=";

autofocus 属性首要用在轻易的输入页面,详细情况请参照他事他说加以考察:autofocus 属性
各浏览器厂家对这几个API的补助度各不一致样,所以在运用以前最棒检查实验一下包容性,花一些光阴来读书方面所列出的API,您将会对他们了然和明白越来越多。
一部分的测量检验代码如下:

并未怎么好说的,和classList同样,轻巧却实用。(想一想,是或不是更改了后台和前台JS的某个交互以及解耦?)
window.postMessage API
IE8 已经支撑 postMessage API 好几年了,此API允许window 和iframe 成分之间互相传递新闻。
跨域扶助啊。 代码如下:

ContextMenu API
经测试chrome28不管用。。。
新的API,ContextMenu 是极好的接口: 此接口允许你非常的粗略地增多菜单项到浏览器的上下文菜单(右键菜单),实际不是去覆盖浏览器的默许右键菜单。
内需留意的是,你最棒利用js脚本来动态的创立菜单contextmenu,那样能够幸免页面禁用JS脚本的情形下出现多余的HTML代码。
代码如下:

Element.dataset
数据集(dataset) API 允许开辟者对DOM成分设置(set)和得到(get) 以 data- 前缀开端的属性值。
代码如下:

<!DOCTYPE html>
<html>
<head>
<title>5个你不亮堂的 HTML5 API接口演示 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="[email protected]">
<meta name="Description" content="original=;
<style>
.hide{ display:none}
.poplayer{ z-index:999; position:absolute;background-color:#fff; top:0px;left:0px;overflow: hidden;width:100%;height:100%;opacity:1;}
.close{ top:3px; right:10px;position:absolute;}
</style>
<script>
// 突显警告音讯
function warn(msg){
warn = warn || "贰个未知警告!";
if(window.console){
console.warn(msg);
} else {
alert(msg);
}
};
// 使用classList属性(Dom元素,css类名)
function toggleClassList(element,cName){
// 1. classList API
// 切换类,有则移除,未有则增进
if(element.classList.toggle){
element.classList.toggle(cName);
return true;
}
// !!! 其实,本函数 toggleClassList 就算援救的话,
// 那么下边包车型地铁代码就不会被实施,此处仅作示范,请灵活利用
// 2. classList API
// element 的class属性是不是含有 hide 这几个CSS类
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 移除hide类
element.classList.remove(cName);
} else {
// 4. classList API
// 添加hide类
element.classList.add(cName);
}
return true;
};
// 使用className属性(Dom元素,css类名)
function toggleClassName(element,cName){
var className = element.className || "";
// 去掉首尾的空白
cName = cName.replace(/^s*|s*$/g,"");
// cName 中间假如带有空白字符,则败北. 即使要好好管理,能够拆分为数组,单个管理
var blankReg = /s /;
if(blankReg.test(cName)){
warn("'" cName "'中间含有空白字符");
return false;
}
// 正则, b 代表可知延续字符的界线,能够这样通晓:
// "hide2 hide hide myname" 那么,
// hide2 的前后各有贰个设想的b ,hide 前后也可能有,
// 不过 hi 和 de之间则并未。
// g 表示单行全局
//var rep = /bhideb/g;
var rep = new RegExp("\b" cName "\b", "g");
if(rep.test(className)){
className = className.replace(rep,"");
} else {
className = " " cName;
}
// 替换新className。
element.className = className;
return true;
};
// 函数,切换(元素id,className)
function toggleClass(elementId,cName){
// 获取二个DOM成分
var element = document.getElementById(elementId);
// 假使不设有成分
if(!element){
warn("id为" elementId "的要素官样文章");
return false;
}
if(!element.classList){
warn("id为" elementId "的成分不协助classList属性,将接纳其余手腕来落到实处");
return toggleClassName(element,cName);
} else {
return toggleClassList(element,cName);
}
};
function testDataset(){
//
var intro = document.getElementById("intro");
// 注意这么些不是 id属性哦,是 data-id 的值
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;
// data-blog-url,驼峰命名法..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName;
//
var msg = "qq:" id
",website:" website
",blogUrl:" blogUrl
",myName:" myName
;
//
warn(msg);
};
// dom加载后 执行
window.addEventListener("DOMContentLoaded", function() {
var open = document.getElementById("open");
var close = document.getElementById("close");
open.addEventListener("click",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
});
close.addEventListener("click",function(){
//
toggleClass("diary2","hide");
toggleClass("loading","hide");
});
//
testDataset();
}, false);
</script>
</head>
<body>
<div>
<div id="diary2" class="diary poplayer hide">
<a href="javascript:void(0)" _fcksavedurl=""javascript:void(0)"" id="close">关闭</a>
<div id="loading" class="loading hide" style="z-index:1; position: absolute; left: 40%; top: 30%; width: 104px; height: 104px;opacity: 0.5;background: #000000;border: 0px solid #000000;border-radius: 10px;-webkit-border-radius: 10px;">
<img src="" alt=""
style="position:absolute; left:26px; top:10px;width: 50px;height: 50px;border-radius: 10px;-webkit-border-radius: 10px;">
<div class="loadingtext" style="position:absolute;left: 12px;top: 76px;color: #ffffff;">正在加载中</div>
</div>
</div>
<div>
<a href="javascript:void(0)" id="open">打开</a>
</div>
</div>
<div class="hide">
<!-- contextmenu 钦定了选取哪个上下文菜单。 -->
<!-- !!!不知情怎么,小编的浏览器上这几个配置不起功效。 -->
<section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;">
<h1>点击此区域查看菜单</h1>
<!--
为了代码结构的不可磨灭,把menu成分放到了要利用的要素内部,其实您也足以松手外界的别的地点:
-->
<!-- 增添菜单,至于图片Logo,请自身安装。add the menu -->
<menu type="context" id="mymenu">
<menuitem label="刷新页面" onclick="window.location.reload();" icon=";
<menu label="分享到..." icon=";
<menuitem label="微博腾讯网" icon="" onclick="window.location.href=';
<menuitem label="Tencent网易" icon="" onclick="window.location.href=';
</menu>
</menu>
</section>
</div>
<div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="铁锚" data-blog-url=";
</body>
</html>

代码如下:

原作地址:5 HTML5 APIs You Didn’t Know Existed
原稿日期: 2009年0一月十三日
翻译日期: 二零一三年3月7日
当民众看来恐怕说出"HTML5"这几个词的时候,测度最少有八分之四之上的人,会联想到她既是一个妖艳而又充满吸重力的佳丽,同不常间也是三头好把你搞得焦头烂额的独角兽,那能怪大家那几个开采者吗?
笔者们注意到那多少个基础的Api停滞发展了那般长时间的年华(大致是1996-贰零零捌),以致于像"placeholder"那样基础的四个附加功用,也要开销我们非常长的岁月来拍卖。
就算最近的主流浏览器已经落实了繁多的HTML5新特色,不过众多开荒者根本就没注意到那几个更简短,也很有用的API。
本系列文章介绍那么些接口API,同期也可望能鼓劲更加多开荒者去研商这么些还不盛名的API。
Element.classList
以此个性已经公布了一些年,通过classList,大家得以因此JavaScript来支配底层css的class属性.
代码如下:

TAG标签: css
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:AppBaseJs 类库 网络常用的javascript函数及任何js类库