Exemples détaillés de modularisation dans le développement de WeChat

JavaScriptSpécification du module

La modularisation est courante dans toute grande application, contrairement à certains langages de programmation plus traditionnels, JavaScript (version ECMA-262). ne prend pas encore en charge la modularisation native.

La communauté Javascript a fait beaucoup d'efforts pour obtenir l'effet de « module » dans l'environnement d'exploitation existant. Il existe deux principales spécifications de module JavaScript populaires : CommonJS, AMD, UMD, CMD, etc.

CommonJS

La spécification CommonJS est une spécification de module Javascript côté serveur.

Le système de modules de Node.js est implémenté en référence à la spécification CommonJS. NPM suit également les spécifications de package définies par commonJS, formant ainsi un écosystème complet.

Les modules définis par CommonJS sont divisés en : {référence du module (require)} {définition du module (exports)} {identification du module (module)}. require() est utilisé pour introduire des modules externes ; l'objet exports est utilisé pour exporter des méthodes ou des variables du module actuel, le seul port d'export représente le module lui-même ;

Spécification 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('./mathCommonJS.js');
Page( {
    onLoad: function() { console.log( "PI: " +MathClass.PI ); var mathClass = new MathClass(); console.log( "3 + 4: " +mathClass.add(3, 4) );
    }
});

AMD

AMD est "Définition de module asynchrone" L'abréviation de « définition de module asynchrone » signifie « définition de module asynchrone » et est une spécification de module frontal.

RequireJS implémente la spécification AMD.

La spécification AMD définit une fonction de définition de variable libre ou de variable globale.

define( id?, dependencies?, factory );

• id est un type de chaîne, qui représente l'identification du module et est un paramètre facultatif. S'il n'est pas présent, l'ID du module doit être par défaut l'ID du script demandé dans le chargeur. S’il est présent, l’identifiant du module doit être de niveau supérieur ou un identifiant absolu.

• dependencies est un littéral de tableau dont dépend le module actuel et est identifié par le module défini par le module.

• factory est une fonction ou un objet qui doit être instancié.

Spécification AMD github.com/amdjs/amdj...

define('mathAMD', [], 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 Le module est développé selon le principe côté serveur et choisit de charger les modules de manière synchrone. Ses modules ne nécessitent pas de packaging, mais il ne prend en charge que les modules de type objet (objets). AMD développe sur la base du principe du navigateur d'abord et choisit de charger les modules de manière asynchrone. Son module prend en charge différents types de modules tels que des objets, des fonctions, des constructeurs, des chaînes, JSON, etc., il est donc très flexible dans le navigateur. Cela oblige les gens à proposer un autre format plus général, UMD (Universal Module Definition), dans l’espoir de fournir une solution frontale et multiplateforme.

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

L'implémentation d'UMD est très simple. Déterminez d'abord si AMD est pris en charge (si la définition existe), et si elle existe, utilisez la méthode AMD pour charger le module. Déterminez ensuite si le format du module Node.js est pris en charge (si les exportations existent). S'il existe, utilisez le format du module Node.js. Si les deux premiers n'existent pas, le module sera exposé au monde (fenêtre ou global).

( function( global, factory ) { if( typeof define === 'function' && define.amd ) {
        define( factory );
    } else if( typeof exports === 'object' ) { 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( './mathUMD.js' );
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('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
} function formatNumber(n) {
  n = n.toString() return n[1] ? n : '0' + n
} module.exports = {
  formatTime: formatTime
}

pages/log/log.js

var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () { this.setData({
      logs: (wx.getStorageSync('logs') || []).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('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    } function formatNumber(n) {
        n = n.toString() return n[1] ? n : '0' + 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('../../utils/util.js')
    Page({
        data: {
            logs: []
        },
        onLoad: function() { this.setData({
                logs: (wx.getStorageSync('logs') || []).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 './a'; console.log(a); import * as obj from './a'; console.log(obj.a);

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

【相关推荐】

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

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

3. 微信开发之微信支付

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!