1

私はjavascriptとjQueryに精通しています。私は以前にクラスを構築したことがありません。たぶん、クラスは私が探しているものでさえありません。

オーバーレイを起動するために呼び出す関数があり、それは頻繁に使用され、いくつかのパラメーターが含まれています。

function launchOverlay(method, content, width, closeBtn) {

    $("body").append('<div id="overlay-backdrop" style="display:none"></div>');

    $("#overlay-backdrop").css({
        width: $(document).width(),
        height:$(document).height()
    }).fadeIn();

    $("#overlay-backdrop").append('<div id="overlay-canvas-area"><div class="inner-canvas-area"></div><div>');

    if(typeof closeBtn == 'undefined'){
        $("#overlay-canvas-area").append('<div class="close-btn"><a class="close" onClick="closeOverlay()">Close</a></div>');
    }

    if (method == "load"){
        $("#overlay-canvas-area .inner-canvas-area").load(content);
    }if(method == "append"){
        $("#overlay-canvas-area .inner-canvas-area").append(content);
    }

    var canvasAreaWidth = width+($("#overlay-canvas-area").width());
    var canvasAreaHeight = $("#overlay-canvas-area").height();

    $("#overlay-canvas-area").animate({
        top:((($(document).height())-(canvasAreaHeight))/2),
        left: ((($(document).width())-(canvasAreaWidth))/2) 
    },700);

}

私は自分のニーズに合わせてこれを絶えず変更してから、古いインスタンスに戻って関数呼び出しを変更していることに気づきました。また、関数の設定としてjsonを渡したいと思います。

最初の質問は、クラスは私が探しているものですか? もしそうなら、どこで学ぶのが良いですか?

そうでない場合、機能を改善するにはどうすればよいですか?

4

3 に答える 3

2

実装のようなまっすぐなクラスの場合、私はこれが好きです: http://ejohn.org/blog/simple-class-instantiation/

しかし、jQuery の用語で「ウィジェット」と呼ばれるものを作成したいようです。これにより、無料で求めている多くの機能に加えて、さらに多くの機能が提供されます: http://ajpiano.com/widgetfactory/#slide1 http ://wiki.jqueryui.com/w/page/12138135/Widget%20factory http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

于 2012-08-13T17:45:01.487 に答える
2

クラス (または JavaScript では、実際には「プロトタイプ」の方がより正確な用語です) は、何らかのデータを含む永続的なオブジェクトがあり、そのデータを複数の異なるメソッドで時間の経過とともに操作したい場合に適しています。

クラスを使用すると、データの保存方法とデータに対して操作するメソッドをきちんと指定できます。

出力を生成し、さまざまな異なる入力データを取り込むことができる操作が 1 つしかない場合は、クラスのメリットはあまりありません。必要なのは、さまざまなパラメーターを取り、渡されたものに基づいて操作を選択する関数だけです。

JavaScript では、関数に多くのオプションがあり、それらが可変である場合、関数の操作を指示するプロパティを含むオプション オブジェクトを渡すのが一般的です。次に、関数は、どのプロパティが存在し、どのような値を持っているかを調べて、どのように動作するかを選択できます。オプション オブジェクトを使用すると、パラメーターを追加または変更するときに、関数の引数をどんどん追加し続けるよりも、メンテナンスがはるかに簡単になります。このようなオプション オブジェクトは、すべての引数を個別に渡すよりも簡単に渡すことができます。引数のすべてのデフォルト値 (引数が渡されない場合の値) を含むオプション オブジェクトのデフォルト状態を作成することもできます。

オプション オブジェクトの使用は次のようになります。

function doWhatever(mainData, options) {
    if (options.foo) {
        // do it one way
    } else {
        // do it the other way
    }
}

doWhatever(myData, {foo: true, output: "commas", fee: "whatever"};
于 2012-08-13T17:22:53.143 に答える
1

この関数は完全に状態のない動作であるため、他の人に同意します。関連する UI ヘルパー関数と一緒に関数を名前空間に配置することを検討することもできますが、これは厳密には、整理を改善し、複数のページで使いやすくするためです。

また、この関数から返されたjQuery オブジェクトを格納し、以降のappend呼び出しでそれらを再利用することで、この関数の読みやすさとパフォーマンスを向上させることができます。

function launchOverlay(method, content, width, closeBtn) {
    var $overlay = $("body").append('<div id="overlay-backdrop" style="display:none"></div>');
    $overlay.css({
        width: $(document).width(),
        height:$(document).height()
    }).fadeIn();
    var $canvas = $overlay.append('<div id="overlay-canvas-area"><div class="inner-canvas-area"></div><div>');
    if (typeof closeBtn == 'undefined') {
        $canvas.append('<div class="close-btn"><a class="close" onClick="closeOverlay()">Close</a></div>');
    }
    if (method == "load") {
        $("#overlay-canvas-area .inner-canvas-area").load(content);
    }
    else if (method == "append") {
        $("#overlay-canvas-area .inner-canvas-area").append(content);
    }
    var canvasAreaWidth = width + $canvas.width();
    var canvasAreaHeight = $canvas.height();
    $canvas.animate({
        top: (($(document).height() - canvasAreaHeight) / 2),
        left: (($(document).width() - canvasAreaWidth) / 2)
    }, 700);
}

varあなたのスタイルに合わせて宣言をインラインのままにしてあることに注意してください。ここでは問題ではありませんが、後でより複雑な機能を実行する際に問題になる可能性があります。

于 2012-08-13T17:59:19.183 に答える