程式設計雜筆

[程設雜筆] javascript object-parameter & self-executing anonymous function 理解

今天看完LMS的比賽,想說看一下賽程,於是就點到LMS的官網去。不知不覺,看著看著,便開始trace code了XD,記錄一些非常重要的概念理解,包含著javascript object-parameter & self-executing anonymous function的一些概念。

以下的code全部都是取自LMS官網😄

var Tab = function(tabs, contents, opts) {
		this.tabs = tabs;
		this.contents = contents;

		if (!this.tabs.length || !this.contents.length) {
			return;
		}

		this.opts = $.extend({
			curIndex: 0,
			tabClass: '',
			contentClass: '',
			event: 'click',
			preventEvents: []
		}, opts);

		this.init();
	}

	Tab.prototype = {
		switchContent: function(selected) {
			if (this.opts.tabClass) {
				this.tabs.eq(this.opts.curIndex).removeClass(this.opts.tabClass);
				this.tabs.eq(selected).addClass(this.opts.tabClass);
			}
			if (this.opts.contentClass) {
				this.contents.eq(this.opts.curIndex).removeClass(this.opts.contentClass);
				this.contents.eq(selected).addClass(this.opts.contentClass);
			}
			this.opts.curIndex = selected;
		},
		tabAttachEvents: function(event, fn) {
			var that = this,
				pelen = this.opts.preventEvents.length;
			this.tabs.each(function(index) {
				var $self = $(this);
				$self.on(event, function() {
					if (index != that.opts.curIndex) {
						fn.call(that, index);
					}
				});
				if (pelen) {
					$self.on(that.opts.preventEvents.join(' '), function() {
						return false
					});
				}
			})
		},
		init: function() {
			this.switchContent(this.opts.curIndex);
			this.tabAttachEvents(this.opts.event, this.switchContent);
		}
	};
new Tab(
		$('#J-stage-tab').find('.J-stage-tab-item'),
		$('#J-stage-main').find('.J-stage-content'), {
			event: 'click',
			tabClass: 'stage-tab-item--selected',
			contentClass: 'stage-content--selected',
			preventEvents: ['click', 'mousedown']
		});

以上這個部分的簡單功能,就是切換不同的Tab的時候,可以看到不同的content。可以看到Tab這個function很特別的是,它的參數有3個,分別是trigger的source、trigger的對象和setting。這個參數的設計我覺得很好,讓人一目了然他到底是在設定什麼東西。

不過我覺得,其實也可以把前兩個參數拉到後面的object進去,這樣只有一個參數,或許會更清爽。

以往在設計javascript函數的時候,往往會帶有以前C和C++的概念,一個傳進去的值就開一個參數。然後如果以後要加更多的參數或改參數,就會變得很麻煩。運用jQuery.extend()就可以直接得到所有的參數,超好用的。
!this.tabs.length是用來判斷是否存不存在,如果沒有這句,在接下來操作就會出問題。

var timeline = function() {
		var tl = $('#J-timeline');
		if (!tl.length) {
			return;
		}

		var tlItems = tl.find('.J-timeline-item'),
			tlSelected = -1,
			tlXHR = null,
			tlsrcArr = [],
			tlSelectedClass = 'fixture-timeline__item--selected';

		function get(index) {
			if (tlXHR) {
				tlXHR.abort();
			}
			tlXHR = $.ajax({
				url: tlsrcArr[index],
				// 為了測試方便直接傳入了html,需要其他格式請自行更換
				dataType: 'html'
			}).done(function(data) {
				tlXHR = null;
				if (tlSelected != index) {
					if (tlSelected > -1) {
						tlItems.eq(tlSelected).removeClass(tlSelectedClass);
					}
					$("div[class$=fixture-timeline__item--selected]").removeClass(tlSelectedClass);
					tlItems.eq(index).addClass(tlSelectedClass);
					tlSelected = index;
				}
				fixture.setData(data);
			})
		}

		function init() {
			tlItems.each(function(index) {
				var $self = $(this);
				tlsrcArr.push($self.data('src'));
				$self.click(function() {
					get(index);
				})
			})
		}

		return {
			init: init,
			get: get
		}
	}();

這段code是一個self-executing anonymous function。比較特別的是,他的自執行函數執行完後,會return一個物件,而物件裡包函著所有你想要refer的函數。這樣有一個好處是可以把所有不想要暴露的東西,都隱藏起來,留在原本的self-executing anonymous function。

http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s