JavaScript モジュール開発のための SeaJS_javascript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript モジュール開発のための SeaJS_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:25 PM

JavaScriptのモジュール性JavaScript モジュール開発

はじめに

SeaJS は、CommonJS 仕様に準拠した JavaScript モジュール読み込みフレームワークであり、JavaScript のモジュール開発と読み込み機構を実現できます。 SeaJS を使用すると、JavaScript コードの読みやすさと明瞭さが向上し、現在の JavaScript プログラミングにおける依存関係の混乱やコードのもつれなどの一般的な問題が解決され、コードの作成とメンテナンスが容易になります。

SeaJS 自体は KISS (Keep it Simple, Stupid) のコンセプトに従って開発されており、その後のバージョン更新もこの方向に進むことが求められています。

SeaJS の使用方法

ダウンロードとインストールについてはここでは詳しく説明しませんので、分からない場合は公式サイトを確認してください。

基本的な開発原則
•すべてはモジュールです: SeaJS のモジュールの概念はオブジェクト指向のクラスに似ています。モジュールはデータとメソッドを持つことができ、データとメソッドはパブリックまたはプライベートとして定義でき、パブリックデータとメソッドは他のユーザーから呼び出すことができます。モジュール。

•各モジュールは別個の js ファイルで定義する必要があります。つまり、1 つのモジュールが 1 つのモジュールに対応します。

モジュールの定義と作成

モジュール定義関数define

SeaJS の定義関数を使用してモジュールを定義します。定義では 3 つのパラメータを受け取ることができます:

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
  //code of function…
}

定義で受け取れるパラメータはモジュールID、依存モジュール配列、ファクトリ関数です。

•パラメータが 1 つしかない場合は、それを Factory に割り当てます

•パラメータが 2 つある場合、2 番目のパラメータは Factory に割り当てられ、最初のパラメータは配列の場合は deps に割り当てられ、それ以外の場合は id
に割り当てられます。

•パラメータが 3 つの場合は、個別に値を割り当てます

ただし、SeaJS 公式 Web サイトの例を含め、define が使用されるほぼすべての場所では、次のコードのようなファクトリ関数のみが渡されます。

define(function(require,exports,module){
  //code of the module
})

個人的にはSeaJS公式サンプルの規格に従い、パラメータdefineでモジュールを定義することを推奨します。では、ids と deps はどうなるでしょうか?

id はモジュールの識別文字列です。define にパラメータが 1 つしかない場合、デフォルトで id にはこの js ファイルの絶対パスが割り当てられます。定義を使用して example.com の a.js ファイルにモジュールを定義する場合、このモジュールの ID には値 http://example.com/a.js が割り当てられることをお勧めします。特別な必要がない場合は渡さないでください。通常、deps を渡す必要はありません。使用する必要があるモジュールは、require でロードできます。

ファクトリー機能ファクトリー分析

ファクトリー関数はモジュールの本体であり焦点です。その 3 つのパラメータは次のとおりです:

•require: 依存モジュールを記録するために使用されるモジュール読み込み関数
•エクスポート: インターフェイスポイント、インターフェイスポイント上で定義されたデータ、またはメソッドが外部呼び出しに公開されます
•モジュール: モジュールのメタデータ

これら 3 つのパラメータは、必要に応じて表示および指定できます。

モジュールは、次のようにモジュールのメタ情報を格納するオブジェクトです:
•module.id: モジュールID
•module.dependency: このモジュールが依存するすべてのモジュールの ID のリストを格納する配列。
•module.exports:exports
と同じオブジェクトを指します。

モジュールを作成する 3 つのモード

1 つ目はエクスポートベースのモードです:

define(function(require,exports,module){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1; //私有数据
  var fun1=function(){//私有方法
    return a.run(data1);
  }
  exports.data2=2; //公有数据
  exports.fun2=function(){
    return 'hello';
  }
})

上記は比較的「本格的な」モジュール定義モードです。パブリックデータとメソッドをエクスポートに添付することに加えて、オブジェクト表現モジュールを直接返すこともできます。たとえば、次のコードには上記のコードと同じ機能があります。

define(function(require){
  var a=require('a');
  var b=require('b'); //引入模块
  var data1=1;
  var fun1=function(){
    return a.run(data1);
  }
  return{
    data2:2,
    fun2:function(){
      return 'hello';
    }
  }
})

