CN106991096A - Dynamic page rendering intent and device - Google Patents
Dynamic page rendering intent and device Download PDFInfo
- Publication number
- CN106991096A CN106991096A CN201610041871.7A CN201610041871A CN106991096A CN 106991096 A CN106991096 A CN 106991096A CN 201610041871 A CN201610041871 A CN 201610041871A CN 106991096 A CN106991096 A CN 106991096A
- Authority
- CN
- China
- Prior art keywords
- interface
- renderer
- class
- display
- calling
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the present application discloses dynamic page rendering intent and device, and this method includes：Class libraries is provided, the class libraries includes renderer abstract base class and display class；The renderer abstract base class provides multiple calling interfaces；The display class defines the attribute and rendering intent of all types of display objects, and the rendering intent is defined by each calling interface of the renderer abstract base class, and the editor of dynamic interface is carried out in the way of it will pass through and the display class is instantiated；When showing the dynamic page in objective browser, the type of the objective browser is determined by performing the script injected in the dynamic page, and by being instantiated to corresponding renderer subclass, creates corresponding target renderer；The display structure tree of the dynamic page is traveled through, each display object in the display structure tree is carried out rendering processing by the target renderer.By the embodiment of the present application, development efficiency can be improved, system memory resources are saved.
Description
Technical field
The application is related to page rendering technical field, more particularly to dynamic page rendering intent and device.
Background technology
At present, a kind of stream is had become using web (or HTML5, abbreviation H5) development behavior page
Row trend, for example, shop interactive game page in " mobile phone Taobao " etc., can be entered using H5
Row exploitation.
In the prior art, most H5 dynamic pages are developed both for mobile terminal.But, it is actual
On, developer, which is intended to oneself exploitation H5 dynamic page, can not only operate in the mobile terminal of user, also can
Operate in traditional PC ends.However, due to some animations, control would generally be included in this dynamic page
Deng element, and the browser of various mobile terminals handles connecing for these elements with being used in the browser at PC ends
Mouthful be probably it is different, therefore, if the page code of mobile terminal can only be write respectively, and PC ends
Page code.
For example, IE browser at PC ends still in occupation of the larger market share, still, the IE of old edition
Browser (below IE9) does not support that (current CSS latest edition, CSS is complete by Canvas, CSS3
Title is Cascading Stylesheet, namely CSS) etc. H5 technologies, therefore, it is impossible to run absolutely
Most H5 dynamic pages.That is, after page code is developed for mobile terminal, it is impossible to straight
It is connected in the browser at PC ends and runs, another set of page code can only be developed again in addition for PC ends.
Therefore, the development efficiency of dynamic page how is improved, as the skill for needing those skilled in the art to solve
Art problem.
The content of the invention
This application provides dynamic page rendering intent and device, development efficiency can be improved, system storage is saved
Resource.
This application provides following scheme：
A kind of dynamic page rendering intent, it is characterised in that including：
Class libraries is provided, the class libraries includes renderer abstract base class and display class；The renderer is abstract
Base class provides multiple calling interfaces, provides multiple renderer subclasses by inheriting the renderer abstract base class, no
The different browser type of same renderer subclass correspondence, inside renderer subclass, according to correspondence browser
The processing logic that renders mode, realize each calling interface of the type to display object；The display class definition
The attribute and rendering intent of all types of display objects, the rendering intent pass through the renderer abstract base class
Each calling interface is defined, and Mobile state circle is entered in the way of it will pass through and the display class is instantiated
The editor in face；
When showing the dynamic page in objective browser, by performing the pin injected in the dynamic page
The type of objective browser described in this determination, and by being instantiated to corresponding renderer subclass, create
Corresponding target renderer；
The display structure tree of the dynamic page is traveled through, by the target renderer to the display structure tree
In each display object carry out render processing.
A kind of dynamic page rendering device, it is characterised in that including：
Class libraries provides unit, and for providing class libraries, the class libraries includes renderer abstract base class and display
Class；The renderer abstract base class provides multiple calling interfaces, is provided by inheriting the renderer abstract base class
Multiple renderer subclasses, the different browser type of different renderer subclass correspondences, in renderer subclass
Portion, renders mode to display object according to correspondence browser type, realizes that the processing of each calling interface is patrolled
Volume；The display class defines the attribute and rendering intent of all types of display objects, and the rendering intent passes through institute
Each calling interface for stating renderer abstract base class is defined, and example is carried out to the display class will pass through
The mode of change carries out the editor of dynamic interface；
Target renderer generation unit, during for showing the dynamic page in objective browser, by holding
The script injected in the row dynamic page determines the type of the objective browser, and by corresponding wash with watercolours
Dye device subclass is instantiated, and creates corresponding target renderer；
Render processing unit, the display structure tree for traveling through the dynamic page, is rendered by the target
Device carries out rendering processing to each display object in the display structure tree.
The specific embodiment provided according to the application, this application discloses following technique effect：
By the embodiment of the present application, due to that can be realized by renderer abstract base class to various specific renderers
The unified encapsulation of subclass is there is provided unified calling interface, it is thereby achieved that display object and browser class
Decoupling between type, in the development behavior page, can define display object by unified calling interface
Rendering intent, afterwards when specifically carrying out the displaying of the page, then the script injected in the page browsed
The judgement of device type, and corresponding target renderer is generated according to judged result, and in the target renderer
The processing logic for each interface that portion is defined, carries out specific render to each display object in the page and handles behaviour
Make.It can be seen that, in this way, developer may not necessarily be concerned about specific browser type, as long as according to
The class libraries that the embodiment of the present application is provided carries out primary development, you can in various terminal equipment, various browsers
All normally rendered and shown, so as to improve development efficiency, it is to avoid for many parts of same Page-saving not
Same page code, and hence it is also possible to save the storage resource of system.
Certainly, any product for implementing the application it is not absolutely required to while reaching all the above advantage.
Brief description of the drawings
, below will be to implementing in order to illustrate more clearly of the embodiment of the present application or technical scheme of the prior art
The accompanying drawing used required in example is briefly described, it should be apparent that, drawings in the following description are only
Some embodiments of the present application, for those of ordinary skill in the art, are not paying creative work
Under the premise of, other accompanying drawings can also be obtained according to these accompanying drawings.
Fig. 1 is the succession structural representation between class in the class libraries that the embodiment of the present application is provided；
Fig. 2 is the display structural representation between the class that the embodiment of the present application is provided；
Fig. 3 is the flow chart for the method that the embodiment of the present application is provided；
Fig. 4 is render process schematic diagram in the method that the embodiment of the present application is provided；
Fig. 5 is another render process schematic diagram in the method that the embodiment of the present application is provided；
Fig. 6 is the schematic diagram for the device that the embodiment of the present application is provided.
Embodiment
Below in conjunction with the accompanying drawing in the embodiment of the present application, the technical scheme in the embodiment of the present application is carried out clear
Chu, it is fully described by, it is clear that described embodiment is only some embodiments of the present application, rather than
Whole embodiments.Based on the embodiment in the application, those of ordinary skill in the art obtained it is all its
His embodiment, belongs to the scope of the application protection.
In the embodiment of the present application, in order to realize primary development, just it can enter in various types of browsers
Row displaying, can be provided previously by class libraries, and renderer abstract base class and display class can be included in the class libraries.
Wherein, multiple calling interfaces are taken out in renderer abstract base class, for example, can include starting drawing interface
(startDraw), drawing displacement translation interface (transform), drawing interface (draw), drawing terminate
Interface (endDraw), still, may not necessarily provide each calling interface in renderer abstract base class
Implement.By inheriting the renderer abstract base class, multiple renderer subclasses, different wash with watercolours can be provided
The different browser type of device subclass correspondence is contaminated, inside renderer subclass, according to correspondence browser type pair
Show the processing logic for rendering mode, realizing each calling interface of object.That is, real in the application
Apply in example, carried out one layer of unified encapsulation outside the renderer for specifically performing Rendering operations, can cause
Different renderer subclasses can use unified interface to be called, but specific interface realize logic be again
Realized inside subclass, therefore, in the development behavior page, it is possible to specific renderer need not be distinguished
Class, that is, developer is directly provided without directly using renderer subclass using renderer abstract base class
Calling interface carries out the definition of rendering intent to display object, thus realize display object and renderer it
Between decoupling, it is then different to realize by deriving different renderers when specifically carrying out page presentation
Render mode.
Wherein, it is that mode is rendered not to display object according to each browser when providing renderer subclass
With there is provided go out multiple different renderer subclasses.For example, first kind browser is shown based on flash
Show rendering for object, specific such as ie8, ie7, ie6 etc.；Equations of The Second Kind browser is shown based on div tag
Show rendering for object, the browser in specific such as lowest version android operating systems；3rd class browser
To carry out showing that object being rendered based on Canvas, it is specific such as other senior browsers in pc terminals and
Browser in ios operating systems etc..Because above-mentioned three classes browser is to showing that the mode that renders of object has
Institute is different, it is, therefore, possible to provide three renderer subclasses, corresponding with above-mentioned three classes browser respectively, for example,
Can be respectively FlashRenderer, DOMRenderer, CanvasRenderer, etc..So, exist
, can be according to actual browser type when carrying out page rendering in specific terminal device, generation is specific
Renderer, then recycles the renderer to render each display object in the page.
In addition, can also provide display class in class libraries, this display class is just used to define specific display object
Attribute and its rendering intent, wherein, the definition to rendering intent can be just by renderer abstract base class
Defined in unified calling interface realize.So, by being instantiated to the display class in class libraries,
It can specifically show that object is defined to each in dynamic page.Wherein, display class can include display
Base class, and it is possible to provide multiple display subclasses by inheriting the display base class, each display subclass can be with
The different display object type of correspondence.For example, as shown in figure 1, View is display object base class, owning
Display object class can inherit such.Wherein, Bitmap is used to show most basic picture, and Sprite is used
In display frame animation, Graphics is used to show vector plotting, and Text is used to show word.For example, display
Static images can use Bitmap, show that the person of low position danced can use Sprite, display triangle can be used
Graphics, display word can use Text, etc..
In addition, managing for convenience, Container, namely container class can also be included in class libraries, can be wrapped
Containing each seed object.Show that the two classes of base class View and container class Container are most basic classes, its
His class can all be derived from by them.For example, when implementing, it is all kinds of between relation can be such as Fig. 2
It is shown, wherein, Stage is can to add a variety of display objects in root node and top level container, Stage, its
It can continue to add a variety of display objects under middle Container containers.This flexible display structure can be with shape
Into extremely complex display structure, the convenient management for showing object.For example, having three ships on stage, each
There is a people on ship, at this moment, every ship can be set to Container, two are then added inside
Individual View, is ship and the picture of personage respectively.Then ship is added in stage.So, if allowing ship
It is mobile, it is only necessary to which that the displacement of ship container is set, then personage also can together move with ship.Wherein, setting
During the displacement of ship container, it is possible to pass through the drawing displacement translation interface of foregoing renderer abstract base class
(transform) it is defined, specifically can be with the direction of designated displacement, distance etc..
On the basis of there is provided above-mentioned class libraries, developer just can carry out opening for dynamic page based on the class libraries
Hair.As it was noted above, during exploitation, it is not necessary to consider the difference between different types of browser,
It therefore, it can reach primary development, you can in purpose shown in kinds of platform.It should be noted that
In the embodiment of the present application, the page code of dynamic page is so-called for that can enter edlin using cross-platform language
Cross-platform language, namely the language that all browsers can be supported, for example, can be specifically
Javascript etc..
After the page code of dynamic page is edited using aforesaid way, a pin can also be added in the page
This, when the page is loaded by browser, the script can be performed for carrying out browser type first
The operation such as judgement.Wherein, the script in the page can also be Javascript scripts (abbreviation JS scripts) etc.
The script that can be performed in all browsers.
Specific render process is introduced below.
Referring to Fig. 3, the embodiment of the present application provides a kind of dynamic page rendering intent, and this method can include
Following steps：
S301：Class libraries is provided, the class libraries includes renderer abstract base class and display class；It is described to render
Device abstract base class provides multiple calling interfaces, and multiple renderer are provided by inheriting the renderer abstract base class
Class, the different browser type of different renderer subclass correspondences, inside renderer subclass, according to correspondence
The processing logic that renders mode, realize each calling interface of the browser type to display object；The display
Class defines the attribute and rendering intent of all types of display objects, and the rendering intent is abstract by the renderer
Each calling interface of base class is defined, and is carried out in the way of it will pass through and the display class is instantiated
The editor of dynamic interface；
As it was noted above, class libraries is provided in the embodiment of the present application, including display base class and its derivation
Display subclass gone out etc., when carrying out dynamic page exploitation, it is possible to by these display base class, displays
The mode that subclass etc. is instantiated, to define the attribute for being particularly shown object included in the page and its render
Method.
For example, it is assumed that needing to show a button in dynamic page, then it can utilize in the embodiment of the present application
The Bitmap classes of offer generate a picture, button=new Bitmap ({ image:ButtonImage }),
Setting of design parameter value, etc. can also be carried out to attribute, rendering intent of the picture etc. afterwards.
S302：When showing the dynamic page in objective browser, noted by performing in the dynamic page
The script entered determines the type of the objective browser, and by being instantiated to corresponding renderer subclass,
Create corresponding target renderer；
After dynamic page generation, when being shown in the objective browser in specific terminal device, page
The script being injected into face can be just performed first, and the purpose for performing the script is exactly to judge current browser
Described type.That is, can determine that current objective browser belongs to foregoing three kinds of browser classes
Which kind of in type.When implementing, in order to perform above-mentioned judgement operation, each can be pre-saved
Corresponding relation between the information such as title, the version of browser type and browser, for example, in previous example,
First browser type includes ie8, ie7, ie6 etc., and so, the script can determine current mesh first
The information such as title, the version number of browser are marked, then by being compared with foregoing corresponding relation, you can really
Make the browser type belonging to current goal browser.
After browser type is determined, the script just can be by carrying out example to corresponding renderer subclass
Change, create corresponding target renderer.When implementing, each renderer subclass can also be pre-saved with fitting
Corresponding relation between browser type, so, after browser type is determined, it is possible to it is determined that
Go out corresponding renderer subclass, and then, script can just perform the behaviour instantiated to the renderer subclass
Make, so as to create specific target renderer.For example, it is assumed that determining that current browser is ie8, then
Determine that the objective browser belongs to the first browser type, therefore, you can be rendered to the type is corresponding
Device subclass FlashRenderer is instantiated, and generates target renderer.If it is determined that current browser
For the browser in lowest version android operating systems, it is determined that go out the objective browser and belong to second to browse
Device type, therefore, you can be instantiated to the corresponding renderer subclass DOMRenderer of the type,
Generate target renderer.If it is determined that current browser is the browser in ios operating systems, it is determined that
Go out the objective browser and belong to the 3rd browser type, therefore, you can with to the type corresponding renderer
Class CanvasRenderer is instantiated, and generates target renderer.
It should be noted that in the case of there is outermost layer container-Stage in class libraries, the script in the page
The outermost layer container can also have been created, after judging browser type and generating corresponding target renderer,
The target renderer can be injected into the Stage layers, render process afterwards can be since the Stage layers.
S303：The display structure tree of the dynamic page is traveled through, by the target renderer to the display
Each display object in structure tree carries out rendering processing.
After specific target renderer is generated, it is possible to travel through the display structure tree of the dynamic page, so
Afterwards each display object in the display structure tree is carried out rendering processing by the target renderer.Tool
Body, if also generating Stage layers, can call Stage certain preset method (for example,
Tick methods, the corresponding processing logic of this method can be good defined in class libraries) after, the traversal page
Whole display structure tree, calls each to show the rendering intent of object one by one, and specific Rendering operations are realized
Then completed by corresponding target renderer Renderer.That is, as shown in figure 4, render process can
In tick () method including calling stage, the rendering intent (render ()) of display object (view) is called,
Again by specific renderer (renderer) by specific calling interface (startDraw (), transform (),
Draw (), endDraw ()) in the processing logic that defines carry out rendering processing.
When implementing, entirely rendering flow can be with after as shown in figure 5, dynamic page be loaded, first
Perform script, generates Stage stages, and in the type for judging current objective browser, generate this clear
The corresponding target renderer of device type of looking at, wherein, if the browser of ie8 and following version, Ke Yisheng
Into FlashRenderer, if lowest version android browsers, can generate DOMRenderer, such as
Fruit is other browsers such as ios, then can generate CanvasRenderer, etc..Afterwards, it can call
Stage tick methods, after this method is called, you can to travel through whole display structure tree, according to display
The rendering intent of object, calls four calling interfaces of stage layers of renderer show the drafting of object,
Including startDraw, transform, draw, endDraw.Afterwards, (or can also every 16ms
It is other time intervals) stage next tick methods are called, carry out the wash with watercolours of next display object
Dye processing.
Wherein, target renderer is when execution specifically renders processing logic, according to corresponding different browsers
Type, the processing logic of execution is also different.If specifically, FlashRenderer, can pass through
In the following manner is handled：
Step one：Load flash player；
Step 2：The of the flash player is called by the beginning drawing interface (startDraw)
One preset interface generation flash elements；
Step 3：The flash elements are set by the drawing displacement translation interface (transform)
Attribute, to enter line translation to current process object；For example, it may be x, the y of flash elements are set,
Rotation, scale attribute is moved, and is rotated, scaling pictures；
Step 4：The second of flash player outermost layer container is called by the drawing interface (draw)
Preset interface (e.g., addChild) shows the currently processed object.
In this renderer, any operation can not be performed by terminating drawing interface (endDraw).
If target renderer is DOMRenderer, it can be handled in the following manner：
Step one：3rd preset interface is called (such as by the beginning drawing interface (startDraw)
Document.createElement), div tag is generated；
Step 2：The of the div tag is called by the drawing displacement translation interface (transform)
Four preset interfaces, to enter line translation to current process object；
Step 3：5th preset interface of div tag is called (such as by the drawing interface (draw)
AppendChild) div tag is added on the page and shown.
In this renderer, any operation can not also be performed by terminating drawing interface (endDraw).
If target renderer is CanvasRenderer, it can be handled in the following manner：
Step one：The 6th of Canvas is called preset to connect by the beginning drawing interface (startDraw)
Mouth (such as canvasContext2d.save), so as to storage environment data；
Step 2：Canvas the 7th preset interface is called (such as by the drawing displacement translation interface
CanvasContext2d.translate, rotate, scale), to enter line translation to current process object；
Step 3：Canvas the 8th preset interface is called (such as by the drawing interface
CanvasContext2d.drawImage) process object is drawn；
Step 4：Interface interchange Canvas the 9th preset interface is terminated (such as by the drawing
CanvasContext2d.restore), to recover environmental data.
In a word, by the embodiment of the present application, due to that can be realized by renderer abstract base class to various specific
The unified encapsulation of renderer subclass there is provided unified calling interface, it is thereby achieved that display object with it is clear
The decoupling look between device type, in the development behavior page, can be defined aobvious by unified calling interface
Show the rendering intent of object, afterwards when specifically carrying out the displaying of the page, then the script injected in the page enters
The judgement of row browser type, and corresponding target renderer is generated according to judged result, and by the target wash with watercolours
The processing logic of each interface defined inside dye device, is specifically rendered to each display object in the page
Processing operation.It can be seen that, in this way, developer may not necessarily be concerned about specific browser type, only
The class libraries to be there is provided according to the embodiment of the present application carries out primary development, you can in various terminal equipment, various clear
Look in device and all normally rendered and shown, so as to improve development efficiency, it is to avoid for same Page-saving
Many parts of different page codes, and hence it is also possible to save the storage resource of system.
Corresponding with the dynamic page rendering intent that the embodiment of the present application is provided, the embodiment of the present application is additionally provided
A kind of dynamic page rendering device, referring to Fig. 6, the device can specifically include：
Class libraries provides unit 601, for providing class libraries, the class libraries include renderer abstract base class and
Show class；The renderer abstract base class provides multiple calling interfaces, by inheriting the renderer abstract base class
Multiple renderer subclasses, the different browser type of different renderer subclass correspondences, in renderer are provided
Inside class, according to the place that renders mode, realize each calling interface of the correspondence browser type to display object
Manage logic；The display class defines the attribute and rendering intent of all types of display objects, and the rendering intent leads to
Each calling interface for crossing the renderer abstract base class is defined, and the display class is carried out with will pass through
The mode of instantiation carries out the editor of dynamic interface；
Target renderer generation unit 602, during for showing the dynamic page in objective browser, leads to
Cross and perform the type that the script injected in the dynamic page determines the objective browser, and by correspondence
Renderer subclass instantiated, create corresponding target renderer；
Render processing unit 603, the display structure tree for traveling through the dynamic page, passes through the target
Renderer carries out rendering processing to each display object in the display structure tree.
Wherein, the calling interface is included with one or more of lower interface：Start drawing interface, draw
Displacement translation interface, drawing interface, end interface of drawing.
The renderer subclass includes the first renderer subclass suitable for first kind browser, the first kind
Browser carries out showing rendering for object based on flash, and the render processing unit includes：
Player loads subelement, for loading flash player；
Flash Element generation subelements, for calling the flash player by the beginning drawing interface
The first preset interface generation flash elements；
First conversion subelement, for setting the flash elements by the drawing displacement translation interface
Attribute, to enter line translation to current process object；
First display subelement, for calling flash player outermost layer container by the drawing interface
Second preset interface shows the currently processed object.
The renderer subclass includes the second renderer subclass suitable for Equations of The Second Kind browser, the Equations of The Second Kind
Browser carries out showing rendering for object based on div tag, and the render processing unit includes：
Div tag generates subelement, raw for calling the 3rd preset interface by the beginning drawing interface
Into div tag；
Second conversion subelement, for calling the of the div tag by the drawing displacement translation interface
Four preset interfaces, to enter line translation to current process object；
Second display subelement, for calling the 5th preset interface of div tag will by the drawing interface
Div tag, which is added on the page, to be shown.
The renderer subclass includes the 3rd renderer subclass suitable for the 3rd class browser, the 3rd class
Browser carries out showing rendering for object based on Canvas labels, and the render processing unit includes：
Environmental data storing sub-units, for calling Canvas's the 6th pre- by the beginning drawing interface
Interface is put, so as to storage environment data；
3rd conversion subelement, for calling Canvas's the 7th pre- by the drawing displacement translation interface
Interface is put, to enter line translation to current process object；
3rd display subelement, the 8th preset interface pair for calling Canvas by the drawing interface
The process object is drawn；
Environmental data recovers subelement, for terminating the 9th pre- of interface interchange Canvas by described draw
Interface is put, to recover environmental data.
Wherein, the display class includes display object class and container class, using the calling interface to display
Object class or container class carry out the definition of display mode.
The container class includes stage class, and the stage is the outermost layer container of the page, now, described device
It can also include：
Stage generation unit, the script injected for performing in the dynamic page generates the dynamic page
Stage；
Renderer injection unit, for the target renderer of the generation to be injected into the stage, to lead to
The pre-setting method for calling the stage is crossed, the operation of the display structure tree of the traversal dynamic page is performed.
When implementing, the page code of the dynamic page is to enter edlin using cross-platform language.It is described
Cross-platform language includes Javascript, and the script is Javascript scripts.
By the embodiment of the present application, due to that can be realized by renderer abstract base class to various specific renderers
The unified encapsulation of subclass is there is provided unified calling interface, it is thereby achieved that display object and browser class
Decoupling between type, in the development behavior page, can define display object by unified calling interface
Rendering intent, afterwards when specifically carrying out the displaying of the page, then the script injected in the page browsed
The judgement of device type, and corresponding target renderer is generated according to judged result, and in the target renderer
The processing logic for each interface that portion is defined, carries out specific render to each display object in the page and handles behaviour
Make.It can be seen that, in this way, developer may not necessarily be concerned about specific browser type, as long as according to
The class libraries that the embodiment of the present application is provided carries out primary development, you can in various terminal equipment, various browsers
All normally rendered and shown, so as to improve development efficiency, it is to avoid for many parts of same Page-saving not
Same page code, and hence it is also possible to save the storage resource of system.
As seen through the above description of the embodiments, those skilled in the art can be understood that this
Application can add the mode of required general hardware platform to realize by software.Understood based on such, this Shen
The part that technical scheme please substantially contributes to prior art in other words can be with the shape of software product
Formula is embodied, and the computer software product can be stored in storage medium, such as ROM/RAM, magnetic disc,
CD etc., including some instructions to cause a computer equipment (can be personal computer, server,
Or the network equipment etc.) perform method described in some parts of each embodiment of the application or embodiment.
Each embodiment in this specification is described by the way of progressive, identical phase between each embodiment
As part mutually referring to what each embodiment was stressed is the difference with other embodiment.
For system or system embodiment, because it is substantially similar to embodiment of the method, so description
Obtain fairly simple, the relevent part can refer to the partial explaination of embodiments of method.System described above and
System embodiment be only it is schematical, wherein the unit illustrated as separating component can be or
It can not be physically separate, the part shown as unit can be or may not be physical location,
A place can be located at, or can also be distributed on multiple NEs.Can be according to actual need
Some or all of module therein is selected to realize the purpose of this embodiment scheme.Ordinary skill
Personnel are without creative efforts, you can to understand and implement.
Above to dynamic page rendering intent provided herein and device, it is described in detail, herein
In apply specific case the principle and embodiment of the application be set forth, the explanation of above example
It is only intended to help and understands the present processes and its core concept；Simultaneously for the general technology of this area
Personnel, according to the thought of the application, will change in specific embodiments and applications.It is comprehensive
Upper described, this specification content should not be construed as the limitation to the application.
Claims (16)
1. a kind of dynamic page rendering intent, it is characterised in that including：
Class libraries is provided, the class libraries includes renderer abstract base class and display class；The renderer is abstract
Base class provides multiple calling interfaces, provides multiple renderer subclasses by inheriting the renderer abstract base class, no
The different browser type of same renderer subclass correspondence, inside renderer subclass, according to correspondence browser
The processing logic that renders mode, realize each calling interface of the type to display object；The display class definition
The attribute and rendering intent of all types of display objects, the rendering intent pass through the renderer abstract base class
Each calling interface is defined, and Mobile state circle is entered in the way of it will pass through and the display class is instantiated
The editor in face；
When showing the dynamic page in objective browser, by performing the pin injected in the dynamic page
The type of objective browser described in this determination, and by being instantiated to corresponding renderer subclass, create
Corresponding target renderer；
The display structure tree of the dynamic page is traveled through, by the target renderer to the display structure tree
In each display object carry out render processing.
2. according to the method described in claim 1, it is characterised in that the calling interface includes following connect
One or more of mouthful：Beginning drawing interface, drawing displacement translation interface, drawing interface, drawing terminate
Interface.
3. method according to claim 2, it is characterised in that the renderer subclass includes being applicable
In the first renderer subclass of first kind browser, the first kind browser is based on flash and carries out display pair
Rendering for elephant, it is described that each display object in the display structure tree is carried out by the target renderer
Processing is rendered, including：
Load flash player；
The the first preset interface for calling the flash player by the beginning drawing interface generates flash
Element；
The flash attributes of an element are set by the drawing displacement translation interface, so as to current place
Reason object enters line translation；
The the second preset interface for calling flash player outermost layer container by the drawing interface shows institute
State currently processed object.
4. method according to claim 2, it is characterised in that the renderer subclass includes being applicable
In the second renderer subclass of Equations of The Second Kind browser, the Equations of The Second Kind browser is shown based on div tag
Rendering for object, it is described that each display object in the display structure tree is entered by the target renderer
Row renders processing, including：
3rd preset interface is called by the beginning drawing interface, div tag is generated；
The 4th preset interface of the div tag is called by the drawing displacement translation interface, so as to working as
Preceding process object enters line translation；
Div tag is added on the page by the 5th preset interface for calling div tag by the drawing interface
Shown.
5. method according to claim 2, it is characterised in that the renderer subclass includes being applicable
In the 3rd renderer subclass of the 3rd class browser, the 3rd class browser is carried out based on Canvas labels
Display object is rendered, it is described by the target renderer to each display pair in the display structure tree
As carrying out rendering processing, including：
Canvas the 6th preset interface is called by the beginning drawing interface, so as to storage environment data；
Canvas the 7th preset interface is called by the drawing displacement translation interface, so as to current
Deal with objects into line translation；
The 8th preset interface for calling Canvas by the drawing interface is drawn to the process object；
Interface interchange Canvas the 9th preset interface is terminated by described draw, to recover environmental data.
6. the method according to any one of claim 1 to 5, it is characterised in that the display class bag
Display object class and container class are included, display object class or container class are shown using the calling interface
Show the definition of mode.
7. method according to claim 6, it is characterised in that the container class includes stage class,
The stage is the outermost layer container of the page, and methods described also includes：
Perform the stage that the script injected in the dynamic page generates the dynamic page；
The target renderer of the generation is injected into the stage, the preset of the stage is called will pass through
Method, performs the operation of the display structure tree of the traversal dynamic page.
8. the method according to any one of claim 1 to 5, it is characterised in that the dynamic page
Page code to enter edlin using cross-platform language.
9. method according to claim 8, it is characterised in that the cross-platform language includes
Javascript, the script is Javascript scripts.
10. a kind of dynamic page rendering device, it is characterised in that including：
Class libraries provides unit, and for providing class libraries, the class libraries includes renderer abstract base class and display
Class；The renderer abstract base class provides multiple calling interfaces, is provided by inheriting the renderer abstract base class
Multiple renderer subclasses, the different browser type of different renderer subclass correspondences, in renderer subclass
Portion, renders mode to display object according to correspondence browser type, realizes that the processing of each calling interface is patrolled
Volume；The display class defines the attribute and rendering intent of all types of display objects, and the rendering intent passes through institute
Each calling interface for stating renderer abstract base class is defined, and example is carried out to the display class will pass through
The mode of change carries out the editor of dynamic interface；
Target renderer generation unit, during for showing the dynamic page in objective browser, by holding
The script injected in the row dynamic page determines the type of the objective browser, and by corresponding wash with watercolours
Dye device subclass is instantiated, and creates corresponding target renderer；
Render processing unit, the display structure tree for traveling through the dynamic page, is rendered by the target
Device carries out rendering processing to each display object in the display structure tree.
11. device according to claim 10, it is characterised in that the calling interface includes following
One or more of interface：Start drawing interface, drawing displacement translation interface, drawing interface, knot of drawing
Beam interface.
12. device according to claim 11, it is characterised in that the renderer subclass includes suitable
For the first renderer subclass of first kind browser, the first kind browser is shown based on flash
Object is rendered, and the render processing unit includes：
Player loads subelement, for loading flash player；
Flash Element generation subelements, for calling the flash to play by the beginning drawing interface
First preset interface generation flash elements of device；
First conversion subelement, for setting the flash elements by the drawing displacement translation interface
Attribute, to enter line translation to current process object；
First display subelement, for calling flash player outermost layer container by the drawing interface
Second preset interface shows the currently processed object.
13. device according to claim 11, it is characterised in that the renderer subclass includes suitable
For the second renderer subclass of Equations of The Second Kind browser, the Equations of The Second Kind browser is shown based on div tag
Show rendering for object, the render processing unit includes：
Div tag generates subelement, raw for calling the 3rd preset interface by the beginning drawing interface
Into div tag；
Second conversion subelement, for calling the of the div tag by the drawing displacement translation interface
Four preset interfaces, to enter line translation to current process object；
Second display subelement, for calling the 5th preset interface of div tag will by the drawing interface
Div tag, which is added on the page, to be shown.
14. device according to claim 11, it is characterised in that the renderer subclass includes suitable
For the 3rd renderer subclass of the 3rd class browser, the 3rd class browser is entered based on Canvas labels
Row shows rendering for object, and the render processing unit includes：
Environmental data storing sub-units, for calling Canvas's the 6th pre- by the beginning drawing interface
Interface is put, so as to storage environment data；
3rd conversion subelement, for calling Canvas's the 7th pre- by the drawing displacement translation interface
Interface is put, to enter line translation to current process object；
3rd display subelement, the 8th preset interface pair for calling Canvas by the drawing interface
The process object is drawn；
Environmental data recovers subelement, for terminating the 9th pre- of interface interchange Canvas by described draw
Interface is put, to recover environmental data.
15. the device according to any one of claim 10 to 14, it is characterised in that the display class
Including display object class and container class, display object class or container class are carried out using the calling interface
The definition of display mode.
16. device according to claim 15, it is characterised in that the container class includes stage class,
The stage is the outermost layer container of the page, and described device also includes：
Stage generation unit, the script injected for performing in the dynamic page generates the dynamic page
Stage；
Renderer injection unit, for the target renderer of the generation to be injected into the stage, to lead to
The pre-setting method for calling the stage is crossed, the operation of the display structure tree of the traversal dynamic page is performed.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610041871.7A CN106991096B (en) | 2016-01-21 | 2016-01-21 | Dynamic page rendering method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610041871.7A CN106991096B (en) | 2016-01-21 | 2016-01-21 | Dynamic page rendering method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106991096A true CN106991096A (en) | 2017-07-28 |
| CN106991096B CN106991096B (en) | 2021-03-02 |
Family
ID=59413529
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610041871.7A Active CN106991096B (en) | 2016-01-21 | 2016-01-21 | Dynamic page rendering method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106991096B (en) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107479882A (en) * | 2017-08-04 | 2017-12-15 | 泰康保险集团股份有限公司 | Insure generation method, generating means, medium and the electronic equipment of the page |
| CN108984714A (en) * | 2018-07-09 | 2018-12-11 | 北京三快在线科技有限公司 | Page rendering method, apparatus, electronic equipment and computer-readable medium |
| CN109325195A (en) * | 2018-07-23 | 2019-02-12 | 招银云创（深圳）信息技术有限公司 | Rendering method and system, computer equipment, the computer storage medium of browser |
| WO2019071830A1 (en) * | 2017-10-10 | 2019-04-18 | 武汉斗鱼网络科技有限公司 | Flash and js page efficient rendering communication method, storage medium, device, and system |
| CN110020349A (en) * | 2017-09-26 | 2019-07-16 | 北京京东尚科信息技术有限公司 | The method and device of page rendering |
| CN110096277A (en) * | 2019-03-19 | 2019-08-06 | 北京三快在线科技有限公司 | A kind of dynamic page methods of exhibiting, device, electronic equipment and storage medium |
| CN110162354A (en) * | 2018-02-13 | 2019-08-23 | 北京嘀嘀无限科技发展有限公司 | Method, system and computer equipment for configuring and displaying components |
| CN111475161A (en) * | 2019-01-24 | 2020-07-31 | 华为技术有限公司 | Method, device and equipment for accessing component |
| CN112882711A (en) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | Rendering method, device, equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102737128A (en) * | 2012-06-20 | 2012-10-17 | 深圳市远行科技有限公司 | Dynamic webpage processing method and device based on browser |
| CN103295258A (en) * | 2013-04-18 | 2013-09-11 | 于连庆 | Novel multifunctional atmospheric science data graphic rendering engine |
| CN103399866A (en) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | Webpage rendering method, device and equipment |
| CN103513987A (en) * | 2013-09-18 | 2014-01-15 | 小米科技有限责任公司 | Rendering treatment method, device and terminal device for browser web page |
| US20150095763A1 (en) * | 2009-07-17 | 2015-04-02 | Ebay Inc. | Browser emulator system |
-
2016
- 2016-01-21 CN CN201610041871.7A patent/CN106991096B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150095763A1 (en) * | 2009-07-17 | 2015-04-02 | Ebay Inc. | Browser emulator system |
| CN102737128A (en) * | 2012-06-20 | 2012-10-17 | 深圳市远行科技有限公司 | Dynamic webpage processing method and device based on browser |
| CN103295258A (en) * | 2013-04-18 | 2013-09-11 | 于连庆 | Novel multifunctional atmospheric science data graphic rendering engine |
| CN103399866A (en) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | Webpage rendering method, device and equipment |
| CN103513987A (en) * | 2013-09-18 | 2014-01-15 | 小米科技有限责任公司 | Rendering treatment method, device and terminal device for browser web page |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107479882A (en) * | 2017-08-04 | 2017-12-15 | 泰康保险集团股份有限公司 | Insure generation method, generating means, medium and the electronic equipment of the page |
| CN110020349A (en) * | 2017-09-26 | 2019-07-16 | 北京京东尚科信息技术有限公司 | The method and device of page rendering |
| CN110020349B (en) * | 2017-09-26 | 2021-09-03 | 北京京东尚科信息技术有限公司 | Page rendering method and device |
| WO2019071830A1 (en) * | 2017-10-10 | 2019-04-18 | 武汉斗鱼网络科技有限公司 | Flash and js page efficient rendering communication method, storage medium, device, and system |
| CN110162354A (en) * | 2018-02-13 | 2019-08-23 | 北京嘀嘀无限科技发展有限公司 | Method, system and computer equipment for configuring and displaying components |
| CN110162354B (en) * | 2018-02-13 | 2022-05-13 | 北京嘀嘀无限科技发展有限公司 | Method, system and computer equipment for configuring and displaying components |
| CN108984714A (en) * | 2018-07-09 | 2018-12-11 | 北京三快在线科技有限公司 | Page rendering method, apparatus, electronic equipment and computer-readable medium |
| CN109325195A (en) * | 2018-07-23 | 2019-02-12 | 招银云创（深圳）信息技术有限公司 | Rendering method and system, computer equipment, the computer storage medium of browser |
| CN111475161A (en) * | 2019-01-24 | 2020-07-31 | 华为技术有限公司 | Method, device and equipment for accessing component |
| CN111475161B (en) * | 2019-01-24 | 2021-10-22 | 华为技术有限公司 | Method, device and equipment for accessing component |
| CN110096277A (en) * | 2019-03-19 | 2019-08-06 | 北京三快在线科技有限公司 | A kind of dynamic page methods of exhibiting, device, electronic equipment and storage medium |
| CN112882711A (en) * | 2021-03-10 | 2021-06-01 | 百度在线网络技术（北京）有限公司 | Rendering method, device, equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106991096B (en) | 2021-03-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106991096A (en) | Dynamic page rendering intent and device | |
| EP2174295B1 (en) | Data system and method | |
| US8887132B1 (en) | Application runtime environment and framework | |
| US20080303827A1 (en) | Methods and Systems for Animating Displayed Representations of Data Items | |
| CN109634603B (en) | Method and device for making H5 page based on Canvas | |
| CN110489116A (en) | A kind of rendering method of the page, device and computer storage medium | |
| CN105096368B (en) | Three dimensional object processing method and relevant apparatus | |
| CN111221530B (en) | Mobile terminal Web application interface construction method, web application interface and operation method thereof | |
| US11397608B2 (en) | Multi-dimensional spreadsheet system enabling stack based programming using a virtual machine | |
| CN105869199A (en) | Apparatus and method for processing animation | |
| CN111324381B (en) | Development system, development method, development apparatus, computer device, and storage medium | |
| Paul et al. | React Native for Mobile Development | |
| CN111367514A (en) | Page card development method and device, computing device and storage medium | |
| CN109478202A (en) | Scalable vector graphics packet | |
| CN112732252A (en) | Method and device for dynamically generating UI (user interface) and electronic equipment | |
| CN116010736A (en) | Vector icon processing method, device, equipment and storage medium | |
| CN113419806B (en) | Image processing method, device, computer equipment and storage medium | |
| CN114924712A (en) | AUI modularization realization method and system based on domain controller platform | |
| Morris | Hands-On Android UI Development: Design and develop attractive user interfaces for Android applications | |
| CN101706651A (en) | Method for representing industrial monitoring graph based on SVG | |
| Solis | Illustrated WPF | |
| CN108897537A (en) | Document display method, computer-readable medium and a kind of computer | |
| WO2023093327A1 (en) | Target program testing method and apparatus, and device and storage medium | |
| CN116595284B (en) | Webpage system operation method, device, equipment, storage medium and program | |
| CN108228182A (en) | A kind of page assembling of Component- Based Development and operation method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |