我是一年多前从 Android 转前端的。说实话用过的框架并不多,因为我当时的打算是好好学一学前端,所以当时基本都是配合一些工具库,然后直接写 JS + CSS + HTML 这样来做。
最常用的库有这三个:
Zepto.js Zepto.js: the aerogel-weight jQuery-compatible JavaScript library (替代 jQuery 用来处理 DOM 和 AJAX)
Mustache.js janl/mustache.js · GitHub (模版)
History.js browserstate/history.js · GitHub (History API)
基本这三个库加上自己写点样式可以完成大部分的 WebApp 需求了。大致思路也很简单,把页面分割成几个模块,每个模块写好相应的视图模版,然后通过 AJAX 加载需要展示的模块(加载后可以缓存下模版)并且去更新浏览器 History 即可。
当然,还有很多辅助的东西,也带来了很多帮助,比如:
Yeoman The web's scaffolding tool for modern webapps 非常好用的项目生成器工具,基于 Grunt/Glup , bower , 等等等等。
Generator-webapp yeoman/generator-webapp · GitHub 配合上面的使用可以生成一个最基本的 WebApp,并且带了很多实用的特性。
Sass Sass: Syntactically Awesome Style Sheets 我选择了 SCSS 来组织我的 CSS 代码,顿时感觉舒适多了
Marx mblode/marx · GitHub 我个人很推荐的 CSS Reset ,有 SCSS 源码,自定义比较方便。
另外还有一些小东西想不起来了,但是这些东西都是锦上添花的,多写写自然而然就会接触到。
当然,虽然这些东西入门都不难,但是要用好还是需要一定时间和经验的。如果需求很急怎么办,这里我要安利一下我们团队出的一个前端框架:
Jndroid
这个框架是做什么的呢?这个框架把 Android 写 App 的一套思路和 API 放到了写 WebApp 上,主要是方便 Android 工程师需要写一个 WebApp 的时候,如果并没有很好的前端基础,那么可以简单的学一下 Javascript 的基础语法,便可以开始写 WebApp 程序。当然,这个框架还是很年轻的,也有很多地方还有值得改进的地方,但是目前来说这个框架以及足矣写不少 WebApp 了。
俗话说得好:"Talk is cheap, Show me the code. " 我先贴一个 Demo:
<!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>
没是不是有一股浓浓的 Java 即视感。 没错,还是那个配方,还是那个味道。那么效果是什么样子的呢?把上面代码保存成 html 就可以看到啦。
嗯,和 Android 里面的画个 View 的效果类似吧,哇咔咔。
最后,该框架已经开源 GTBrowser/Jndroid.js · GitHub, 欢迎 Fork 以及 PR。
PS: Jndroid 官网就是用 Jndroid 本身书写的,也可以作为一个 Demo 参考哟。
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
https://www.v2ex.com/t/195567
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.