【持續更新】一些前端的小技巧

本人原本是java背景程式員一枚，因為最近接觸到微信公衆号，不得不從事一些前端的工作。

作為一名前端小白，在項目的學習過程中，本着學習的原則，記錄和累積自己收集和運用到的一些小技巧，友善以後的學習也希望能給其他小白一些幹貨和指出一些坑吧。大神勿噴，歡迎指導。

前端的開發工具：推薦 VS code

1，利用js周遊json對象數組(清單)

可以使用for in 沒錯，但是！！！（特别是有java或其他基礎的人來說）坑點在于in前面的參數是下标！！！不是一個數組的元素（不是一個清單的一個項），是以注意！網上有些答案還是錯的！正确例子如下：(當然也可以使用最基本的for循環的語句)

var all = ItemList for (var p in all) { 
    // 周遊json數組時，這麼寫p為索引，
    var Item = all[p] ;// 取出json對象 
}
           

2，單選按鈕radio點選選項即可選中（不必要點按鈕）

簡單，使用一個<label></label>即可，如下：

<form>
    //方式一:
    <label for="male">男</label>
    <input type="radio" name="sex" id="male" />

    //方式二:
    <label>
      <input type="radio" name="radiobutton" value="radiobutton" />男
    </label>

</form>
           

3，使标簽始終置于頁面底部（頂端等 以此類推）

如手機端網頁常見的下端的按鈕，隻需配置css樣式：

   .atbottom{

    position:fixed;  // 這裡最新更正，始終在底部的應該用position:fixed,absolute是相對于父級有position屬性的元素進行的定位

    bottom: 0;

    width: 100%;

  }

4，當内容太長時用省略号代替

• 使用css的方法：

.title{ 
    width:300px; /* 一定要指定一個寬度 */ 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}
           

參考：http://blog.csdn.net/u012531787/article/details/18553885

• 使用js的方法： 其實就是進行字段截取，然後用“...”替換拼接，個人很不建議，字數其實無法确認，還涉及到分辨率的問題，是以不推薦，是以也并不想描述。

• 如果是微信小程式的話：你會發現上面的css根本不起作用，不過還是有其特有的寫法：

    單行：

.team-content {
  width: 500rpx;
  display:-webkit-box;
  -webkit-line-clamp:1;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-box-orient:vertical;
  word-break:break-all;
}
           

     多行：

.homework {
  display: -webkit-box;  /*設定為彈性盒子*/
  -webkit-line-clamp: 5;  /*最多顯示5行*/
  overflow: hidden;  /*超出隐藏*/
  text-overflow: ellipsis;  /*超出顯示為省略号*/
  -webkit-box-orient: vertical;
  word-break: break-all;  /*強制英文單詞自動換行*/
}
           

參考：https://www.jianshu.com/p/ecf3910e2008

20200218 新增（視訊筆記 ES6文法及H5性能優化）：

5，前端頁面性能優化

• HTML中要少用table标簽，因為table标簽渲染時有許多子标簽，建議使用div；
• 減少使用for -in 因為它需要同時搜尋對象的執行個體和原型屬性，直接使用for；
• 用變量對常用又比較大的變量（數組，對象）先緩存起來；
• 優化if-else，按照出現的幾率從大到小 順序排下；
• 減少ajax的請求數；
• 當浏覽器順序（單線程）讀代碼，當遇<script>标簽時，或使用src屬性加載其他元素時，先下載下傳外連結檔案中的代碼，然後解析——這個過程頁面渲染和使用者互動都被阻塞了。
  • 如果有css和js檔案引入，建議把css放在js前面，因為js要下載下傳-解析-執行，這個過程較慢。
  • 将所有<script>标簽放到頁面底部，</body>閉合标簽之前（除非是有緩存的，放在head）。
  • 盡可能合并腳本，減少<script>标簽。
  • 公用的js代碼抽出來，公共引入，隻需下載下傳一次，後續會從緩存讀取更快。
  • <script>按需下載下傳，用動态加載src的方式。