モジュール定義に他のコードがなく、オブジェクトのみを返す場合は、次のように簡略化することもできます:

define({
  data2:2,
    fun2:function(){
      return 'hello';
    }
  })

3 番目の記述方法は、純粋な JSON データを定義するモジュールに非常に適しています。

さまざまなアプリケーションシナリオに応じて、SeaJS はモジュールをロードするための 3 つの API、つまり seajs.use、require、require.async を提供します。

seajs.use

seajs.use は主にエントリーモジュールをロードするために使用されます。エントリモジュールはC言語のmain関数に相当し、モジュール依存関係ツリー全体のルートでもあります。 seajs.use

の使用法は次のとおりです:

//第一模式
seajs.use('./a');
//回调模式
seajs.use('./a',function(a){
  a.run();
})
//多模块模式
seajs.use(['./a','./b'],function(a,b){
  a.run();
  b.run();
})

マルチモジュールの使い方は KISSY のモジュールロード方法と似ています。これが 1 人で書かれたのも不思議ではありません。

通常、seajs.use はページ上のエントリモジュールをロードするためにのみ使用されます。SeaJS はエントリモジュールに沿ってすべての依存モジュールを解析してロードします。エントリモジュールが 1 つしかない場合は、seajs を導入するスクリプトタグに「data-main」属性を追加することで、seajs.use を省略することもできます。たとえば、次のように記述します。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>TinyApp</title>
</head>
<body>
  <p class="content"></p>
  <script src="./sea.js" data-main="./init"></script>
</body>
</html> 
require

require は、seajs のメインモジュールロードメソッドです。モジュール内で他のモジュールが必要な場合、通常、require を使用してロードします。

上文说过seajs会在html页面打开时通过静态分析一次性记载所有需要的js文件，如果想要某个js文件在用时才加载，可以使用require.async。

这样只有在用到这个模块时，对应的js文件才会被下载，也就实现了JavaScript代码的按需加载。

SeaJS的全局配置

seajs提供了一个seaj.configd的方法可以设置全局配置，接收一个表示全局配置的配置对象，具体方法如下：

seajs.config({
base:'path',
alias:{
  'app':'path/app/'
},
charset:'utf-8',
timeout:20000,
debug:false
})

其中，

•base表示基址路径
•alias可以对较长的常用路径设置缩写
•charset表示下载js时script标签的charset属性。
•timeout表示下载文件的最大时长，以毫秒为单位。

Seajs如何与现有的JS库配合使用

要将现有的JS库与seajs一起使用，只需根据seajs的模块定义规则对现有库进行一个封装。例如，下面是对jQuery的封装方法：

define(function(){
  /*
  此处为jquery源码
  */
  })

一个完整的例子：

上文说了那么多，知识点比较分散，所以最后我打算用一个完整的SeaJS例子把这些知识点串起来，方便朋友们归纳回顾。这个例子包含如下文件：
•index.html 主页面

•sea.js
•jquery.js
•init.js init模块，入口模块，依赖data、jquery、style三个模块，又主页面载入
•data.js data模块，纯json数据模块
•style.css css样式表

html：
<!DOCTYPE HTML>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="content">
  <p class="author"></p>
  <p class="blog"><a href="#">Blog</a></p>
</div>
<script src="sea.js"></script>
<script>
    seajs.use('init');
</script>
</body>
</html> 
javascript:
//init.js
define(function(require, exports, module) {
  var $ = require('./jquery');
  var data = require('./data');
  var css = require('./style.css');
  $('.author').html(data.author);
  $('.blog').attr('href', data.blog);
});
//data.js
define({
  author: 'ZhangYang',
  blog: 'http://blog.codinglabs.org'
}); 
css:
.author{color:red;font-size:10pt;}
.blog{font-size:10pt;}

请注意：

1.请讲jquery.js源码文件包含在seajs模块加载代码中；

2.在Sea.js

使用方法

•可以在sea.js标签后引入这个插件使用
•也可以将插件代码混入sea.js当中
•和seajs-style的区别 •seajs-css是使 Sea.js 能够加载一个css文件，和link标签一样
•seajs-style是指提供一个seajs.importStyle方法用于加载一段 css 字符串

以上内容是小编给大家分享的JavaScript模块化开发之SeaJS，希望对大家学习javascript模块化开发有所帮助，谢谢大家一直以来对脚本之家网站的支持。！

声明

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

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。