GB2528433A - Changing inherited properties of an object - Google Patents

Abstract

For each of a plurality of dependency names an associated respective key is registered in a first data structure 700. In a second data structure 702 an association is initialised between each key and a property of a dependency to be injected. An injector object 706 is created in the form of a code sequence, typically an ECMAScript (RTM), which when executed by a processor, iteratively performs injection steps to: (i) request a key from the first data structure using a dependency name and then (ii) use the key to access the second data structure to retrieve its associated property. A software object is generated with the retrieved properties. The second data structure is decoupled from the first data structure and is independently replaceable by an alternative second data structure 704 holding a different property in association with each key. Thus the retrieved properties are alterable without altering either the first data structure or the injector object. The invention is typically used with weakly-typed languages, e.g. JavaScript (RTM), to overcome perceived limitations in prior art frameworks such as Angular or the Dojo toolkit.

Description

CHANGING INHERITED PROPERTIES OF AN OBJECT

Technical Filed The present invention relates to changing Inherited properties of an object.

Background

Dependency Injection (DI) is a software mechanism that deals with how one or more objects In a computer programming language can obtain its properties, herein also referred to as dependencies. Utilising Dependency Injection, a component has Its dependency (or dependencies) passed to It where It Is needed. This removes the responsibility of locating a dependency from the component such that It Is simply handed to the component, Dependency Injection Is a mature mechanism In many strongly-typed computer programming languages (for example Java and C#). In strongly-typed languages, a type of a variable (e.g. string, Integer, Boolean) must be declared when the variable Is declared. However, Implementing Dependency Injection Is restricted in weakly-typed computer programming languages such as JavaScript. In weakly-typed languages, a type of variable Is determined when a value is assigned to that variable.

There are known uses of Dependency Injection methods for the JavaScrlpt computer programmIng language. A first example Is the Angular Injector subsystem for use In the Angular framework (otherwise known as toolkit or library). The Angular Injector subsystem Is In charge of creating objects, resoMng their dependencies, and providing them to their objects as requested. To manage the responsibility of dependency creation, each Angular application has an Injector. The Injector is a servIce locator that is responsible for construction and lookup of dependencies.

However, the Dependency injection Implementation used In Angular is bound to the ± Angular framework and is thus incompatible wfth any other frameworks (see https:/ldocs.angularjs.orglguidefdi and https:i/github.comiangular/angular.jslblob/master/src/autoiinjector.js). Furthermore, when a property for an obct (or function) is declared in Angular, subsequently declared oects can only inherit and implement the same dedared property. Thus, it is difficult to create a new prototype with a new set of properties.

A second example of Dependency lnjection methods for the Javascript computer programming language is used in the "Dojo Toolkit Javascript framework.

Specifically, Dojo Version 1] and above (known as "modern Dojo") adopted a ComnionJS module definition called "Asynchronous Modue Definition (AMDy to strengthen the modularity of the Dojo Toolkit. AMD is another terni for Dependency Injection and provides for asynchronous operations of the JavaScript code.

Asynchronous operations allow a responsiveness of a user interface to be preserved whHst allowing other programmatic tasks to be performed rather than locking an execution flow until an operation is completed. The foundation for modern Dojo" is a "require 0 function" which creates a closure of JavaScript code and provides it with the modules it requires to perform a task. The required modules are return variables which are passed as arguments to the require 9 function. However, AMD only invokes a single function (i.e. the require 0 function) and for this reason the AMD module code is not reusable for other functions in the JavaScript code (see http:lldojotoolkit.orgidocumentationitutorials/1.9/rnodemdojol).

The present invention has sought to overcome some of the limitations of the Angular and Dojo Toolkit JavaScript frameworks.

Summary

According to one aspect of the present invention, there is provided a method of automatically generating a software object with a set of properties, comprising; registering in a first data structure for each of a plurahty of dependency names an associated respecfive key; initiaHzing in a second data structure an association between each key and a property of a dependency to be injected; creating an injector object in the form of a code sequence which when executed by a processor carries out the foHowing injection steps multiple limes: (i) request a key from the first data structure using a dependency name, and then () uses the requested key to access the second data structure to retrieve the associated property; and generating a software object with the associated properties retrieved by the injector object wherein the second data structure is decoupled from the first data structure such that it is independenfly replaceable by an alternative second data structure hokfing a different property in association with each key wherein the retheved properties are alterable wfthout altering the first data structure or the injector object.

According to a second aspect of the present invention, there is provided a device configured to automaticafly generate a software object with a set of properties by executing a script on a processor, the device having access to a first data structure holding a plurality of dependency names and associated keys and a second data structure holding an association between each key and a property of a dependency to be injected into the software object; wherein the second data structure is decoupled from the first data structure such that it is independently replaceable by an alternative second data structure holding a different property in association with each key wherein the retrieved properties are aRerable without altering the first data structure or the injector object; wherein the script instantiates a creator object which carries out the following injection step multiple times: (i) request a key from the first data structure using a dependency name, and then (ii) use the requested key to access the second data structure to retrieve the assodated property.

