Mobile first! Wijmo 5 Architecture

Source: Internet
Author: User

Mobile first! The jquery UI component set wijmo's five-year maximum update has aroused great attention of developers.

This article describes the architecture of one of the developers' concerns.

650) This. width = 650; "width =" 244 "Height =" 156 "Title =" wijmo_javascript [3] "style =" border-width: 0px; padding-top: 0px; padding-Right: 0px; padding-left: 0px; Background-image: none; "alt =" wijmo_javascript [3] "src =" http://image.mamicode.com/info/201410/20180926133626193376.png "border =" 0 "/>

Wijmo 5 is a set of JavaScript controls, but it should not be confused with widgets. Before wijmo was developed, we were able to build wijmo with frameworks like jquery UI and jquery mobile widget, while also saving time for us to build the Web framework wijmo.

However, when we want to build a more modern wijmo 5, we think it is time to review JavaScript UI components, especially syntax and API interfaces. After a lot of research and discussion, we use & ldquo; real JavaScript controls (true JavaScript controls) & rdquo;, as you are in.. net uses similar properties, methods, events, and other APIs. Similarly, JavaScript UI components use almost identical methods.

At the same time, we chose ie9 as the benchmark version supported by wijmo 5 browser, because ie9 supports the ecmascript 5 syntax, which is critical to our wijmo 5 architecture, thus, a new wijmo 5 architecture was created.

Ecmascript 5 controls

Our wijmo 5 framework uses ecmascript 5 directly. Our source code uses typescript, which makes development very easy. For example, a base control class is created using this class. All controls are derived from this base class.

Javascript controls are case-sensitive like similar objects. They also provide constructors for initialization and attributes, methods, and events.

For example, the FlexGrid Control can be initialized using the following method:

// Initialize the FlexGrid instance object to a DOM element var myflexgrid = new wijmo. Grid. FlexGrid ('# flexgrid1 ');

 

Attribute

In our es 5 control, we useObject. defineproperty (). This method makes it as convenient as using the. Net Control in Js. This method allows us to define the getters and setters interfaces of attributes. Therefore, we can directly call attributes according to the logic of writing. Net code, which is very convenient.

It is very convenient to set the properties of the control. You can assign values directly without using function calls.

// Set FlexGrid to editable myflexgrid. isreadonly = false;

Similarly, you can assign values to events and check whether attributes have values. If the IDE only supports sensing (for example, vs 2013), you can assign values to control attributes through the automatic completion function of intelligent sensing. Smart sensing is very convenient for using controls and can improve work efficiency.

For convenience, enums is also provided)

// Set selection modemyflexgrid. selectionmode = wijmo. Grid. selectionmode. cellrange for FlexGrid;

Properties can also be obtained through standard JS objects. For example, you can obtain the get property interface of the control using the following methods:

// Check whether FlexGrid can edit var readonly = myflexgrid. isreadonly;

If you are familiar with. Net syntax programming, you will be very familiar with these attribute methods. If you are proficient in JS programming, you will also like this beautiful API interface.

The following is a syntax for assigning values to wijmo grid widgets:

// Wijmo's grid widget allows you to edit $ ('# wijmogrid1'). wijgrid ('option', 'allowediting ', true );

This syntax can be called & ldquo; string Programming & rdquo;. It depends on the Case sensitivity of the string to set the attribute value. If an error is set, no error is reported, which is very troublesome for development and debugging.

Method

The methods in wijmo 5 are very convenient to use. You can directly call the corresponding methods of the control through the control, and debugging is more convenient.

// Refresh the FlexGrid Control to cause relayout and redrawmyflexgrid. Refresh ();

Compare the calling and refresh methods of JS Widgets

// Refresh wijmo grid widget $ ('# wijmogrid1'). wijgrid ('dorefresh ');

Similar to the preceding attributes, the method is called Based on string case sensitivity. debugging errors are very troublesome.

Event

The events in the wijmo 5 control can be used to subscribe to and unsubscribe to events through addhandler and removehandler, just like in the. NET control.

// FlexGrid cell editing completion event myflexgrid. celleditended. addhandler (function (sender, argS) {// do something });

Syntax of the corresponding JS widget subscription event:

// Subscribe to the wijmo cell editing completion event $ ('# wijmogrid1'). BIND ('wijgridaftercelledit ', function (E, argS) {// do something });

 

Controls vs. Widgets

In conclusion, the following table compares wijmo 5 control and JS widgets.

Wijmo 5 controls

JS Widgets

The typescript class provides class JavaScript Constructor

Functions interface, by setting JavaScript Object Attributes

Ecmascript 5: attributes include the getters and setters interfaces.

Use the attributes of & ldquo; Options & rdquo; by setting sub-Parameters

Set attribute values directly

Assign values to attributes by calling Functions

Call method through the instance of the control

Call a method by passing the function name string

Subscribe by calling addhandler In the event

Subscribe to an event by using bind () and passing the widget name + even name as a string

Ides provides SMART awareness (dependent on IDE)

Non-strong type, no smart sensing

Design-time syntax Detection

No syntax Detection

Running error prompt

Few error messages during running

 

Architect interview: wijmo 5 CTO: from web to mobile, my 25-year programming career

This article from the "grape city control technical team blog" blog, please be sure to keep this source http://powertoolsteam.blog.51cto.com/2369428/1566685

Mobile first! Wijmo 5 Architecture

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.