WeChat開発におけるモジュール化の詳細な例-WeChatの開発-php.cn

JavaScriptモジュール仕様

モジュール化は、いくつかの従来のプログラミング言語とは異なり、ネイティブのモジュール化をまだサポートしていません。

JavaScript コミュニティは、既存のオペレーティング環境で「モジュール」効果を実現するために多大な努力を払ってきました。一般的な JavaScript モジュール仕様には、CommonJS、AMD、UMD、CMD などの主に 2 つのタイプがあります。

CommonJS

CommonJS 仕様は、サーバー側の Javascript モジュール仕様です。

Node.jsのモジュールシステムはCommonJS仕様を参照して実装されています。 NPM は、commonJS によって定義されたパッケージ仕様にも準拠しており、完全なエコシステムを形成しています。 CommonJS で定義されたモジュールは、{モジュール参照 (

require

)} {モジュール定義 (エクスポート)} {モジュール識別 (モジュール)} に分かれています。 require() は外部モジュールを導入するために使用され、exports オブジェクトは現在のモジュールのメソッドまたは変数をエクスポートするために使用され、モジュールオブジェクトはモジュール自体を表します。 CommonJS仕様 wiki.commonjs.org/wiki...

function MathClass() {
}
MathClass.PI = 3.14;
MathClass.E = 2.72;
MathClass.prototype.add = function(a, b) { return a+b;
}; module.exports = MathClass;

ログイン後にコピー

var MathClass = require(&#39;./mathCommonJS.js&#39;);
Page( {
    onLoad: function() { console.log( "PI: " +MathClass.PI ); var mathClass = new MathClass(); console.log( "3 + 4: " +mathClass.add(3, 4) );
    }
});

ログイン後にコピー

AMD

AMDとは「Asynchronous Module Definition」の略称で「非同期モジュール定義」を意味し、フロントエンドモジュールの仕様です。

RequireJS は AMD 仕様を実装します。

AMD 仕様では、フリー変数またはグローバル変数定義関数が定義されています。

define( id?, dependencies?, factory );

ログイン後にコピー

define(&#39;mathAMD&#39;, [], function( i ) { function MathClass() {
    }
    MathClass.PI = 3.14;
    MathClass.E = 2.72;
    MathClass.prototype.add = function( a, b ) { return a + b;
    }; return MathClass;
});

ログイン後にコピー

define( [ "mathAMD" ], function( require, exports, MathClass ) {
    Page( {
        onLoad: function() { console.log( "PI: " + MathClass.PI ); var mathClass = new MathClass(); console.log( "3 + 4: " + mathClass.add( 3, 4 ) );
        }
    });

});

ログイン後にコピー

UMD

CommonJSモジュールは、サーバーサイドファーストの原則に基づいて開発されており、モジュールを同期的にロードすることを選択します。そのモジュールはパッケージ化を必要としませんが、オブジェクトタイプ (

object

s) モジュールのみをサポートします。 AMD はブラウザファーストの原則に基づいて開発を行っており、モジュールを非同期でロードすることを選択しています。そのモジュールは、オブジェクト、関数、コンストラクター、文字列、JSONなどのさまざまなタイプのモジュールをサポートしているため、ブラウザーでは非常に柔軟です。このため人々は、フロントエンドおよびクロスプラットフォームのソリューションを提供することを期待して、別のより一般的なフォーマットである UMD (Universal Module Definition) を考え出すことを余儀なくされています。

(function (root, factory) { if (typeof define === &#39;function&#39; && define.amd) {       
        define([&#39;jquery&#39;], factory);
    } else if (typeof exports === &#39;object&#39;) { module.exports = factory(require(&#39;jquery&#39;));
    } else {       
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) { function myFunc(){}; return myFunc;
}));

ログイン後にコピー

UMD の実装は非常に簡単です。まず AMD がサポートされているかどうか (define が存在するかどうか) を判断し、存在する場合は AMD メソッドを使用してモジュールをロードします。次に、Node.js モジュール形式がサポートされているかどうか (エクスポートが存在するかどうか) を確認します。存在する場合は、Node.js モジュール形式を使用します。最初の 2 つが存在しない場合、モジュールは世界 (ウィンドウまたはグローバル) に公開されます。

( function( global, factory ) { if( typeof define === &#39;function&#39; && define.amd ) {
        define( factory );
    } else if( typeof exports === &#39;object&#39; ) { module.exports = factory();
    } else {
        root.returnExports = factory();
    }
    
} ( this, function() { function MathClass() {
    }
    MathClass.PI = 3.14;
    MathClass.E = 2.72;
    MathClass.prototype.add = function( a, b ) { return a + b;
    }; return MathClass;
}) );

ログイン後にコピー

var MathClass = require( &#39;./mathUMD.js&#39; );
Page( {
    onLoad: function() { console.log( "PI: " + MathClass.PI ); var mathClass = new MathClass(); console.log( "3 + 4: " + mathClass.add( 3, 4 ) );
    }
});

ログイン後にコピー

CMD

CMD 即Common Module Definition通用模块定义，CMD规范是国内发展出来的，就像AMD有个requireJS，CMD有个浏览器的实现SeaJS，SeaJS要解决的问题和requireJS一样，只不过在模块定义方式和模块加载（可以说运行、解析）时机上有所不同。

Sea.js 推崇一个模块一个文件，遵循统一的写法

define(id?, deps?, factory)

ログイン後にコピー

因为CMD推崇一个文件一个模块，所以经常就用文件名作为模块id,CMD推崇依赖就近，所以一般不在define的参数中写依赖，在factory中写。

factory是一个函数，有三个参数，function(require, exports, module)

require 是一个方法，接受模块标识作为唯一参数，用来获取其他模块提供的接口
exports 是一个对象，用来向外提供模块接口
module 是一个对象，上面存储了与当前模块相关联的一些属性和方法

CMD模块规范 https://github.com/cmdjs/spec...

define( "pages/module/mathCMD.js", function( require, exports, module ) { function MathClass() {
    }
    MathClass.PI = 3.14;
    MathClass.E = 2.72;
    MathClass.prototype.add = function( a, b ) { return a + b;
    }; module.exports = MathClass;
})

ログイン後にコピー

define( "pages/module/mathCMD.js", function( require, exports, module ) { function MathClass() {
    }
    MathClass.PI = 3.14;
    MathClass.E = 2.72;
    MathClass.prototype.add = function( a, b ) { return a + b;
    }; module.exports = MathClass;
})

ログイン後にコピー

微信小程序模块化机制

微信小程序秉承了JavaScript模块化的机制，通过module.exports暴露对象，通过require来获取对象。

模块开发

以微信小程序QuickStart为例，微信小程序模块采用CommonJS规范

utils/util.js

function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds(); return [year, month, day].map(formatNumber).join(&#39;/&#39;) + &#39; &#39; + [hour, minute, second].map(formatNumber).join(&#39;:&#39;)
} function formatNumber(n) {
  n = n.toString() return n[1] ? n : &#39;0&#39; + n
} module.exports = {
  formatTime: formatTime
}

ログイン後にコピー

pages/log/log.js

var util = require(&#39;../../utils/util.js&#39;)
Page({
  data: {
    logs: []
  },
  onLoad: function () { this.setData({
      logs: (wx.getStorageSync(&#39;logs&#39;) || []).map(function (log) { return util.formatTime(new Date(log))
      })
    })
  }
})

ログイン後にコピー

模块运行

微信小程序还是要以前端程序方式在微信浏览器中运行，由于CommonJS规范是服务器端模块规范，微信小程序运行时会自动转换为前端模块规范。

以微信小程序QuickStart调试时代码为例

utils/util.js

define("utils/util.js", function(require, module) { var window = { Math: Math }/*兼容babel*/ , location, document, navigator, self, localStorage, history, Caches; function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds(); return [year, month, day].map(formatNumber).join(&#39;/&#39;) + &#39; &#39; + [hour, minute, second].map(formatNumber).join(&#39;:&#39;)
    } function formatNumber(n) {
        n = n.toString() return n[1] ? n : &#39;0&#39; + n
    } module.exports = {
        formatTime: formatTime
    }
})

ログイン後にコピー

pages/log/log.js

define("pages/logs/logs.js", function(require, module) { var window = { Math: Math }/*兼容babel*/ , location, document, navigator, self, localStorage, history, Caches; var util = require(&#39;../../utils/util.js&#39;)
    Page({
        data: {
            logs: []
        },
        onLoad: function() { this.setData({
                logs: (wx.getStorageSync(&#39;logs&#39;) || []).map(function(log) { return util.formatTime(new Date(log))
                })
            })
        }
    })
}); require("pages/logs/logs.js")

ログイン後にコピー

微信小程序运行的代码与CMD模块规范基本符合。

使用第三方模块

微信小程序运行环境exports、module没有定义，无法通过require导入模块，需要对第三方模块强制导出后才能正常导入。

微信小程序使用Immutable.js segmentfault.com/a/11...

微信小程序使用Underscore.js segmentfault.com/a/11...

ECMAScript 6模块系统

ECMAScript 6，模块被作为重要组成部分加入其中。

ES6的模块提供了2个新的语法，分别是export和import。

export 模块导出

export let a = 1; export class A {}; export let b = () => {};

ログイン後にコピー

import 模块导入

import {a} from &#39;./a&#39;; console.log(a); import * as obj from &#39;./a&#39;; console.log(obj.a);

ログイン後にコピー

微信小程序还没实现ECMAScript 6。

【相关推荐】

1. 微信公众号平台源码下载

2. 分享微信公众号开发刷卡支付的实例教程

3. 微信开发之微信支付

4. 详解微信小程序支付功能开发错误总结

以上がWeChat開発におけるモジュール化の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。