工做日小結35點

時間  2019-11-17
標籤 小結 35點 简体版
原文   原文鏈接
  • 工做筆記

如下內容都是在工做中遇到而後發現本身不是很理解或者是以爲頗有意思的點。css

1.vue的this並非jQuery中的this

by 2018-11-20vue

在Vue全部的生命週期鉤子方法（如created，mounted， updated以及destroyed）裏使用this，this指向調用它的Vue實例。 在vue中想要找到某個元素須要使用event.currentTarget $(event.currentTarget).parent('.bottom-describe').siblings(el).hide(500);jquery

擴展：majing.io/posts/10000…ios

解析：1.created函數爲vue實例的鉤子方法，它裏面使用的this指的是vue實例。css3

2.對於普通函數（包括匿名函數），this指的是直接的調用者，在非嚴格模式下，若是沒有直接調用者，this指的是window。showMessage1()裏setTimeout使用了匿名函數，this指向window。git

3.箭頭函數是沒有本身的this，在它內部使用的this是由它定義的宿主對象決定。showMessage2()裏定義的箭頭函數宿主對象爲vue實例，因此它裏面使用的this指向vue實例。web

4.對setTimeout()裏的匿名函數使用bind()綁定到vue實例的this。這樣在匿名函數內的this也爲vue實例。api

showMessage1:function(){
    setTimeout(function() {
       document.getElementById("id1").innerText = '我是showMessage1=普通函數'+this.message;
    }.bind(this), 10)
}
複製代碼

或者把vue實例的this賦值給另外一個變量再使用數組

2.定位

by 2018-12-07瀏覽器

地理位置（Geolocation）是 HTML5 的重要特性之一，提供了肯定用戶位置的功能，藉助這個特性可以開發基於位置信息的應用，獲取瀏覽器經緯度。若要獲取具體的省市區信息的話，須要百度接口來轉化。

3.jQuery實現流程進度顯示

by 2018-12-10

jquery.easing.js是個好東西，各類動畫效果擴展，增強和豐富了jquery自帶的各類動畫函數 box點擊就會像移動出彈簧效果，$(obj).animate(目前狀態，時間，效果，回調函數) jquery.easing.js擴展了效果函數。

4.iframe的父元素中有元素的位置在iframe框架裏面，顯示不出來

by 2018-12-13

5.滑動

by 2018-12-13

上下滑動：slideDown/slideUp slideUp和slideDown能夠控制向上滑動或者向下滑動。根據.css('display') == 'none';來判斷當前是否隱藏 默認從上到下滑動顯示。想要從下向上顯示可讓該元素的bottom:0; 左右滑動：animate({width:XX})

var width = $('.info-wrapper').width();
if(width == 0){
    $('.info-wrapper').animate({width:"268"},300);
}else{
    $('.info-wrapper').animate({width:"0"},300);
}
複製代碼

6.key值不惟一報錯

by 2018-12-17

7.vue中給data對象(包括數組)新增屬性，並不會主動觸發視圖更新

by 2018-12-18

數組更新了數據，view層未渲染，但經過console這個數組能夠發現數據確實更新了。

緣由是：受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除。由於 Vue.js 在初始化實例時將屬性轉爲 getter/setter，因此屬性必須在 data 對象上才能讓 Vue.js 轉換它，才能讓它是響應的。(新增長的屬性不在data)

使用$set()方法，既能夠新增屬性,又能夠觸發視圖更新。

使用方法：this.$set(this.data,'key','value')； 實際使用：

if (this.isClickList[index]) {
	this.$set(this.isClickList, index, false);
} else {
	this.$set(this.isClickList, index, true);
}
複製代碼

擴展：儘管 Vue.js 提供了 API 動態地添加響應屬性，仍是推薦在 data 對象上聲明全部的響應屬性。 這麼作有兩個緣由： 1.data 對象就像組件狀態的模式（schema）。在它上面聲明全部的屬性讓組件代碼更易於理解。

2.添加一個頂級響應屬性會強制全部的 watcher 從新計算，由於它以前不存在，沒有 watcher 追蹤它。這麼作性能一般是能夠接受的，可是能夠在初始化時避免。

8.蘋果手機使用瀏覽器在點擊了select以後，頁面會出現擴大現象，要用戶主動縮小才能回到原始的頁面大小。

by 2018-12-18

