seaJs_Seajs のモジュール定義とモジュール読み込みの簡単な分析-jsチュートリアル-php.cn

seaJs_Seajs のモジュール定義とモジュール読み込みの簡単な分析

WBOY

リリース： 2016-05-16 16:45:43

オリジナル

1430 人が閲覧しました

SeaJS は、Yubo によって開発されたモジュール読み込みフレームワークで、CommonJS 仕様に準拠しており、任意の JavaScript モジュールと CSS モジュールスタイルを簡単かつ快適に読み込むために使用できます。 SeaJS は非常に小さいため、圧縮と gzip 後のサイズはわずか 4K であり、SeaJS にはモジュール定義とモジュールのロードと依存関係という 2 つのコアが存在します。 SeaJS は非常に強力で、任意の JavaScript モジュールと CSS モジュールスタイルをロードできます。SeaJS は、モジュールを使用するときに、そのモジュールが依存する他のモジュールがスクリプト実行環境にロードされていることを確認します。 Yu おじさんによると、SeaJS を使用すると、読み込みの問題を心配することなくコードを書く楽しみを楽しむことができます。あまりにも多くの JS と CSS の参照にうんざりしていませんか? 私たちの会社 Web サイトの個人のホームページにある CSS と JS の参照を数えてみました。その影響は想像できます:

1. フロントエンドとバックエンドが同じであるため、メンテナンスが困難です。
2. http リクエストが多すぎることは、もちろんマージすることで解決できますが、直接マージしない場合は、バックエンドは人件費が非常に高くつきます。たとえバックエンドがマージされたとしても、メンテナンスなど、このような長い文字列は目を混乱させるに違いありません。

SeaJS はこれらの問題を非常にうまく解決できます。

モジュール定義define

モジュールを定義するのは比較的簡単です。たとえば、sayHello モジュールを定義して、sayHello.js ドキュメントを作成します。

コードをコピーしますコードは次のとおりです。

define(function(require,exports,module){
 exports.sayHello = function(eleID,text) {
 document.getElementById (eleID).innerHTML=text;
 };
});

まず、exports パラメーターを見てみましょう。exports パラメーターは、モジュールの API を提供するために使用されます。つまり、他のモジュールはこのエクスポートメソッドを通じて SayHello にアクセスできます。

モジュールロード使用

たとえば、ページに ID が「out」の要素があり、「Hello SeaJS!」を出力したいとします。
その場合、最初に sea.js
を導入してから、sayHello モジュールを使用できます。 :

コードをコピーコードは次のとおりです。

seajs.use("sayHello/sayHello ",function(say){
say.sayHello("out","Hello SeaJS!");
});

use モジュールの使用方法は次のとおりです。

最初のパラメータはモジュール表現であり、sea.js に対する相対パスで表されます。もちろん、sayHello.js の後の「.js」接尾辞は省略できます。詳細については公式の手順を確認してください：http://seajs.com/docs/zh-cn/module-identifier.html
最初のパラメータはコールバック関数です。 say.sayHello()は、sayHelloモジュールのexports.sayHelloメソッドを呼び出します。もちろん、コールバック関数にはsayパラメータがあります。

モジュールの依存関係

モジュールの依存関係は、モジュールが定義されたときに実際に存在する必要があります。たとえば、要素の取得やスタイルの設定などの一般的な DOM モジュールがすでにあるとします。たとえば、このような DOM モジュールの場合、次のように DOM.js を記述します。

コードをコピーしますコードは次のとおりです:

define(function(require, exports, module) {
    var DOM = {
        /**
* Get the DOM object through the id attribute of the element, the parameter is a string, or multiple strings 
* @id getById
* @method getById
* @param {String} id the id attribute 
* @return {HTMLElement | Object} The HTMLElement with the id, or null if none found.
*/
        getById: function() {
            var els = [];
            for (var i = 0; i < arguments.length; i  ) {
                var el = arguments[i];
                if (typeof el == "string") {
                    el = document.getElementById(el);
                }
                if (arguments.length == 1) {
                    return el;
                }
                els.push(el);
            }
            return els;
        },
        /**
* get gets the object, you can pass in an object or a string, if the string is passed in, the object is obtained by document.getElementById() 
* @id get
* @param {String} el html element
* @return {Object} HTMLElement object.
*/
        get: function(el) {
            if (el & amp; amp; amp; & amp; amp; amp; (el.tagName || el.item)) {
                return el;
            }
            return this.getById(el);
        }
    };
    return DOM;
});

那么sayHello模块可以这样编写，为了不影响原来的demo页面，所以我定一个新的sayHelloA模块，我们可以这样编写sayHelloA.js:

复制代码代码如下:

define(function(require, exports, module) {
    var DOM = require("DOM/DOM");
    require("sayHelloA/sayHello.css");
    exports.sayHello = function(eleID, text) {
        DOM.get(eleID).innerHTML = text;
    };
});

require 函数就是用来建立模块的依赖关系，比如上面sayHelloA模块，就是依赖于DOM模块，因为用到了DOM模块的get方法。
注意这里的var DOM=require("DOM/DOM")，这句是将应用进来的DOM模块赋值给DOM；require("sayHelloA/sayHello.css")是直接应用sayHello.css css模块或者说文件。这样页面上会引用这个css文件。

最近这几天一直捣腾SeaJS，越捣腾越喜欢，感谢玉伯！感谢SeaJS！当然你可能觉得这么简单的几个实例没必要这么做。确实如果js文件少的小项目感觉不错模块化的优势，但是，更多的在js文件多或着中型以上项目这个模块化的优势就体现出来了。