1

私はJavaScriptの「戦略」である現在の混乱を改善する任務を負っています。私たちはオンラインショッピング会社であり、上司は私にこれを適切に行う時間を与えてくれました。彼はこのモジュラーを維持し、コンポーネントの再利用性を高めることに非常に熱心です。

HTMLはJSPでレンダリングされており、多くのカスタムタグが書き出されています。たとえば、Webデザイナーが心配することなく、製品に関する情報を書き出すことができます。

ここで、JavaScriptで同様のことを行いたいと思います。Webデザイナーには、次のようなカスタムタグのセットを与える必要があります。

<foo:draggable> 
 ... some HTML here ...
</foo:draggable>

<div>これにより、上部にドラッグバーと閉じるボタンが付いたHTMLがラップされます。

私の考えは、divにのような一意の名前空間付きCSSクラス名をfoo_draggable付けてから、すべての関数を1つのJSファイルに入れることです。次に、そのJSファイルはfoo_draggable、DOMにCSSクラスを持つ要素があるかどうかを確認し、要素が見つかった場合は、必要なイベントハンドラーをアタッチします。

ただし、スケーリングの問題が心配であり、使用されないことが多いときに多数のセレクタークエリを実行することをお勧めするかどうか疑問に思っています。

最初の選択肢は、ドラッグ可能な各アイテムを明示的に開始することですが、それは<script>タグをいたるところに配置することを意味します。2番目のアプローチは、すべてのUI関数を1つのファイルに入れるのではなく、必要なものをダウンロードすることですが、これは、HTTPリクエストが大幅に増え、ページの読み込み速度が遅くなることを意味します。

誰かがこれを経験したことがありますか？

4

3 に答える 3

3

What about having two classnames?

<div class='foo fooDragable'></div>
<div class='foo fooSortable'></div>

You add the class 'foo' to all your elements that require javascript modification. Your javascript has to check the dom only once for foo.

var $foo = $('.foo');

Afterwards you can search within this array which should be way smaller than the complete dom.

var $dragAble = $foo.filter('.fooDragable');
于 2009-11-12T14:39:12.123 に答える
0

JSFを検討または検討しましたか？JSFをまだ使用していない場合は、大きな変更になると思います。ただし、 RichFaces、IceFaces、PrimeFacesなど、アジャクシカルソースを使用したすぐに使用できるJSFコンポーネントライブラリがたくさんあります。自分でコンポーネント/タグを作成するのはほとんど時間の無駄です。

または、すべてのJavascriptを置き換えて、優れた jQueryJSフレームワークを使用することもできます。

于 2009-11-12T14:42:58.280 に答える
0

Depending on how many separate components you have, the extra overhead of running the selectors might not be a big deal. You can initialize all the components just the once, when the page is loaded. Anything that's not present on the page simply won't get initialized, and will incur no further overhead. In most JavaScript frameworks, selecting by classname (or tag name) is pretty fast. It's only the complex selectors, which aren't natively supported by the browser, that are slow.

If you have a few commonly used components, and then a set of less commonly used ones, it may be worth splitting those up. Keep the commonly used components in a single JavaScript file (minified, served with compression and aggressive caching), and load that in every page, regardless of whether it's needed or not. Caching will ensure it's only downloaded once, and it'll only be one small HTTP request. For the less common components, keep them in separate files (ideally, one per component), and add a script tag on pages that use them.

I'm not entirely familiar with how JSP works, but it might be possible to do this automatically - if a tag is included in the document, add a script tag for foo_widget.js in the document header, or something like that.

于 2009-11-12T14:45:20.253 に答える