Underscore.jsを使ったミニプログラム開発を詳しく解説

Underscore.js は関数型プログラミング用の実用的な関数のセットを提供する JavaScript ツール ライブラリであることは誰もが知っていますが、JavaScript の組み込みオブジェクトは拡張されていません。この記事では、WeChat アプレットでサードパーティ ライブラリ Underscore.js を使用する方法を説明します。必要に応じて参照してください。

はじめに

Underscore.js は非常に無駄のないライブラリで、圧縮後のサイズはわずか 4KB です。 Underscore は、map、filter、invoke などの一般的に使用される関数を含む 100 以上の関数を提供します。もちろん、より専門的な補助関数 (関数バインディング、JavaScript テンプレート関数、高速インデックスの作成、強力な型等価性テストなど) も含まれます。標準ライブラリの欠点を補い、JavaScript プログラミングを大幅に容易にします。

WeChat アプレットは、require('underscore.js') を使用して直接呼び出すことはできません。

WeChat アプレットのモジュール化メカニズム

WeChat アプレット実行環境は CommoJS モジュール化をサポートし、module.exports を通じてオブジェクトを公開し、require を通じてオブジェクトを取得します。

WeChat アプレット クイック スタート 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

原因分析

アンダースコア CommonJs モジュール エクスポート コードは次のとおりです。

輸出, モジュールはエクスポートする前に定義する必要があります。テストを通じて、WeChat アプレット実行環境のエクスポートとモジュールが定義されていません

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))
 })
 })
 }
})

解決策

アンダースコアコードを変更し、元のモジュールエクスポートステートメントをコメント
し、

強制エクスポート

// Export the Underscore object for **Node.js**, with
// backwards-compatibility for the old `require()` API. If we're in
// the browser, add `_` as a global object.
if (typeof exports !== 'undefined') {
 if (typeof module !== 'undefined' && module.exports) {
 exports = module.exports = _;
 }
 exports._ = _;
} else {
 root._ = _;
}

//index.js

//获取应用实例
var app = getApp();

Page({ 

 onLoad: function () {
 console.log('onLoad');
 var that = this;

 console.log('typeof exports: ' + typeof exports); 
 console.log('typeof module: ' + typeof exports); 

 var MyClass = function() {

 }

 module.exports = MyClass;

 console.log('typeof module.exports: ' + typeof module.exports); 
 }
})

を使用してくださいUnderscore.jsの使い方module.exports = _

 /*
 // Export the Underscore object for **Node.js**, with
 // backwards-compatibility for the old `require()` API. If we're in
 // the browser, add `_` as a global object.
 if (typeof exports !== 'undefined') {
 if (typeof module !== 'undefined' && module.exports) {
 exports = module.exports = _;
 }
 exports._ = _;
 } else {
 root._ = _;
 }
 */

 module.exports = _;

概要

上記は、サードパーティライブラリUnderscore.jsを使用したWeChatアプレットの全内容であり、皆様の勉強や仕事に役立てば幸いです。ご不明な点がございましたら、メッセージを残してご連絡ください。 【関連する推奨事項】

1.

WeChat開発でグローバルJSを呼び出すにはどうすればよいですか?

2.WeChat開発のためのJS動的変更スタイル

3.WeChat開発のための他のjsファイルを参照する詳細な例

4.WeChat開発のライフサイクル関数のサンプルチュートリアル

以上がUnderscore.jsを使ったミニプログラム開発を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。