在meta中添加user-scalable=no，禁止頁面縮放

9.ios設備表單按鈕自帶樣式問題

by 2018-12-18

問題描述：蘋果手機會對form表單元素有一個默認的樣式問題，好比input元素頂部會有一個陰影，select有一個漸變的背景，input[type='submit']的會有改變按鈕的背景顏色和增長一個圓角。

使用input,textarea,select{ -webkit-appearance: none; }來去除樣式問題。

注： appearance 屬性容許您使元素看上去像標準的用戶界面元素。 全部主流瀏覽器都不支持 appearance 屬性。 Firefox 支持替代的 -moz-appearance 屬性。 Safari 和 Chrome 支持替代的 -webkit-appearance 屬性。

10.驗證電話

by 2018-12-18

手機：/^1[0-9]{10}$/.test(phone)

固話：/^0\d{2,3}-?\d{7,8}$/.test(phone)

解析：

^ 匹配輸入字符串的開始位置

[a-z] 字符範圍。匹配指定範圍內的任意字符

{n} 匹配肯定的 n 次。

$ 匹配輸入字符串的結束位置

\d 匹配一個數字字符。等價於 [0-9]

{n,m} 最少匹配 n 次且最多匹配 m 次。

? 匹配前面的子表達式零次或一次。

同時驗證一個輸入框內是手機和固定電話。邏輯：先驗證是否爲手機號碼，若不是則驗證是否爲固話。

if(!(/^1[0-9]{10}$/.test(phone))){
    if((/^0\d{2,3}-?\d{7,8}$/.test(phone))){
        $("#phone-require").text('');
    }else{
        $("#phone-require").text('請輸入正確的電話');
    }
}else{
    $("#phone-require").text('');
}
複製代碼

11.省市區級聯。使用distpicker插件，在初始化以後會生成一個實例，想要手動對distpicker進行賦值，須要先摧毀以前的實例。以後再從新生成一個新的實例

by 2018-12-18

參考：www.jq22.com/jquery-info…

var provinceCode = 340000;
var cityCode = 340700;
$("#distpicker").distpicker('destroy');
$("#distpicker").distpicker({
  province: ChineseDistricts['86'][provinceCode],
  city: ChineseDistricts[provinceCode][cityCode],
});
複製代碼

注：沒有賦值的區會自動取第一個

12.iframe滾動條相關內容

by 2018-12-19

若是iframe的scrolling屬性設置爲no,則不出現滾動條(不可滾動)。在控制檯中調整scrolling=auto/yes也再也不出現滾動條 可是滾動條出現和不出現還受子頁面中的HTML和body元素的overflow屬性影響，若iframe中的scrolling=auto，可是子HTML或者子body的overflow：hidden，頁面仍是不會滾動。反之亦然 若iframe中的scrolling=no，可是子body的overflow：scroll，頁面仍是會滾動。

13.vertical-align的默認值爲baseline(img也是)

by 2018-12-21

各個元素中最下面的baseline爲基準，就是說誰的baseline在最下面，就以誰的baseline爲基準進行對齊。因此說圖片和下面的元素之間有一道縫或者圖片改變了文字的行高。

解決方法:能夠將img的float：left。或者設置display:block

14.將圖片固定在右側

by 2018-12-21

background: url(../images/nav_dian2.png) right center no-repeat;

15.url參數爲數組時怎麼發送

by 2018-12-21

?links[]=http://www.baidu.com&links[]=http://www.google.cn ["http://www.baidu.com","http://www.google.cn"]

16.英文的單詞寬度沒法預測

by 2018-12-22

只能對英文字母的空白符和每一個字母的間距做調整

17.以前的accept屬性設置的上面註釋的那個。PC端能夠上傳圖片。手機端蘋果能夠，安卓不能夠。而後設成了下面這個屬性。而後就奇蹟般的能夠了，這坑爹的。。還覺得是兼容性的問題

by 2018-12-25

accept="image/*"

accept 屬性只能與 <input type="file"> 配合使用。它規定可以經過文件上傳進行提交的文件類型。

18.jq的this

by 2018-12-27

獲取一個元素的className

this.className == 'self-menu-up'
console.log(document.getElementById('myDiv'));
console.log(this);
console.log($(this));
複製代碼

