必威-必威-欢迎您

必威,必威官网企业自成立以来,以策略先行,经营致胜,管理为本的商,业推广理念,一步一个脚印发展成为同类企业中经营范围最广,在行业内颇具影响力的企业。

拓展字符串拼接容易导致性能的问题、页面,原

2019-10-20 07:28 来源:未知

前端基础晋级(10):面向对象实战之封装拖拽对象

2017/04/02 · JavaScript · 面向对象

原来的作品出处: 波同学   

图片 1

终于

前方几篇小说,笔者跟大家大饱眼福了JavaScript的有的基础知识,那篇小说,将会进去第一个实战环节:利用前边几章的所提到到的知识,封装四个拖拽对象。为了能够扶植大家驾驭越来越多的艺术与开展相比,作者会使用二种区别的不二秘籍来落到实处拖拽。

  • 不封装对象间接促成;
  • 行使原生JavaScript封装拖拽对象;
  • 通过扩张jQuery来贯彻拖拽对象。

本文的例子会停放于codepen.io中,供大家在读书时直接查看。假设对于codepen不明白的同窗,能够花点时间有个别领会一下。

拖拽的兑现进程会波及到十分多的实用小知识,因而为了加固自己自个儿的文化储存,也为了大家能够学到更加多的知识,作者会尽量详细的将有个别细节分享出来,相信大家认真阅读之后,一定能学到一些东西。

复制代码 代码如下:

JavaScript常用脚本集中(三)

 本文给大家大饱眼福的常用脚本有经过数组,扩充字符串拼接轻易导致质量的主题材料、页面 视口 滚动条的地点的帮忙函数、调度因素发光度的函数、获取鼠标地方的几个通用的函数、使用cssdisplay属性来切换来分可以知道性的豆蔻梢头组函数、样式相关的通用函数、获取成分当前的万丈和宽窄。

 

 

经过数组,扩充字符串拼接轻巧导致质量的标题

 

代码如下:

function StringBuffer() {
this.__strings__ = new Array();
}
StringBuffer.prototype.append = function (str) {
this.__strings__.push(str);
return this;
}
StringBuffer.prototype.toString = function () {
return this.__strings__.join("");
}
var buffer = new StringBuffer();
buffer.append("Hello ").append("javascript");
var result = buffer.toString();
alert(result); //Hello javascript

页面 视口 滚动条的职责的支持函数

 

代码如下:

/*明确当前页面高度和增长幅度的三个函数*/
function pageHeight() {
return document.body.scrollHeight;
}
function pageWidth() {
return document.body.scrollWidth;
}
/*规定滚动条水平和垂直的岗位*/
function scrollX() {
var de = document.documentElement;
return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}
function scrollY() {
var de = document.documentElement;
return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/*规定浏览器视口的莫斯科大学和宽窄的五个函数*/
function windowHeight() {
var de = document.documentElement;
return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
}

调治因素光滑度的函数

 

代码如下:

/*调整因素折射率的函数*/
function setOpacity(elem, level) {
//IE管理光滑度
if (elem.filters) {
elem.style.filters = 'alpha(opacity=' + level + ')';
} else {
elem.style.opacity = level / 100;
}
}

收获鼠标位置的多少个通用的函数

 

代码如下:

/*七个通用函数,用于获取鼠标相对于后生可畏体页面包车型地铁此时此刻职分*/
function getX(e) {
e = e || window.event;
return e.pageX || e.clientX + document.body.scrollLeft;
}
function getY(e) {
e = e || window.event;
return e.pageY || e.clientY + document.body.scrollTop;
}
/*八个获得鼠标相对于方今因素地点的函数*/
function getElementX(e) {
return (e && e.layerX) || window.event.offsetX;
}
function getElementY(e) {
return (e && e.layerY) || window.event.offsetY;
}

动用cssdisplay属性来切换来分可以见到性的风流倜傥组函数

 

代码如下:

/**
* 使用display来隐蔽成分的函数
* */
function hide(elem) {
var curDisplay = getStyle(elem, 'display');

 

if (curDisplay != 'none') {
elem.$oldDisplay = curDisplay;
}
elem.style.display = 'none';
}
/**
* 使用display来展现成分的函数
* */
function show(elem) {
elem.style.display = elem.$oldDisplay || '';
}

体制相关的通用函数

 

代码如下:

/**
* 获取内定成分(elem)的体裁属性(name)
* */
function getStyle(elem, name) {
//要是存在于style[]中,那么它已被安装了(何况是近日的)
if (elem.style[name]) {
return elem.style[name];
}
//否则,测试IE的方法
else if (elem.currentStyle) {
return elem.currentStyle[name];
}
//或者W3C的方法
else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/(A-Z)/g, "-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
}
//不然,顾客采纳的是此外浏览器
else {
return null;
}
}

