版權聲明：本文爲吳孔雲博客原創文章，轉載請註明出處並帶上鍊接，謝謝。 https://blog.csdn.net/wkyseo/article/details/51274460
日常項目用到的及網上收集而來
css樣式的百分比都相對於誰？
- 相對於父元素寬度的： [max/min-]width、left、right、padding、margin 等；
- 相對於父元素高度的： [max/min-]height、top、bottom 等；
- 相對於繼承字號的： font-size 等；
- 相對於自身字號的： line-height 等；
- 相對於自身寬高的： border-radius、background-size、transform: translate()、transform-origin、zoom、clip-path 等；
- 特殊算法的： background-position（方向長度 / 該方向除背景圖之外部分總長度 * 100）、
- filter 系列函數等；
rem相關
html的樣式font-size可以根據javascript去計算，一般根據設計稿來寫原始尺寸，其次通過媒體查詢來設置縮放，所以通過相應設備尺寸去做media query設置也可以實現適配，
最常見的是html{font-size: 62.5%}, 因爲任何桌面瀏覽器的默認字體大小都是16px，這樣1rem = 10px。常見的響應式查詢，可參考網站m.dx.com
html {
font-size : 20px;
}
@media only screen and (min-width: 401px){
html {
font-size: 25px !important;
}
}
@media only screen and (min-width: 428px){
html {
font-size: 26.75px !important;
}
}
@media only screen and (min-width: 481px){
html {
font-size: 30px !important;
}
}
@media only screen and (min-width: 569px){
html {
font-size: 35px !important;
}
}
@media only screen and (min-width: 641px){
html {
font-size: 40px !important;
}
}javascript對象的深度克隆
//判斷是否是數組
function isArray(arr) {
return Object.prototype.toString.call(arr).slice(8, -1) === 'Array';
}
function deepClone(obj) {
if(typeof obj !== 'object' || typeof obj !== 'function') {
return obj;
}
var o = isArray(obj) ? [] : {};
for(var i in obj) {
if(obj.hasOwnProperty(i)) {
//遞歸調用
o[i] = (typeof obj[i] === 'object') ? deepClone(obj[i]) : obj[i];
}
}
return o;
}原生方法實現jquery的extend方法
function extend(defaultObj, extendObj){
var obj = {};
for(var key in defaultObj) {
if(defaultObj.hasOwnProperty(key)) {
if(extendObj[key] === false || extendObj[key] === 0) {
obj[key] = extendObj[key];
}else{
obj[key] = extendObj[key] || defaultObj[key];
}
}
}
return obj;
}不定寬高的元素居中顯示
position：absolute； left：50%； top：50%； -webkit-transform：translate(-50%,-50%); transform：translate(-50%,-50%);
DOM獲取方法
//封裝了id，class，tagname所有方法
var get = {
byId: function (id) {
return document.getElementById(id)
},
byClass: function (sClass, oParent) {
var aClass = [];
var reClass = new RegExp("(^| )" + sClass + "( |$)");
var aElem = this.byTagName("*", oParent);
for (var i = 0; i < aElem.length; i++) {
//此處邏輯與&&的判斷，當一個爲ture時，返回第二個對象
reClass.test(aElem[i].className) && aClass.push(aElem[i]);
}
return aClass
},
byTagName: function (elem, obj) {
return (obj || document).getElementsByTagName(elem)
}
};
//類的獲取
function getByClass(oParent, sClass)
//oParent爲父節點DOM對象，sClass爲需要獲取的類
{
var aEle = oParent.getElementsByTagName('*');
var aResult = [];
var re = new RegExp('\\b' + sClass + '\\b', 'i');
var i = 0;
for (i = 0; i < aEle.length; i++) {
if (re.test(aEle[i].className)) {
aResult.push(aEle[i]);
}
}
return aResult;
//此處返回的是一個數組DOM對象
}編碼和解碼
var decToHex = function(str) {
var res=[];
for(var i=0;i < str.length;i++)
res[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4);
return "\\u"+res.join("\\u");
}
var hexToDec = function(str) {
str=str.replace(/\\/g,"%");
return decodeURI(str);
}window onload 實現多次監聽
function addloadEvent(func){
var oldonload=window.onload;
if(typeof window.onload !='function'){
window.onload=func;
}
else{
window.onload=function(){
oldonload();
func();
}
}
}insertAfter
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild === targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}重複字符串
//利用array的join方法，創建指定長度的空數組，用str來拼接數組，不會改變原有數組
function repeatstr(str,n){
return new Array(n+1).join(str);
}
console.log(repeatstr('hi',3));獲取url？後面的參數值
//方法一：正則法
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
// 這樣調用：
alert(GetQueryString("參數名1"));
alert(GetQueryString("參數名2"));
alert(GetQueryString("參數名3"));
//方法二：split拆分法
function GetRequest() {
var url = location.search; //獲取url中"?"符後的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 參數1,參數2,參數3,參數N;
// 參數1 = Request['參數1'];
// 參數2 = Request['參數2'];
// 參數3 = Request['參數3'];
// 參數N = Request['參數N'];js實現類似於add(1)(2)(3)調用方式的方法
function add(x) {
var sum = x;
var tmp = function (y) {
sum = sum + y;
return tmp;
};
tmp.toString = function () {
return sum;
};
return tmp;
}
console.log(add(1)(2)(3)); //6
console.log(add(1)(2)(3)(4)); //10
/*首先要一個數記住每次的計算值，所以使用了閉包，在tmp中記住了x的值，第一次調用add(),初始化了tmp，並將x保存在tmp的作用鏈中，然後返回tmp保證了第二次調用的是tmp函數，後面的計算都是在調用tmp, 因爲tmp也是返回的自己，保證了第二次之後的調用也是調用tmp，而在tmp中將傳入的參數與保存在作用鏈中x相加並付給sum，這樣就保證了計算*/
/*但是在計算完成後還是返回了tmp這個函數，這樣就獲取不到計算的結果了，我們需要的結果是一個計算的數字那麼怎麼辦呢，首先要知道JavaScript中，打印和相加計算，會分別調用toString或valueOf函數，所以我們重寫tmp的toString和valueOf方法，返回sum的值*/檢測對象｛｝是否爲空對象
/*
* 檢測對象是否是空對象(不包含任何可讀屬性)。 //如你上面的那個對象就是不含任何可讀屬性
* 方法只既檢測對象本身的屬性，不檢測從原型繼承的屬性。
*/
function isOwnEmpty(obj)
{
for(var name in obj)
{
if(obj.hasOwnProperty(name))
{
return false;
}
}
return true;
};
/*
* 檢測對象是否是空對象(不包含任何可讀屬性)。
* 方法既檢測對象本身的屬性，也檢測從原型繼承的屬性(因此沒有使hasOwnProperty)。
*/
function isEmpty(obj)
{
for (var name in obj)
{
return false;
}
return true;
}; 判斷某個數組中是否包含另一個數組
//是否被包含,是返回true,不是返回false
function isContained(a, b){
if(!(a instanceof Array) || !(b instanceof Array)) return false;
if(a.length < b.length) return false;
//把數組轉成字符串，通過indexOf來判斷
var aStr = a.toString();
console.info(aStr);
for(var i = 0, len = b.length; i < len; i++){
console.info(aStr.indexOf(b[i]));
if(aStr.indexOf(b[i]) == -1) return false;
}
return true;
}
//例子
(function(){
var a = [1,2,3,4,5];
var b = [1,4,3,2];
var c = [1,6];
alert(isContained(a,b));//true
alert(isContained(a,c));//false
})()異步加載的JS如何在chrome瀏覽器斷點調試
- 方案一： 在js文件代碼的頭部或者尾部加上“//@ sourceURL=test.js”，其中test.js是文件名，然後在(sources面板的no domain)裏面找到它進行調試。
- 方案二： 把$.getScript這種異步的方式換成創建script標籤同步加載的方式。
css樣式表important優先級大於內聯style設置的樣式的解決辦法
提高內聯樣式style的優先級也需要增加important或者用js設置對象樣式增加important屬性，這樣才能覆蓋樣式表中的樣式
<style>
.c{color:Red !important}
</style>
<div class="c" style="color:#000000 !important">內聯樣式也增加important，這裏就顯示黑色的了，而不是紅色</div>通過腳本設置，需要注意的是不能直接設置obj.style.color=’#000000 !important’，而是設置obj.style.cssText=’color:#000000 !important’
數組排序按照字母在數字前面
function arrSort(a, b){
if (/^\d/.test(a) ^ /^\D/.test(b)) {
return a>b?1:(a==b?0:-1);
}else{
return a>b?-1:(a==b?0:1);
}
}
var pyArray=["a","d","fa","5","t","fw2","a31","b","e","2fs","4","0"];
pyArray.sort(arrSort)
//["a", "a31", "b", "d", "e", "fa", "fw2", "t", "0", "2fs", "4", "5"]簡單的單例模式
類只會被實例化一次
var Singleton = function(fn) {
var result;
return function() {
return result || (result = fn());
};
};
var CreateMask = Singleton(function() {
var __mask = document.createElement('div');
__mask.className = 'mask';
//...
return document.body.appendChild(__mask);
});
var mask = new CreateMask();