The abovedefined method is termed herein as a dependency injection mechanism.

Embodiments of the invention discussed herein apply to JavaScript, although it wifi be appreciated that the techniques are appflcable to any other weakly4yped computer languages, one example being the language PHP. The Dependency Injection mechanism as described in more detail below may be easy ported across to thiferent ECMAScript based languages by a person skiUed in the art Examples of other ECMAScript based languages indude Jscript and Actionscript, although it is to he understood that the present appUcahon is not Umited to any particular ECMAScript based language.

In the described embodiments, the dependency injection mechanism is standalone.

That is, it can work with any toolkit (or none). Various examples are discussed in the foflowing specific description, but it wiU be appreciated that it would be simple to adapt the toolkit for use with any Javascript library. The standalone nature is achieved by decoupUng the association between properties and keys from the association between the dependency names and the keys. That is, the dependency names can be associated in a framework or fixed manner with their keys, but the relationship between keys and properties is flexible and can be written at any time simply by altering the second data structure or replacing the second data structure with an afternative data structure where the association between keys and propeftes is different.

The standalone nature of the dependency injection mechanism encourages the use of the dependency injection without a commitment to any particular flbrary. It can also be implemented in a way that is famihar to experienced dev&opers without specific knowledge of JavaSchpt, This is because all they need to do is associate keys with properties in a second data structure.

JavaScript has a number of particular advantages. The addiUon of a weakly coupled system of dependency injection system for JavaScript provides all the Usual benefits associated with Dependency Injection, seen in other languages. Removing the necessity of an object to instantiate its own dependencies results in much easier replacement of said dependencies for purposes of refactoring or unit tasting (where a dependency need not be instantiated in full, but a simple mock object with stubbed methods is provided in its place; this aUows the stubbed methods to be tracked for the purposes of the test).

Dependency injection provides a number of significant benefits, including increased portability, testabiUty arid higher quality computer scripts. The dependency injection mechanism described herein is reusable, in that the injector object its&f is the same object aU that needs to change is the association between the keys and the properties.

Brief Descflption of the Drawing For a better understanding of the present disclosure and to show how the same may be put into effect, reference wiH now be made, by way of example only, to the foflowing drawings in which: Figure 1 iflustrales a computer clientserver system; Figure 2 iflustrates a diagrammatic view of a processor for executing the JavaScript code comprising the Dependency Injection mechanism; Figure 3 is a flow diagram iustrating the steps of the Dependency Injector when the JavaScript code is run at a user terminal of the client-server system; Figure 4 is a flow diagram illustrating the steps of the Dependency Injector when the JavaScript code is run at a server of the cHentserver system; Figure 5 is a visual representation of one example of a JavaScript code comprising the Dependency Injection mechanism; Figure 6 illustrates an example of how a JavaScript comprising the Dependency Injection mechanism can be used by a user terminal for displaying a rich-media content website or application; and Figure 7 illustrates how an Injector object of a newly declared prototype injects a property of a dependency of an earlier decared object into the newly declared prototype.

tailedDescritior, Preferred embodiments of the invention wi now be described by way of example only. By way of irit.roducflon, a summary of JavaScript is ven b&ow, although this wifi he famihar to a person skilled in the art.

JavaScript (JS) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the web browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side programming, game development and the creation of desktop and mobfle appflcations.

JavaScript is an object-based programming language. JavaScript is an interpreted language, not a compiled language, although over recent years in order to improve performance various engines (such as the V8 JavaScript engine by Google) have been created to compile it to machine code. JavaScript is generally designed for writing software routines that operate within a client computer on the Internet.

Generally, the software routines are downloaded to the client computer at the beginning of the interactive session, if they are not already cached on the client computer.

[here are three types of JavaScript: 1) Client-side JavaScript; 2) Server-side Javascript; and 3) Core JavaScript. Cient-side JavaScript is generally an extended version of JavaScript that enables the enhancement and manipulation of web pages and client web browsers. Server-side JavaScript is an extended version of JavaScript that enables back-end access to databases, file systems, and servers.

Core JavaScript is the base JavaScript.

Core JavaScript includes the following objects: array, date, math, number and string.

Client-side JavaScript and Server-side JavaScript have additional objects/functions that are specific to client-side or server-side functionality. Generally, any JavaScript libraries (is files) created in core JavaScript can be used on both the cUent and the server without changes. Cent-side JavaScript is composed of a Core JavaScript, the Document Object Model or DOM (includes such objects as Document, Form and Frame) and the Browser Object Mod& or BOM' (the Window and Navigator objects). The objects in Cilent-side JavaScript enable manipulation of HTML (hypertext mark-up language) documents (checking form fields, submitting forms, creating dynamic pages) and the web browser (directing the web browser to load other HTML pages, display messages), Servefrside JavaScript is composed of Core JavaScript and additional objects/functions for accessing databases and file systems, and sending email, Server-side JavaScript enables Web developers to efficiently create database-driven web appUcations. Server-side JavaScript is generally used to create and customize server-based appUcations by scripting the interaction between objects. Client-side JavaScript may be served by any server but only displayed by JavaScript-enabled web browsers. Server-side JavaScript must be served by a JavaScript-enabled server but can be displayed by any web browser.