• 壓縮資料量減少請求數
  • 體積，壓縮圖檔，盡量減少圖檔的使用（可以使用css3），建議使用png，不要留白。
  • 減少http請求，css合并，sprites圖檔子產品化拆分再合并（利用background進行背景圖檔定位）
  • 壓縮js和css檔案，使用xxx.min.js（用webpack  的mode改成生産 就可以壓縮 / 線上壓縮）
  • 壓縮頁面，gzip

6，頁面性能工具

• Fiddler2-Miscrosoft
• ySlow-YAHOO
• Pagetest-AOL

7，ES6

• 變量，常量不能重複定義（會提示重複）
• 控制修改（比如，常量用const定義後不能被修改，而不是用原來的var）
• 塊級作用域（let聲明變量是塊級的（一個大括号裡面），ES5的var是函數級的（function），在用for循環會一直是最後一個，要改要用匿名函數傳裡面）
• 解構指派：對指派運算符的擴充，對對象或者數組進行屬性和值進行比對。如 let {a,b}= {'a':3,'b':4};  var [a,b]=[1,2];
  • 指派兩邊的結構必須一樣；
  • 指派的右側必須是一個标準的對象；
  • 指派和解構必須在同一個語句完成(不能先定義後指派)；
• 箭頭函數：簡潔。如 add(12,x=>x+5);
  • 沒有自己的this,arguments,super；
  • 有且僅有一個參數，()可以不寫；
  • 有且隻有一個語句并且是return，{}可以不寫；
  • 修正this：箭頭函數的this是父作用域的this，不是調用時候的this，如在setTimout裡面，本來this是指window，用箭頭函數則表示的是其父作用域的this；

8，try-catch

對于有可能出錯的代碼，應該用try-catch包起來，防止報錯後影響後面代碼的運作

----------------------------------------------------------------------------------------------------------

20200416 

9，頁面顯示實時時間，加星期

https://www.cnblogs.com/luckyShuang/p/11858823.html

html
{{nowDate}}   {{nowTime}}   {{nowWeek}} 




js
data: function() {
    return {
      timer: null,
      nowWeek: '',
      nowDate: '',
      nowTime: '',
    };
  },
  methods: {
    setNowTimes: function (){
      var _this = this;
      var myDate = new Date()
      // console.log(myDate)
      var wk = myDate.getDay();
      var yy = String(myDate.getFullYear());
      var mm = myDate.getMonth() + 1;
      var dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
      var hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
      var min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
      var sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
      var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      var week = weeks[wk];
      _this.nowDate = yy + '年' + mm + '月' + dd + '日';
      _this.nowTime = hou + ' : ' + min + ' : ' + sec;
      _this.nowWeek = week;
    }
  },
  mounted () {
    // 時間跳轉
    this.timer = setInterval(() => {
      this.setNowTimes()
    }, 1000);
  }
           

10，定時跳轉回某頁面

data:
count: "",//倒計時



methods
//  20秒後跳回首頁
        backIndexCount: function () {
            const TIME_COUNT = 20;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        clearInterval(this.timer);
                        this.timer = null;
                        //跳轉的頁面寫在此處
                        Artery.open("jdzd/lsjdindex");
                    }
                }, 1000)
            }
        },
           

11，websocket實作實時通信和心跳

https://www.cnblogs.com/mybug/p/11718549.html

對于5分鐘逾時的問題，通過心跳來解決，下面這個是簡版：

https://www.javascriptc.com/interview-tips/zh_cn/javascript/working-with-websocket-timeout/

12，js中list兩個元素交換位置

https://www.cnblogs.com/jxldjsn/p/10791692.html

https://blog.csdn.net/funche/article/details/106308936

// 一行代碼兩邊辦事
// splice 将目标元素替換并将原結果扔回來指派給它

function swapArr(arr, index1, index2) {
    arr[index1] = arr.splice(index2, 1, arr[index1])[0];
    return arr;
}
           

*************************目前隻積累到這些，後期将不定期更新，歡迎批評指正！

對于與vue相關的實用技巧将單獨整理

結束和聲明

以上純屬個人觀點和體會希望這篇文章能對你有所幫助！歡迎大家來一起讨論分享幹貨，或者批評指正！更加熱切盼望各路大神前輩給些指導和建議！以後會不定期更新心得和總結，包括學習過程中各種異常和解決辦法等等。再見！

轉載請注明出處！或者聯系我！（[email protected]）