Xmlplus is a JavaScript framework,It can not only run on the browser-side, but also on the server-side. For more information, see https://xmlplus.cn.
If having installed the NPM client, you can install xmlplus with NPM.
$ npm install xmlplus
The following is the basic organizational structure of the project:
xmlplus/ ├── xmlplus.js ├── patch/ ├── docs/ └── example/ ├── getting-started/ ├── docs/ ├── components/ └── api/
Here, the xmlplus.js is the source file. Two patch files under the patch/ are for IE9+. The docs/ and the example/ under the xmlplus/ contain subfolders with the same name. The docs/ contains document files and the example/ contains the corresponding sample code.
Xmlplus is a framework that can not only run on browser-side but also on server-side. Here we'll give two sets of basic templates for different environments.
The following is the JavaScript template we fist give to run directly on the server-side. You can modify or extend the functionality based on this. The template is very simple. After installing the xmlplus software package, you just need to create a file containing following content.
// 02-01 xmlplus("xp", function (xp, $_, t) { $_().imports({ Index: { fun: function (sys, items, opts) { console.log("hello, world"); } } }); }).startup("//xp/Index");
Having created a file containing the above content, you can execute node index to run the above template example.
In addition, please note that a comment line at the beginning of the sample. The line indicate that the current sample code is located at /example/docs/02-templete/01/. The 02 here is the chapter order and the 01 is the name of the folder containing the sample.
On the browser-side, you need to prepare three files. The first is the xmlplus.js. The second you need to create is a file named index.js containing following content.
// 02-02 xmlplus("xp", function (xp, $_, t) { $_().imports({ Index: { css: "#text { color: red; }", xml: "<h1 id='text'>hello, world</h1>", fun: function (sys, items, opts) { sys.text.css("font-size", "28px"); } } }); });
At last, you need a HTML file containing following content. Here, we name the file as index.html.
<!-- 02-02 --> <!DOCTYPE html> <html> <head> <script src="xmlplus.js"></script> <script src="index.js"></script> </head> <body> <i:Index xmlns:i="//xp"></i:Index> </body> </html>
Ensure that the above three files are in the same folder. If opening the index.html with a browser, you should be able to see the red hello, world.