2018前端學習總結

2018個人前端工做

先佔坑,這兩天趁着不忙把博客更新下,真的很久沒更了,大概內容有如下幾部分(算是筆記吧)-2019-01-21javascript

  • css
  • js
  • vue
  • 微信小程序
  • 工做總結

css

  • 字數過多省略號代替(需固定元素寬度)css

    /* 單行省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    /* 兩行省略 */
    text-overflow -o-ellipsis-lastline
    overflow hidden
    text-overflow ellipsis
    display -webkit-box
    -webkit-line-clamp 2
    line-clamp 2
    -webkit-box-orient vertical
  • inlineblock元素需設置統一的vertical-align 避免父元素高度不能正常顯示html

JavaScript

  • 簡單的if判斷能夠使用三目運算符替代,精簡代碼
  • 字符串判斷爲空或多個空前端

    let commentTest = this.data.commentContent.split(' ').join('')     // commentTest.length 爲0
  • 手機號判斷vue

    if (number.length == 0 || !(/^1[3456789]\d{9}$/.test(number)))
  • 經過url跳轉傳參java

    function getQueryVariable(variable){
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i=0;i<vars.length;i++) {
      var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
      }
      return(false);
    }
    var id= getQueryVariable("id");
  • 元素內容複製到剪貼板web

    <!-- jQuery -->
    $('.copy').click(function (e) { 
      e.preventDefault();
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', $('.dan').html());
      input.select();
      if (document.execCommand('copy')) {
      document.execCommand('copy');
      console.log('複製成功');
      showNotice('複製成功')
      }
      document.body.removeChild(input);
    });
  • 非點擊事件觸發的windos.open() 如ajax請求 在成功後調用該方法被攔截 異步請求改成同步
  • jQuery頁面滾動ajax

    $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // 滾動到頂部
    $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);}); // 滾動到指定位置
  • 谷歌瀏覽器本地靜態文件不支持操做cookie
  • 用jQuery的prop()改變checkbox的checked不觸發change事件解決:在改變checked狀態後用change()$('.' + item + 'Input').prop('checked', true).change();vue-router

vue

  • 經過Vue.set 和Vue.delete 二次操做對象
  • better-scroll在移動端使用需點擊時初始化scroll時設置option的click
  • vue-router中keep-alive的使用:小程序

    <!-- 把須要緩存的組件name放入include便可 不會影響子路由動畫 -->
    <transition :name="transitionHome">
      <keep-alive include="home,shop,rank,user">
        <router-view></router-view>
      </keep-alive>
    </transition>

微信小程序

  • 使用scroll-view做橫向滾動時
    • 定寬
    • 設置滾動項display:inline-block;
    • 設置滾動視圖容器white-space: nowrap;
    • 滾動項不要用float
  • 在onReady query.selectAll獲取的數據時在其函數裏對數據進行處理並setData
  • 修改已賦值的變量 先做備份 修改備份後 把備份setData 給變量
  • 配置request域名後且不校驗域名 需重啓開發者工具
  • 使用\r\n在wx.showModal的content中換行 在開發者工具上顯示不換行,可是在真實環境下是正常換行的
  • input有默認min-height
    -swiper的current若有綁定值如a 在swiper滑動對a進行定義時須要判斷source(在swiper和scroll-view做聯動時可能會用到),不然可能出現swiper亂跳bug

2019-02-12

工做總結(待更新)

相關文章
相關標籤/搜索