Detailed steps for using a third-party library Underscore. js in WeChat applets

The procedure of using a third-party library Underscore. js is detailed.

Preface

Underscore. js is a very lean library, which is only 4 kb after compression. Underscore provides more than 100 functions, including common map, filter, and invoke functions. Of course, there are more professional auxiliary functions, such: function binding, JavaScript template function, quick index creation, strong-type equality testing, and so on. It makes up for the shortcomings of the standard library and greatly facilitates JavaScript programming.

The applet cannot directly use require ('underscore. js') for calling.

Mini-program modularization Mechanism

The mini-program environment supports CommoJS modularization, exposes objects through module. exports, and obtains objects through require.

Applet Quick Start 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. 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)) }) }) }})

Cause Analysis

The export code of the Underscore CommonJs module is as follows:

// 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._ = _;}

Both exports and module must be defined before export. Through the test, the program running environment exports and module are not defined.

// Index. js // obtain the application instance 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 );}})

Solution

Modify the Underscore code, comment out the Export Statement of the original module, and usemodule.exports = _ Force Export

 /* // 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 = _;

 /* // AMD registration happens at the end for compatibility with AMD loaders // that may not enforce next-turn semantics on modules. Even though general // practice for AMD registration is to be anonymous, underscore registers // as a named module because, like jQuery, it is a base library that is // popular enough to be bundled in a third party lib, but not be part of // an AMD load request. Those cases could generate an error when an // anonymous define() is called outside of a loader request. if (typeof define === 'function' && define.amd) { define('underscore', [], function() { return _; }); } */

Use Underscore. js

// Index. jsvar _ = require ('.. /.. /libs/underscore. modified. js '); // obtain the application instance var app = getApp (); Page ({onLoad: function () {// console. log ('onload'); var that = this; var lines = []; lines. push ("_. map ([1, 2, 3], function (num) {return num * 3;}); "); lines. push (_. map ([1, 2, 3], function (num) {return num * 3;}); lines. push ("var sum = _. reduce ([1, 2, 3], function (memo, num) {return memo + num ;}, 0); "); lines. push (_. reduce ([1, 2, 3], function (memo, num) {return memo + num;}, 0); lines. push ("var even = _. find ([1, 2, 3, 4, 5, 6], function (num) {return num % 2 = 0 ;}); "); lines. push (_. find ([1, 2, 3, 4, 5, 6], function (num) {return num % 2 = 0 ;})); lines. push ("_. sortBy ([1, 2, 3, 4, 5, 6], function (num) {return Math. sin (num) ;}); "); lines. push (_. sortBy ([1, 2, 3, 4, 5, 6], function (num) {return Math. sin (num) ;})); lines. push ("_. indexOf ([1, 2, 3], 2); "); lines. push (_. indexOf ([1, 2, 3], 2); this. setData ({text: lines. join ('\ n ')})}})

Summary

The above is all about the use of the third-party library Underscore. js by the applet. I hope to help you learn and work. If you have any questions, you can leave a message.