本文來自愛碼哥CTO邱楊(Terry)同學礁击，微信公眾號“愛碼哥”（微信公眾號：iMAG_app）
隨著HTML5和Node.js的流行,Javascript這門在互聯(lián)網(wǎng)初期就已誕生的語言正迸發(fā)出勃勃生機盐杂，Javascript將前端和后端開發(fā)統(tǒng)一起來，“一切皆為JS”看起來只是時間的問題哆窿。唯一的障礙是在移動端链烈，因為無論是Android還是iOS平臺，當前仍是原生應用大行其道挚躯。HTML5曾經(jīng)被寄予厚望過强衡，但是以Facebook為代表的一批公司在移動端對HTML5技術進行實踐的心酸血淚史表明，HTML5可以是原生應用開發(fā)的一種有效補充码荔，但遠不足以替代原生漩勤。但是現(xiàn)在，隨著iMAG.js的漸漸流行缩搅，這種狀況正在發(fā)生改變.
揭開iMAG.js這匹黑馬的神秘面紗
iMAG.js是國內(nèi)的愛碼哥移動平臺推出的Javascript移動跨平臺開發(fā)框架越败，它的特點簡單高效，同時又功能強大硼瓣，可以用Javascript來替代原生開發(fā)眉尸。iMAG.js的原理和在服務器端運行的Node.js有些相似，都是封裝了Javascript引擎，用Javascript去調(diào)用底層的API接口噪猾。不同的是因為移動應用的控件主要是UI模塊霉祸、用戶交互界面開發(fā)，iMAG.js為此引入了XML模板技術袱蜡，XML和Javascript結合丝蹭，這樣很適合手機界面的展示。
下面我們來看iMAG.js是怎么做到替代原生開發(fā)坪蚁，完成HTML5無法完成的事情的奔穿？
1、首先是封裝原生UI控件敏晤。大家知道手機系統(tǒng)無論是Android還是iOS都有其自身的特色贱田，而這些特色給用戶最直觀的感受就是用戶體驗，雖然Android和iOS的App可以在外觀上設計得相似嘴脾，但用戶操作兩下之后就能很輕易地區(qū)分出哪個是Android哪個是iOS男摧。因此發(fā)揮系統(tǒng)本身最大功效最根本的做法就是盡可能使用原生UI控件，而iMAG.js框架中所有提供給用戶的控件都是原生的译打，只不過是在上層封裝了Javascript接口而已耗拓。比如說iMAG.js中的Label控件，在iOS上是調(diào)用系統(tǒng)的UILabel控件奏司，而在Android上則是調(diào)用的TextView控件乔询，這樣在性能和用戶體驗上就能做到和原生應用完全一致。手機的CPU和內(nèi)存等資源有限韵洋，原生控件在一些細節(jié)地方都是有針對性的優(yōu)化的竿刁，比如Android ListView的復用機制，使用ViewHolder來重復使用View搪缨，以節(jié)省內(nèi)存使用并且保持滾動的流暢性们妥。同樣地，iMAG.js很充分地利用了這些機制勉吻，以保證基于iMAG.js開發(fā)的App能夠和原生App同樣操作流暢监婶。
2、其次是統(tǒng)一的開發(fā)框架齿桃。不同于 HTML5上開發(fā)框架紛亂的狀況惑惶，基于iMAG.js為移動開發(fā)量身定做的API，你會始終感到很順暢短纵，iMAG.js的開發(fā)者最直觀的感受就是這個框架就是為移動開發(fā)準備的带污。在學習掌握了一個iMAG.js控件之后，即便不看文檔香到，開發(fā)者也能大致猜到其他控件怎么用鱼冀，這得益于iMAG.js良好的設計和封裝报破。iMAG.js框架支持XML模板技術，這樣所有的UI控件都可以用XML的方式來書寫千绪，開發(fā)得到了相當程度的簡化充易。就像搭積木似的，即便是不懂技術的人荸型，也能利用iMAG.js快速搭建出自己想要的App原型盹靴，將自己的想法直觀地呈現(xiàn)給客戶。除了靜態(tài)界面的展示瑞妇，與用戶交互也是重點稿静。比如說跟后臺數(shù)據(jù)庫相結合，界面數(shù)據(jù)都是來自數(shù)據(jù)庫的動態(tài)數(shù)據(jù)辕狰，用戶輸入的數(shù)據(jù)能夠以同步和異步的方式入庫改备。而所有這些動態(tài)的東西，在iMAG.js中都可以通過Javascript腳本來完成蔓倍，Javascript本身就是一門具有高度擴展性的動態(tài)腳本語言悬钳。
3、iMAG.js同樣適合開發(fā)大型的App項目柬脸。一個大的開發(fā)團隊，除了有開發(fā)人員毙驯，還有專業(yè)的產(chǎn)品經(jīng)理倒堕，專業(yè)的美工，專業(yè)的測試爆价，成員之間彼此分工協(xié)作來完成項目垦巴。在精密的分工協(xié)作下完成的App通常是一個UI界面很精確的東西，比如美工根據(jù)設計做的圖铭段，通常是精確到像素的骤宣，文字的字號多大，文字圖片之間的間距多少都是嚴格定義的序愚，不能只是一個大致差不多的東西憔披。iMAG.js通過css樣式來控制這些內(nèi)容，實現(xiàn)UI元素的精確布局爸吮，而且充分考慮到了手機屏幕大小的不規(guī)則性芬膝，能對不同平臺不同屏幕大小的手機進行自動適配，讓跨平臺開發(fā)變得更容易形娇。在兼容性方面锰霜，由于iMAG.js框架自身對Android和iOS平臺良好的兼容性，真正做到了一次開發(fā)多處運行桐早，避免了類似于HTML5開發(fā)上出現(xiàn)的由于內(nèi)核的不同在不同手機上展示不一致的情況癣缅。再就是iMAG.js提供了離線應用和在線應用兩種模式厨剪，習慣了web后臺開發(fā)的開發(fā)者可以很輕松地切換到在線應用這種模式下，因為這根本就和開發(fā)網(wǎng)頁一樣友存。
4祷膳、功能也是用戶關心的，到底能有多少種UI展示效果爬立，有多少種手機能力可用钾唬，決定了APP開發(fā)能夠達到的層次。iMAG.js框架本身已經(jīng)封裝了上百種原生控件侠驯，比如TextView, ListView, UIScrollView, UITableView這些抡秆，支持電話、短信吟策、定位儒士、藍牙、通訊錄等幾十種手機能力的使用檩坚，而這些本地功能調(diào)用都相當容易着撩，比如:$phone.call(‘10086’)表示撥打這個電話。當然iMAG.js本身提供的功能再豐富也有不夠用的時候匾委，因為移動開發(fā)常常會面對一些復雜的場景拖叙，比如多人視頻會議，不僅復雜可能還需要跟底層特定硬件結合赂乐。幸好iMAG.js是一個跟Node.js類似的東西薯鳍，Node.js作為后起之秀能夠迅速走紅很大程度上得益于良好的擴展性，iMAG.js也是一樣挨措，iMAG.js支持原生插件挖滤，所有“不夠”的能力，都可以通過原生插件的方式來實現(xiàn)浅役。如果你想實現(xiàn)一個視頻會議的插件斩松，那么可以通過$phone.plugin(‘MyVideoMeeting')來調(diào)用你自己用原生代碼實現(xiàn)的視頻會議模塊，這里MyVideoMeeting是一個在愛碼哥平臺發(fā)布的插件代碼觉既。當然你其實并不需要自己專門去開發(fā)一個視頻會議的模塊惧盹，因為這種功能模塊往往是現(xiàn)成的，你只需要向第三方購買相應的SDK即可瞪讼。
5岭参、前面介紹了iMAG.js看起來比較“酷”的地方，但你可能還有疑慮：既然這么高大上那我用iMAG.js開發(fā)一個微信怎么樣尝艘？iMAG.js努力的方向是能夠完全替代原生App的開發(fā)演侯，即便是使用原生來開發(fā)也是以插件的形式集成進來，這樣模塊都是可以復用的背亥，因此用iMAG.js來開發(fā)微信類的應用是完全可行的秒际，并且官方已經(jīng)有這樣的案例悬赏。因此iMAG.js提供了一種方式，能夠將Javascript語言引入到移動端娄徊，并且通過插件化模塊化的方式將移動領域各種原本分散的解決方案打包成一個整體呈現(xiàn)給開發(fā)者和企業(yè)闽颇，讓企業(yè)能夠通過愛碼哥平臺快速實現(xiàn)移動化。