收获成分当前的万丈和宽度

 

代码如下:

/**
* 获取元素的实际中度
* 信任的getStyle见上面的函数。
* */
function getHeight(elem) {
return parseInt(getStyle(elem, 'height'));
}
/**
* 获取成分的真实性宽度
* 信任的getStyle见下面的函数
* */
function getWidth(elem) {
return parseInt(getStyle(elem, 'width'));
}

如上正是本文分享的javascript常用脚本了,希望大家能够喜欢。

本文给大家分享的常用脚本有通过数组,扩充字符串拼接轻巧形成质量的难点、页面 视口 滚动条的职位的帮助...

JavaScript常用脚本聚焦(三),javascript脚本聚焦

透过数组,扩充字符串拼接轻易产生质量的主题素材

复制代码 代码如下:
function StringBuffer() {
    this.__strings__ = new Array();
}
StringBuffer.prototype.append = function (str) {
    this.__strings__.push(str);
    return this;
}
StringBuffer.prototype.toString = function () {
    return this.__strings__.join("");
}
var buffer = new StringBuffer();
buffer.append("Hello ").append("javascript");
var result = buffer.toString();
alert(result);    //Hello javascript

代码来源:

页面 视口 滚动条的地方的扶持函数

复制代码 代码如下:
/*规定当前页面中度和幅度的五个函数*/
function pageHeight() {
    return document.body.scrollHeight;
}
function pageWidth() {
    return document.body.scrollWidth;
}
/*鲜明滚动条水平和垂直的地方*/
function scrollX() {
    var de = document.documentElement;
    return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}
function scrollY() {
    var de = document.documentElement;
    return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/*鲜明浏览器视口的惊人和宽度的多个函数*/
function windowHeight() {
    var de = document.documentElement;
    return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
}
function windowWidth() {
    var de = document.documentElement;
    return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
}

代码来源:

调弄整理因素反射率的函数

复制代码 代码如下:
/*调弄整理因素发光度的函数*/
function setOpacity(elem, level) {
    //IE管理反射率
    if (elem.filters) {
        elem.style.filters = 'alpha(opacity=' + level + ')';
    } else {
        elem.style.opacity = level / 100;
    }
}

代码来源:

获取鼠标地点的多少个通用的函数

复制代码 代码如下:
/*四个通用函数,用于获取鼠标相对于风流倜傥切页面包车型大巴脚无业位*/
function getX(e) {
    e = e || window.event;
    return e.pageX || e.clientX + document.body.scrollLeft;
}
function getY(e) {
    e = e || window.event;
    return e.pageY || e.clientY + document.body.scrollTop;
}
/*七个获得鼠标相对于当下成分地点的函数*/
function getElementX(e) {
    return (e && e.layerX) || window.event.offsetX;
}
function getElementY(e) {
    return (e && e.layerY) || window.event.offsetY;
}

代码来源:

选择cssdisplay属性来切换来分可知性的如日方升组函数

复制代码 代码如下:
/**
 * 使用display来掩饰成分的函数
 * */
function hide(elem) {
    var curDisplay = getStyle(elem, 'display');

    if (curDisplay != 'none') {
        elem.$oldDisplay = curDisplay;
    }
    elem.style.display = 'none';
}
/**
 * 使用display来浮现有分的函数
 * */
function show(elem) {
    elem.style.display = elem.$oldDisplay || '';
}

代码来源:

体制相关的通用函数

复制代码 代码如下:
/**
 * 获取钦命成分(elem)的体裁属性(name)
 * */
function getStyle(elem, name) {
    //如若存在于style[]中,那么它已被设置了(並且是当前的)
    if (elem.style[name]) {
        return elem.style[name];
    }
    //否则,测试IE的方法
    else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    //或者W3C的方法
    else if(document.defaultView && document.defaultView.getComputedStyle){
        name = name.replace(/(A-Z)/g, "-$1");
        name = name.toLowerCase();
        var s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }
    //不然,客户选用的是其他浏览器
    else {
        return null;
    }
}

代码来源:

赢得成分当前的冲天和宽度

复制代码 代码如下:
/**
 * 获取成分的真正中度
 * 注重的getStyle见下边包车型客车函数。
 * */
function getHeight(elem) {
    return parseInt(getStyle(elem, 'height'));
}
/**
 * 获取成分的真实宽度
 * 重视的getStyle见上边的函数
 * */
function getWidth(elem) {
    return parseInt(getStyle(elem, 'width'));
}

代码来源:

如上正是本文分享的javascript常用脚本了,希望大家能够喜欢。

通过数组,扩充字符串拼接轻巧导致质量的主题材料 复制代码 代码如下: function StringBuffer() {...

function stopBubble(e) {
if (e && e.stopPropagation) {//借使传入了风浪目的,那么正是非IE浏览器
e.stopPropagation();
} else {
window.event.cancelBubble = true;//使用IE的不二秘籍来打消事件冒泡
}
}
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();//幸免暗中同意浏览器行为(W3C)
} else {
window.event.returnValue = false;
}
return false;
}

