H5、C3、JS

H5

含变量html

1. <a :href="`https://h5.fread.com/book/${item.bookId}`">链接</a>
2. <img :src="require(`@/assets/image/accordion_icon_${item.id}.png`)">
3. <div :style="{ 'background-image': 'url(' + require(`@/assets/image/accordion_bgimage_${item.id}.png`) + ')' }"></div>

移动端meta标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

C3

reset.css

单行文本溢出省略

  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;

多行文本溢出省略

<div class="overflow-ellipsis">测试多行文本溢出省略的文案</div>

div{
  width: 200px; /* 不要设置容器高 */
}
div.overflow-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 超过3行省略 */
  -webkit-box-orient: vertical;
  
  word-break: break-all;
  text-align: justify;
}

底部弹框动画

<view class="popout {{ifShowPopout ? 'popout-translate' : ''}}">底部弹框</view>

.popout{
  position: fixed;
  z-index: 100;
  left: 0;
  bottom: 0;
  width: 750rpx;
  background: #fff;
  
  transition: transform 0.2s ease;
  transform: translate3d(0, 100%, 0);
}
.popout-translate{
  transition: transform 0.2s ease;
  transform: translate3d(0, 0, 0);
}

JS

页面rem适配

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + "px"

• 原理：以上代码 750为设计图尺寸；100为字体放大比例（防止字体小于12px）
• 实例：设计图的 750px 相当于 7.5rem（750 / 100 = 7.5）
• 注意：先加载js再加载html（即script标签放在body前）

变更路径，但不刷新页面

window.history.replaceState(null, null, 'url') // 不加入历史
window.history.pushState(null, null, 'url') // 加入历史

• 目标路径：http://localhost:3000/main/info
• url为a?b=c 改变后为 http://localhost:3000/main/a?b=c
• url为/a?b=c 改变后为 http://localhost:3000/a?b=c

判断是否为微信环境

/MicroMessenger/i.test(window.navigator.userAgent) // true为微信环境 false为非微信环境
Android
iPhone
iPad
Windows
Macintosh

多回调同步结果

1. after函数

let fs = require('fs')
function after (times, callback) {
  let arr = []
  return function (data) {
    arr.push(data)
    if (--times == 0) {
      callback(arr)
    }
  }
}
let fn = after (2, function (data) {
  console.log(data) // [ '1', '2' ] 或 [ '2', '1' ]
})

fs.readFile('1.txt', 'utf8', function (err, data) { // 1.txt 内容为 1 
  fn(data)
})
fs.readFile('2.txt', 'utf8', function (err, data) { // 2.txt 内容为 2
  fn(data)
})

2. 发布订阅

let fs = require('fs')
let event = {
  arr: [],
  result: [],
  on (fn) {
    this.arr.push(fn)
  },
  emit (data) {
    this.result.push(data)
    this.arr.forEach(fn => {
      fn(this.result)
    })
  }
}
event.on(function (data) {
  if (data.length == 2) {
    console.log(data) // [ '1', '2' ] 或 [ '2', '1' ]
  }
})

fs.readFile('1.txt', 'utf8', function (err, data) { // 1.txt 内容为 1
  event.emit(data)
})
fs.readFile('2.txt', 'utf8', function (err, data) { // 2.txt 内容为 2
  event.emit(data)
})

深拷贝

• B复制A —— A变B变，浅拷贝 ；A变B不变，深拷贝

递归拷贝：
function deepClone (value) {
  if(value === null) return null
  if(typeof value !== 'object') return value
  if(value instanceof RegExp) return new RegExp(value)
  if(value instanceof Date) return new Date(value)
  let newObj = new value.constructor()
  for(let key in value){
    newObj[key] = deepClone(value[key])
  }
  return newObj
}

JSON方法：
function deepClone (value) {
  let newObj = JSON.parse(JSON.stringify(value))
  return newObj
}

JSON对象、JSON字符串 互转

let str = '{ "name": "James", "age": "18" }'
let obj = { "name": "James", "age": "18" }

let jsonObj = JSON.parse(str) // 字符串 -> 对象
let jsonStr = JSON.stringify(obj) // 对象 -> 字符串

类数组变数组

1. 用扩展运算符或者Array.from()方法转换

function abc () {
  console.log(Array.from(arguments))   // [ 'a', true, { name: 'miao' }, [ 1, 2, 3 ], null ]
  console.log([...arguments])          // [ 'a', true, { name: 'miao' }, [ 1, 2, 3 ], null ]
}
abc('a', true, {name: 'miao'}, [1, 2, 3], null)

编程小技巧

两个叹号转布尔值

console.log([], !![])       // [] true
console.log({}, !!{})       // {} true
console.log(null, !!null)   // null false