一个初级开发者完胜十几人团队，此处有秘诀！

最近今日头条很火，作为一名喜欢钻研的开发者，仔细研究了他们的APP，发现他们自己开发了一个RPC 框架，开发者应该很了解框架是有多么难构建。如果有一个开发好的框架摆在我面前，我会毫不犹豫的使用他，就像node.js或者imag.js.

imag.js是移动跨平台开发框架，通过JavaScript调用底层API接口结合封装好的UI模块，可以帮助开发者简单快速的开发APP。imag.js框架中的控件都是原生的，就像Label控件，在iOS上是调用系统的UILabel控件，而在Android上则是调用的TextView控件，确保开发出的APP在性能流畅上和原生APP相媲美。

下面我们来看看小孟提供的基于imag.js技术开发的新闻类APP。

这么多页面要写好多代码吧？这就讲到了imag.js的一大特点：代码量少、开发效率快！只要一个<list>控件就可以完成下图部分的布局。

附上源码瞧瞧（登录页面）

<?xml version="1.0" encoding="utf-8"?>

<imag>

    <page>

        <title style="background:#ffffff">

            <left><button role="back" style="color:#1f1f1f"/></left>

            <center><label style="color:#1f1f1f;font-size:17">手机号登陆</label></center>

        </title>

        <content style="background:#f4f5f6">

            <list type="transparent" style="margin:28 19">

                <item style="padding:1 1 0;border:1 #efefef">

                    <row>

                        <input type="text" placeholder="手机号" style="font-size:14;color:#0a0a0a;background:#ffffff;height:40"/>

                    </row>

                </item>

                <item style="padding:1;border:1 #efefef;background:#ffffff;col-width:*,1,70">

                    <col>

                        <row><input type="text" placeholder="密码" style="font-size:14;color:#0a0a0a;height:40;background:#ffffff;"/></row>

                    </col>

                    <col><row style="height:14;background:#efefef"></row></col>

                    <col><row><label style="font-size:14;color:#8c8c8c;align:center">找回密码</label></row></col>

                </item>

                <item style="margin:20 0;padding:14;background:#999999;corner-radius:4">

                    <col><row><label style="color:#ffffff;font-size:15;align:center">登 录</label></row></col>

                </item>

                <item style="padding:0">

                    <col><row><label style="color:#1a88d5;font-szie:14;align:center">注册账号</label></row></col>

                </item>

            </list>

        </content>

    </page>

</imag>

从代码中看，其中<imag>是XML文档的根节点，page包含整个页面的内容，是对页面的抽象和封装。上面的代码中<page>包括<title>和<content>两个部分，分别是页面的标题和内容。title是页面标题导航栏，有<center>、<left>、<right>三个子节点，分别用来在title上居中、居左和居右来摆放文本和按钮。<content>里有个<list>控件，相当一个容器，用来展示输入框和按钮。

这里只是部分代码，详细代码可以点击链接 链接