近期nodejs-web开发的一些总结
在node web开发学习和实战的路上兜兜转转，经过半年的学习积累，对nodejs web开发开始觉得走上门道了，知道node文件该放在什么路径下，知道怎么分离路由，怎么往模板里塞数据，怎么构造数据库，建哪些字段，怎么构造json数据了。
由于我后端开发经验不足，所以上手node这门后端语言走了不少弯路，好在我的node系统项目终于完成，也算是小有收获。
关于如何快速学习一门新技术，如何快速地进行知识积累，以及进行项目技术选型，一些功能应该交给前端还是后端处理有了一些新的认识。
1、如何快速学习新的技术并进行知识积累
让程序员去学习一门新的技术有两种情况，自我驱动和外部驱动，自我驱动主要依靠自身的兴趣，对新的技术充满好奇所以迫切想去尝试，这种驱动没有时间上的压力。另一个原因是外部驱动，外部驱动是老大给你安排了一个新任务，比如说用node+mongodb开发一个内部系统，这种驱动就需要你能快速学习新技能，并快速完成所需技术的知识积累。
如何更快的上手？
我的建议是看视频->看博文教程->clone优秀简单的demo练习->看官方api文档。
为什么第一步是看视频而不是看书呢？之前的学习经验告诉我，看书容易产生注意力不集中，厚厚一本书看下去会产生情绪厌烦感，会让人误认为该技术多少坑多么难，从而产生心理抗拒害怕动手实践。
相反，第一步看视频尤其是讲核心理论和项目实践结合的视频，会让你迅速对这个技术着迷，觉得这样写代码还是很容易的，实现什么样的功能原来如此简单。看视频还有一个好处，你可以一边看老师讲解，一遍自己敲代码看效果，因为基本是填鸭式抄代码，不会遇到多少问题，自信心也上去了。这里推荐一个靠谱网站：慕课网，不少技术我都是从这里入门的。
第二步是看博文教程，谷歌搜索关键词node mongodb best practice可以搜出很多，推荐国外的博客教程，里面通常会附上博主在 github上的代码demo,把这些demo clone下来，自己安装运行跑起来，看看优秀的代码结构是怎样构建的，该功能别人是怎么实现和处理的。
第三步是看优秀开源demo,这个和上面第二步有些重复，看优秀博客教程的同时就会下载博主的示例代码研究，你也可以谷歌搜索关键词找github上star多的入门级demo.
做完以上三步，相信你已经具备了使用新技术构建项目的能力了，通过研究别人的demo也掌握了一些基础功能的实现，比如注册登录功能。那么，下面你可以大胆开始新项目的编码了！
在项目编码阶段，你需要做的就是看官方api了，我的建议是把api先粗略看过一遍，遇到api写的不够清楚的，可以借助google和*搜索答案。
那么，真的不需要看书吗？
NO！如果想快速上手做项目，我的建议是看视频比看书上手的快，但是书上的详细的理论知识是视频无法给与的，在我做完这个node项目时，我重新看《深入浅出node》时，我发现我理解的更加深刻了，也更容易理解其中的一些原理了。
2、如何进行项目的技术选型
这个技术选型包括项目代码结构的架构和工具、技术的选型。
代码结构的设计是很重要和必要的，代码结构紊乱会随着项目功能增加和复杂度增加产生很多的弊端，也不利于项目的维护。
我的做法是看别人的教程，别人的代码结构是怎样构建的，对于你的项目是否合适。我最终采用了MEAN架构
app里放后端代码，public为前端静态资源，config为路由文件，使用grunt启动项目，编译less，使用grunt插件让项目代码改变自动重启服务。
如何选型技术架构？
Node框架我选用了Express,原因很简单，Express相比Koa发展的更成熟更稳定，文档也更健全，教程资料也更多。对于新手来说，我的建议是选择更稳定资料更多的框架，不要说什么框架什么技术过时了，对于没接触做过项目的你来说这些框架、技术都很新。
如何选择开发工具？
node开发你只要学会代码调试工具就好，webstorm里的断点调试工具以及一些好用的node服务重启工具，可以参考我的Nodejs Web开发一些好用的工具这篇文章。
3、前后端如何分工
当我开发第一个与后端有较多合作的项目时，当时用的是PHP，所以写PHP的同学在我的html代码里嵌入了很多<?php echo('') ?>这样的代码，前端和后端同时维护一个文件，这样的处理方式糟糕透了。
使用模板语言，使用RESTful接口，后端来构造RESTful接口，前端在模板里添加数据，这样的方式让前后端分离开来，友好多了。
如果使用MEAN架构，前端的代码全部在/public文件夹里，放jade/css/js/images/less文件，后端代码在/app,/config和app.js里，处理数据逻辑和路由。
前端做 or 后端做 ？
在没做该node项目前，一些功能我都会觉得前端可以实现，在做完node项目后，我的理解是这些功能放在后端处理更合适。
- Favicon网页图标前端来设置还是后端？
我以前的做法是前端在<head></head>里嵌入一段<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">这样的代码，前端来设置网页图标。
这样的弊端是要给所有html/模板文件头部添加该link，该做法纯碎人肉操作，对于html文件太多的项目，一个个手动添加容易遗漏也会死星人。
现在的做法是放在后端来处理，npm install serve-favicon安装网页图标模块，在app.js里插入这段代码：
|
1
2
|
var favicon =
require(
'serve-favicon');
app.use(favicon(__dirname +
'/public/images/favicon.ico'));
|
给项目全局使用该网页图标。
- 当前页链接hover选中状态前端设置还是后端设置？
我以前的做法是使用js的switch case判断url是什么给链接添加active样式。
该做法的弊端是，当切换的链接太多时手动一个个增加case显得简单粗暴，而且一些链接是生成的，无法判断链接是什么。
现在我的做法是交给后端判断链接，后端通过req.path判断当前链接，前端通过在模板里的class里判断后端的req.path里的值和模板里数据是否一致添加active.
具体处理代码如下：
/app/controllers/nav.js
|
1
2
3
4
5
6
7
8
9
10
|
res.locals.activeNav =
function(nav){
var result =
'';
var _path = req.path;
if(nav == _path){
result =
'active';
}
else{
result =
'';
}
return result;
}
|
/app/views/pages/nav.jade
|
1
|
a(href=
"/admin/line/my",
class=
"#{activeNav('/admin/line/my')}")
|
- 分页列表前后端如何配合处理？
后端给前端提供totalPage和currentPage，前端给currentPage的元素的class加上active类。
下面是一些处理的核心代码：
模板代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
ul.pagination
li
a(href=
"/?p=0")
span(aria-hidden=
"true") «
span.sr-only Previous
-
for (
var i =
0; i < ((totalPage >
5) ?
5 : totalPage); i++){
if (currentPage == (i+
1))
li.active
span #{currentPage}
else
li
a(href=
"/?p=#{i}") #{i+
1}
- }
if(totalPage>
5)
li
a ...
li
a(href=
"/?p=#{totalPage-1}")
span(aria-hidden=
"true") »
span.sr-only Next
|
后端代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//获取每页数据
var results = issues.slice(index,index+count);
if(err){
console.log(err)
}
else{
res.render(
'abc',{
title:
'xxx',
currentPage: (page+
1),
//向上舍入取整
totalPage:
Math.ceil(issues.length/count),
issues: results
})
}
|
4、学习node-web开发过程帮到我的资料
视频教程：
- node+mongodb 建站攻略（一期）
- node建站攻略(二期)——网站升级
博客教程(入门级)
- node-express-mongo教程
api文档
- express api
- mongoose api
其他
- 写给Node.js学徒的7个建议
- cnode
- *