工作总结 #1

DongLee0504 · 2018-09-28T11:06:28Z

1、移动端iOS时间显示问题：

比如2018-08-08 24:00:00 应写成 2018/08/09 00:00:00

2、Android line-height字体居中问题：

外层元素display:table，里面元素:display:table-cell;vertical-align:middle;

3、小的图片logo可以转化为64位base码：

减少http请求

4、计算当天是当年的第几周

function getWeekOfYear (time) {
     var thisDay;
     if (time) {
       thisDay = new Date(time)
     } else {
       thisDay = new Date()
     }
     var firstDay = new Date(thisDay.getFullYear(),0, 1); //本年的第一天,Js月份从0开始记！0就是1月啦。  
     var dayWeek = thisDay.getDay(); //今天周几  
     if (dayWeek == 0) {
       dayWeek = 7;
     }
     startWeek = firstDay.getDay(); //本年第一天周几  
     if (startWeek == 0) {
       startWeek = 7;
     }
     //第几周  
      return ((thisDay.getTime() - firstDay.getTime()) / (24 * 60 * 60 * 1000) + startWeek - dayWeek) / 7 + 1
   }；

5、移动端滚动穿透解决方案

body.modal-open {
    position: fixed;
    width: 100%;
}
var ModalHelper = (function(bodyCls) {
  var scrollTop;
  return {
    afterOpen: function() {
      scrollTop = document.scrollingElement.scrollTop;
      document.body.classList.add(bodyCls);
      document.body.style.top = -scrollTop + 'px';
    },
    beforeClose: function() {
      document.body.classList.remove(bodyCls);
      // scrollTop lost after set position:fixed, restore it back.
      document.scrollingElement.scrollTop = scrollTop;
    }
  };
})('modal-open');

在modalOpen时调用ModalHelper.afterOpen();
在modalClose时调用ModalHelper.beforeClose();
网址链接：https://uedsky.com/2016-06/mobile-modal-scroll/ https://segmentfault.com/a/1190000005617307

6、iOS app调用Safari打开H5链接

if let url = URL(string: "https://www.reddit.com") {
    if #available(iOS 10.0, *) {
        UIApplication.shared.open(url, options: [:])
    } else {
        UIApplication.shared.openURL(url)
    }
}

8、获取当前周的周一的日期

function getFirstDayOfWeek (date) {
    var day = date.getDay() || 7;
    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1 - day);
};

9、页面滚动到可视区域GIF图从第一帧播放

function lazyload() {
   var seeHeight = document.body.clientHeight; //可见区域高度
   var scrollTop = $(window).scrollTop(); //滚动条距离顶部高度;
   for (var i = 0; i < num; i++) {
     if (((gif.eq(i).offset().top) < seeHeight + scrollTop) && (gif.eq(i).offset().top >= scrollTop)) { // GIF图进入可视区
       if (!gifInit[i]._init) { // GIF进入
         var src = gif.eq(i).attr('data-src');
         gif.eq(i).attr('src', src);
         gifInit[i]._init = true
         console.log(gifInit[i]._init, 'true')
       } else {
         return
       }
     } else {
       gifInit[i]._init = false //GIF离开
       console.log(gifInit[i]._init, 'false')
     }
   }
 };
 $(window).scroll(lazyload);
})

10、防抖

1、在keyup事件外层定义一个延时器
2、在keyup事件触发时清除掉定时

