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; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScript 1.8.5の互換性

Function.prototype.bind 、 Object.keys 、 Array.isArrayの 3つのメソッドが実装されていますが、これらはほとんどのブラウザーでまだサポートされていません。 あらゆる種類のフリーズとdefinePropertyを実装できないのは残念です）

プロトタイプ拡張

nano.rich()



を呼び出すと、たとえばNumber.prototype.betweenやArray.prototype.containsなどの一部の組み込みオブジェクトのプロトタイプが展開されます。

入手先

LGPLライセンスの下では、最新バージョンはgithubリポジトリからダウンロードできます 。 ドキュメントもあります。

私は申し出とパッチを受け入れてうれしいです。