위 챗 애플 릿 개발 실전-Underscore.js 사용

Underscore.js 는 자 바스 크 립 트 도구 라 이브 러 리 로 함수 식 프로 그래 밍 의 실 용적 인 기능 을 제공 하지만 자 바스 크 립 트 내장 대상 을 확장 하지 않 았 습 니 다.Underscore 는 100 여 개의 함 수 를 제공 합 니 다.주로 사용 하 는 맵,filter,invoke-물론 더 많은 전문 적 인 보조 함수 가 있 습 니 다.예 를 들 어 함수 바 인 딩,JavaScript 템 플 릿 기능,빠 른 색인 생 성,강 한 유형 등 테스트 등 이 있 습 니 다.위 챗 애플 릿 은 require(underscore.js)를 직접 사용 하여 호출 할 수 없습니다.
위 챗 애플 릿 모듈 화 메커니즘
위 챗 애플 릿 실행 환경 은 CommoJS 모듈 화 를 지원 하 며,module.exports 를 통 해 대상 을 노출 시 키 고,require 를 통 해 대상 을 가 져 옵 니 다.
위 챗 애플 릿 빠 른 시작 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))
      })
    })
  }
})

원인 분석
Underscore CommonJs 모듈 내 보 내기 코드 는 다음 과 같 습 니 다.

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

exports,module 는 모두 정의 가 있어 야 내 보 낼 수 있 습 니 다.테스트 를 통 해 위 챗 애플 릿 실행 환경 exports,module 은 정의 되 지 않 았 습 니 다.

//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 코드 를 수정 하고 기 존 모듈 내 보 내기 문 구 를 설명 하 며 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 = _;

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

Underscore.js 사용 하기

//index.js

var _ = require( '../../libs/underscore/underscore.modified.js' );

//      
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( '
' )
        })
    }
})

기타
전체 코드https://github.com/guyoung/Gy...