Nano-ミニチュアJavaScriptフレームワーク

こんにちは読者。多くの優れた強力なJavaScriptフレームワークがあります。 JQuery、MooTools、ExtJS、その他多数。それらはクロスブラウザで巨大です。そして、それらを使用することは喜びです。

しかし、ときどき、5キロバイトの小さなスクリプトを書きたいと思い、なんとかして75キロバイトの圧縮形式のJQueryを接続するように私の良心に苦しめられます。そして、独自のミニフレームワークを書き始めるたびに：

var dom = { id : function (id) { return document.getElementById(id); }, tag : function (tag) { return document.getElementsByTagName(tag); }, };

開始にはこれ以上は必要ないようです。そして、CSS、継承、拡張プロトタイプを割り当てる簡単な方法であるcreateElementを覚えています。そして一般的に、自転車を書くたびに。
今回、私は良心のtwinりなしで最小のプロジェクトにさえ接続できるミニチュアフレームワークを書くことにしました。圧縮された形式では、重量はわずか4キロバイト（jQueryの20倍）です。
そして、すべての最新のフレームワークと比較してもう1つの利点があります。JQueryの半分がこれらの4キロバイトに収まるため、古いブラウザーが完全に拒否されます。

ようこそ、 Nano JavaScript Framework

現在の第2部を読んでください！

アイデア

実際、このフレームワークには既に1つのプロジェクトがありますが、少し後で紹介します）
Nanoは通常モードでの通常のサイトでの開発に役立つとは考えられませんが、このフレームワークはJavaScriptモンスターの1つよりも良い選択である場合があります。

Firefox 3.5以降などの最新のブラウザーでのみサポートされているJavaScript 1.8機能を最大限に活用します。はい、3番目のFox部分でも機能しません。このようなステップがフレームワークにねじれをもたらし、可能性の範囲を広げることを願っています。

どこで使用できますか？何らかの種類のテストスクリプトを記述するとき、たとえばプラグインやユーザースクリプトなど、サーバー側で最新バージョンのブラウザー用に何かを開発するとき。さらに、現在のバージョンは、既存のプロジェクトに接続しても何も壊れません。

DOMを使用する

DOMを操作するとき、jQueryの効果を感じます）：

 nano(); nano('tag .class'); nano({ tag : 'tag' }); nano({ id : 'id' }); nano({ Class : 'class' }); nano(document.getElementsByTagName('tag')); nano(selector, context);

 nano(function () { // DOMContentLoaded }); nano().ready(true, function () { // document.onload });

コールチェーンを作成できます。

 nano('tag .class') .css({ 'background' : 'red', 'color' : 'blue' }) .appendTo('body') .find('code') .destroy(); $('table').delegate('td', 'click', function (e) { nano(e.target).css({ background : 'green' }); });

cssセレクターにはquerySelectorAllを使用しているquerySelectorAll 、非常に高速に動作します。

クラス作成

MutulzaからのOOPは私にほとんど影響を与えませんでしたが、私はそれを可能な限り単純化し、元のJavaScriptのアプローチから遠くはないようにしました。コーシャクラスはありません。オブジェクトを展開するには、2つの静的メソッドを使用します。node.extendはオブジェクト自体を展開し、node.implementはそのプロトタイプを拡張します。実際、この短い録音は非常によく知られています

 ClassName.prototype.methodName = function () {}

 var Color = nano.implements(function (r,g,b) { this.r = r; this.g = g; this.b = b; }, { getLuminance : function () { return Math.round((this.r * 3 + this.g * 6 + this.b * 1) * 0.1); }, isDark : function () { return this.getLuminance() < 128; } });