magix、阿里ママ先端ページブロック化器

7024 ワード
スパー javascript
転載は出典を明記してください.https://github.com/thx/magix/...
何がブロックですか
実は、ラベルはブロックです.例えば、div span aなどのラベルです.フロントエンドエンジニアはこれらのブロックを繰り返し使用して組み立てて最終需要ページを形成します.これは一番原子のブロックです.私たちは希望のページ効果を達成するためには、これらのブロックを繰り返しネストしなければなりません.
一般的に私達が言っているブロックはこれらのhtmlラベルの組み合わせです.例えば、私達がプロジェクトを開発する時、各ページは通常複数の論理的に関係のないブロックから構成されています.これらのブロックは通常、複数のhtmlラベルから成る.
ラベルのこのネストとDOM Treeの考え方を借りることができます.ネストという大きなブロックを組み合わせるためのフレームを開発します.これはこれから紹介するmagixのすることです.
ブロックを定義
ここでブロックをhtmlタグからなるコードクリップとして定義します.ブロックの最小値は のようなラベルです.ブロックはhtmlラベルのように嵌められてもよく、すなわち一つのブロックは複数のサブブロックから構成されてもよい.
プロジェクトのブロック
私達はプロジェクトを開発する時に、前に述べたページの端、ページの端、コンテンツエリアなどのように、これらは私達のプロジェクトの中で一つのブロックです.もちろん、コンテンツエリアのように、分子ブロックをまた取り外すことができます.ページの端やページの端はプロジェクトで原子ブロックとして認識されていますので、これ以上分割する必要はありません.これらのブロックは容易に多重されるべきである.
準備工作
magixはさまざまなキャリアとdom操作のクラスライブラリを適応させました.amd、cmd及びkiss syがあります.ここをクリックして調べてもいいです.もちろんあなたも自分でカスタマイズできます.カスタマイズ方法はここをクリックしてください.
次にcmdバージョン、つまりseajs+jqを使って、magixのブロック化管理について説明します.
インストール
magix-testディレクトリを新規作成して、magix-testディレクトリにpackage.jsonファイルを入れます.
{
    "name": "magix-test",
    "version": "1.0.0",
    "description": "magix    ",
    "keywords": [
        "magix",
        "view"
    ],
    "dependencies": {
        "jquery": "",
        "seajs": "",
        "magix": ""
    },
    "author": "xinglie ",
    "license": "MIT"
}
そして、npm installを通じて、seajs、jquery、magixを本機にインストールします.
ページの開発
新規index.


    
        
        Magix-test
このように私達のトップページは完成しました.次に私達はheaderとfooterを開発して、index.に該当する位置にレンダリングします.
私たちはmagix-testディレクトリの下でviewディレクトリを新規作成しました.私たちは新しいheaderとfooterをこのカタログに入れました.header.jsは下記の通りです.
define('views/header', ['magix'], function(require) {
    var Magix = require('magix');
    return Magix.View.extend({
        render: function() {
            var html = 'I am header';
            this.setHTML(this.id, html);
        }
    });
});
新しいfooter.jsコードはheaderのようです.その後indexを修正します.headerとfooterをロードして、修正したindex.


    
        
        Magix-test
そしてweb serverでindex.を見ればいいです.問題がなければ、headerとfooterが対応するノードにレンダリングされていることが見えます.
イベントハンドリング
jqueryのイベントを使ってレンデ方法で自分でバインディングしてもいいし、magix定義の方法を使ってイベントを書くこともできます.magix定義の方法を使ってイベントを処理することを勧めます.
私達はheader.jsを修正しました.
define('views/header', ['magix'], function(require) {
    var Magix = require('magix');
    return Magix.View.extend({
        render: function() {
            var html = 'I am header
'; this.setHTML(this.id, html); }, 'processLogin':function(e){ console.log(e); alert('Login'); } }); });これで事件の処理が完了した.magix内部もドッキングのjqueryのイベントハンドリング関数であり、自分で別途イベントハンドリングを書いたのではなく、この過程でmagixが最適化されているので、magixの書き方をオススメします.
ビューネスト
実際に開発された中でブロックは複雑になります.私たちは複雑なブロックをもう一つ分解してから組み立てます.私達はここでheaderが非常に複雑であると仮定します.例えば、登録の件を単独で処理するためにheader-loginブロックを新設します.
header-loginコードは以下の通りです.
define('views/header-login', ['magix'], function(require) {
    var Magix = require('magix');
    return Magix.View.extend({
        render: function() {
            var html = '';
            this.setHTML(this.id, html);
        },
        'processLogin':function(e){
            console.log(e);
            alert('Login');
        }
    });
});
loginはもう単独でブロックになったので、header.jsを修正して、直接view/header-loginブロックを参照します.
define('views/header', ['magix'], function(require) {
    var Magix = require('magix');
    return Magix.View.extend({
        render: function() {
            var html = 'I am header 
';
            this.setHTML(this.id, html);
        }
    });
});

我们只需要在header.js中通过mx-view标签属性引用另外一个区块即可。这样就完成了子区块的拆分及组装功能。
刷新index.html我们可以看到和之前没拆分时是一样的

区块可视化

我们这样组装出来的页面，看上去和普通页面是一样的，但是我们如何快速知道页面上被拆分了哪些区块，及区块间的关系呢？这时候需要magix的配套工具magix-inspector
这是一个js文件，我们可以通过引入线上链接或npm包，更多引入方式可以查看https://github.com/thx/magix-inspector

我们修改index.html，引入线上链接
在index.html的head中增加如下script标签

indexを すると、 にブロック があり、マウスが ブロックを して のブロックの やブロックのパスアドレスなどの が されます.
ツールが すブロック の はDOM Treeと によく しています.
ブロック のメリット
は なページをn の したブロックに して で して してもいいです. の が に しやすいです. に つのブロックが な 、 は として にそれを して、 び み てて、 なjsファイルが れないようにします.このようなブロックはmx-viewタグの を してプロジェクトのどこにでも できます. つのブロックが の に されると です. えば、index.htmlにもう つ してもいいです.ページに ボタンが されます. の されている じviewの で いに して しません.

magixコア は 6 kbしかなく、gzip は3 kbしかなく、 に さいですが、 が に いです. したのは の だけです. ママのバックグラウンド とマーケティングページは magixで しました.ここにいくつかのリンクを いています. ママがセンターafp ドリルを ってくれます.
magixのプロジェクトの はここです.https://github.com/thx/magixどうぞお しください
の に って でファイルを りたくないなら、 の のコードを ファイルに れて、リンクをクリックしてダウンロードしてもいいです.
リンクはいたずらディスクで、リンクはhttp://yunpan.taobao.com/s/2lRwLK22mnX コードは:73 bzKa
装飾者パターン設計