Famous framework Series 1: famous/core/Surface, famoussurface

Famous framework Series 1: famous/core/Surface, famoussurface
Famous/core/Surface

Since it is the first article of Famous, first give a Famous advertisement: http://periodic.famo.us Famous12 years of work, click in the lower right corner of the Fun things to do can see the operation instructions.

I think the most important part of the Famous framework is the Surface.

Surface is the root of all the elements that can be displayed. It is responsible for generating DOM output for visible elements (currently only DOM is supported. The WEBGL version is in their lab and there are gorgeous videos available, step: https://famo.us/blog ). If you want to write an article about Famous and are afraid that you will not be able to stick to it, let's pick the most important one.

Surface is a virtual DIV, and the real DIV is a property of Surface. _ currentTarget. Surface creates a DIV to display the content, and keeps the reference of this DIV for update.

Create a Surface:

Var surface = new Surface ({size: [100,100], classes: ['surface '], content:' I am a surface! Hello Famous! ', Properties: {backgroundColor:' # fff'}, attributes: {name: 'surfacea '}});

Let's talk about the parameters: It doesn't matter if these parameters are not added. famous will follow the default one.

Size: size (the size is critical. Because Famous is an absolute positioning-based library, the size setting has a huge impact on the program. It will be discussed with Modifier in the future, if you write this article ..)

Classes: css class, in the form of an array

Content: content. The content here is not just a few words or a sentence, but an HTML code. In my personal experience, I still use a few words most of the time .. When copying and pasting 10 cool css effects on the network, it is very useful to insert the HTML code (I will spray back the code:-D ).

Properties: used to control styles. All attributes under Object. style can be written here. Okay, that's where css is controlled.

Attributes: the place where the attribute is controlled.

It doesn't matter if you forget to write these parameters during initialization. There are methods that can be assigned values. Such as setContent and setProperties.

This is the foundation, which is often used in normal times. Next we enter the stream-of-consciousness stage, and I will talk about what I think (Fuzzy Consciousness:-D ).

The default tag generated by the Surface is DIV, but you can also generate other tags, such as <article> and <span>. You only need to set the attribute elementType for the initialized instance. From the source code, we can see that the elementType attribute of the Surface is 'div ', so if we need to modify the tag name, we only need

surface.elementType = 'span';

In this way, the tag of the surface created in the previous Code becomes span.

In addition to displaying visible content, Surface also plays an important role in receiving and processing events. Famous is a very high-level UI framework. As a framework user, it almost does not take DOM into account. The only thing that makes a connection with DOM is Surface, so DOM events are like mouse clicks, touch and so on all need to be obtained by Surface (the Engine will also obtain and process some events, only the events on the body ).

Surface-controlled dom (_ currentTarget) triggers a deploy event when deploy to the page. When you want to directly operate the dom (_ currentTarget) and struggle with this dom when it is not there (the Surface is a virtual DOM and will not generate the DOM at the first time of initialization and deploy it into the page, instead, the first Engine Tick is deployed after initialization.

Well, I just mentioned Engine Tick. Let's just explain it: Famous is similar to the game framework. It refresh 60 times every second. frames are generally called frames in the game, in Famous, I don't know whether this combination is appropriate. It's better to say "Engine Tick" in English.

Surface has a family. The current members include (except Surface ):

CanvasSurface: used to generate <canvas>. You don't need to talk about it. Well, let's just show it all.

ImageSurface:

InputSurface: <input>

SubmitInputSurface: <input type = "submit">

TextareaSurface: <textarea>

VideoSurface: <video>

ContainerSurface: This is neither worth mentioning nor worth mentioning (annoying:-D). It is also a <div>. The difference is that you can add other elements to it to be displayed, for example, if you add a Surface and two ImageSurface to it, you can see that the name serves as a container. The container itself is a <div> that can directly write content.

FormContainerSurface: <form> Version of the above container

During Surface initialization, all css parameters of the Surface can be easily identified. Although Famous also supports css class configuration for the Surface, many times, it is easier to directly write one or two attributes. Especially for mobile terminals, less css is used and style parameters are fully written into the code, which can reduce server requests. Another advantage of writing parameters into the code is to facilitate the dynamic adjustment of the program. For example, when adapting to the screen, fontSize can be adjusted in pixels Based on the screen size.

By default, Surface comes with a css class: famous-surface.

This css class bears the brunt of position: absolute. The entire Famous framework is based on absolute positioning. I personally feel that Famous is more like a game framework in many places. Through absolute positioning, we can effectively reduce the complexity of the dom tree and build our own rendering tree to improve performance. The gorgeous animation starts from here. (Physical engine, easing function)

In the constructor, the identifiers are _ sizeDirty and _ contentDirty. when updating the Surface, try to use the various set methods provided .. It's also common sense .. Nothing to say. Every Tick checks whether the current size, content, and so on are dirty. If yes, it is updated.

Surface.prototype.setup = function setup(allocator) {        var target = allocator.allocate(this.elementType);

Famous comes with a DOM object pool. Every time a new object is generated, it will look for available DOM nodes not in the tree from the pool.

The surface will be recycled.

this.detach(target);this._currentTarget = null;allocator.deallocate(target);

Built-in EventHandler.

this._eventOutput = new EventHandler();this._eventOutput.bindThis(this);

You can listen to browser events (on), throw custom events (emit), and push your own events (pipe) to other event recipients ).

Surface. on ('click', function (event) {// listens to the browser's click event console. log (event); surface. emit ('onclick'); // throw an onClick event });

Well, there's nothing to say about Surface.