"Share" the right way to open WeX5 (2)

My previous article introduced the basic page layout and interactive event writing in WeX5, someone private message I why the source of JS to write like that, the structure of HTML source code and so on. That today to summarize the source structure of Hello World, Insight Limited, there are questions welcome to continue to private messages I, study together, progress together.

HTML section

In the case of the previous Hello World, we created a page style layout by creating a new W file, and there may be classmates wondering: Why didn't you see the HTML file? Where is the final HTML file? And the structure of the W file is different from our common page structure ah, the regular

The first thing to be clear is: W file is just a page fragment, in layman's words is a small piece of HTML code. When actually running, for example debugging, WEX5 will load the page fragment and the corresponding resources into a page frame, so as to get the final full page display effect. That is, a lot of W files can be loaded into a page, such as the official takeaway case, map positioning is made into a W file, and then call it when needed, which is called on-demand loading.

650) this.width=650; "Src=" Http://s4.51cto.com/wyfs02/M02/83/0F/wKiom1dp_4WAHefgAAAfP1MQnw0786.jpg-wh_500x0-wm_3 -wmp_4-s_1353419792.jpg "style=" Float:none; "title=" 1-1.jpg "alt=" Wkiom1dp_4wahefgaaafp1mqnw0786.jpg-wh_50 "/>

How to get a complete page? This needs to be compiled and can be referenced in the WEX5 official Hello World Tutorial for compilation and deployment. In a nutshell, create a new local app in the native directory, specify a W file for the home page Hello World, and then do "compile the UI resources used." After compiling, there will be a index.html file in the WWW directory, which is the HTML file for the entire page.

First look at the W file source in Hello World (click the source tag in the lower left corner of the editor):

650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M00/83/0E/wKioL1dp_4WynEsmAACEzlAX57Y531.jpg-wh_500x0-wm_3 -wmp_4-s_1883744914.jpg "title=" 2-1.jpg "style=" Float:none; "alt=" Wkiol1dp_4wynesmaacezlax57y531.jpg-wh_50 "/>

From top to bottom are window components, model components, output components, and button components. The window component is the container for the entire W file, and the output component and the button component are all we add up to understand. But how could there be a model component? Did you see this model component on the generated page? What is this for?

In the page application, we need to do a lot of data processing in addition to the UI and human-computer interaction. In a simple application, we embed the data directly into the JS variable. But with the complexity of the data, this approach is more difficult to manage. WeX5 's approach is to separate the data into a separate database component, each of which manages the data, and the larger application will have a more than a few data components, so a container is needed to accept the data component, which is the model component.

Note: The previous article also introduces the model object in JS source code, in fact, the two model means that the meaning is the same, all the resources representing the page fragment (including variables, DOM nodes, etc.). Of course, the curious classmate can try to delete it but found no impact, here to understand the HTML source model is a map of the whole model, JS model is the source.

Take a look at the full HTML file, because WeX5 uses the on-demand loading mechanism, so you have to go to the browser to open to see a truly full page page OH:

650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M01/83/0F/wKiom1dp_4bBF7OFAAEJERlxNpE536.jpg-wh_500x0-wm_3 -wmp_4-s_47501447.jpg "title=" 3-1.jpg "style=" Float:none; "alt=" Wkiom1dp_4bbf7ofaaejerlxnpe536.jpg-wh_50 "/>

The Red box section is compiled by the W file HTML cost, you can see the compiled code has added a lot of content, to avoid naming conflicts, there is the data binding relationship to convert the content, and so on. In general, we use WEX5 to do development only need to do a W file, do not need to directly write the existing HTML code.

JavaScript section

First open the JS source (click the JS tag in the bottom left corner of the editor):

650) this.width=650; "Src=" Http://s5.51cto.com/wyfs02/M00/83/0F/wKiom1dp_4bgSOQ3AABJf6dFM8s126.jpg-wh_500x0-wm_3 -wmp_4-s_2726642147.jpg "title=" 4-1.jpg "style=" Float:none; "alt=" Wkiom1dp_4bgsoq3aabjf6dfm8s126.jpg-wh_50 "/>

