js小技巧

一、移动端多行文本省略 无效问题

// 多行文本省略

@mixin ellipsis_duo($n) {

display: -webkit-box;

-webkit-line-clamp: $n;

word-break: break-all;

text-overflow: ellipsis;

overflow: hidden;

/*! autoprefixer: off */ 加上这两句就可以了

-webkit-box-orient: vertical;

/* autoprefixer: on */

}

二、js关闭浏览器当前标签页

window.setTimeout(() => { window.open('', '_self').close() this.clearSubmit() }, 500)

三、audio标签在chrome浏览器问题

在2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说

<audio autopaly></audio> <video autoplay></video>

在桌面版浏览器也将失效。



只要具备以下条件就能自动播放：

（1）没音频轨道，或者设置了muted属性

（2）在视图里面是可见的，要插入到DOM里面并且不是display: none或者visibility: hidden的，没有滑出可视区域



对于移动端开发可考虑用原生AudioContext，使用参考：https://juejin.im/post/5af7129bf265da0b8262df4c

五、小程序

• Object.keys(object).forEach对象的遍历，在wepy中
• CMS= 内容管理系统，给公司的运营、管理用的
• CRM= 事务管理系统 --》转正申请，发票报销申请等，一般前端不做此系统，都是云系统，公司只需要配置一下就行

六、跨域解决方案

1. proxy代理：

• 1. 配置全局的/api，设置目标路径targetUrl，
  2. 当在组件请求/api 的时候，真实请求路径其实是targetUrl
  3. http-proxy-middleware中间件，可以在express中使用proxy代理
• jsonp - src原理
  1. 后台返回的数据必须是jsonp格式，必须要在函数里面包裹一个对象，即callback机制
• cors响应头
  1. 后端设置响应头，res.headers()，也就是res.header('Access-Control-Allow-Origin', '*')
• H5中新引进的window.postMessage() 方法可以安全地实现跨源通信。
• window.name
  1. window对象有一个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久的存在于一个窗口载入的所有页面中的，并不会因为新的页面的载入而被重置。
• localStorage也可以解决一些跨域问题
• 数据中转，做了一层过滤，中间件
  1. 1. 服务端与服务端之间的请求是不存在跨域问题的，同源策略只存在于浏览器中

七、函数节流和防抖

函数防抖

• 函数调用n秒后才会执行，如果函数在n秒内被调用的话函数不执行，重新计算执行时间
• 事件结束后一段时间内才会执行，会有延迟性。
• 代码实现：

function debounce（method，delay）{
    var timer = null;
    return function() {
        var context = this, args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            method.apply(context, args);
        }, delay)
    }
}
// 调用,每500毫秒调用执行一次fun
window.onresize = debounce(fun, 500)

函数节流

• 函数预先设定一个执行周期，当调用动作的时刻大于等于执行周期，则开始执行该动作，然后进入下一个新周期
• 代码实现：

function throttle (method, duration) {
    var begin = new Date();
    return function() {
        var context = this, args = arguments, current = new Date();
        if(current - begin >= duration) {
             method.apply(context, args);
             begin = current;
        }
    }
}
// 调用，如果上一次距离这一次调用有500ms，就执行fun
window.onresize = throttle(fun, 500)

其实，函数的节流和防抖都是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段，并没有实质上减少事件的触发次数。

八、封装根据对象某一属性排序

let arr1 = [{age: 1, name: 'a'}, {age: 2, name: 'b'} ...]，实现根据年龄大小排序

function sortBy (field) {
    return function (a, b) { // 这儿return返回的函数相当于sort的回调函数
        return b[field] - a[field]
    }
}
let arr1 = arr.sort(sortBy('age)) // 利用数组sort方法实现

9、cookie之httpOnly