Jndroid - 用應用開發的思路來開發 Web
我們都知道，WebApp 開發不外乎 HTML + CSS + JavaScript 三者。但是眾所周知，前端開發雖然入門非常容易，但是要開發的好卻是非常困難，由于一些歷史原因，很多時候要做好一個好的 WebApp 需要前端開發人員經驗和技術上都有比較好的積累。另外，因為一些歷史原因，CSS 已經是一套非常復雜的系統，一樣的布局有著幾乎無數的實現方式，一不小心還容易掉入瀏覽器給你挖的坑里。總之，目前看來，要開發一個優秀的 WebApp 并不是一件易事。
當然，許多公司都意識到了這些問題，才有了今天前端框架百花齊放的景象，AngularJS,BackBone，最近大紅大紫的 React.js 還有G家的 Polymer 等等，無不是希望通過一些方法來解決開發的痛點。但是今天的主角并不是這些已經耳熟能詳的框架們，而是一個剛剛出現的新生命——Jndroid。
Jndroid 是什么？Jndroid 是把 Android 寫 App 的一套思路和 API 放到了寫 WebApp 上。主要是方便移動App 開發者需要寫一個 WebApp 的時候，如果并沒有很好的前端基礎，那么可以簡單的學一下 Javascript 的基礎語法，便可以開始寫 WebApp 程序。
Jndroid 的開發團隊認為，既然現在 WebApp 是一個 App 而不是一個頁面，那么我們就應該去借鑒移動端開發已經很完善的一套開發思路去進行開發，這樣不僅僅開發上面會更加合理和容易，而且做出來的 App 也會顯得非常有邏輯性和很好的交互性。
當然，這個框架還是很年輕的，也有很多地方還有值得改進的地方，但是目前來說這個框架以及足矣寫不少 WebApp 了。
俗話說得好：
"Talk is cheap, Show me the code. "
那么讓我們從零開始來試試這個框架:
第一部分：建立一個基本的 HTML 頁面并且包含 Jndroid 框架
首先我們創建一個 Demo.html 文件，并且用你喜歡的編輯器輸入以下內容。
HTML <!DOCTYPE html> <html> <head> <script src="http://file.gtbrowser.cn/jndroid/jndroid.min.js"></script> </head> <body> </body> </html>
這一步，我們只是把 Jndroid 整個框架導入到了當前的頁面之中，到此為止我們已經部署好了所有 Jndroid 需要的依賴，之后就是開始正式開發啦。
第二部分：做一個簡單的 Hello World
沒錯，第二步就可以把 Hello World 做完。Jndroid 的 API 參考了 Android API 的格式，所以基本的邏輯就是創建 View ，把 View 的層級安排好，通過調用setContentView以及addView這些 API 來把界面插入到頁面中去。讓我們看看 Hello World 的代碼，便可以一目了然了。
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://file.gtbrowser.cn/jndroid/jndroid.js"></script>
</head>
<body>
<script>
/* 創建一個 FrameLayout 用來作為當前的 RootView */
var mLayout = new FrameLayout();
mLayout.setBackgroundColor(0x1a000000);
/* 沒有Activity，直接setContentView就可以得到一個全屏的視圖 */
setContentView(mLayout);
var mTextView = new TextView();
mTextView.setText("helle world");
mLayout.addView(mTextView);
</script>
</body>
</html>至此，你的編碼工作已經完成。在瀏覽器里打開 Demo.html 你就可以看到一個顯示了 hello world 的頁面了。
第三部分：對一個自定義的視圖進行排版
上面的例子只是講述了最基本的視圖創建和添加。那么如果我們需要對視圖進行定位和排版應該怎么做呢？ Jndroid 借鑒了 Android 視圖排版的思路，通過 onMeasure 來確定當前視圖大小，通過 onLayout 來確定當前 View 所在的位置。是不是聽起來有點暈？不要緊張，其實寫起來非常簡單，下面讓我們再來看一段代碼你就明白了。
<!DOCTYPE html>
<html>
<head>
<script src="http://file.gtbrowser.cn/jndroid/jndroid.min.js"></script>
</head>
<body>
<script>
var mView = new MyView();
function MyView() {
ViewGroup.apply(this, []);
this.setBackgroundColor(0x1a000000);
var mChild = new View();
mChild.setBackgroundColor(0xff009688);
this.addView(mChild);
this.onMeasure = function(widthMS, heightMS) {
var width = MeasureSpec.getSize(widthMS);
var height = MeasureSpec.getSize(heightMS);
mChild.measure(MeasureSpec.makeMeasureSpec(width / 4, MeasureSpec.Exactly),
MeasureSpec.makeMeasureSpec(height / 4, MeasureSpec.Exactly));
this.setMeasuredDimension(width, height);
}
this.onLayout = function(x, y) {
mChild.layout(50, 100);
}
}
setContentView(mView);
</script>
</body>
</html>看到這里，相信你已經了解了 Jndroid 的基本思路，就是和做一個 Android App 一樣的思路去制作一個 WebApp，到此我們只需要把上面代碼保存成 html 就可以看到效果啦。當然你也可以把代碼單獨寫在外置的 .js 文件中，這樣只需要在<body></body>標簽中包含你的源代碼就可以看到效果。
貼個截圖：
嗯，和 Android 里面的畫個 View 的效果很接近吧。
最后，該框架已經開源 GTBrowser/Jndroid.js ， 歡迎 Fork 以及 PR。
PS: Jndroid 官網就是用 Jndroid 本身書寫的，也可以作為一個 Demo 參考喲。
作者：zerob13@ 綠茶瀏覽器