作者 主題: 請問..如何在一般的<script>區塊呼叫 YUI3 裡的自定的函數?  (閱讀 5566 次)

0 會員 與 1 訪客 正在閱讀本文。

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
舉個簡單的例子好了..

代碼: [選擇]
<script>
  YUI().use("node", function(Y) {
    function showMe() {
      alert("hi!");
    }
  });
</script>
<script>
showMe();
</script>

會出現 "showMe is not defined" 的訊息
那要如何能夠使用在 YUI().use() 裡定義的函數呢?  ???

或是...像這樣...

代碼: [選擇]
<script>
  YUI().use("node", function(Y) {
    function showMe() {
      alert("hi!");
    }
  });
</script>
<script>
  YUI().use("node", function(Y) {
    showMe();
  });
</script>

一樣會出現找不到 showMe 的錯誤訊息
該怎麼在另一個 YUI 區塊裡呼叫其他 YUI 區塊裡的函數?  ???

m(_ _)m

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
啊~~~ 剛剛突然想到一個方法了, 測試了一下, 果然可行...

代碼: [選擇]
<script>
  var oShowMe = null;
  YUI().use("node", function(Y) {
    function showMe() {
      alert("hi!");
    }

    oShowMe = showMe;
  });
</script>
<script>
oShowMe();
</script>

不過, 我還沒測試如果showMe() 裡面有 YUI 內建的函數或物件時是否也能正確執行, 下午再來試  ;D ;D

PS: 測試環境為 openSUSE 11 + FireFox 3.0.5

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
不過, 我還沒測試如果showMe() 裡面有 YUI 內建的函數或物件時是否也能正確執行, 下午再來試  ;D ;D

PS: 測試環境為 openSUSE 11 + FireFox 3.0.5

昨天下午跟今天早上測了一下
在3種環境跑都OK

openSUSE 11 + FireFox 3.0.5
xp + FireFox 2
xp + FireFox 3

Yamaka

  • 俺是博士!
  • *****
  • 文章數: 4913
    • 檢視個人資料
    • http://www.ecmagic.com
今天又試了一下, 直接用 YUI3 overlay anim 的範例來測試
想將處理 overlay 與 anim plugin 的部分分開成兩個區塊
不過沒成功, 應該是內部還有什麼 callback 之類的機制吧
所以造成在另一個區塊就無法正確使用某些函數或物件

 :D :D

fillano

  • 鑽研的研究生
  • *****
  • 文章數: 526
    • 檢視個人資料
舉個簡單的例子好了..

代碼: [選擇]
<script>
  YUI().use("node", function(Y) {
    function showMe() {
      alert("hi!");
    }
  });
</script>
<script>
showMe();
</script>

會出現 "showMe is not defined" 的訊息
那要如何能夠使用在 YUI().use() 裡定義的函數呢?  ???

或是...像這樣...

代碼: [選擇]
<script>
  YUI().use("node", function(Y) {
    function showMe() {
      alert("hi!");
    }
  });
</script>
<script>
  YUI().use("node", function(Y) {
    showMe();
  });
</script>

一樣會出現找不到 showMe 的錯誤訊息
該怎麼在另一個 YUI 區塊裡呼叫其他 YUI 區塊裡的函數?  ???

m(_ _)m

嗯嗯,YUI3這樣設計的用意是比較好的封裝。但是很簡單可以破壞,就是稍微調整語法,讓showMe被定義到Global Scope,例如:

代碼: [選擇]
<script>
  YUI().use("node", function(Y) {
    showMe =  function() {
      alert("hi!");
    }
  });
</script>
<script>
  YUI().use("node", function(Y) {
    showMe();
  });
</script>

不過既然是共用的function,為何不先定義好呢?如果上例常發生,也許就容易在Global Scope衝突而發生意外。所以把這些function集中,用一個固定的方式access也許是個好方法,例如:

代碼: [選擇]
<script>
var $MYLIB = {extend:function(name,func){
if(this[name]) {
alert("name conflict!");
return;
}
this[name] = func;
}
};
(function(){
$MYLIB.extend("showMe", function(){alert("showMe");});
})();
(function(){
$MYLIB.showMe();
})();
</script>

(上面這個方法是從jQuery學來的)
Sapere aude! Habe Mut, dich deines eigenen Verstandes zu bedienen! ist also der Wahlspruch der Aufklärung.

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
這樣可以嗎?
代碼: [選擇]
<script>
  function showMe() {
      alert("hi!");
  }
  YUI().use("node", showMe);
</script>
<script>
showMe();
</script>
--
TyroneYeh

fillano

  • 鑽研的研究生
  • *****
  • 文章數: 526
    • 檢視個人資料
YUI3設計的是強制你把你自己的程式寫在callback函數裡面讓YUI來呼叫,這樣自己寫的東西會包在callback函數裡,達到減少global scope pollution的目的。如果你有做大規模的網頁開發,同時用到很多自己或他人開發的javascript程式,同時歷經許多開發者來來去去,沒有妥善封裝,遲早會碰到問題的,而且這類的問題不好debug。

T大跟我的第一個方法當然可用,但是不建議。理由如上。
Sapere aude! Habe Mut, dich deines eigenen Verstandes zu bedienen! ist also der Wahlspruch der Aufklärung.

TyroneYeh

  • 俺是博士!
  • *****
  • 文章數: 2396
  • 性別: 男
    • 檢視個人資料
不好意思,我沒有用過 YUI 來亂的哩!!
另外想到是不是可以這樣
代碼: [選擇]
<script>
YUI().use("node", {
    'showMe': function(){
       alert('hi!');
    }
});
</script>
<script>
YUI().node.showMe();
//還是 ...
YUI().use("node").showMe();
</script>

沒試過不知道這樣行不行  :-[
--
TyroneYeh

fillano

  • 鑽研的研究生
  • *****
  • 文章數: 526
    • 檢視個人資料
我解釋一下好了:

參考:http://developer.yahoo.com/yui/3/yui/#core

代碼: [選擇]
YUI().use('dd-drop', 'anim', function(Y) {
    // Y.DD is available
    // Y.Anim is available
});

解釋一下,use()這個方法,前面可以用字串當作參數來指定要載入的模組,這些指定要載入的模組會透過後面callback函數的Y參數傳給這個函數,然後就可以在這個callback函數裡面透過Y變數使用YUI提供的功能。最後YUI會負責呼叫這個callback函數來執行他。

所以傳給他的一定是一個函數,否則他是無法執行的...
Sapere aude! Habe Mut, dich deines eigenen Verstandes zu bedienen! ist also der Wahlspruch der Aufklärung.