Marko—简化web开发的UI库(1)

2018-12-08  本文已影响0人  看啥都点赞的Nori

简介

Marko是github上面一款上手快速且高效的UI库,它将Html和JS整合起来,使构建webAPP变得更加快速简洁。

使用起来非常简单,并且在Atom上可以下载他的插件,便于使用者快速开发自己的项目。

Marko 具有以下特性:

● 简单:只要了解 HTML、CSS 和 Java,你就会用 Marko ;

● 快速:通过流传输和微型(〜10kb gzip)运行时让加载更快

● 创新:从简单的 HTML 模板到强大的 UI 组件

● 安全:正在为 eBay.com 等高流量网站提供支持

Github地址:GitHub - marko-js/marko: A friendly (and fast!) UI library from eBay that makes building web apps fun

官网:Marko

官方文档:Introduction | Marko

使用方式

    试试Marko

      如果你仅仅只是想在浏览器感受一下Marko的好玩之处,可以直接点击Try online | Marko在浏览器中开发Marko应用程序。

    安装

      如果你想直接使用Marko创建你的应用,可以使用如下两种方式安装Marko:

      npm

      npm install marko --save

      yarn:

      yarn add marko

    从零开始创建Marko项目

      使用marko-cli快速创建一个新的应用项目,具体命令如下:

摘自marko文档

       直接用浏览器运行项目

       一开始当然是最熟悉的hello world简例,这个例子将在浏览器上渲染出一个简单视图:hello marko。

       首先,在hello.marko文件上敲下一行类似于Html文件格式代码:

摘自marko文档

         其次,创建一个client.js文件,将需要展示的参数渲染到body中:

摘自marko文档

          最后,创建一个基础的index.Html文件,用于显示我们程序的结果:

摘自marko文档

          现在,我们需要将这些文件打包,以便在浏览器中使用,打包的工具是lasso,安装命令如下:

摘自marko文档

          安装之后,打包这些文件:

这会将client.js文件加入新创建的static/文件目录,同时,也会加入我们Html页面中的<script>标签中用于加载我们的程序在浏览器中呈现。如果项目中拥有CSS文件,那么<link>标签也会被添加进html中。

           使用浏览器加载页面,你就能看到Hello Maeko啦。

           脱离浏览器运行程序

                Marko中require的用法

                Marko提供一个Node.js的require惯例扩展,允许你像标准JavaScript模块一样require Marko视图,下面是server.js例子(hello.marko文件内容同上):

摘自marko文档

                (除了Node.js的require以外,你还可以选择使用Marko CLI:

这个命令会在原始模板旁生成一个hello.marko.js文件,生成的.js文件将由Node.js运行时加载。有一个重要的事,当需要一个Marko模板时,不要使用.marko扩展名,这样.js文件才能被正确解析。

                  如果在开发中只想使用require扩展,则可以用条件限制它:

摘自marko文档

                    用这个服务器(后端)模式完成一个上面那个例子:

                    修改之前例子中的server.js(hello.marko内容不变),用http服务器运行:

摘自marko文档

                    用Node运行这个例子:

                    node server.js

                    并将浏览器打开到http:// localhost:8080,就可以在浏览器看到Hello Marko惹!

    【感谢看到这里的你,这是我第一次翻译文档,本意是想让自己能有耐心的去看英文文档,排版什么的不太熟练。如果这篇中翻涉及到版权问题请私信我删除_(:°з」∠)_

         另外,如果有语法错误或者意思理解错误了,也请指出,留言or联系我修改。我会继续努力的(づ~3~)づ】

上一篇 下一篇

猜你喜欢

热点阅读