台灣數位學習數位教學平台 RSS feed provider zh-tw http://lms.xms.com.tw/board.php?courseID=100&f=doclist&folderID=1600 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8655 在 data collection 中，提供簡單的方法依序 (通常是 next)  取得元素var dataSet = (function() {  var index = 0,      data = [1, 2, 3, 4],      len = data.length;  return {    next: function() {      var el;      if (!this.hasNext()) return null;      return data[index++];    },    hasNext: function() {    },    rewind: funciton() {    },    curr: function() {    }  }})(); Sat, 09 Jun 2012 19:54:52 +0800 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8647 利用以下特性，建立模組的範例 (p100 @ JavaScript Pattern)1. 命名空間 namespace2. 立即函式3. private (closure)4. 宣告相依性if (typeof FS.lib.array === 'undefined') {// 一般 lib 開發會很嚴謹，尤其是同一家公司，應該不會不小心被覆蓋，所以可以省略檢查FS.namespace('FS.lib.array');FS.lib.array = (function() {      // 宣告相依性  var uobj = FS.lib.object,      ulang = FS.lib.lang,      // private 屬性      _str = "...";  // init    // public API  return {    inArray: function() { ... },    isArray: funciton() { ... }}());}將 private 變成 public，物件完成後，決定開放那些 APIFS.lib.array = (function() {      // 宣告相依性  var uobj = FS.lib.object,      ulang = FS.lib.lang,      // private 屬性      _str = "...";  // init    // private method  inArray = function() { ... }  isArray = fucction() { ... }  // set public API  return {    inArray: inArray,    isArray: isArray}()); Wed, 06 Jun 2012 21:39:57 +0800 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8645 var obj = {    value: 1,    inc: function() {        this.value ++;        return this;    },    add: function(v) {        this.value += v;        return this;    },    out: function() {        alert(this.value);    }};obj.inc().add(3).out(); Wed, 06 Jun 2012 17:06:10 +0800 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8643 全大寫 var MYAPP = {};建立前先檢查if (typeof MYAPP === 'undefined' {  var MYAPP = {};}orvar MYAPP = MYAPP || {};建立前檢查，利用 namespace() 的輔助 (p92 @ JavaScript Pattern)MYAPP.namespace = function(ns) {  var parts = ns.split('.'),      parent = MYAPP,      i;  if (parts[0] === "MYAPP") {    parts = parts.slice(1);  }  for (i=0; i<parts.length; i++) {    if (typeof parent[parts[i]] === 'undefined') {      parent[parts[i]] = {};    }    parent = parent[parts[i]];  }  return parent;}var mod2 = MYAPP.namespace('MYAPP.modules.mod2'); Wed, 06 Jun 2012 16:34:33 +0800 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8642 每次執行都檢查var utils = {  addListener: function(el, type, fn) {    if (typeof window.addEventListener == 'function') {      el.addEventListerner(...);    }    else { ... }  },  removeListener: function() ...}依照檢查結果定義不同的函式，避免每次都檢查var utils = {  addListener: null,  removeListener: null}if (typeof window.addEventListener == 'function') {  utils.addListener = function ...} Wed, 06 Jun 2012 16:13:25 +0800 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8641 1. 將運算包裝起來，減少全域變數var o = {  msg: (function(){    var who = "me",        what = "call";    return what + " " + who;  }()),  getMsg: function() {    return this.msg;  }}2. 沒有名字的需求，例如只執行一次的函式 init()(function() {  var days = [ ... ],  // 如果直接 var 就會產生 global 變數      today = new Date(),      msg = ...;  alert(msg);}() );3. 儲存 private 資料 Wed, 06 Jun 2012 16:05:35 +0800 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8640 第一次沒有正式定義，之後就只做更少的事情 (lazy function definition)var func = function() {  alert("init ...");  func = function() {    alert("real body ...");  }}func();  // init ...func();  // real body ... Wed, 06 Jun 2012 15:53:48 +0800 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8638 var setup = function() {  var count = 0;  // closure, provide private used internal only    return function() {      return count ++;    }}var next = setup();next();  // 1next();  // 2 Wed, 06 Jun 2012 15:42:37 +0800 http://lms.xms.com.tw/board.php?courseID=100&f=doc&cid=8637 // just find nodesvar findNodes = function() {  var nodes=[], found;  while (true) {    ...    nodes.push(found);  }  return nodes;}// hide nodesvar hide = function(nodes) {  var i=0, max=nodes.length;  for ( ; i<max; i++) {    nodes[i].style.display = "none";  }}使用 callbackfindNodes 的同時做 hide 來增加效率，而且保持 findNodes 的泛用性 (less coupling)var findNodes = function(callback) {  var nodes=[], found;  if (typeof callback !== "function") {    callback = false;  }  while (true) {    ...    if (callback) {      callback(found);    }    nodes.push(found);  }  return nodes;}var hide = function(node) {  node.style.display = "none";};findNodes(hide);  // findNodes(function(node) { node.style.display = "none"; });物件 method 的作用域 Callback & Scope如果 callback 是物件的方法，需要做調整 (p.67 @ JavaScript Patterns)var app = {  color: "green",  paint: function(node) { node.style.color = this.color; }}findNodes(app.paint);  // error，因為 this 會指向全域變數，因為 findNodes 是 globalfindNodes(app.paint, app);var findNodes = function(callback, obj) {  if (typeof callback === 'string') {  // findNodes('paint', app); 少打一個 app (app.paint)    callback = obj[callback];  }  if (typeof callback === 'function') {    callback.call(obj, found);  }}; Wed, 06 Jun 2012 15:28:40 +0800