Home > Article > Web Front-end > JavaScript framework--Introduction to xmlplus

JavaScript framework--Introduction to xmlplus

零下一度Original: 2017-05-04 10:20:291403browse

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"); 
    }}

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"/>

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);
    }}

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>

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");
    }}

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));
    }}

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); 
    }}

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Tutorial on how to implement fuzzy query on MongoDB using jsNext article：Tutorial on how to implement fuzzy query on MongoDB using js

See more

JavaScript framework--Introduction to xmlplus

xmlplus Introduction

Based on component design

Friendly compatibility

Learn once, use multiple terminals

Related articles