SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Yahoo! UI Library Ver.3 を使ってみよう

Yahoo! UI Library3(YUI3)の標準オブジェクト

Yahoo! UI Library Ver.3 を使ってみよう(3)

  • X ポスト
  • このエントリーをはてなブックマークに追加

YUIの基本モジュール

 すべてのモジュールの基礎となるものが、モジュールyuiのクラスYUIにまとめられています。

 YUI3の最初の設定部分であるYUI()に続くメソッドのYUI().use()や、イベント処理の、on()などがあります。use()やon()は以前でてきたので、今回は、新たにモジュールを追加したいときにに使用するaddメソッド、関数をキャッシュするcachedメソッドについて説明したいと思います。

モジュールを追加したいときに使用するaddメソッド

 自作のモジュールを新たに追加したいときは、addメソッドを使用します。addメソッドについて見ていきましょう。以下構文です。

[構文]クラスYUIのaddメソッド
YUI().add ( name , fn , version , details )
  name:作成するモジュール名
  fn:モジュールの内容(function)
  version:バージョン番号
  details:読み込みたい既存のモジュール名

 YUI.use()を使用する前に追加します。addメソッドのみのjsファイルを作成し、YUI().use()のオプションで設定して読み込むこともできます。

 リスト1は、新しくadd_testモジュールを作成してjsファイルを作成し、YUI().use()で利用する例題です。

[リスト1]モジュールの追加(add_test.js と add.html)
//モジュールadd_textのjsファイル
YUI().add('add_test',function(Y){    //.add
    Y.demo="モジュール「add_test」";//(1)
    Y.comment =function(){        //(2)
        alert("モジュール「add_test」のファンクション");
    }
},"1.00", {requires: ['node']});    //バージョン、既存モジュール指定

//モジュールadd_textを使うための指定
YUI({
    modules: {           //書き方は、configクラスの所で説明
        'add_test': {       
            fullpath: './add_test.js',   
            requires: ['node'] 
        }   
    }
}).use('add_test', function(Y) {    //作成モジュールを指定
    var button1 = Y.one('#button');
    button1.on('click', function(e) {
        alert(Y.demo);            //(3)
        Y.comment();             //(4)
    });
});

 リストの上の段が、追加したいモジュールのリストです。(1)(2)は新しく変数と関数を定義しています。JavaScriptは、オブジェクト指向言語なので、オブジェクトに任意のプロパティ/メソッド(変数や関数)を追加することができます。オブジェクトYに変数名(プロパティ)「demo」と関数(メソッド)「comment」を追加しています。オブジェクトYを受け取った下の段のリストでは、(3)(4)のような使い方ができます。

 モジュールadd_testでモジュールnodeを参照しているので、YUI().use()でのモジュール宣言はadd_testのみで構いません。

関数をキャッシュするcachedメソッド

 cachedメソッドは、関数をキャッシュするメソッドです。再読込みをよく行うページの作成にYUI3を使用する場合、使用する関数をメモリーに読み込んでおくと、毎回読み込まずに、処理をスムーズに進めることができます。以下構文です。

[構文]クラスYUIのcachedメソッド
Y.cached(f)
  f:関数

 chachedの書き方はリスト2をみてください。

[リスト2]chachedの書き方(cached.html)
YUI().use('node', function(Y) {
    var button1 = Y.one('#button');
        var r1 = ""; 

        var f1 = function(a) {     //(1)
            r1 += a; 
        }; 
        var c1 = Y.cached(f1);     //(2)

    button1.on('click', function(e) {
             c1('a');         //'a'
            alert(r1);    
             c1('b');         //'ab'
            alert(r1);
             c1('c');         //'abc'
            alert(r1);
    });
});

 (2)で(1)の関数をc1の名前でメモリーに読み込みます。ボタンを押したとき、c1はキャッシュメモリー上で動作しています。

次のページ
配列の操作

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5005 2010/04/07 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング