Summary of commonly used JavaScript scripts (3)_javascript skills

Extending string splicing through arrays can easily lead to performance problems

Copy code The code is as follows:

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

Code source: https://gist.github.com/hehongwei44/fe71f10e4d2d9295aeab

Auxiliary functions for the position of the page viewport scroll bar

Copy code The code is as follows:

/*Two functions to determine the height and width of the current page*/
function pageHeight() {
Return document.body.scrollHeight;
}
function pageWidth() {
Return document.body.scrollWidth;
}
/*Determine the horizontal and vertical position of the scroll bar*/
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;
}
/*Two functions to determine the height and width of the browser viewport*/
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;
}

Code source: https://gist.github.com/hehongwei44/62907b9b7061d4defadb

Function to adjust element transparency

Copy code The code is as follows:

/*Function to adjust element transparency*/
function setOpacity(elem, level) {
//IE handles transparency
If (elem.filters) {
          elem.style.filters = 'alpha(opacity=' level ')';
} else {
           elem.style.opacity = level / 100;
}
}

Code source: https://gist.github.com/hehongwei44/87839cd3b8439aff6a3c

Several common functions for obtaining mouse position

Copy code The code is as follows:

/*Two general functions, used to obtain the current position of the mouse relative to the entire page*/
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;
}
/*Two functions to obtain the position of the mouse relative to the current element*/
function getElementX(e) {
Return (e && e.layerX) || window.event.offsetX;
}
function getElementY(e) {
Return (e && e.layerY) || window.event.offsetY;
}

Code source: https://gist.github.com/hehongwei44/2732365bd42baa491ef8

A set of functions that use the cssdisplay attribute to toggle the visibility of elements

Copy code The code is as follows:

/**
* 디스플레이를 사용하여 요소 숨기기
**/
함수 hide(elem) {
var curDisplay = getStyle(elem, 'display');

if (curDisplay != 'none') {
          elem.$oldDisplay = curDisplay;
}
elem.style.display = '없음';
}
/**
* 디스플레이를 사용하여 요소의 기능을 표시
**/
함수 표시(elem) {
elem.style.display = elem.$oldDisplay || }

코드 소스:

https://gist.github.com/hehongwei44/b4192af8227d756bfda6

스타일 관련 일반 기능

코드 복사 코드는 다음과 같습니다.

/**
* 지정된 요소(elem)의 스타일 속성(이름)을 가져옵니다
**/
function getStyle(요소, 이름) {
//style[]에 존재하는 경우 설정된 것입니다(현재 상태입니다)
If (elem.style[이름]) {
           return elem.style[이름];
}
//그렇지 않으면 IE 테스트 방법
else if (elem.currentStyle) {
           return elem.currentStyle[이름];
}
//또는 W3C 방법
​ else if(document.defaultView && document.defaultView.getComputeStyle){
name = name.replace(/(A-Z)/g, "-$1");
          이름 = name.toLowerCase();
          var s = document.defaultView.getComputeStyle(elem, "");
          return s && s.getPropertyValue(name);
}
//그렇지 않으면 사용자가 다른 브라우저를 사용하고 있는 것입니다
그렇지 않으면 {
        null을 반환합니다.
}
}

코드 소스:

https://gist.github.com/hehongwei44/9abf63536accd0f2eeb7

요소의 현재 높이와 너비를 가져옵니다

코드 복사 코드는 다음과 같습니다.

/**
* 요소의 실제 높이를 가져옵니다
* 종속 getStyle에 대해서는 위 함수를 참조하세요.
**/
함수 getHeight(elem) {
반환 parInt(getStyle(elem, 'height'));
}
/**
* 요소의 실제 너비를 가져옵니다
* 종속 getStyle에 대해서는 위 함수를 참조하세요
**/
함수 getWidth(elem) {
반환 parInt(getStyle(elem, 'width'));
}

코드 소스:

https://gist.github.com/hehongwei44/b524ff25991d99625eb2

위 내용은 이 기사에서 공유하는 일반적으로 사용되는 JavaScript 스크립트입니다. 모두 마음에 드셨으면 좋겠습니다.