JavaScript framework--Introduction to xmlplus-JS Tutorial-php.cn

JavaScript framework--Introduction to xmlplus

零下一度

Release： 2017-05-04 10:20:29

Original

1434 people have browsed it

xmlplus Introduction

xmlplus is a very unique design JavaScript framework, used for rapid development of front-end and back-end projects.

Based on component design

In xmlplus, components are the basic building blocks. An important criterion for evaluating the quality of component design is the degree of packaging. Components designed based on xmlplus have a very high degree of encapsulation. The following is a simple component example:

Widget: {
    css: "#widget{ color: red; }",
    xml: `<h1 id=&#39;widget&#39;>default</h1>`,
    fun: function (sys, items, opts) {
        sys.widget.text("hello, world"); 
    }}

Copy after login

Note that the styles, XML documents and functions items contained in this component are only valid for this component, and are completely invisible to other components. This way of writing components changes the traditional application writing model of placing CSS, JS, and HTML in different files, but it makes you more comfortable when building applications.

Components are organized by namespaces . The component reference method based on the traditional directory path makes the use of components more convenient. Assuming that you have defined a Calendar component located in the namespace //ui, then you can use it in the HTML page like this:

<Calendar xmlns="//ui"/>

Copy after login

As for how to define the component , please refer to the official documentation www.xmlplus.cn/docs.

Friendly compatibility

The non-intrusive design allows xmlplus to be integrated with almost all frameworks or libraries today.

Using xmlplus's excellent integration capabilities, you can integrate existing libraries or frameworks into your project to avoid falling into the dilemma of reinventing the wheel.

The following is an example of a package Bootstrap Button component:

Button: {
    xml: `<button type=&#39;button&#39; class=&#39;btn&#39;/>`,
    fun: function (sys, items, opts) {
        this.addClass("btn-" + opts.type);
    }}

Copy after login

After this package, you can very concisely like the following Use it:

<Button type=&#39;default&#39;>Default</Button><Button type=&#39;primary&#39;>Primary</Button><Button type=&#39;success&#39;>Success</Button>

Copy after login

Learn once, use multiple terminals

xmlplus's unique design allows it to design browser-based and server-based applications in the same way.

On the browser side, you can use it to develop single-page applications efficiently. On the server side, you can use it to develop service applications and traditional websites.

The following is an encapsulation of a simple Sqlite component on the server side.

Sqlite: {
    fun: function (sys, items, opts) {
        var sqlite = require("sqlite3").verbose(),
        return new sqlite.Database("data.db");
    }}

Copy after login

You can use the Sqlite component defined above as follows:

Example: {
    xml: `<Sqlite id=&#39;sqlite&#39;/>`,
    fun: function (sys, items, opts) {
        let stmt = "SELECT * FROM users";
        items.sqlite.all(stmt, (err, rows) => console.log(rows));
    }}

Copy after login

This framework supports direct serialization and output of HTML code in the background, so it is extremely convenient to use xmlplus to develop traditional websites. . The following example simply demonstrates this:

HttpServer: {
    xml: `<html>              <body id=&#39;body&#39;>default</body>          </html>`
    fun: function (sys, items, opts) {
        let http = require("http");
        http.createServer((req, res) => { 
            sys.body.text("hello,world");
            res.setHeader("Content-Type", "text/html");
            res.end(this.serialize(true)); 
        }).listen(80); 
    }}

Copy after login

Through the example, you can find that after the processing service accepts the request, the XML document structure can be dynamically changed. This makes the traditional website development method of xmlplus different from PHP, # Scripting languages such as ##JSP are very different.

In addition, the basic features such as retrieval, communication, sharing and delayed instantiation contained in xmlplus are also unique to it, and they can assist application development extremely efficiently.

The above is the detailed content of JavaScript framework--Introduction to xmlplus. For more information, please follow other related articles on the PHP Chinese website!