[Dikejs] Developing dynamic components using Requirejs (iii)

After using Requirejs to create the template analysis tool a few times ago, I am now ready to write components using Requirejs, and if I want to achieve the effect of ExtJS's dynamic creation of components, I need to take full account of the dependency loading problem between components and components (node rendering), event binding issues, Initializing component issues, component style customizations, automatic generation of non-duplicate ID issues when the component ID is not set, and so on, because there are many issues to consider, so I do not have a better solution, here, I will analyze the only code to share, I hope to have a master to help me solve the problem can not be analyzed.

when the problem is analyzed to One-second, I will open the source code and open the source to GitHub for sharing and refactoring!

Below, I will temporarily analyze the code to organize and share: ( Note: This example requires REQUIREJS environment, directory structure I will be reflected in the log )

Directory structure:

Canvas.js

/** *  @Author  Dike.Li *  @Copyright: copyright  (c)  2013-2014 *   @Description  user interface component - canvas */define (function  ( Require, exports, module)  {    /**     *  Get the template replacement tool      */    var template = require (' Template ');    /**     *  templates definition      *   @type  {string}     */    var temp =  ' <canvas id= "{ID}"  name= "{name}"  width= "{width}"  height= "{height}"  style= "{style}"  tag= "{tag}" ></canvas> ';    var canvas = function  ( option)  {        /**          *  translate the prototype template according to the option attribute          */         Template = new template (temp, option);         temp  = template.gettemp ();        /**          *  when the Render property is set in option, the translated template is added           */        if  (typeof (Option.render)  !==  ' Undefined ')  {            option.render.append (temp);         }        /**          *  Set Events           */        if  (typeof (Option.listeners)  !==  ' Undefined ')  {            for  (var listenername in  Option.listeners)  {                 $ (' # '  + option.id). On (Listenername, option.listeners[listenername]);             }        }         /**         *   Register Events          *  @param  name          *  @param  fn          */        Canvas.prototype.on = function  (Name, &NBSP;FN)  {            $ (' # '  +  option.id). On (NAME,&NBSP;FN);         };        /**          *  Access  getContext2D          *  @returns  {CanvasRenderingContext2D}          */        Canvas.prototype.getContext2D =  function  ()  {            var ctx  = $ (' # '  + option.id) [0].getcontext (' 2d ');             return ctx;        };         /**         *  Get  canvas  Element         *  @type  {string}          */        canvas.prototype.el = temp;         /**         *  Monitor the event after the canvas has finished loading          */        //$ (' # '  + 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 '     }});d Efine (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);             }         }   &nbSP;});     //container.add (canvas);     //    var ctx  = CANVAS.GETCONTEXT2D ();    ctx.fillstyle =  ' #FF0000 ';     ctx.fillrect (0, 0, 80, 100);});

Index.html

<! DOCTYPE html>
By observing the code above, it is found that the declared canvas component must render the content to HTML when it is created, otherwise the method of getcontext2d () in the canvas cannot be used, if an identical component is created based on the canvas container ( div tags), and then the two components of the dependency loading (node dependent rendering), you must follow the execution order of the JS code, or the canvas can not be rendered to HTML, or the first can be rendered, the second will not render the problem, if you add an event to the canvas, In the case of incorrect order, event can not respond to the above issues, I will be in the development of the subsequent resolution and publish the article to explain, if you have a good idea, you can send mail to me: [email protected] or leave me a message!
[Dikejs] Developing dynamic components using Requirejs (iii)