Figure 1 shows a client-server computer system 10 comprising a first user terminal with a template of a native global page (webpage) 107. The user terminal 100 can he any form of computer device which includes a processor (CPU) 202 (Figure 2) which runs chent software in the form of a web browser 110 and/or one or more JavaScript appilcations 230. The web browser and JS appilcations can execute cflent side scripts. Client-side scripts may be embedded within an HTML or XHTML document or contained in a separate file, The user terminal 100 may request the necessary files from a server (or servers) 102 on which they reside. The web browser and/or JS applications 230 execute the script and the retrieved HTML (or XHTML) document and then displays the document on display 211, induding any visible output from the JavaScript. Client side scripts may also contain instructions for the browser and/or JS applications to foflow in response to certain user actions at the user terminal 100 (e.g. clicking a button). Often these instructions can be foUowed without the user terminal needing to further communicate with the server 102. a

The server (or servers) 102 can execute serveNside scripts when the user terminS requests a document, The executed serverside script produces a data output understandable by the web browser 110 and/or JS appUcations 230 of the user terminal (e.g. HTML) and then transmits the data output to the user terminal 100. The server 102 further comprises a JavaScript interpreter 104 running on & processor 106 of the server. The JavaScript interpreter 104 enables the server 102 to handle ServeNside scripts in the JavaScript computer programming language. The server may also be configured to run one or more other JavaScript serverside appUcations instaed on a memory 132 of the server 102.

SimUarly the web browser 110 and/or other JS appHcation(s) 230 running at the user terminal 100 are configured to be operable with JavaScript so that they can understand clientside scripts written in JavaScript. A user may be able to configure an incompatible web browser or other JS appllcation by installing a JavaScript plugin so that the web browser 110 or other application 230 is then able to run JavaScript dllentside scripts.

The user terminal 100 communicates with the server 102 over a network 108 in the cUentserver computer system. Optionafly the user terminal 100 can also communicate with one or more other user terminals 1 COb, 1 OOc via the network 1 08.

