ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript modularization_javascript スキルの単純な解析

JavaScript modularization_javascript スキルの単純な解析

WBOY
WBOYオリジナル
2016-05-16 15:06:161208ブラウズ

この記事ではJavaScriptのモジュール化を誰でも簡単に解説します。具体的な内容は以下の通りです

AMD は、RequireJS のプロモーション プロセス中のモジュール定義の標準化された出力です。

モジュールを非同期でロードし、事前にモジュールに依存し、事前に実行します。
定義モジュールを定義します。define(['require','foo'],function(){return});
モジュールの読み込みが必要 (事前依存関係) require(['foo','bar'],function(foo,bar){});

CMD は、SeaJS のプロモーション プロセス中のモジュール定義の標準化された出力です。

定義を定義します。exports をエクスポートします。モジュールは、現在のモジュールにいくつかのオブジェクトを保存します。
require(./a) が直接導入されます。 Require.async は非同期的に導入されます。
同期読み込み、近くの依存関係、実行の遅延。

SeaJS アプリケーション

公式の開始例: http://seajs.org/docs/#quick-start

SeaJS モジュールを作成するには?

// 所有模块都通过 define 来定义
define(function(require, exports, module) {
 
 // 通过 require 引入依赖
 var $ = require('jquery');
 var Spinning = require('./spinning');
 
 // 通过 exports 对外提供接口
 exports.doSomething = ...
 
 // 或者通过 module.exports 提供整个接口
 module.exports = ...
 
});

ページにモジュールをロードします

//在 hello.html 页尾,通过 script 引入 sea.js 后,有一段配置代码:
 
// seajs 的简单配置
seajs.config({
 base: "../sea-modules/",
 alias: {
  "jquery": "jquery/jquery/1.10.1/jquery.js"
 }
})
 
// 加载入口模块
seajs.use("../static/hello/src/main")

上記は JavaScript のモジュール化について簡単に紹介したもので、皆さんが JavaScript のモジュール化を学ぶのに役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。