Detailed explanation of mini program development using Underscore.js-Mini Program Development-php.cn

Detailed explanation of mini program development using Underscore.js

零下一度

Release： 2017-05-26 10:32:22

Original

3029 people have browsed it

Everyone knows that Underscore.js is a JavaScript tool library that provides a set of practical functions for functional programming, but does not extend any JavaScript built-in objects. So in this article, we will learn how to use the third-party library Underscore.js in the WeChat applet. You can refer to it if necessary.

Preface

Underscore.js is a very lean library, only 4KB after compression. Underscore provides more than 100 functions, including commonly used ones: map, filter, invoke — and of course more professional auxiliary functions, such as: function binding, JavaScript template function, creating fast index, strong type Equality testing and more. It makes up for the shortcomings of the standard library and greatly facilitates JavaScript programming.

WeChat applet cannot be called directly using require( 'underscore.js' ).

WeChat Mini Program Modularization Mechanism

The WeChat Mini Program running environment supports CommoJS modularization and exposes objects through module.exports. Obtain objects through require.

WeChat Mini Program 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(&#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
}

Copy after login

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

Copy after login

Reason Analysis

Underscore CommonJs module export code is as follows:

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

Copy after login

exports and module must both be defined before they can be exported. Through testing, the WeChat applet running environment exports and modules are not defined

//index.js

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

Page({ 

 onLoad: function () {
 console.log(&#39;onLoad&#39;);
 var that = this;

 console.log(&#39;typeof exports: &#39; + typeof exports); 
 console.log(&#39;typeof module: &#39; + typeof exports); 

 var MyClass = function() {

 }

 module.exports = MyClass;

 console.log(&#39;typeof module.exports: &#39; + typeof module.exports); 
 }
})

Copy after login

##Solution

Modify the Underscore code,

CommentsFor the original module export statement, use module.exports = _ Forced export

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

 module.exports = _;

Copy after login

 /*
 // 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 === &#39;function&#39; && define.amd) {
 define(&#39;underscore&#39;, [], function() {
 return _;
 });
 }
 */

Copy after login

Use Underscore.js

//index.js

var _ = require( &#39;../../libs/underscore/underscore.modified.js&#39; );

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


Page( {

 onLoad: function() {
 //console.log(&#39;onLoad&#39;);
 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( &#39;\n&#39; )
 })
 }
})

Copy after login

Summary

The above is all about WeChat applet using the third-party library Underscore.js The content, I hope it will be helpful to everyone’s study or work. If you have any questions, you can leave a message to communicate.

[Related recommendations]

How to call global JS in WeChat development?

JS dynamic modification style for WeChat development

Detailed explanation of examples of referencing other js files for WeChat development

Example tutorial on life cycle functions of WeChat development

The above is the detailed content of Detailed explanation of mini program development using Underscore.js. For more information, please follow other related articles on the PHP Chinese website!