$(".stock_code_put").on("keyup", function () {
               clearTimeout(that.timer);
               that.timer = setTimeout(function () {
                   that.searchCode = $(".stock_code_put").val();
                   if (that.searchCode) {
                       that.ajaxSearch();
                   } else {
                       $(".search_list").addClass("none");
                   }
               }, 500);

//函数防抖
  function debounce(method,time){
    var timer = null;
    return function(){
      console.log('被触发')
      var context = this;
      //在函数执行的时候先清除timer定时器;
      
      console.log(timer)
      clearTimeout(timer);
      timer = setTimeout(function(){
        method.call(context);
      },time);
    }
  }
  //防抖给人的感受是执行后等待一定时间才会被执行
  //如果在等待的时间内又被触发，以最后的为准 因为上次的被clear掉了
  //总之一定会等待规定时间秒才会被执行

// 节流
function throttle (func,delay){
    var prev = Date.now();
    return function(){
      console.log('被触发')
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
  }
  // 函数节流给人的感受是上次执行时间和第二次执行时间相隔一定秒。否则不会被执行真正的函数
  // 上面函数返回是一个闭包，prev不会被清除掉，并且每次prev都会更新为最后一次执行的时间
  // 要么不会执行，要么就立即执行不会等待

11、多次异步请求相互依赖问题解决方案

a、请求后台时返回promise对象，然后then回调

ajax1: function(){
return new promise(resolve) {
// 请求数据
resolve(data)
}
} 
ajax2: function(){
return new promise(resolve) {
// 请求数据
resolve(data)
}
}   
ajax1().then().then(ajax2())

b、采用async await

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value) // timeout函数执行完毕后才会打印
}

asyncPrint('hello world', 50);

12、安卓端键盘调起时input被遮挡

//点击评论框 var bfscrolltop = 0;//获取软键盘唤起前浏览器滚动部分的高度 $('input[type="text"],textarea').focus(function() { //给个延迟 bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度 interval = setInterval(function() { document.body.scrollTop = document.body.scrollHeight}, 100 ); window.addEventListener('touchmove', fn, false); }).blur(function(){ clearInterval(interval); }); //如果你的页面中使用了iscorll插件，这时候你需要处理评论框的滑动事件————拒绝滑动 function fn(ev) { var _target = ev.target || ev.srcElement; if(_target.nodeName != 'TEXTAREA') { $('.pinglun_footerr_text').blur(); } }; --------------------- 本文来自风中乘凉的CSDN 博客，全文地址请点击：https://blog.csdn.net/qq_37231097/article/details/76614702?utm_source=copy

小程序客服采用button实现

<button class="cs_button" open-type="contact" session-from="weapp">
  <image class="cs_image" src="../images/cs.png"></image>
</button> 
.cs_button {
  background-color: #fff;
  border: 0px;
  height: 100rpx;
  position: fixed;
  margin-left: 240rpx;
}
// 这里是关键css 否则button有边框
.cs_button:after {
  border: 0px;
}

.cs_image {
  width: 100rpx;
  height: 100rpx;
}

本文来自 Afanbaby 的CSDN 博客，全文地址请点击：https://blog.csdn.net/Afanbaby/article/details/78796968?utm_source=copy

The text was updated successfully, but these errors were encountered:

DongLee0504 · 2019-12-16T11:55:48Z

13、找出字符串中出现最多的字母

function getMaxNumberOfChar(str) {
    return (str + '').split('').reduce(function (pre, cur, index, arr) {
      cur in pre ? pre[cur]++ : (pre[cur] = 1);
      pre[cur] > pre.value && (pre.char = cur, pre.value = pre[cur]);
      return pre;
    }, { value: 0 });
  }
  getMaxNumberOfChar('ababccdeajxac') // Object {value: 4, a: 4, char: "a", b: 2, c: 3…}
  //此外，可以考虑用正则

  function getMaxNumberOfChar(str) {
    return (str + '').split('').sort().join('').match(/(\w)\1*/g).reduce(function (pre, cur) {
      return cur.length > pre.value ? { value: cur.length, char: cur[0] } : pre;
    }, { value: 0 })
  }
  getMaxNumberOfChar('ababccdeajxac') // Object {value: 4, char: "a"}

14、一键复制

需要复制的元素为非input、textera

if ($.isIOS()) {
    var range = document.createRange();
    range.selectNode(document.getElementById('weixin'));
    var selection = window.getSelection();
    if (selection.rangeCount > 0) selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand('copy');
  } else {

    var clipboard = new ClipboardJS('#copyBtn');

    clipboard.on('success', function (e) {
      $.alert('复制成功');
    });

    clipboard.on('error', function (e) {
      console.log(e);
    });
  }

15、对象数组的去重

var arr = [{
    "name": "ZYTX",
    "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
    "gender": "AAAAAA.doc"
}, {
    "name": "ZYTA",
    "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
    "gender": "BBBBBB.doc"
}, {
    "name": "ZDTX",
    "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
    "gender": "CCCCCC.doc"
}, {
    "name": "ZYTX",
    "age": "Y13xG_4wQnOWK1QwJLgg11d0pS4hewePU95UHtpMl3eE81uS74NC-6zu-Rtnw4Ix",
    "gender": "AAAAAA.doc"
}];
var hash = {};
arr = arr.reduce(function(item, next) {
    hash[next.name] ? '' : hash[next.name] = true && item.push(next);
    return item
}, [])
console.log(arr);

作者：Roy-skywalker
链接：https://juejin.im/post/5b17a2c251882513e9059231
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

16、复杂判断逻辑优雅写法

if...else写法

const onButtonClick = (status)=>{
  if(status == 1){
    sendLog('processing')
    jumpTo('IndexPage')
  }else if(status == 2){
    sendLog('fail')
    jumpTo('FailPage')
  }else if(status == 3){
    sendLog('fail')
    jumpTo('FailPage')
  }else if(status == 4){
    sendLog('success')
    jumpTo('SuccessPage')
  }else if(status == 5){
    sendLog('cancel')
    jumpTo('CancelPage')
  }else {
    sendLog('other')
    jumpTo('Index')
  }
}

作者：Think.
链接：https://juejin.im/post/5bdfef86e51d453bf8051bf8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

switch写法

const onButtonClick = (status)=>{
  switch (status){
    case 1:
      sendLog('processing')
      jumpTo('IndexPage')
      break
    case 2:
    case 3:
      sendLog('fail')
      jumpTo('FailPage')
      break  
    case 4:
      sendLog('success')
      jumpTo('SuccessPage')
      break
    case 5:
      sendLog('cancel')
      jumpTo('CancelPage')
      break
    default:
      sendLog('other')
      jumpTo('Index')
      break
  }
}

// case 2和case 3逻辑一样的时候，可以省去执行语句和break，则case 2的情况自动执行case 3的逻辑。

作者：Think.
链接：https://juejin.im/post/5bdfef86e51d453bf8051bf8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

优雅写法

const actions = {
  '1': ['processing','IndexPage'],
  '2': ['fail','FailPage'],
  '3': ['fail','FailPage'],
  '4': ['success','SuccessPage'],
  '5': ['cancel','CancelPage'],
  'default': ['other','Index'],
}
const onButtonClick = (status)=>{
  let action = actions[status] || actions['default'],
      logName = action[0],
      pageName = action[1]
  sendLog(logName)
  jumpTo(pageName)
}

作者：Think.
链接：https://juejin.im/post/5bdfef86e51d453bf8051bf8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

将判断条件作为对象的属性名，将处理逻辑作为对象的属性值，适合一元条件判断
new Map写法

const actions = new Map([
  ['guest_1', ()=>{/*do sth*/}],
  ['guest_2', ()=>{/*do sth*/}],
  ['guest_3', ()=>{/*do sth*/}],
  ['guest_4', ()=>{/*do sth*/}],
  ['guest_5', ()=>{/*do sth*/}],
  ['master_1', ()=>{/*do sth*/}],
  ['master_2', ()=>{/*do sth*/}],
  ['master_3', ()=>{/*do sth*/}],
  ['master_4', ()=>{/*do sth*/}],
  ['master_5', ()=>{/*do sth*/}],
  ['default', ()=>{/*do sth*/}],
])
/**
 * 按钮点击事件
 * @param {string} identity 身份标识：guest客态 master主态
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 开团成功 4 商品售罄 5 有库存未开团
 */
const onButtonClick = (identity,status)=>{
  let action = actions.get(`${identity}_${status}`) || actions.get('default')
  action.call(this)
}

作者：Think.
链接：https://juejin.im/post/5bdfef86e51d453bf8051bf8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

把两个条件拼接成字符串，并通过以条件拼接字符串作为键，以处理函数作为值的Map对象进行查找并执行，这种写法在多元条件判断时候尤其好用。
当然上述代码如果用Object对象来实现也是类似的：

const actions = {
  'guest_1':()=>{/*do sth*/},
  'guest_2':()=>{/*do sth*/},
  //....
}

const onButtonClick = (identity,status)=>{
  let action = actions[`${identity}_${status}`] || actions['default']
  action.call(this)
}

作者：Think.
链接：https://juejin.im/post/5bdfef86e51d453bf8051bf8
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

DongLee0504 · 2019-12-16T12:03:36Z

17、 n个数组，找出相同的项

function intersect() {
    let sets = [];
    for (let i = 0; i < arguments.length; i++) {
        const arg = arguments[i];
        let set = new Set(arg);
        sets.push(set);
    }
    let result;
    for (let i = 0; i < sets.length - 1; i++) {
        if (i == 0) {
            result = [...sets[i]].filter(item => sets[i + 1].has(item));
        } else {
            result = [...result].filter(item => sets[i + 1].has(item));
        }
    }
    return result;
}
注意： 数组为obj结构时，要是同一个指针（同一个对象的引用）才会返回 true，否则，new Set().has(item)返回 false

18、判断是否为页面底部

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >=
  (document.documentElement.scrollHeight || document.documentElement.clientHeight);

19、slice、splice

20、两个对象数组去重

arr1= [
    {
        id: 1,
        name: 1
    },
    {
        id: 2,
        name: 2
    }
]
arr2 = [
    {
        id: 1,
        name: 1
    },
    {
        id: 2,
        name: 2
    },
    {
        id: 3,
        name: 3
    }
]
temp = []
arr2.forEach(item => {
    if(arr1.every(i => item.id != i.id))){
        temp.push(item)
    }
})

