我想把bar.js文件改成react项目中import形式，怎么能实现？extend和_init前面 _ 怎么理解？

Question

bar.js

define(['require', '../dataComponent', '../../util/helper', 'echarts'], function (require, DataComponent, _, ECharts) {
    // 配置
    var CONFIG = {
        width: 900,
        height: 700,
        color: ['#106fe1']
    };

    // ECharts 配置
    var defaultOptions = {
        // 标题
        title: {
            text: '我的123'
        },
        tooltip: {},
        legend: { // 图例
            data:['销量']
        },
        xAxis: { // 直角坐标系 grid 中的 x 轴
            data: ["衬衫12","羊毛衫35","雪纺衫67","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量123',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    /**
     * 加载数据
     * @param type
     * @param callback
     */
    return DataComponent.extend({

        /**
         * 默认容器的长与宽
         * @returns {*|{}}
         * @private
         */
        _getDefaultOptions: function () {
            return _.extend(true, this._super(), {
                width: 500,
                height: 500
            });
        },

        /**
         * 初始化 ECharts 的组件
         */
        initEChart: function () {
            this.echart = ECharts.init(this.container); // 容器大小
            this.echart.setOption(this.defaultOptions);
        },

        /**
         * 初始化
         * @private
         */
        _init: function () {
            this._super.apply(this, arguments);

            // 克隆默认 ECharts 配置
            this.defaultOptions = _.clone(defaultOptions);
            // 初始化容器长与宽
            // _.css(this.container, 'width', CONFIG.width+'px');
            // _.css(this.container, 'height', CONFIG.height+'px');
            _.css(this.container, 'width', '900px');
            _.css(this.container, 'height', '900px');
            // 初始化 ECharts 的组件
            this.initEChart();

        },

    })
});

dataComponent.js

define([
    '../util/helper',

], function (_) {

    return Optionable.extend({
        getSupportEvents: function () {
            return ['render', 'click', 'mouseup', 'mousedown', 'mousemove', 'mouseover', 'mouseout', 'optionChange'].concat(this._getSupportEvents());
        },
        _getSupportEvents: function () {
            return [];
        },
        /**
         * 最小高度
         * @type {number}
         */
        minHeight: 10,
        /**
         * 最小宽度
         * @type {number}
         */
        minWidth: 10,
        /**
         * 初始化
         * @param {string=} id
         * @param {Object} serialize
         * @returns {exports}
         * @private
         */
        _init: function (id, serialize) {

            var self = this;

            if (arguments.length < 2) {
                serialize = id || {};
                id = _.getUUID();
            }

            serialize = self.originSerialize = serialize || {};

            self.origin = serialize.options || {};

            /**
             * 组件ID
             * @type {string}
             */
            self.id = id;

            /**
             * container class
             * @type {string}
             */
            self.domClass = 'component component-' + self.type;

            /**
             * container uuid
             * @type {string}
             */
            self.domId = 'component-' + self.id;

            /**
             * @type {HTMLElement} 组件容器
             */
            self.container = _.DOM.div({class: self.domClass, id: self.domId, 'data-component': self.id});

            // 绑定组件实例到容器上
            self.getContainer().__component__ = self;

            self._super();

            self.EVENTS = self.getSupportEvents();

            // 绑定DOM元素事件
            _.each(['click', 'dblclick', 'mouseover', 'mousemove', 'mouseout', 'mousedown', 'mouseup'], function (event) {
                _.addEvent(self.getContainer(), event, function (e) {
                    self.dispatch(event, e);
                });
            });

            /**
             * 自定义事件
             * @type {Array}
             */
            self.events = [];

            _.each(serialize.events, function (event) {
                self.addEvent(event.event, event.action, event.option);
            });

            /**
             * 是否已经渲染
             * @type {boolean}
             */
            self.rendered = false;

            return self;
        }
    })
});

Answer 1

.extend 前面的 代表require进来的../util/helper, _init前面的_代表这是一个私有的方法，这是一种自定义的编程规范。