2018前端學習總結

2018個人前端工做

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

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

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 避免父元素高度不能正常顯示

JavaScript

• 簡單的if判斷能夠使用三目運算符替代，精簡代碼

• 字符串判斷爲空或多個空

  let commentTest = this.data.commentContent.split(' ').join('')     // commentTest.length 爲0

• 手機號判斷

  if (number.length == 0 || !(/^1[3456789]\d{9}$/.test(number)))

• 經過url跳轉傳參

  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");

• 元素內容複製到剪貼板

  <!-- 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頁面滾動

  $('.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

• 經過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

工做總結（待更新）