新人疑惑
假如有这么个项目,后端所有接口只提供json数据,不渲染页面。页面全靠前端利用js进行渲染,交互。
除了用angularjs和react这些高端的框架外,还有什么比较好的方案能应付这种需求?
如果懂框架, 用框架是最好的, 但是不懂框架的话, jQuery+js模板引擎也可以实现
juicer.js
artTemplate + ajax + tmodjs
如果会nodejs的话那就最好了 用nodejs去请求接口 渲染页面
两种情况:
一、如果不考虑SEO,纯前端渲染。
方法多了去了....
backbone + template (路由+模板): MVC方案,易学易通
avalon\angular 易学易懂,MVVM兼容方案
ember\knockout\dojo 等mvmm不兼容方案
polymer webcomponents不兼容方案
以上这些方案的学习成本和知识面都不宽,两三天可以开始写小功能
二、考虑SEO
目前好像只能在服务器搭建一个前端渲染服务层,一般用nodejs实现同构。
框架没得选了,只有react。
技术方案: react + redux + nodejs + koa\express
大一点的项目基本都要考虑SEO,所以前后分离的话建议第二种方案吧。
搭建个模板服务器
别想那么复杂。。。
其实具备以下3点就可以做一个基本的前后端分离的web了
前端模板
ajax交互数据
前端路由(可选)
前端模板(handlebar.js)+jQuery是最简单的方案!!
可以借鉴一下淘宝的前端后分离的方式,利用nodejs去组建一个中间件,后端只负责接口的输出,数据处理组装由前端同学来完成
前后端分离的思考与实践
我们公司是用的php去搭建的一个中间件
...LZ你需要的是前端模板语言吧,handlebar或者underscore模板就可以了
简单的话,用一个前端模板+jquery就可以了
可以看我之前用vue和vuex做的例子
https://github.com/okoala/vue-vuex.git
vue.js算是比较轻量化的小框架。如果自己写的话可以:
写个调用厚端接口的ajax函数,通过传入的不同参数, 得到不同的后端json数据,然后调用指定回执函数。
function getAPI(type, callback){
switch( type ){
// 得到不同的JSON数据
}
callback(); // 指定回执函数
}
通过不同的callback函数来渲染相对的页面。当然如果不用框架就要写很多页面元素。
getAPI('home_page', setUpHomePage);
getAPI('contact_page', setUpContactPage);
getAPI('about_page', setUpAboutPage);
var setUpHomePage = function(){
// 自定义渲染的程序
};
var setUpContactPage = function(){
// 自定义渲染的程序
};
var setUpAboutPage = function(){
// 自定义渲染的程序
};
当然如果想高效点儿可以用requireJS来帮助一下。
这俩听起来是挺高端的,但是高端并不一定适合,楼主的目标如果仅仅为了前后端分离的话,那这种解决方案好像只要支持Ajax就行了。
vuejs谢谢!!!!!!!
容我安利一下,自己写的一个mvvm工具,http://.com/a/1190000003803956