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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.