[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>
时间: 2024-10-25 03:28:58

[DikeJS]RequireJS引入文本(六)的相关文章

通过gulp为requireJs引入的模块添加版本号

由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号. 1.分别安装gulp-rev.gulp-rev-collerctor npm install --save-dev gulp-rev npm install --save-dev gulp-rev-collector 打包后的效果 "/css/style.css" => "/dist/css/style-1d87bebe.cs

浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首

浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

kindEditor富文本编辑器

用法参考:http://kindeditor.net/docs/usage.html  一.使用 . 修改HTML页面 在需要显示编辑器的位置添加textarea输入框. <textarea id="editor_id" name="content" style="width:700px;height:300px;"> <strong>HTML内容</strong> </textarea> 在该HT

AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无

H5单页面架构:requirejs + angular + angular-route

说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的模块化,模块间低耦合高内聚,目的就为了团队合作效率: 可扩展性.这个不用说了. 学习成本.一个框架再好,团队新成员难以掌握,学习难度大,结果很容易造成代码混乱. 而根据实际经验来看,方便是必然首要地位,除此之外,应该是代码管理了.团队合作过程中,各种协作,代码冲突等等,都会给一个优秀框架带来各种奇怪

kindeditor配合requirejs使用时,ready失效

KindEditor官方的文档在使用KindEditor时是这样的: KindEditor.ready(function(K)) { K.create('#editor_id'); } 使用了自己提供给的ready,想要在dom加载完成后创建富文本框.一般情况下都不会有问题,我在dome中也是可用的.今天正式把代码一直到项目中,幺蛾子出现啦,富文本框怎么都不出现.花了一个来小时问题定位到ready.问题的原因是,我调用KindEditor的代码是使用requirejs引入的,在执行KindEdi

backbone + requirejs + zepto + underscore

转自:  http://www.cnblogs.com/kenkofox/p/4648472.html 这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首先,来看看整个项目结构. 跟上一篇angular类似,libs里多了underscore和zepto.三个根目录文件: index.html:唯一的html main.js:

以不同的观点进行测试设计——六顶思考帽

Patrick Prill有十多年的软件测试经验.干了四年半的测试员后,他成了一位测试经理,然后接下来的五年他就带着50个人一起做大型测试项目.一名软件和自动化咨询公司的测试领队的新工作让他再次回到一个小的测试团队并获得实际操作经验.这种经验,以及关于情境驱动测试社区的讨论和项目重燃了他对测试和bug追踪的激情.Patrick居住在德国慕尼黑之外,他是个值得骄傲的丈夫和父亲,他的女儿很优秀.空闲的时候他还是一名木工. 不只有一种观点 作为一名测试员,最重要的是一个观点,一个你自己的观点.这个观点