The network 108 is preferably the Internet but may also any other suitable network such as a local area network or wireless local area network. The user terminal 100 may be, for example, a mobile phone, a personal digital assistant ("PDA"), a personal computer (PC') (including, for example, WindowsTM, Mac OSTM and LinuxTM PCs), a gaming device or other embedded device able to connect to the network 108. In a preferred embodiment of the invention the user terminal 100 comprises a display such as a screen and an input device such as a keyboard (or keypad), mouse (or track pad). touchscreen, and/or joystick. The user terminal 100 is connected to the network 108 via a network interface 209, for example a modem. The user terminal 100 also comprises a storage memory 226 for storing data and installed software as will be familiar to a person skilled in the art.

The web browser 110 is a complex software program, resident in the user termina and executed on a central processing unit (CPU, or processor) 202 in the user terminal 100. The web browser 110 is capable of loading and displaying text and images and foliowing instructions as encoded in HTML from the Internet, from server 102 via the network 108 (e.g. via the Internet), and also from a memory 226 of the user terminal 100. Some weli4cnown web browsers include Microsoft Internet Explorer, Netscape, Apple Safari, Mozifla Firefox, Google Chrome and Opera. The user terminal may have one or more instances of a web browser instaUed so that a user can choose to operate one or more different web browsers either at different times or simultaneously.

The one or more other JS applications 230 are also complex software programs resident in the user terminal 100 (e.g. instalied and saved in memory 226) and executed on the local processor 202 in the user terminal 100. The one or more JS applications 230 may be run at different times or simultaneously with the web browser 110. Also, if (here is more than one JS application instalied at the user terminal, then mukiple applications may he executed at the same time, depending on the capability of the processor 202.

Figure 1 shows only three user terminals (100, 1 OOh and I OOc) for clarity, but many more user terminals may be connected to the client-server communication system, and may communicate over the clientserver communication system using respective web browsers and/or JS applications executed on respective user terminals of the clientserver system. The user terminSs 1 OOb and I OOc are implemented in the same way as user terminal 100 as described above, wherein (he user terminals lOOb and iOOc may have corresponding elements to those described herein in relation to user terminal 100, Figure 2 illustrates a diagrammatic view of the processor 202 of the user terminal 100. The web browser 110 (shown as web browser client application' in Figure 2) and JS applications 230 are executed by the processor 202 and are represented as blocks. In reaUty these are code sequences stored in the memory 226 and accessed from the memory to run on the processor. The processor 202 communicates with the network 108 via the network interface 209. The network interface 209 may be integrated nto the user terniinS 100 as shown in Figure 2.

The web browser software may itself comprise a JavaScript Engine 228. The Javascript Engine gives developers access to functionahty (networking, Document OLect Model (DOM) handUng, external events. HTML5 video, canvas and data storage) needed to control the web browser 110, The processor 202 also optionaHy executes a JavaScript framework eVent application 224. The JavaScript framework client application 224 is implemented at the user terminal 100 to provide Javascript developer functionality to a user of the user terminal so that JavaScript files may be written: edited, saved and read at the user terminal. The framework(s) may also be supported by the web browser 110 and/or other applications that run JavaScript so that JS code written in accordance with a specific framework can be executed at the user terminal 100. The framework support may be directly bunt in to the web browser 110 so that a JS Engine 228 can execute the JS code according to the rSevant framework used. Similarly, one or more other JS applications 230 executed at the client terminal may have framework support direcfly buUt in. In one embodiments the application(s) may be a single-page application or website. In other embodiments the application(s) may be a JavaScript Model-View-Controller (MVC) application, or a Model View ViewMod& (MVVM) application, which are known to be based on the Backbonejs or Composer.js frameworks. Examples of some other well-known JavaScript frameworks include jQuery, MooTools, Dojo Toolkit, Prototype and YahooUl. Further it is possible to combine some frameworks together. As one example, the Dependency Injection mechanism discussed herein may be implemented using the jQuery and Underscore frameworks combined with the Backbone framework. IL should be understood that JavaScript files may be written, edited, saved and read at the user terminal 100 without using a JavaScript framework. *1 I

flgure 3 and 4 iHustrate two separate embodiments of how the Dependency InjecUon mechanism for JavaScript is implemented. Figure 3 iustrates how the Dependency Injection s implemented by the web browser 110 and/or other JS appHcaUons 230 running at the user terminal 100. Figure 4 illustrates how the Dependency Injection is implemented by the JS interpreter 104 and/or other server-side JS application(s) 130 running at the server 102.

Referring to Figure 3, at step 302 the JavaScript Engine 228 and/or the one or more other JavaScript appUcations 230 receives a JavaScript file from the server 102 via the network 108. At step 304 the JavaScript Engine 226 and/or the one or more other JavaScript applications 230 executes the JavaScript, Referring to Figure 4. at step 402 the JavaScript interpreter 104 at server 102 receives a request from the user terminal 100 via the network 106 to execute a server-side script, specifically a JavaScript file comprising the Dependency injection mechanism.

At step 404 the JavaScript interpreter and/or the one or more server-side JS applications 130 executes the JavaScript ftc in accordance with the received request.

The JavaScript file executed at steps 304 and 404 contains JavaScript code which defines the Dependency Injection mechanism. The Dependency Injection mechanism comprises a series of JavaScript instructions that implement a method to stipulate how dependencies are provided to subsequent objects (classes or functions) of the JavaScript, Referring now to Figures 3 and 4, the foUowing Steps 308 through to 316 of Figure 3 corresponds with steps 406 through to 418 of Hgure 4. These respective steps of Figures 3 and 4 show how the Dependency Injection mechanism is achieved through the execuflon of the JavaScript code at the user terminal 100 (i.e. at the web browser and/or one or more other JS applications 230) and/or at the server 102 (i.e. at the JS interpreter 104 and/or the one or more other JS applications 130 running at the server 102).

At steps 306 and 406, an opening portion of JS code declares one or more properties (or variables) of a first object (class or function). These properties are dependencies that can be injected into (or provided to) subsequently declared objects (classes/functions of the 35 code. This way the subsequent objects of JS code wifi inherit the declared properties without having to create or ook up the required dependency.

At steps 308 and 408 keyword value (key) is defined for each dependency declared (dependency name).

At steps 310 and 410 a dependency registration is carried out. The dependency names and associated keys are registered in a first data structure 700 shown in Figure 7 by RegOeps object of the JS code. An initialiser function sets up an association between each key and the instance (implementation) to be calied which defines the dependency for the first class, as shown in register 506b and data structure 702. Subsequent classes may be declared and each one may have a different initialiser within the same global namespace, At steps 312 and 412 an injector object 706 is invoked as part of the JS code when a new prototype is declared. The new prototype wili require properties of the previously defined prototype. That is, the newly declared prototype injector object requests a key from the first data structure 700 based on the dependency name, That key is used to access the dependency data structure 702 so that (lie implementation (dependencies) associated with that key can be injected into (i.e. provided to) the newly declared prototype. Thus the registered keys are used to implement the injector method in order to define which one or more registered dependency is injected into the new object.

At steps 314 and 414 the dependency that is associated with the key requested by the new object is then njected into the new object by the Injector object. In this way the new object wifi inherit a de&red property of the previously declared object.

At steps 316 and 416 the process of injecting one or more registered dependencies (properties) may be repeated for each of one or more further new objects declared.

That is, at step 316, when a further new object is declared, a new iniector obiect is invoked so that the appropriate key is requested and the registered dependency associated with that key is injected into (or provided to) the dedared further new object.

When a classes have been declared the Dependency Injection mechanism is complete (step 318 in Figure 3, step 418 in Figure 4).

At step 420 in Figure 4, the JavaScript interpreter 104 and/or server-side JS appUcation(s) 130 that executed the server-side JavaScript produces a data output understandable by the web-browser 110 and/or the other JS application(s) 230 of the user terminal 100 (eg. HTML data output), and then transmits the data output to the user terminal 100 via network 105 at step 422.

Thus it can be seen from steps 306 to 315 (and steps 406 to 418) that by dedaring multiple registered dependencies (properties) and associating them with a respective key, subsequent classes can easily have different instances injected into them. See for example data structure 704 where each key is associated with a different instance.

By a simple replacement at the initialisafion stage of the association between keys and instances (dependencies), the properties injected into and inherited in a class can be very ea&iv modified. Furthermore, they become independent of the basic framework, in which the first data structure 700 is estabUshed.

The Dependency Injection mechanism as described means that when a class reqthres one or more other classes, these are loosely coupled because the original dass merSy requests a given key, rather than declaring a new instance of another class. Therefore, refactoring is made much simpler because the property associated with a particular key can simply be switched, provided the new value that is switched in implements the same methods and properties as the original vSue (or at least the subset of these methods and properties that are directly invoked by the original class), This also facUitates unit testing because a mock object can be substituted in place of a given dependency, implementing stubbed versions of methods and thus maintauiing the philosophy and benefits of testing a unit in isolation. Code then becomes more maintainable and reliable, improving code quality and reducing the need for regression testing.

The following extract is the JavaScript code for the Dependency Injection mechanism as executed at the user terminal 100 (ic. by the web browser 110 and/or by the one or more other JS apphcations 230) and/or at the server 102 (Le. by the JS interpreter 104 and/or the one or more other JS applications 130). The JavaScript code is standalone and so can be written and/or executed in accordance with any JavaScript framework or none at all, The JS code extract provides a general example of the Dependency Injection mechanism that is performed in steps 306 to 318 as described above in relation to Figure 3 (and corresponding steps 406 to 418 of Figure 4),

JslOC example>

var i:JoC 2. var

Jnj ec:t:or inctJ)endc±nc:ies I:iyn::torc (irt:Ltia:Liser) { vat ret flaps init.ialsse.r.r egrsteredflependencres, dependency; for Hiss x 0; x this ciependsncies* length: cistdenov this ci 3endenc±es [xi Cregfls.r [dc:ps:denc:y key] i=null) { s (hE. ,e?Innc nrr:e] reqflens (dependency key] EtiSEt throw new Error Dependc?nc:v0 dependeric:y.kev + is not registered 15} tktin.ready() Ln:Lt:.I.&j.lser: 4 i.nitalise: functicn() throw new Error initialise method must he c;ver-rtcJ.en registerflependency: f nct:icn (key, .Lnstan.ce) ( $ (t St < t' Lt mnd tiet r -this. reqisteredpeoendenoies [keyl instance; else 050w new E:r:rc;r dependent:Ev÷ 10ev a.lreaciyrer.;stered if (window.MooTooi,jc]<)j; Class c1r..tnect.or new dependencies: Ii tn) ectfleoentiertomes imp!. ixiject:o ini ectDe:ender3cies ready: function C I I R override in subclass / dilnitiaiiser new Class({ retlsteredDependenoies initialise: imoi.irftiali.scc itatise, registertependency: ±11101 initialiser. registe:rflenendency I); } else { di.lnjector functiono) {}; di.Injector.prototype n { dependencies: (1, injectDependencies: impl. injector.injectDependencies.

ready: Eunction() { /" override in stbclass / } I, di.Initialiser a function() (}; di.IniUallser.prototype { registeredDependencies; { }, initialize: imp].. initialiser. initalise, registerDependency: impi initialiser. registerDependency I; return di; } 0 The following extract is an example demonstration of JavaScript code for the Dependency Injection mechanism specifically written using the framework "MooTools". This MooTools example of the Dependency Injection mechanism shows how actual properties (e.g. "hellos) are registered and associated with a key so that the key can be requested by a subsequently declared class (Base View) in order to inherit the relevant declared properties by Dependency Injection.

cMooTools JS example: EXAMPLE 1> war Demo a Demo {J; Detoo.Properties new Class({ labeist { uisg.helio't Hello', msg. goodbye'; Goodbye' geetsabel function (key) { If (ti'Lir,lebislkeyi txu1i rei:u:rn this -.].cheis k.evj return key; Decnc). irt-.t.ia)..iEer -Clew c:a.aso C Extenci:E;: jsIOCInitIali9er.

±nitiaiic tunctiono) this reqi.sterpependency(properties, new DecnoProperties[)) Deco. In)t*cilser, instance -new Deco,initiaiiscr U Deco. BaselJiew U I no 1. jser Do i:.i Ons j I DC -.1] 81: 1) 1) :Ieeridncies: [{ke.y: Grope: tLes name: propertIes H initialize: function{ootions) thissetOptions (options) to: .r[ic:Def)E?n1rc)Ieo i)sno -TfnIt:ilise I rtst.anc:e) 11); Demoi4ai.nview -new c:Lass c{ Extends: Dccc). Ease-View, reactv: :unc: ±On C) th is render render: tunct ion (1 Cic.:unextt:U:c:dy_ i:aneri4TtU <p> this,crr).-t.-.e)cjetLshei(msc,neL.[o) + c/ps + <p> + thlspropert:e.scletLebel('cctsg.now.areyou) + <ID> H; :Lndow, CrC Los.cI fnct.i.ctrC C) 4 van ylew = new!Jenin t4airCView U The foDowng extrect 6 a second exampe dernonstrahon of JavaScdpt code for the Dependency njecUon mechanism spedficaily wrftten wth and for use wth the frameworks JQuery and Underscore0. jQuery and Underscore uses the native JavaScript Prototypal Inheritance as opposed to providing for actual classes as in the MooTools example above. The term "function 0" is therefore use instead of class.

The code Is otherwise very similar and again clearly demonstrates how a subsequently declared class (function in this case) inherits declared properties associated with the key: c jQuery and Undercore JS example: EXAMPLE 2> Demo.Properties a fuzxction() or Demo.Properties.prototype labels; IS msg.hello: Hello'.

meg. goodbye Goodbye 1'.

gettabel: function (key) if (this.labels(keyi s mill) { return this.labelE (key]; } else ( return key;

I 25}

Demo.tnitialiser a functiont) { this.initializeU, ): Demo.tnitialiser.prototype,_.extend(jsIOC.Initialiser.protot>pe, { initialize: functiont) this. registerDependency( properties', new Demo.Properties U), Demo.Initialiser.natance a new Demo.Initialiserfl; Demo.Baseview functiont) { this.initializefl; }; Dento.Baseview.prototype.extend (jetOc xnjector.protoeype, dependencies; ((key: properties'. name: properties' fl, initialize: function (options) { this. injectflependencies (Demo. Initialiser.Jnstance); S Demo.MainView -functiono) { thia.hiltializefl; }; Demo. Ma in View.prototype extend (Demo. Easeview.prototype, { ready: function() this.rendezfl; renderg functioa() { document. body. innerHTML cp>' + chis.properties.getkabelPmsg.hello') * c/pa' + cp>' + this.propertiea.getLabel('msg.how.are.you') + 20)); window.onload a function() { var view new Demo.Mainviewfl; 2$ The Moolools and Underscore frameworks both provide extension mechanisms: In the MooTools example above this is the implements" term; in the Underscore example this is the ".extend" term. If no framework is used, as described above, the developer of the code would have to provide for their own extension mechanism in order to add the methods of the "dilnJector and the tdi.iniUaliseC to the classes (as seen in the first JavaScript extract above).

FIgure 5 illustrates a more visual representation of the steps 306 to 316 of Figure 3 (and corresponding steps 406 to 416 of Figure 4). showIng how the Dependency Injection mechanism of the JavaScript code is implemented. For Figure 5 and its description, the example I Dependency injection mechanism code using the MooTools JS framework is referred to. Referring to Figure 5, at 502 properties (dependencies) are declared for a first JavaScript class ("Demo.Propertles = new Class7. For clarity only two properties are shown: messages "HeIlo and "Goodbye'.

At 504 a key function associates each property wfth a respecflve keyword value (key) [getLahel: function(key). .].

At 506a an initiaNser object registers the dependencies [this.registerDependencyd]. A visual representation of a register is shown at 506b. The register 506b stores the properties now associated with the respective keys.

At 508 a new class "BaseView' is declared which implements an injector object CslOC.1niectori 510. Dependencies are requested by the BaseView based on the keyword value associated with the dependency name ["dependencies: [(key: properties' name: properties}]I and the dependency is injected into the new BaseView class ["thisinjectDependencies(Demo.lnitialiserHnstancefl.

Figure $ iflustrates an embodiment of how a Javascript code comprising the Dependency Injection mechanism as described may be used to output data at the user terminal 100. In Figure 6, the JavaScript code has been written for an interactive, richmedia content website which may include interactive elements. The content is displayed at the user terminal in accordance with instructions of the JavaScript which is executed either as a clientside script or as a serveNside script.

The JavaScript Engine 228 of web browser 110 and/or the JS appkcation(s) 230 running on processor 202 output the visual elements for a display element 112 of the user terminal 100 when the JS is executed as a client side script. Alternatively, if the JavaScript is executed as a serveNside script by the server 102, then the data output (eg. HTML) transmitted by the server to the user terminal 100 is executed by the webbrowser and/or JS applications 230.

The display 112 may be integrated into the user terminal or may be a separate unit that is connected to the user terminal 100 and configured to receive output data from the CPU 202. It should be understood that the JavaScript code may also include other nonwisual instructions that the web browser 110 and/or JS applications 230 follow.

Part (1) of Agure 6 shows the display 112 showing a first instance of the website displaying areas of content 602 in the web browser 110. A scroll bar 601 is shown in the righthand side of the web browser although in other embodiments a scroll bar need not be displayed as the user can interact with the webpage by draggkig, swiping and generally moving the page without the use of a scroll bar. Staying on the same websfte, when a user scrolls down or provides some other user input or interaction with the content shown on the display 112, the JavaScript code is configured to automatically download (if the JS is executed as a dHentside script) additional content from the server 102 so that the processor 202 can output the additional content to update what is currently being displayed by the webpage.

Alternatively, if the JS code is executed as a serveEside script, the JS interpreter 104 of the server 102 automatically transmits the additional content to the user terminal in response to the user input.

Part (2) of Figure 6 shows one embodiment where the user scrolls down the page, new content 604 is dynamically loaded and loaded on the display 112 in accordance with the JavaScript code being executed. Similarly Part (3) illustrates that as the user continues to scroll further down the website page, further content 606 is downioaded (for a clientside script; or transmitted to the user terminal for a serveNside script) and displayed at display 112 to further dynamically change or update the content displayed for the website page being viewed.

One example of how the Dependency lrection mechanism achieves the steps of dynamically changing and/or updating the content displayed at the user terminal is now described. A first ContentFetcher class s declared and its dependencies associated with respective keys in the first data structure 700, An initialiser function sets up an association between each key and the instance (implementation) to be called, which defines the dependency for the ContentFetcher class in the data structure 702. The ContentFetcher class takes a given element on a webpage that contains a single anchor element and makes an ajax request to a URL specified by an href attribute of a tag of the anchor element. The ConteniFetcher' class replaces the content of the containing element with HTML returned in response to the request, removing the tag of the anchor element in the process. Next, an nfiniteScroU prototype is declared which invokes an injector object 706. The Infinitescroll' prototype will continuousiy grab content as the user scroUs down the page. The functionality provided by the ConteotFetcher' is desirable for use in the 9nfinitescroW prototype. Therefore the InfiniteScroll' prototype requests the property of the ContentFetcher' component via the Dependency Injection mechanism. That is, the injector object 706 of the newly dedared InfiniteScroll' prototype requests a key from the first data structure 700 based on the dependency name. The key that is returned is used to access the dependency data structure 702 so that the ContentFetcher' implementation (dependencies) associated with that key can be injected into the newly declared InfiniteScroll' prototype.

A new class, such as HTMLFetcher to replace ContentFetcher (should ContentFetcher become more low level and designed for retrieving more than just HTML content) could be substituted in later on as the website page (or JS application 203) is developed, thus making refactoring a simple task. Unit testing would also be simplified because a mock ContentFetcher' object would be substituted in place of the real one via the Dependency Injection mechanism, making it simple to Lest the lnfiniteScroll' component in isolation and thus meaning the Unit Tests of the component would truly only test that Unit.

It is to be understood that although the Parts (1) to (3) of Figure 6 show the display 112 displaying content for a website in a web browser 110, the processor can alternatively, or simultaneously, perform Parts (1) to (3) for one or more JS appllcations 203 of the user terminal. That is, the processor executes the one or more JS applications 230 and outputs data, for instance for display at the display 112.

The Dependency Injection mechanism comprised in the JavaScript code Is implemented at the start of the JavaScript code so that subsequently declared classes can inherit desired properties of earlier declared and registered properties.

By Inheriting a dependency It desires, a subsequent class is not bound to only inheritIng a matching property from an earlier parent class. Without the Dependency Injection mechanism of the present disclosure, If a subsequently declared class wanted to implement a different property of a previous class (or classes), the first (earliest) class of the JS code would have to be re-declared with the desired property. For complex websites such as that described in relation to Figure 6, such re-declarIng of classes requires long and complex JavaScript. The standalone Dependency Injection mechanism provides flexibility while reducing the complexity of the JS code by allowing for different dependencies to be injected into different classes of the JS code. This avoids the need to re-declare earlier classes and properties thus making JS code projects, such as for rich-media content websites, as described in relation to Figure 6, less complex, more manageable and more portable. Thus, rich-media content websites and webpages are achieved for web browsers 110 and JS applications 230 with a more efficient implementation of JavaScdpt code.

Claims (23)

1. CLA!MS: 1. A method of automaticaHy generating a software object with a set of properties, comprising: registering in a first data structure for each of a pluraiity of dependency names an associated respective key: iniflaUzing in a second data structure an association between each key and a property of a dependency to be injected: creating an injector object in the form of a code sequence which when executed by a processor carries out the following injection steps muftipie times: (i) request a key from the first data structure using a dependency name, and then (ii) use the requested key to access the second data structure to retrieve the associated property: and generating a software object with the associated properties retrieved by the injector object wherein the second data structure is decoupled from the first data structure such that it is independently repiaceaNe by an afternative second data structure holding a different property in association with each key wherein the retrieved properties are aRerabe without altering the first data structure or the injector object.
2. 2. The method of claim I, comprising the step of using the second data structure to generate at least one software object, replacing the second data structure with an aftemative data structure and generating at east one further software object.
3. 3. The method of daim 2 wherein the code sequence is an ECMAScript.
4. 4. The method of claim 3 further comprising receiving the EGMAScript embedded in an HTML or XHTML document from a server via a network, wherein the EGMAScript is a dientside script.
5. 6. The method of daim 3 further comprising receiving an HTML or XHTML document from a server via a network independenOy of the ECMAScript, wheren the ECMAScript is a chent-side script.
6. 6. The method of dam 4 or 5 further comprising execuUng the chentside script to cause the received HTML or XHTML document to be executed by the processor and output at a c entside device.
7. 7. The method of daim 6 wherein said output is a dispaying of visual &ements of the executed HTML or XHTML document on a screen of the chent-side device.
8. 8. The method of any of claims I to 3 further comprising transmitting an HTML or XHTML data output to a remote user terminaL
9. 9. The method of any of daims I to 5, wherein the method is implemented by a Javascript code written for at least one of a rich-media content website and one or more rich-media content Javascript applicaflons.
10. 10, The method of claim 9çwherein the software object presents an interactive content &ement to a screen of a user device.
11. 11. The method of claim 10 wherein when a user of the user device provides a user input or nteraction wth the output content: the JavaScript code is executed as a cUentside script at the user device which causes the user device to automaticafly download additional content including an aRernative second data structure from a server; the script uses the second data structure to dynamicahy update or change what is currently output by the website or one or more JavaScript applications, without changing the first data structure.
12. 12. The method of claim 10 wherein when a user of the user device provides a user input or interaction with the output content: the JavaScript code is executed as a serveNside script by an interpreter of a server whch causes the server to automaticaUy process additional content including an afternative second data structure at the server; and the server transmits the additional content to the user device to dynamicafly update or change what is currently output by the websfte or one or more JavaScript appUcations.
13. 13. The method of any preceding claim wherein the injector object is invoked as part of a dedared nfiniteScroW prototype; the key that is requested from the first data structure is associated wfth a dependency of a ContentFetcher' software object; the retrieved property from the second data structure is associated with the key of the dependency of the ContentFetcher' software object such that the retrieved property is a property of the ContentFetcher' dependency, and said property of the ContentFetcher' dependency is injected into the lnfiniteScrofl prototype.
14. 14. A device configured to automatically generate a software object with a set of properties by executing a script on a processor, the device having access to a first data structure holding a plurality of dependency names and associated keys and a second data structure holding an association between each key and a property of a dependency to be injected into the software object; wherein the second data structure is decoupled from the first data structure such that it is independently replaceable by an alternative second data structure holding a different property in association with each key wherein the retrieved properties are alterable without altering the first data structure or the injector object; wherein the script instantiates a creator object which carries out the following injection step multiple times: (i) request a key from the first data structure using a dependency name, and then (H) use the requested key to access the second data structure to retrieve the associated property.
15. 15. The device of claim 14 wherein the processor is configured to run at least one of a web browser and one or more JavaScript appHcations, and the web browser and/or one or more JavaScript appHcations execute the script as a cUentside sctipt.
16. 16. The device of claim 14 wherein the processor is configured to run at east one of an interpreter and one or more JavaScript server-side appUcations, whereby the JavaScript interpreter andlor JavaScript server-side appflcations run the ECMAScript as a server-side script.
17. 17. The device of daim 14 or 15 wherein the device is any one of a mobile phone, a personal digital assistant (PDA), a personal computer (PC), a gaming device, or other embedded device.
18. 18. The device of claim 15 or 17, wherein the one or more JavaScript applications are modS-view-controHer (MVC) or Model View ViewModel (MVVM) applications.
19. 19. The device of any of claims 14 to 18 wherein the processor executes one or more JavaScript framework applications.
20. 20. The device of any of claims 15, 17 and 18 wherein the processor executes one or more JavaScript framework applications that are supported by at least one of the web browser and the one or more JavaScript applications.
21. 21. The device of claim 16, wherein the processor executes one or more JavaScript framework appHcations that are supported by the one or more server-side JavaScript applications.
22. 22. The device of any of cams 19 to 21 wherehi the processor executes one or more Javascript framework appflcations to provide JavaScrpt deve'oper funcOonaflty so that JavaScript files may be written, edited, saved and read at the device.
23. 23. The device of any of claims 19 to 22 wherein the one or more Javascript framework appflcations are any one of or any combination of jQuery, MooTools, Dojo Toolkit, Prototype, Backbone.js, Composerjs and Yaheoul.