javascript 상용 도구 함수 요약
/**
* url
* @return {object}
* @example
* getRequest() getRequest().paramA
*/
function getRequest() {
var searchString = window.location.search.substring(1),
params = searchString.split("&"),
hash = {};
if (searchString == "") return {};
for (var i = 0; i < params.length; i++) {
var pos = params[i].indexOf('=');
if (pos == -1) { continue; }
var paraName = params[i].substring(0, pos),
paraValue = params[i].substring(pos + 1);
hash[paraName] = paraValue;
}
return hash;
}
/**
* url
* @param {string} url url
* @param {string|object} key
* @param {string} value
* @return {string} url
* @example
* appendQuery('lechebang.com', 'id', 3);
* appendQuery('lechebang.com?key=value', { cityId: 2, cityName: ' '});
*/
function appendQuery (url, key, value) {
var options = key;
if (typeof options == 'string') {
options = {};
options[key] = value;
}
options = $.param(options);
if (url.includes('?')) {
url += '&' + options
} else {
url += '?' + options
}
return url;
}
3. 두 날짜 의 시간 차 를 계산한다
/**
*
* @param {Date, Date} date1 date2
* @return {object | null}
* @example
* getDiff(new Date('2017-09-08'), new Date())
*/
function getDiff(date1, date2) {
if (!date1.getTime || !date2.getTime) return null
var ms = (date1.getTime() - date2.getTime());
var day1 = Math.round(ms / 24 / 3600 / 1000),
hh1 = Math.round((ms / 3600 / 1000) % 24),
mm1 = Math.round((ms / 1000 / 60) % 60),
ss1 = Math.round((ms / 1000) % 60);
return {
day: day1,
hour: hh1,
minute: mm1,
second: ss1
};
}
4. canvas 를 image 그림 형식 으로 변환
/**
* canvas image
* @param {string} cId
* @return {object HTMLImageElement}
* @example
* canvasToImg('canvas') canvasToImg('#canvarsId')
*/
function canvasToImg(cId){
let canvas = document.querySelector(cId)
if (!canvas || !canvas.toDataURL) return new Image()
let imgData = canvas.toDataURL('image/png'),
imgs= new Image();
imgs.src=imgData;
return imgs
}
5. 랜 덤 guid 생 성
/**
* guid
* @return {string}
* @example
* // 7f603b20-17ff-4f47-aeb9-e7996de04939
* util.guid();
* @see http://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
*/
function guid () {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
}
6. 1 개 월 일수 획득
function isLeapYear (year) {
if (year % 100 === 0) {
if (year % 400 === 0) {
return true;
}
} else if (year % 4 === 0) {
return true;
}
return false;
}
/**
*
* @return {number}
* @param {string | number} year month
* @example
* getDaysInMonth(2017, 9)
*/
function getDaysInMonth (year, month) {
return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
}
/**
*
* @param{object, array} obj key
* @return{object}
* @example
* pick(obj, [key1, key2])
*/
function pick (obj, keys) {
let result = {}
if (!obj || !keys.forEach) {
return result
}
keys.forEach((item) => {
if (obj.hasOwnProperty(item)) {
result[item] = obj[item]
}
})
return result
}
8. 대상 여 부 를 판단 한다
/**
*
* @param{object} obj
* @return{object}
* @example
* isObject (null) isObject (() => {} )
*/
function isObject (obj) {
var type = typeof obj;
return type === 'function' || type === 'object' && !!obj;
}
/**
*
* @param{function} Ctor
* @return{boolean}
* @example
* isNative (window.Symbol) isNative (window.Promise)
*/
function isNative (Ctor) {
return typeof Ctor === 'function' && /native code/.test(Ctor.toString())
}
/**
*
* @param{object} obj
* @return{object}
* @example
* cloneDeep(obj)
*/
function cloneDeep (obj) {
if (!isObject(obj)) return obj;
let result
if (Array.isArray(obj)) {
result = []
obj.forEach((item) => {
result.push(cloneDeep(item))
})
return result
}
result = {}
for (let key in obj) {
let item = obj[key]
if (_.isObject(item)) {
result[key] = cloneDeep(item)
} else {
result[key] = item
}
}
return result
}
11. 두 지점 의 실제 거 리 를 얻는다
/**
* , ， ，
* @return {null|number} ， ， null
* @example
* getDistance(31.282055633974, 121.379623888259)
*/
function getDistance (endLat, endLon, startLat, startLon) {
if (!startLat) {
let address = Lizard.state.address
if (address && address.lat) {
startLat = address.lat
startLon = address.lon
}
}
//
if (!startLat) {
return null
}
const PI = Math.PI
let lon1 = (PI / 180) * startLon
let lon2 = (PI / 180) * endLon
let lat1 = (PI / 180) * startLat
let lat2 = (PI / 180) * endLat
//
let R = 6378.137;
// km， ， *1000
let d = Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)) * R;
return parseInt(d * 1000, 10)
}
12. 그림 불 러 오기 (promise 패키지)
/**
* url， promise ， resolve
* @return {Promise}
* @example
* loadImg(url).then(console.log(' ')).catch(err => {console.log(err)})
*/
function loadImg (url) {
return new Promise((resolve, reject) => {
let img = new Image()
img.addEventListener('load', function() {
resolve([img.width, img.height])
}, false)
img.addEventListener('error', reject, false)
img.src = url
})
}
13. 반복 문자열 n 회
/**
* ， ，
* @return {string}
* @param{string, number} str n
* @example
* loadImg(url).then(console.log(' ')).catch(err => {console.log(err)})
*/
const repeat = (str, n) => {
let res = ''
while (n) {
if (n % 2 === 1) res += str
if (n > 1) str += str
n >>= 1
}
return res
}
14. 변 수 는 '$' 또는 '' 로첫머리
/**
* ， '$' '_'
* @return {Boolean}
* @param{string} str
* @example
* isReserved (‘$’) isReserved (‘param’)
*/
function isReserved (str) {
var c = (str + '').charCodeAt(0);
return c === 0x24 || c === 0x5F
}
15. promise 확장 - finally
/**
* promise finally， ， promise
* @param{function} callback
* @example
* server.listen(0).then(function () { // run test }).finally(server.stop);
*/
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value).catch(e => {console.error(e)}),
reason => P.resolve(callback()).then(() => { throw reason }).catch(e => {console.error(e)})
);
};
16. dom 요소 가 현재 창 에서 볼 수 있 는 지 판단 하기
/**
* dom
* false ， true true
* @param {object，Boolean}
* @example
* elementIsVisibleInViewport(document.querySelector('div'), true)
*/
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { innerHeight, innerWidth } = window;
return partiallyVisible
? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
: top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
결어
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
