这是一个创建于 3466 天前的主题，其中的信息可能已经有所发展或是发生改变。
我是一年多前从 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 参考哟。
最常用的库有这三个：
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 参考哟。
 |
1
lvchaliulanqi OP 官网：Jndroid.com
|
 |
2
lvcha508 2015-06-02 16:45:05 +08:00
刚看了一下，还不错！
|
 |
3
sd4399340 2015-06-02 20:57:04 +08:00
挺有意思的东西！
|
Select Language