Familiar with the development of HTML5 app students can be seen at a glance, this is a modular format. WeX5 used in the AMD specification of the REQUIREJS implementation of modular development, each W file automatically configured with the same name of the JS file, when the page load automatically loaded the corresponding JS file. JS file All the JS code is wrapped in a define statement inside, at the same time, the internal definition of a model object and the final output of the model object. In fact, the idea here is also very simple, that is, all the W file-related JS code into the define hidden, to avoid pollution of global variables (this is also said), at the same time through the model object to the outside world exposed to the corresponding interface, so that the outside world can be operated through these interfaces internally. In addition, the 12th line defines the variable as the introduction of jquery and Justep framework, as usual with jquery, if you want to introduce other modules can also be used in the same way. Of course, you can also write define ([reference Module 1, reference Module 2], function (module 1 parameter, Module 2 parameter) {execute code}), use this notation to note that each parameter corresponds to the module, otherwise it will be wrong.

Having said so much, what should we write about our code?

Information that needs to be exposed is written to var model = function () {}; The recommended method for external exposure is written in the Model prototype (Model.prototype. Your method =function () {};), Other hidden information can be written directly into the define. Like what:

650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M01/83/0E/wKioL1dp_4awdvsiAABOD7Bx8v0785.jpg-wh_500x0-wm_3 -wmp_4-s_131628768.jpg "title=" 5-1.jpg "style=" Float:none; "alt=" Wkiol1dp_4awdvsiaabod7bx8v0785.jpg-wh_50 "/>

Variables A, B, and function add are not in the model, which means that the information is inaccessible to the outside world, thus enabling encapsulation within the module. For more on the front-end modular development, you can take a look at Ruan Feng's blog: JavaScript modular programming.

Another point: variables that are directly bound in the design editor are under model. For example, if you add an input and then set Bind-value to MyValue, the myvalue variable is under model and can be accessed by myvalue.

650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M01/83/0F/wKiom1dp_4exMVZhAAB4eZHD5bQ970.jpg-wh_500x0-wm_3 -wmp_4-s_3291823605.jpg "title=" 6-1.jpg "style=" Float:none; "alt=" Wkiom1dp_4exmvzhaab4ezhd5bq970.jpg-wh_50 "/>

Summary : Model is the external interface of the JS module, W page and the same name JS file connection through the binding mechanism to achieve.

CSS Section

When you see the HTML source, you should also find that the style that is set by the visual editor is inline. A lot of people first reaction is the inline style is not good, but not where? What are the benefits of outreach?

Inline style because it is directly written in HTML, the performance and structure of the heavy coupling, not conducive to management and change, and some of the reusable styles are written directly into the inline style, so the reuse of the style is poor. But inline also has a great advantage: one is fast, because do not need to find CSS files and positioning style, so the execution speed is the fastest, the second is to reduce the HTTP request, independent CSS files need to open an additional HTTP request to obtain, and HTTP request is the most important bottleneck of performance optimization. The benefits of the outreach style have been said too much on the Internet, you can quickly batch change the style without changing the structure, the reuse of the style is good and so on.

So, children want $ Good or bad, adults only see the pros and cons. The use of the WeX5 style is also loaded on demand and is written in the same way as normal HTML5 app development. The official recommendation is also to use an outreach style to reduce later maintenance costs. You can go directly to the CSS Editor by clicking on the CSS tab in the bottom left corner of the editor. There are two ways to write visual editing (click Add button) and direct keyboard input:

650) this.width=650; "Src=" Http://s2.51cto.com/wyfs02/M02/83/0E/wKioL1dp_4fhYjrxAABUwymdNfY395.jpg-wh_500x0-wm_3 -wmp_4-s_155876907.jpg "title=" 7.jpg "style=" Float:none; alt= "Wkiol1dp_4fhyjrxaabuwymdnfy395.jpg-wh_50"/>

It is strongly recommended that you use the keyboard for direct input, and that the styles generated using visual editing are rather bloated. After writing the save, the system will generate a CSS file with the same name as the W file, loading the W file will load JS and CSS files with the same name, and implement on-demand loading.

Summarize

The introduction of WeX5 Hello World is here. Through the Hello World case, we understand the component visual layout, style settings, interactive event Writing these three most basic operations, corresponding to the HTML, CSS, JS three parts. In fact, any kind of front-end tools, frameworks, libraries are based on these three parts of the collection, with these foundations after the rest of the knowledge point is better to understand how to get started.

"Share" the right way to open WeX5 (2)