Jndroid——用应用开发的思路来开发 Web
??我們都知道，WebApp 開發(fā)不外乎 HTML + CSS + JavaScript 三者。但是眾所周知，前端開發(fā)雖然入門非常容易，但是要開發(fā)的好卻是非常困難，由于一些歷史原因，很多時候要做好一個好的 WebApp 需要前端開發(fā)人員經(jīng)驗和技術(shù)上都有比較好的積累。另外，因為一些歷史原因，CSS 已經(jīng)是一套非常復(fù)雜的系統(tǒng)，一樣的布局有著幾乎無數(shù)的實現(xiàn)方式，一不小心還容易掉入瀏覽器給你挖的坑里。總之，目前看來，要開發(fā)一個優(yōu)秀的 WebApp 并不是一件易事。
??當(dāng)然，許多公司都意識到了這些問題，才有了今天前端框架百花齊放的景象，AngularJS,BackBone，最近大紅大紫的 React.js 還有G家的 Polymer 等等，無不是希望通過一些方法來解決開發(fā)的痛點。但是今天的主角并不是這些已經(jīng)耳熟能詳?shù)目蚣軅?#xff0c;而是一個剛剛出現(xiàn)的新生命——Jndroid。
??Jndroid 是什么？Jndroid 是把 Android 寫 App 的一套思路和 API 放到了寫 WebApp 上。主要是方便移動App 開發(fā)者需要寫一個 WebApp 的時候，如果并沒有很好的前端基礎(chǔ)，那么可以簡單的學(xué)一下 Javascript 的基礎(chǔ)語法，便可以開始寫 WebApp 程序。
??Jndroid 的開發(fā)團(tuán)隊認(rèn)為，既然現(xiàn)在 WebApp 是一個 App 而不是一個頁面，那么我們就應(yīng)該去借鑒移動端開發(fā)已經(jīng)很完善的一套開發(fā)思路去進(jìn)行開發(fā)，這樣不僅僅開發(fā)上面會更加合理和容易，而且做出來的 App 也會顯得非常有邏輯性和很好的交互性。
??當(dāng)然，這個框架還是很年輕的，也有很多地方還有值得改進(jìn)的地方，但是目前來說這個框架以及足矣寫不少 WebApp 了。
俗話說得好：
"Talk is cheap, Show me the code. "
那么讓我們從零開始來試試這個框架:
第一部分：建立一個基本的 HTML 頁面并且包含 Jndroid 框架
??首先我們創(chuàng)建一個 Demo.html 文件，并且用你喜歡的編輯器輸入以下內(nèi)容。
HTML<!DOCTYPE html> <html><head><script src="http://file.gtbrowser.cn/jndroid/jndroid.min.js"></script></head><body></body> </html>??這一步，我們只是把 Jndroid 整個框架導(dǎo)入到了當(dāng)前的頁面之中，到此為止我們已經(jīng)部署好了所有 Jndroid 需要的依賴，之后就是開始正式開發(fā)啦。
第二部分：做一個簡單的 Hello World
??沒錯，第二步就可以把 Hello World 做完。Jndroid 的 API 參考了 Android API 的格式，所以基本的邏輯就是創(chuàng)建 View ，把 View 的層級安排好，通過調(diào)用setContentView 以及addView 這些 API 來把界面插入到頁面中去。讓我們看看 Hello World 的代碼，便可以一目了然了。
HTML<!DOCTYPE html> <html> <head><script src="http://file.gtbrowser.cn/jndroid/jndroid.js"></script> </head> <body><script>/* 創(chuàng)建一個 FrameLayout 用來作為當(dāng)前的 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>??至此，你的編碼工作已經(jīng)完成。在瀏覽器里打開 Demo.html 你就可以看到一個顯示了 hello world 的頁面了。
第三部分：對一個自定義的視圖進(jìn)行排版
??上面的例子只是講述了最基本的視圖創(chuàng)建和添加。那么如果我們需要對視圖進(jìn)行定位和排版應(yīng)該怎么做呢？ Jndroid 借鑒了 Android 視圖排版的思路，通過 onMeasure 來確定當(dāng)前視圖大小，通過 onLayout 來確定當(dāng)前 View 所在的位置。是不是聽起來有點暈？不要緊張，其實寫起來非常簡單，下面讓我們再來看一段代碼你就明白了。
HTML<!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>??看到這里，相信你已經(jīng)了解了 Jndroid 的基本思路，就是和做一個 Android App 一樣的思路去制作一個 WebApp，到此我們只需要把上面代碼保存成 html 就可以看到效果啦。當(dāng)然你也可以把代碼單獨寫在外置的 .js 文件中，這樣只需要在<body></body> 標(biāo)簽中包含你的源代碼就可以看到效果。
貼個截圖：
??嗯，和 Android 里面的畫個 View 的效果很接近吧。
??最后，該框架已經(jīng)開源 GTBrowser/Jndroid.js， 歡迎 Fork 以及 PR。
PS: Jndroid 官網(wǎng)就是用 Jndroid 本身書寫的，也可以作為一個 Demo 參考喲。
作者：zerob13@綠茶瀏覽器
總結(jié)
以上是生活随笔為你收集整理的Jndroid——用应用开发的思路来开发 Web的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： QT5.4 vs2013静态加载插件的s
- 下一篇： android 应用退到后台，类似最小化