javascript基础函数

获取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]);
}

// 方法二;
function getQueryStringArgs() {
  // 取得查询字符串并去掉开头的问号
  var qs = (location.search.length > 0 ? location.search.substring(1) : ''),
    // 保存数据的对象
    args = {},
    // 取得每一项
    items = qs.length ? qs.split('&') : [],
    item = null,
    name = null,
    value = null;
  //逐个将每一项添加到args对象中
  for (var i = 0; i < items.length; i++) {
    item = items[i].split('=');
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
    if (name.length) {
      args[name] = value;
    }
  }
  return args;
}

JavaScript加载样式文件

function loadStyle(url) {
        var cssLink = document.createElement('link');
        cssLink.rel = 'stylesheet';
        cssLink.type = 'text/css';
        cssLink.href = url;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(cssLink)
    }

匹配多个转行的空格

^\s*(?=\r?$)\n

递归函数

function curData(keywords, filterData) {
  var ret = [];
  if (keywords.length == 0) {
    return filterData;
  }
  var pop = keywords.shift().toLowerCase();
  for (var i = 0; i < filterData.length; i++) {
    var dataqp = filterData[i]['data-name'].toLowerCase();
    var patt = new RegExp(pop).test(dataqp);
    if (patt) {
      ret.push(filterData[i]);
    }
  }
  ret = curData(keywords, ret);
  return ret;
}

列队递归函数

  let ID = 0;
  function createAsset(filename) {
  let duixiang = {
    ss : [ID]
  }
  return duixiang
}
function createGraph(){
  let mainAsset = createAsset();
  let queue = [mainAsset]
  for (const asset of queue) {
    
  console.log(queue)
    asset.ss.forEach(path => {
      let child = createAsset()
      queue.push(child)
    })
  }
}
createGraph();

// 需要注意，我现在给的代码是死循环，控制器就是ss里面的值，如果值为空时，就停止执行，如果一直都有，就一直执行，达到循环

获取对象的样式

// 获取marginLeft
var oUlMargin = getComputedStyle(obj, null).marginLeft;

// 设置ul的marginLeft
obj.style.marginLeft = 0 + "px";

给元素添加class

oLi[0].classList.add("active");

获取class集合

let oUl = document.querySelectorAll(".J-carousel ul");

复制元素节点

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentDocument.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

插入节点

before把参数节点插入到目标节点前面，只需获取目标节点的父节点，然后父节点调用insertBefore即可。

prepend把参数节点插入到目标节点第一个子节点的位置，获取目标节点的第一个子节点，然后调用insertBefore即可。

append的功能和原生API里appendChild的功能一样。

after把参数节点插入到目标节点的后面，只需获取目标节点的nextSibling，然后调用insertBefore即可。

动画封装

var lastTime = 0;
var prefixes = 'webkit moz ms o'.split(' '); //各浏览器前缀

var requestAnimationFrame = window.requestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame;

var prefix;
//通过遍历各浏览器前缀，来得到requestAnimationFrame和cancelAnimationFrame在当前浏览器的实现形式
for( var i = 0; i < prefixes.length; i++ ) {
    if ( requestAnimationFrame && cancelAnimationFrame ) {
      break;
    }
    prefix = prefixes[i];
    requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ];
    cancelAnimationFrame  = cancelAnimationFrame  || window[ prefix + 'CancelAnimationFrame' ] || window[ prefix + 'CancelRequestAnimationFrame' ];
}

//如果当前浏览器不支持requestAnimationFrame和cancelAnimationFrame，则会退到setTimeout
if ( !requestAnimationFrame || !cancelAnimationFrame ) {
    requestAnimationFrame = function( callback, element ) {
      var currTime = new Date().getTime();
      //为了使setTimteout的尽可能的接近每秒60帧的效果
      var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) ); 
      var id = window.setTimeout( function() {
        callback( currTime + timeToCall );
      }, timeToCall );
      lastTime = currTime + timeToCall;
      return id;
    };
    
    cancelAnimationFrame = function( id ) {
      window.clearTimeout( id );
    };
}

//得到兼容各浏览器的API
window.requestAnimationFrame = requestAnimationFrame; 
window.cancelAnimationFrame = cancelAnimationFrame;

字符串转json对象

  function getJsonObj(str) {
    var obj = new Function('return ' + str)
    return obj();
  }
  var strJson = '{a:1,b:2}';
  var json = getJsonObj(strJson);
  console.log(typeof json)
  console.log(json)

内置对象的扩展方法

function MyArray(){
  MyArray.prototype = new Array();
  MyArray.prototype.run = function(){
    console.log('添加了一个方法')
  }
};

var arr = new MyArray();
console.log(arr);

浅拷贝

Object.assign(copyObj,obj);

深拷贝

var oldObj = {
  name : '小明',
  age : 18,
  friends:['小花','小猪'],
  goodF:{
    name : '小夏',
    age : 18,
    adress : '上海',
    petsd : [{name:'土豆'},{name:'苹果'}]
  },
  bir : new Date()
}
function deepCopyObj(oldObj, newObj){
  // 先检查第一个参数是否有值，如果没有就初始化一个空对象
  for (const key in oldObj) {
    if (oldObj.hasOwnProperty(key)) {
      const oldValue = oldObj[key];
      if(!isObj(oldValue)){
        newObj[key] = oldValue;
      }else{
        // 如果是引用类型，就再调用一次这个方法，去内部拷贝这个对象的所有属性
        var temObj = new oldValue.constructor;
        deepCopyObj(oldValue, temObj);
        newObj[key] = temObj;
      }
    }
  }
}

// 判断是否是一个对象
function isObj(obj){
  return obj instanceof Object;
}

// 判断是否是一个对象
function isArray(obj){
  return Array.isArray(obj);
}

// 调用
var newObj = [];
deepCopyObj(oldObj,newObj);
console.log(newObj)

resize自适应屏幕，优化性能

  // 初始化参数
  var winH = $(window).height();

  // 屏幕尺寸变化，winH实时获取最新高度
  var winTimer = null;
  $(window).resize(function () {
    winTimer = setTimeout(function () {
      clearTimeout(winTimer);
      var activewinH = $(window).height();
      if(activewinH != winH){
        winH = activewinH;
      }
    }, 200)
  })

跨域的iframe如何做高度自适应

方法一：

<!-- a.com -->
<iframe id="frame" src="http://b.com/">
    <!-- b.com -->
    <iframe src="http://a.com/proxy.html?height=111">
        <!-- a.com/aaa.html -->
        <script>
        top.document.getElementById('frame').height = window.location.search.split('=')[1];
        </script>
    </iframe>
</iframe>

方法二：

参考：https://www.cnblogs.com/congxueda/p/11825820.html