在我们了解了如何通过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