19.在input框中有時想將輸入的字和placeholder設爲不一樣的顏色或其它效果，這時就能夠用如下代碼來對placeholder進行樣式設置了。

by 2018-12-28

::-webkit-input-placeholder{}    /* 使用webkit內核的瀏覽器 */
:-moz-placeholder{}                  /* Firefox版本4-18 */
::-moz-placeholder{}                  /* Firefox版本19+ */
:-ms-input-placeholder{}           /* IE瀏覽器 */
複製代碼

注1：冒號前寫對應的input或textarea元素等。

注2：placeholder屬性是css3中新增長的屬性，IE9和Opera12如下版本的CSS選擇器均不支持佔位文本。

20.hasClass() 方法檢查被選元素是否包含指定的 class。返回true或者false

by 2018-12-29

$("p:first").hasClass("intro")

21.FastClick.attach(document.body);是什麼意思

by 2018-12-29

移動端頁面對於點擊事件會有300毫秒的延遲，也就是js捕獲click事件的回調函數處理，須要300ms後才生效，致使多數用戶感受移動設備上基於HTML的web應用界面響應速度慢，甚至有時候會影響一些業務邏輯的處理。爲何這麼設計呢？ 由於它想看看你是否是要進行雙擊（double tap）操做。

使用：必須在頁面全部Element以前加載腳本文件先實例化fastclick

$(function() {FastClick.attach(document.body);});

FastClick 是 FT Labs 專門爲解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之，FastClick 在檢測到touchend事件的時候，會經過 DOM 自定義事件當即觸發一個模擬click事件，並把瀏覽器在 300 毫秒以後真正觸發的click事件阻止掉。

22.如何設置單頁面中vue的背景

by 2019-1-4

給頁面的容器設置position: fixed;height: 100%;width: 100%;

23.window.onscroll = function() {}在created中使用

by 2019-1-8

問題：在myOrder個人訂單頁點擊查看詳情，若是在詳情頁觸發滾動。返回個人訂單頁面的時候會加載兩次列表。

緣由：window.onscroll = function() {}會再一次觸發加載列表內容。 window.onscroll函數是綁定在window對象下面的。沒有在 beforeDestroy 的時候解除事件綁定。因此在進入詳情頁的時候onscroll還存在window中，滾動就會觸發該函數。

24.有些手機端輸入框會被輸入法遮住。輸入框收回以後頁面會出現空白。

by 2019-1-8

var bfscrolltop;
setTimeout(function() {
  bfscrolltop = document.body.scrollTop;//網頁被捲去的高
}, 50);

window.addEventListener("click", function() {
  var interval;
  if (document.activeElement.tagName == "INPUT") {
    interval = setTimeout(function() {
      document.body.scrollTop = document.body.scrollHeight;//網頁正文全文高
    }, 100);
    document.activeElement.addEventListener('blur',function(){
      clearInterval(interval);
      document.body.scrollTop = bfscrolltop;
    })
 }
})
複製代碼

25.activeElement,tagName的用法

by 2019-1-8

activeElement 屬性返回文檔中當前得到焦點的元素。

tagName屬性返回元素的標籤名。注：在 HTML 中，tagName 屬性的返回值始終是大寫的。

26.有時候點擊orderDetail訂單詳情頁面的預定詳情頁面進入needDetail預定詳情頁面會出現空白頁。

by 2019-1-9

緣由：沒有對一些字段進行初始化就判斷其.length屬性是否!== 0,而後出現報錯致使頁面沒有加載出來。還記得前輩說過一句話，有時候報錯會阻塞頁面的加載。

處理方法：對其進行初始化。其實應該在判斷.length !== 0以前判斷是否有該屬性。

27.Axios的請求是異步的。沒有同步

by 2019-1-16

出現的場景：初始化的時候須要逐步加載級聯的東西。

解決：寫了兩遍相同的代碼，在then（）裏面觸發了下次請求

目前想到這種方法，待完善。。。

28.設置不可點擊的手型

by 2019-1-21

cursor:not-allowed;

29.echarts柱狀圖的圖例太長了致使圖例不能滾動

by 2019-1-2

解決辦法：限制圖例的字數長度