1、怎样让四个DOM成分动起来

大家常常会经过改变成分的top,left,translate来其的职位产生改换。在底下的事例中,每点击二次开关,对应的要素就能够移动5px。我们可点击查看。

点击查看叁个让成分动起来的小例子

鉴于修改五个成分top/left值会唤起页面重绘,而translate不会,由此从性质优化上来剖断,大家会优先利用translate属性。

//获取成分的样式值。
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/([A-Z])/g,”-$1″);
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(elem,”");
return s&&s.getPropertyValue(name);
}else{
return null
}
}
//获取成分相对于那一个页面包车型客车x和y坐标。
function pageX(elem){
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}
//获取成分相对于父成分的x和y坐标。
function parentX(elem){
return elem.parentNode==elem.offsetParent?elem.offsetLeft:pageX(elem)-pageX(elem.parentNode);
}
function parentY(elem){
return elem.parentNode==elem.offsetParent?elem.offsetTop:pageY(elem)-pageY(elem.parentNode);
}
//获取使用css定位的要素的x和y坐标。
function posX(elem){
return parseInt(getStyle(elem,”left”));
}
function posY(elem){
return parseInt(getStyle(elem,”top”));
}
//设置成分地点。
function setX(elem,pos){
elem.style.left=pos+”px”;
}
function setY(elem,pos){
elem.style.top=pos+”px”;
}
//增英镑素X和y坐标。
function addX(elem,pos){
set(elem,(posX(elem)+pos));
}
function addY(elem,pos){
set(elem,(posY(elem)+pos));
}
//获取成分选取css调控大小的惊人和幅度
function getHeight(elem){
return parseInt(getStyle(elem,”height”));
}
function getWidth(elem){
return parseInt(getStyle(elem,”width”));
}
//获取成分大概,完整的万丈和幅度
function getFullHeight(elem){
if(getStyle(elem,”display”)!=”none”){
return getHeight(elem)||elem.offsetHeight;
}else{
var old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var h=elem.clientHeight||getHeight(elem);
restoreCss(elem,old);
return h;
}
}
function getFullWidth(elem){
if(getStyle(elem,”display”)!=”none”){
return getWidth(elem)||elem.offsetWidth;
}else{
var old=resetCss(elem,{display:”block”,visibility:”hidden”,position:”absolute”});
var w=elem.clientWidth||getWidth(elem);
restoreCss(elem,old);
return w;
}
}
//设置css,并保存旧的css
function resetCss(elem,prop){
var old={};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i]=prop[i];
}
return old;
}
function restoreCss(elem,prop){
for(var i in prop){
elem.style[i]=prop[i];
}
}
//呈现和隐形
function show(elem){
elem.style.display=elem.$oldDisplay||” “;
}
function hide(elem){
var curDisplay=getStyle(elem,”display”);
if(curDisplay!=”none”){
elem.$oldDisplay=curDisplay;
elem.style.display=”none”;
}
}
//设置发光度
function setOpacity(elem,num){
if(elem.filters){
elem.style.filter=”alpha(opacity=”+num+”)”;
}else{
elem.style.opacity=num/100;
}
}
//滑动
function slideDown(elem){
var h=getFullHeight(elem);
elem.style.height=”0px”;
show(elem);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){elem.style.height=(pos/100*h)+”px”;},(pos*10));
}
}
}
//渐变
function fadeIn(elem){
show(elem);
setOpacity(elem,0);
for(var i=0;i<=100;i+=5){
new function(){
var pos=i;
setTimeout(function(){setOpacity(elem,pos);},(pos+1)*10);
}
}
}
//获取鼠标光标相对于全体页面包车型地铁职责。
function getX(e){
e=e||window.event;
return e.pageX||e.clientX+document.body.scrollLeft;
}
function getY(e){
e=e||window.event;
return e.pageY||e.clientY+document.body.scrollTop;
}
//获取鼠标光标相对于当下因素的岗位。
function getElementX(e){
return (e&&e.layerX)||window.event.offsetX;
}
function getElementY(e){
return (e&&e.layerY)||window.event.offsetY;
}
//获取页面包车型地铁惊人和宽度
function getPageHeight(){
var de=document.documentElement;
return document.body.scrollHeight||(de&&de.scrollHeight);
}
function getPageWidth(){
var de=document.documentElement;
return document.body.scrollWidth||(de&&de.scrollWidth);
}
//获取滚动条的职分。
function scrollX(){
var de=document.documentElement;
return self.pageXOffset||(de&&de.scrollLeft)||document.body.scrollLeft;
}
function scrollY(){
var de=document.documentElement;
return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
}
//获取视口的莫斯中国科学技术大学学和宽窄。
function windowHeight() {
var de = document.documentElement;
return self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight;
}
function windowWidth() {
var de = document.documentElement;
return self.innerWidth||( de && de.offsetWidth )||document.body.offsetWidth;
}

