做业务时用到的插件

[IOriens]

插件整理

echarts 系列

词云

echarts-wordcloud

分页

simplePagination

Loading

shCircleLoader

[IOriens]

JavaScript

Starter Kit

React

单页应用：create-react-app、react-starter-kit 多页应用：webpack-multiple-pages、修改create-react-app支持多入口

vue

stop.prevent

<el-button 
  type="info" 
  round 
  @click.stop.prevent="searchTxt = keyword"> 
    {{keyword}}
</el-button>

Snippets

浏览器兼容性检测

var modernBrowser = "fetch" in window && "assign" in Object;

if (!modernBrowser) {
  var plyScr = document.createElement("script");
  plyScr.async = false;
  plyScr.src = "https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js";
  document.head.appendChild(plyScr);

  var feScr = document.createElement("script");
  feScr.async = false;
  feScr.src = "https://cdn.bootcss.com/fetch/2.0.4/fetch.min.js";
  document.head.appendChild(feScr);
}

URL 解析

URLSearchParams

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

URL 拆解 参数解析：query-string

取整求千分位

function toThousands (num) {
  if (num == null || num == '暂无数据' || num == '') return num
  var num = (parseInt(num) || 0).toString(), result = ''
  while (num.length > 3) {
    result = ',' + num.slice(-3) + result
    num = num.slice(0, num.length - 3)
  }
  if (num) {
    result = num + result
  }
  return result
}

[IOriens]

CSS

手动加下划线

txt::after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 10px;
    border-width: 0 0 4px;
    border-style: solid;
}

<li/>前加彩色圆点

h2::before {
    content:"\A";
    width:10px;
    height:10px;
    border-radius:50%;
    background: #b83b3b;
    display:inline-block;
}

去除 button 蓝圈

button:focus {outline:0 !important;}

[IOriens]

HTML

可用的语义化标签

Web-HTML-Element

[IOriens]

其它

排版与字体

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

typo.css Fonts.css

「∙」「•」「・」「●」

「∙」「•」「・」「●」，一个小点难倒了众多银行

[IOriens]

百度地图

jsApi 封装

function getBMapQueryString(type, opts, baseType = "place") {
  let queryOpts = {
    ak: "xxxxxxxxxxxxxx",
    output: "json",
    ...opts
  };

  let queryUrl = Object.keys(queryOpts).reduce((pre, curr) => {
    return `${pre}&${curr}=${queryOpts[curr]}`;
  }, "");

  return `https://api.map.baidu.com/${baseType}/v2/${type}?${queryUrl}`;
}

使用

let location = `${lat},${lng}`
let url = getBMapQueryString('search', {
  query: '地铁',
  location,
  page_size: 2,
  radius: 1000
})
let url2 = getBMapQueryString(
  '',
  {
    // query: "地铁",
    location,
    page_size: 2,
    pois: 1
  },
  'geocoder'
)

搜集的 BMAP AK

• Qc6teGVqQ78qlFotnpHMAaoG
• 3a345e5b8b56a7f80605cd95d64634a8
• mXijumfojHnAaN2VxpBGoqHM
• N1hSLnQGSGY3CMQed31U53cOXQg2FHDm
• 8fZRih1IQAwFyaUHKAMAjusd
• SYg1VHUWWWBfBkppaXVSma8u6NcG0X6W
• jIwkULSx4biGbOxKkB8twKG3