legend: {
  type: "scroll",
  data: [
    "低壓櫃/低壓進線櫃P01/低壓總開關",
    "低壓櫃/低壓進線櫃P03/宿舍堂用電",
    "低壓櫃/低壓進線櫃P03/車間辦公室用電"
  ],
  textStyle: { color: "white" },
  formatter: function (name) {
    if (!name) return '';
    if (name.length > 25) {
      return name =  name.slice(0,25) + '...';
    }
  },
  tooltip: {
    show: true
  }
}
複製代碼

30.讓另外一個東西隨着一個東西的滾動而滾動

by 2019-1-21

var right_div2 = document.getElementById("right_div2");
right_div2.onscroll = function() {
	var right_div2_top = this.scrollTop;
	var right_div2_left = this.scrollLeft;
	document.getElementById("left_div2").scrollTop = right_div2_top;
	document.getElementById("right_div1").scrollLeft = right_div2_left;
};
複製代碼

31.vue的樹形結構的綁定

by 2019-1-22

參考：blog.csdn.net/badmoonc/ar…

name屬性的使用（你能夠把它看成從import導入了一個組件並註冊，咱們在temlpate可使用<tree-menus></tree-menus>使用子組件自身進行遞歸了）

32.vue的祖孫關係點擊

by 2019-1-22

父組件只能經過子組件的this.$emit('clickchild','true');來監測事件 不能監測孫組件的事件

目前只找到這種說法。待完善。。

擴展：可是有要注意的點： 子組件接受的父組件的值分爲——引用類型和普通類型兩種， 普通類型：字符串（String）、數字（Number）、布爾值（Boolean）、空（Null）

引用類型：數組（Array）、對象（Object）

其中，普通類型是能夠在子組件中更改，不會影響其餘兄弟子組件內一樣調用的來自父組件的值， 可是，引用類型的值，當在子組件中修改後，父組件的也會修改，那麼後果就是，其餘一樣引用了改值的子組件內部的值也會跟着被修改。除非你有特殊的要求這麼去作，不然最好不要這麼作。 因其數據是公用的，改了全部引用的子組件就都改了。

33.iframe的高度

by 2019-1-23

總是差4個像素。最後發現div和iframe是有不一樣的。div的時候算的正常，頁面無滾動條，iframe就有。

問題緣由：使用了HTML5的頭部，在使用以下兩個頭部聲明時會使iframe不能填滿div， 解決方法：display:block;或者vertical-align:bottom;

其中vertical-align:bottom;表示把元素的頂端與行中最低的元素的頂端對齊。便是以元素底線做爲與父元素垂直對齊的基線。

display:block;表示將元素轉換爲塊級元素。iframe自己是一個內聯框架，他自己是從div中分出了一部分空間，做爲本身的空間，而將其轉換爲塊級對象時，他就會本身重新的一行開始顯示內容，而不依賴於div。

34.vue 不支持iE8及更低版本

by 2019-5-23

把一個普通對象傳給 Vue 實例做爲它的 data 選項，Vue.js 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。這是 ES5 特性，不能打補丁實現，這即是爲何 Vue.js 不支持 IE8 及更低版本。

35.使用微信的定位

by 2019-1-4

須要先初始化wx.config才能調用wx.getLocation函數

var wx = window.wx // 微信變量
// 獲取微信配置
this.$http.post('/jsConfig/getConfig', Qs.stringify({url: url})).then(response => {
  wx.config({
    debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: response.data.data.appId, // 必填，企業號的惟一標識，此處填寫企業號corpid
    timestamp: response.data.data.timestamp, // 必填，生成簽名的時間戳
    nonceStr: response.data.data.nonceStr, // 必填，生成簽名的隨機串
    signature: response.data.data.signature, // 必填，簽名，見附錄1
    jsApiList: response.data.data.jsApiList // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
  })
  wx.ready(function () {

  })
  wx.error(function (res) {
  })
})
複製代碼
wx.getLocation({ 
    type: 'wgs84',
    success: function (res) {
      self.lat = res.latitude; // 緯度，浮點數，範圍爲90 ~ -90
      self.lon = res.longitude; // 經度，浮點數，範圍爲180 ~ -180。
      callback()//加載列表函數
    },
    cancel: function (res) {
      self.$vux.toast.show({
        text: '定位失敗，請選擇容許獲取地理位置',
        type: 'cancel'
      })
      self.lat=23.075274
      self.lon=113.072914
      callback()
    },
    fail: function (res) {
      self.lat=23.075274
      self.lon=113.072914
      callback()
    }
  })
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程