前端开发常用代码段

236 阅读2分钟

常用代码段

整理在开发中一些常用的代码段

判断有没有这属性

function hasPrototypeProperty(obj, pro) {
    //  hasOwnProperty   in
    if (!obj.hasOwnProperty(pro) && (pro in obj)) {
        return true;
    }
    return false;
}

获取url上的键值对

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURI(r[2]);
    return null;
}

去除空格

function returnNoSpace(str) {
    return str.replace(/\s+/g, ' ');
}

兼容性滚动条

document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop

bootstrap 屏幕宽度种类

function whatScreen() {
    var width = window.screen.width;
    var title = document.querySelector("title");
    if (width <= 768) {
        title.innerHTML = "极小屏幕-" + width;
    } else if (width > 768 && width <= 992) {
        title.innerHTML = "小屏幕-" + width;
    } else if (width > 992 && width <= 1200) {
        title.innerHTML = "普通屏幕-" + width;
    } else if (width > 1200) {
        title.innerHTML = "大屏幕-" + width;
    }
}

将超出行数的部分 变成 ...

.line {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal!important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

常用正则

// 检查手机号码
function checkPhone(phone) {
    if (!(/^1[34578]\d{9}$/.test(phone))) {
        return false;
    } else {
        return true;
    }
}

// 检查邮箱
function checkEmail(myemail) {&emsp;&emsp;
    var myReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
    if (myReg.test(myemail)) {&emsp;&emsp;&emsp;&emsp;
        return true;&emsp;&emsp;
    } else {&emsp;&emsp;&emsp;&emsp;
        return false;
    }
}

自定义dom事件

var evt = document.createEvent("HTMLEvents");
  // 初始化,事件类型,是否冒泡,是否阻止浏览器的默认行为
  evt.initEvent("tap", false, false);
  // 触发
  div.dispatchEvent(evt);

设置rem

function setHTML() {
    // 基础值
    var baseVal = 100;
    // 设计稿的宽度
    var pageWidth = 375;
    // 要适配的屏幕的宽度?
    var screenWidth = document.querySelector("html").offsetWidth;
    // 要设置的fontsize
    var fontsize = screenWidth * baseVal / pageWidth;
    // 设置到html标签的中
    document.querySelector("html").style.fontSize = fontsize + "px";
  }

zepto设置拦截器

//beforeSend会在发送请求之前被调用
$.ajaxSettings.beforeSend = function (xhr, obj) {
  obj.url = baseUrl  + obj.url;
}
//complete 会在请求结束后被调用
$.ajaxSettings.complete = function () {
	
}

扩展zepto方法

为 **** 对象增加自定义方法 如 可以这样使用 `.show();`

$.extend($, {
  show: function () {
    $("body").addClass("waitting");
  }
});

使用node删除typora中多余的图片

// process.argv
const path = require("path");
const fs = require("fs");

dImgs();
/* 
默认是当前路径的 meidas文件夹
默认是当前路径的所有的md 文件
 */
function dImgs() {
  /* 
  1 获取medias里面所有的图片 =>[]
  2 将图片数组和md中的图片引用对比,发现循环后不存在的数组,再开始循环删除
   */

  let dirName = "medias";

  //  图片文件名称数组 =  要删除的图片的数组
  let imgArrNames = fs.readdirSync(dirName);
  // console.log(imgArrNames22);
  // 获取目录下的所有md文件名称
  let mdNames = fs.readdirSync("./").filter(v => {
    return v.includes(".md")
  });


  console.log("源图片的长度:" + imgArrNames.length);
  mdNames.forEach(v => {
    // v 是每一个md文件的名称  
    // 获取md文件字符串
    let mdContent = fs.readFileSync(v).toString("utf8");
    // 循环里面不要修改源数组的长度
    // 要保留的图片名数组
    let saveImgs = [];
    imgArrNames.forEach((vImg, iImg) => {
      if (mdContent.includes(vImg)) {
        // vImg 为不需要删除的文件
        saveImgs.push(vImg);
      }
    });
    saveImgs.forEach((v) => {
      // 修改上一个要循环的图片
      let deI = imgArrNames.indexOf(v);
      if (deI != -1) {
        imgArrNames.splice(deI, 1);
      }
    });

  });

  // 循环删除
  let deIndex = 0;
  imgArrNames.forEach(v => {
    fs.unlinkSync(path.join(dirName, v));
    console.log("删除的图片的名称" + v);
    deIndex++;
  });
  console.log("删除成功" + deIndex);
}

将类数组对象转为真正的数组

// 方式 一
let obj = {
  "0": "00",
  "1": "11",
  "2": "22"
}

let newArr=Array.of(...Object.values(obj));

// 方式二
let obj = {
  "0": "00",
  "1": "11",
  "2": "22",
  length:3
}
let newArr = Array.from(obj)

快速生成 对应顺序的数组

Object.keys(String(Array(100))); 
Object.keys(Array(101).toString());

数组内 改变元素的位置

// copyWithin(要插入的位置,被复制数组的开始,被复制数组的结尾)
// ["0", "1", "2", "3", "4", "5", "6", "7", "8"]
let arr = Object.keys(String(Array(10)));

// ["3", "4", "2", "3", "4", "5", "6", "7", "8"]
console.log(arr.copyWithin(0, 3, 5))

数组 寻找复合添加的元素的索引

let arr = [1, 2, 3, 4, 5, 7];

let item = arr.find((v, i) => {
  if (v >= 5)
    return true;
});
console.log(item);