连锁小说

相关找出:

今天看吗

查找手艺库

回去首页

  • 隐性调用php程序的艺术
  • 浅谈JavaScript中的Math.atan()方法的行使
  • JavaScript中反正弦函数Math.asin()的应用简单介绍
  • JavaScript中的acos()方法运用详解
  • 介绍JavaScript中Math.abs()方法的行使
  • JavaScript中Math.SQRT2属性的使用详解

连带频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表明式  Flex教程  WEB前端教程  

function addEvent(element, type, handler) {
if (!handler.$$guid) {//为每贰个事件管理函数付与二个独立的ID
handler.$$guid = addEvent.guid++;
}
if (!element.events) {//为成分建构一个事变类型的散列表
element.events = {};
}
var handlers = element.events[type];
if (!handler) {
handlers = element.events[type] = {};
if (element["on" + type]) {//存款和储蓄已有些事件管理函数(如若已经存在一个)
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;//在散列表中留存该事件管理函数
element["on" + type] = handleEvent;
}
add伊芙nt.guid = 1;//成立独立ID的计数器
function removeEvent(element, type, handler) {//从散列表中去除事件处理函数
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true;
event = event || fix伊夫nt(window.event);//得到事件目的(IE使用全局的平地风波目的)
var handlers = this.events[event.type];//获得事件管理函数散列表的援用
for (var i in handlers) {//依次实施各种事件管理函数
this.$$handlerEvent = handlers[i];
if (this.$$handlerEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
}
function fixEvent(event) {//扩大一些IE事件指标的干涸的主意
event.preventDefault = fix伊芙nt.preventDefault;//扩充W3C标准事件措施
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function () {
this.returnValue = false;
}
fixEvent.stopPropagation = function () {
this.cancelBubble = true;
}
//获取钦定元素elem的体制属性
function getStyle(elem, name) {
if (elem.style[name]) {//假诺属性存在于style[]中,那么它已棉被服装置了(并且是现阶段的)
return elem.style[name];
} else {
if (elem.currentStyle) {//尝试使用IE的章程
return elem.currentStyle[name];
} else if (document.defaultView && document.defaultView.getComputedStyle) {//或然W3C的不二等秘书籍,假诺存在的话
//name=name.replace(/([A-Z)/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem, '');//获取样式对象并得到属性(存在的话)值
return s && s.getPropertyValue(name);
} else {
return null;
}
}
}
//获取成分的X(水平、左端)地点
function pageX(elem) {
return elem.offsetParent ?//查看我们是或不是位于根成分
elem.offsetLeft + pageX(elem.offsetParent) ://若是大家能接二连三获得上一个因素,扩张当前的偏移量并承袭上扬递归
elem.offsetLeft;//不然获得当前的偏移量
}
//得到成分Y(垂直、顶部)地方
function pageY(elem) {
return elem.offsetParent ?//查看我们是还是不是位于根元素
elem.offsetTop + pageY(elem.offsetParent) ://假诺能持续获得上二个要素,增添当前的偏移量并持续开辟进取递归
elem.offsetTop;//不然获取当前的偏移量
}
//获取元素相对于阿爹的水准地点
function parentX(elem) {
return elem.parentNode == elem.offsetParent ?//就算offsetParent是因素的爹爹,那么提前退出
elem.offsetLeft :
pageX(elem) - pageX(elem.parentNode);//否则,我们需求找到成分和因素的父亲相对于任何页面地点,并图谋他们事先的差
}
//获取成分相对于阿爹的垂直地方
function parentY(elem) {
return elem.parentNode == elem.offsetParent ?//借使offsetParent是因素的爹爹,那么提前退出
elem.offsetTop :
pageX(elem) - pageY(elem.parentNode);//不然,大家供给找到成分和因素的阿爹相对于整个页面地方,并计算他们事先的差
}
//苏醒css原的性质值 防止reset css函数副作用的函数
function restoreCSS(elem, prop) {
for (var i in prop) {//复位全部属性,苏醒它们的原有值
elem.style[i] = prop[i];
}
}
//设置CSS风姿洒脱组属性的函数,它能够恢复生机到原本设置
function resetCSS(elem, prop) {
var old = [];
for (var i in prop) {
old[i] = elem.style[i];//记录旧的属性值
elem.style[i] = prop[i];//并设置新的值
}
return old;//再次回到已经成形的值集结,预先留下给restoreCSS函数使用
}
function getHeight(elem) {//获得成分的真正中度
return parseInt(getStyle(elem, 'height'));//得到CSS的末段值并剖判出可用的数值
}
function getWidth(elem) {//获得成分的实际宽度
return parseInt(getStyle(elem, 'width'));//获得CSS的终极值并深入分析出可用的数值
}
//查找成分完整的,或者的莫斯中国科学技术大学学
function fullHeight(elem) {
//假诺成分是突显的,那么使用offsetHeight就能够获取可观,若无offsetHeight,则利用getHeight()
if (getStyle(elem, 'display') != 'none') {
return elem.offsetHeight || getHeight(elem);
}
//管理display为none的要素,所以重新恢复设置它的css属性以博取更可信赖的读数
var old = resetCSS(elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var h = elem.clientHeight || getHeight(elem);//使用clientHeihgt找到成分的全部中度,假诺还不奏效,则运用getHeight函数
restoreCSS(elem, old);//复苏css原的品质
return h;//重返成分的全体高度
}
//查找成分完整的,或者的宽度
function fullWidth(elem) {
//假如成分是呈现的,那么使用offsetWidth就会赢得中度,若无offsetHeight,则选取getHeight()
if (getStyle(elem, 'display') != 'none') {
return elem.offsetWidth || getWidth(elem);
}
//处理display为none的成分,所以重新载入参数它的css属性以得到越来越准确的读数
var old = resetCSS(elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var h = elem.clientWidth || getWidth(elem);//使用clientWidth找到成分的欧洲经济共同体中度,假使还不见效,则选择getWidth函数
restoreCSS(elem, old);//复苏css原的个性
return h;//重临成分的欧洲经济共同体中度
}

TAG标签:
版权声明:本文由必威发布于必威-前端,转载请注明出处:拓展字符串拼接容易导致性能的问题、页面,原