DongLee0504 · 2019-12-17T11:29:25Z

循环中的sleep

需求：循环中隔一段时间执行循环体的代码

原生 for 循环

const sleep = () => new Promise((res, rej) => setTimeout(res, 5000));
  (async () => {
    for (let i = 0; i < 9; i++) {
      console.log(i);
      await sleep();
    }
  })();

forEach

 const asyncForEach = async (array, callback) => {
  for (let index = 0; index < array.length; index++) {
    await callback(array[index], index, array);
  }
};

asyncForEach(arr, async item => {
    await sleep();
    console.log(item)
})

DongLee0504 added the 总结 label Sep 28, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

工作总结 #1

工作总结 #1

DongLee0504 commented Sep 28, 2018 •

edited

Loading

DongLee0504 commented Dec 16, 2019 •

edited

Loading

DongLee0504 commented Dec 16, 2019

DongLee0504 commented Dec 17, 2019

工作总结 #1

工作总结 #1

Comments

DongLee0504 commented Sep 28, 2018 • edited Loading

1、移动端iOS时间显示问题：

2、Android line-height字体居中问题：

3、小的图片logo可以转化为64位base码：

4、计算当天是当年的第几周

5、移动端滚动穿透解决方案

6、iOS app调用Safari打开H5链接

8、获取当前周的周一的日期

9、页面滚动到可视区域GIF图从第一帧播放

10、防抖

11、多次异步请求相互依赖问题解决方案

12、安卓端键盘调起时input被遮挡

小程序客服采用button实现

DongLee0504 commented Dec 16, 2019 • edited Loading

13、找出字符串中出现最多的字母

14、一键复制

15、对象数组的去重

16、复杂判断逻辑优雅写法

DongLee0504 commented Dec 16, 2019

17、 n个数组，找出相同的项

18、判断是否为页面底部

19、slice、splice

20、两个对象数组去重

DongLee0504 commented Dec 17, 2019

循环中的sleep

DongLee0504 commented Sep 28, 2018 •

edited

Loading

DongLee0504 commented Dec 16, 2019 •

edited

Loading