Tag: javascript

[vue.js] v-model.lazy的使用時機

vue.js的v-model directive是一個非常方便的東西

由於v-model是使用two way data binding

所以只要修改就會立即顯示

但有時候我們也會希望v-model不要這麼快就幫我們sync

尤其是使用者在填寫表單(form)的時候

我們會希望使用者填完之後才觸發

這時候就可以使用v-model.lazy

加上.lazy這個內建的modifier讓data sync在change event事件後才去處理

vuejs v2:

<input v-model.lazy="name">

參考來源:

https://vuejs.org/v2/guide/forms.html#lazy

Advertisements

javascript ES6 的箭頭函式(arrow function)

javascript ES6的arrow function是方便的syntax sugar,可以幫助我們寫出更簡潔的js code

在arrow function還沒出現前,針對特定element綁定事件大致會像這樣:

document
.getElementById('my-btn')
.addEventListener("click", function(e) => {
alert('before es6');
});

將以下的anonymous function替換成arrow function的寫法:

document
.getElementById('my-btn')
.addEventListener("click", (e) => {
alert('arrow function');
});

只有一個參數時,可省略括號:

document
.getElementById('my-btn')
.addEventListener("click", e => {
alert('arrow function');
});

若只有一行statement時,可以省略大括號

document
.getElementById('my-btn')
.addEventListener("click", e => alert('arrow function'));

其實從以上的範例還真看不出來arrow function強大的地方XD
頂多就只有省略function這個關鍵字和大括號而已
但其實這只是arrow function的其中一種寫法
更方便的用法還在後頭~

arrow function讓你不用.bind(this)

我們都知道javascript的this是一個很tricky的東西
和Java、C#、PHP等OOP的語言的this所代表的涵意是不太一樣的

言規正傳,如果不使用arrow function在setTimeout的callback中要取得object instance的this
就要使用.bind把object instance的this綁定給setTimeout的callback

function UserModel(id) {
    this.id = id;
    this.name = '';

    setTimeout(function() {
	this.name = 'from remote';
    }.bind(this), 1000);
}

var userModel = new UserModel(1);
console.log(userModel.name);

但如果使用arrow function就簡單的多了,不需要加上.bind(this)

function UserModel(id) {
    this.id = id;
    this.name = '';

    setTimeout(() => {
	this.name = 'from remote';
    }, 1000);
}

var userModel = new UserModel(1);
console.log(userModel.name);

結論

ES6的arrow function可以讓我們少寫一些程式碼
更容易處理this的指向,進而寫出更簡潔易懂的程式碼

淺談jQuery Event Handler 的 extraParameters 使用時機

最近常常需要使用jQuery來寫一些前端的功能
前陣子終於領悟到了jQuery API Document上寫的extraParameters的使用時機,趕緊記錄一下
其實jQuery API Document寫得滿清楚的

extraParamters是一個選擇性的參數,主要的用途就是傳遞額外參數給event Handler

extraParameters
Additional parameters to pass along to the event handler.

例如,有一個使用情境是使用者選擇完下拉選單會帶入預設的資料,但在修改時則帶入已儲存在DB的資料,如果在這個情況下直接trigger change預設的資料就會把應該顯示的資料蓋掉,這時候extraParameters就派上用場了!

在trigger change event handler的時候使用extraParameters,來傳遞需要顯示的資料(sourceText)

      $('.btn-load').click(function(e){
        var id = $(this).attr('id');
        $language.val(id).trigger('change', {
          sourceText: $(this).parent().parent().find('td')[1].innerHTML
        });
      });
 完整的JS code如下:
    $(function(){
      $language = $('#language');
      $language.change(function(e, o){
        if($(this).val() === ''){
          $('#desc').text('');
          return false;
        }
        
        $desc = $('#desc');
        
        if(typeof o === 'object'){
          if(o.sourceText){
            $desc.text(o.sourceText); 
          }          
        }
        else{          
          $desc.text($(this).find("option:selected").text() + ' is a programming language.');          
        }
        
      });
      $('.btn-load').click(function(e){
        var id = $(this).attr('id');
        $language.val(id).trigger('change', {
          sourceText: $(this).parent().parent().find('td')[1].innerHTML
        });
      });
    });

Demo Code