[DikeJS]使用RequireJS开发动态组件(三)

      在前几次使用RequireJS创建模板分析工具之后,我现在就要开始使用RequireJS编写组件了,如果我想达到ExtJS那种动态创建组件的效果,我就需要充分考虑组件与组件之间的依赖加载问题(节点渲染)、事件绑定问题、初始化组件问题、组件样式自定义、未设置组件ID时自动生成不重复的ID问题等,因为需要考虑许多问题,因此我暂时没有更好的解决办法,在此,我将我分析的仅有的代码拿出来分享,希望能有高手帮助我解决未能分析到的问题。

     待问题分析到二分之一时,我将开放源码,并将源码开放到GitHub上以供分享和重构! 

     下面,我将暂时分析后的代码进行整理和分享:(注:本示例需要RequireJS环境,目录结构我将在日志中体现出来

目录结构:

[DikeJS]使用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] 或者给我留言!

你可能感兴趣的:(模块化,requirejs,自定义控件,模板技术,DikeJS)