在前几次使用RequireJS创建模板分析工具之后，我现在就要开始使用RequireJS编写组件了，如果我想达到ExtJS那种动态创建组件的效果，我就需要充分考虑组件与组件之间的依赖加载问题（节点渲染）、事件绑定问题、初始化组件问题、组件样式自定义、未设置组件ID时自动生成不重复的ID问题等，因为需要考虑许多问题，因此我暂时没有更好的解决办法，在此，我将我分析的仅有的代码拿出来分享，希望能有高手帮助我解决未能分析到的问题。
待问题分析到二分之一时，我将开放源码，并将源码开放到GitHub上以供分享和重构！
下面，我将暂时分析后的代码进行整理和分享：（注：本示例需要RequireJS环境，目录结构我将在日志中体现出来）
目录结构：
Canvas.js
/**
* @Author Dike.Li
* @Copyright: Copyright (c) 2013-2014
* @Description User Interface Component - Canvas
*/
define(function (require, exports, module) {
/**
* 获得模板替换工具
*/
var template = require(‘Template‘);
/**
* 模板定义
* @type {string}
*/
var temp = ‘<canvas id="{id}" name="{name}" width="{width}" height="{height}" style="{style}" tag="{tag}"></canvas>‘;
var Canvas = function (option) {
/**
* 将原型模板根据option属性进行翻译
*/
template = new template(temp, option);
temp = template.getTemp();
/**
* 在option中设置了render属性的则进行翻译后的模板添加
*/
if (typeof(option.render) !== ‘undefined‘) {
option.render.append(temp);
}
/**
* 设置事件
*/
if (typeof(option.listeners) !== ‘undefined‘) {
for (var listenerName in option.listeners) {
$(‘#‘ + option.id).on(listenerName, option.listeners[listenerName]);
}
}
/**
* 注册事件
* @param name
* @param fn
*/
Canvas.prototype.on = function (name, fn) {
$(‘#‘ + option.id).on(name, fn);
};
/**
* 获取 getContext2D
* @returns {CanvasRenderingContext2D}
*/
Canvas.prototype.getContext2D = function () {
var ctx = $(‘#‘ + option.id)[0].getContext(‘2d‘);
return ctx;
};
/**
* 获取 Canvas Element
* @type {string}
*/
Canvas.prototype.el = temp;
/**
* 监听画布加载完成后的事件
*/
//$(‘#‘ + option.id).ready(function () {
// if (typeof(option.onReady) !== ‘undefined‘) {
// option.onReady(Canvas.prototype);
// }
//});
};
module.exports = Canvas;
});
app.js
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‘
}
});
define(function (require) {
var $ = require(‘jquery‘);
//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: {
click: function () {
alert(1);
}
}
});
//container.add(canvas);
//
var ctx = canvas.getContext2D();
ctx.fillStyle = ‘#FF0000‘;
ctx.fillRect(0, 0, 80, 100);
});
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script data-main="app.js" src="lib/RequireJS.js"></script> </head> <body> </body> </html>
通过观察上面的代码会发现，声明的 Canvas 组件在创建时，必须要将内容渲染到html中，否则，Canvas 中的 getContext2D() 的方法则无法使用，如果根据Canvas创建一个同样的组件container (div的标签)，再对两个组件进行依赖加载（节点依赖渲染）时，必须要按照js代码的执行顺序，否则Canvas同样无法渲染到html中，或者是第一次能够渲染，第二次则无法渲染的问题，如果对Canvas添加了Event，则在顺序不正确的情况下，Event无法响应，针对以上的问题，我会在之后的开发中依次解决并发布文章进行说明，如果您有好的思路，可以发送邮件给我：[email protected] 或者给我留言！
时间： 2024-11-04 22:01:32