[DikeJS]RequireJS引入文本（六）

在我们了解了如何通过RequireJS加载css样式之后，我们再来了解一下如何加载text文本内容文件，同样的RequireJS周边给我提供了丰富的插件，可以非常方便的调用文本文件，下载文件 text.js, 使用内容如下：

（接招儿，看代码：）

(function () {
    requirejs.config({
        paths: {
            jquery   : 'lib/jquery-1.11.1.min',
            Template : 'Component/util/Template',
            Button   : 'Component/view/button/Button',
            Canvas   : 'Component/view/canvas/Canvas',
            Container: 'Component/view/container/Container'
        },
        /**
         * 设置css.js文件路径
         * 设置text.js文件路径
         */
        map  : {
            '*': {
                'css' : 'lib/css',
                'text': 'lib/text'
            }
        },
        /**
         * 样式按照需要加载加载 键值名和加载模块的名称一致，目的是加载模块时加载对应的css样式
         */
        shim : {
            'Canvas1': ['css!./Component/view/canvas/css/login.css'],
            'Button' : ['css!./Component/view/button/css/ty-main.css']
        }
    });

    define(function (require) {
        var $ = require('jquery');
        $(document).ready(function () {
            var container = new (require('Container'))({
                id    : 'container',
                name  : 'container',
                width : '300px',
                height: '500px',
                render: $('body')
            });

            var canvas = new (require('Canvas'))({
                id       : 'Canvas',
                name     : 'Canvas',
                //render   : $('body'),
                listeners: {
                    onReady: function (_this) {
                        var ctx = _this.getContext2D();
                        ctx.fillStyle = '#FF0000';
                        ctx.fillRect(0, 0, 80, 100);
                    },
                    click  : function () {
                        alert(1);
                    }
                }
            });

            container.add(canvas);

        });
    });
})();

在组件中的使用：

Container.js

define(function (require) {
    var $ = require('jquery');
    var container = (function (option) {
        var me = this;
        //引入htm的模板文件,返回的结果便是模板中的内容的一个字符串文本
        var temp = require('text!./Component/view/container/Container.htm!strip');
        var template = require('Template');
        temp = template.getTemp(temp, option);

        if (typeof(option.render) !== 'undefined') {
            option.render.append(temp);
        }

        me.getID = (function () {
            return option.id;
        });

        me.getType = (function () {
            return 'container';
        });

        me.add = (function (obj) {
            $('#' + option.id).append(obj.getEl());
            obj.handle();
        });
    });
    return container;
});

Container.htm

<div id="{id}" name="{name}" class="{class}" style="{style}"></div>