澳门在线威尼斯官方 > 威尼斯澳门在线 > 网络常用的javascript函数及其他js类库写的,响应

原标题:网络常用的javascript函数及其他js类库写的,响应

浏览次数:141 时间:2019-10-31

响应式加强统筹

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));

本身已经筹划伏贴了,是啊?哪有那么快!

复制代码 代码如下:

标准符合测量试验

小编就算在自己的代码中早就完毕add伊芙ntListener函数。那并非叁个安然无事的假诺。因为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%);
  }
}

查占卜符标准的加强型离线画布导航演示。记住,那只适用于小显示器,所以你大概会必要将浏览器窗口压扁。

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

巩固全部!

那无非是多少个相持比较简单的例证,但它表达了渐进式巩固背后的合计:只要您早已为全数人提供了骨干功效,就能够大肆为今世浏览器扩大最风靡的增进质量。

渐进式巩固并不意味你不得不为全数人都提供平等的效果—恰恰相反。这也是干吗需求及早明确你的宗旨效用是何等,何况保险那些大旨成效能够被比较多中坚本事提供达成。在此个点的功底上,你能够私自加多越来越多的不属于入眼职责的表征。你可以在能支撑越来越多特点的浏览器上相应的增加更加多的质量,举例CSS的卡通效果,JavaScript的固定作用以至HTML中新的输入框类型。

正如本人所说的,渐进式加强不是一门手艺。它是黄金年代种构思方式。假让你早就初阶应用这种思念形式,你就曾经策画好了面临接下去的十年了。

赞 1 收藏 评论

//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

//注脚对象
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,

//取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);
},

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:网络常用的javascript函数及其他js类库写的,响应

关键词:

上一篇:接待来到HTML5

下一篇:没有了