<h2>现状: 冗余</h2> <br/>在web开发中，我们是否常常会使用不同的编程语言实现相同的功能？ <br/> <br/>如一个文件上传功能，需要对上传文件进行文件格式限制。我们通常会使用后缀名做限制。 <br/><h3>前端</h3> <br/>为了用户体验，会在页面对用户选择的文件进行判断，合法才让用户可以上传。 <br/><pre escaped=“true”><pre><code>function is_filetype(filename, types) { <br/> types = types.split(’,’); <br/> var pattern = ‘.(’; <br/> for(var i=0; i<types.length; i++) { <br/> if(0 != i) { <br/> pattern += ‘|’; <br/> } <br/> pattern += types[i].trim(); <br/> } <br/> pattern += ‘)$’; <br/> return new RegExp(pattern, ‘i’).test(filename); <br/>}; <br/> <br/>// 此处省略N行代码 <br/>if(!is_filetype($(’#uploadfile’).val(), ‘doc,pdf,txt,wps,odf,md,png,gif,jpg’)){ <br/> can_submit = false; // 不允许上传 <br/> $(’#uploadfile’).val(’’); <br/> alert(‘只允许上传: ’ + constant.RESUME_FILETYPES); <br/>} <br/>// 此处省略N行代码</pre></code></pre> <br/><h3>后端</h3> <br/>由于担心恶意上传，无法避免地需要重新对用户上传的文件进行判断。 <br/>于是我又用python写了一个判断文件后缀的逻辑 <br/><pre escaped=“true”><pre><code>import re <br/> <br/>def is_filetype(filename, types): <br/> types = types.split(’,’) <br/> pattern = ‘.(’ + ‘|’.join([t.strip() for t in types]) + ‘)$’; <br/> return re.search(pattern, filename, re.I) != None <br/> <br/># web request handler <br/># 此处省略N行代码</pre></code></pre> <br/><h3>导致这样重复工作的原因是为什么？</h3> <br/><ol> <br/> <li>前端永远不可信；</li> <br/> <li>前端和后端使用不同的编程语言；</li> <br/></ol> <br/><h3>这样的冗余会带来什么代价？</h3> <br/><ol> <br/> <li>修改业务逻辑，需要重复做2次：如突然发现少支持了 <em>docx</em> 文件类型，需要同时修改javascript代码和python代码</li> <br/> <li>增加确保javascript代码和python代码业务逻辑一致的代价。需要分别写2种测试，unit test跑多一倍。</li> <br/></ol> <br/><h2>nodejs时代：DRY</h2> <br/>Use <a href=“http://nodejs.org”>nodejs</a> no more <a href=“http://c2.com/cgi/wiki?DontRepeatYourself”>DRY</a> ! <br/><h3>一份代码，前端后端同时运行</h3> <br/><pre escaped=“true”><pre><code>// constant.js <br/>(function(exports){ <br/> <br/>exports.RESUME_FILETYPES = ‘doc,docx,pdf,txt,wps,odf,md,png,gif,jpg’; <br/> <br/>})( (function(){ <br/> if(typeof exports === ‘undefined’) { <br/> window.constant = {}; <br/> return window.constant; <br/> } else { <br/> return exports; <br/> } <br/>})() ); <br/> <br/>// util.js <br/>(function(exports){ <br/> <br/>/** <br/> * 移除字符串两端的空白字符 <br/> * <br/> * @return {String} <br/> * @api public <br/> / <br/>String.prototype.trim = function(){ <br/> return this.replace(/(^\s)|(\s*$)/g, “”); <br/>}; <br/> <br/>/** <br/> * 判断是否自定类型的文件 <br/> * <br/> * @param {String}filename <br/> * @param {String}types, 多个类型使用,号分隔，如 doc,docx,txt <br/> * @return {Boolean} true or false <br/> * @api public <br/> */ <br/>var is_filetype = exports.is_filetype = function(filename, types) { <br/> types = types.split(’,’); <br/> var pattern = ‘.(’; <br/> for(var i=0; i<types.length; i++) { <br/> if(0 != i) { <br/> pattern += ‘|’; <br/> } <br/> pattern += types[i].trim(); <br/> } <br/> pattern += ‘)$’; <br/> return new RegExp(pattern, ‘i’).test(filename); <br/>}; <br/> <br/>})( (function(){ <br/> if(typeof exports === ‘undefined’) { <br/> window.util = {}; <br/> return window.util; <br/> } else { <br/> return exports; <br/> } <br/>})() );</pre></code></pre> <br/><h3>前端</h3> <br/><pre escaped=“true”><pre><code><script src="/js/util.js"></script> <br/><script src="/js/constant.js"></script> <br/> <br/>// 此处省略N行代码 <br/>if(!util.is_filetype($(’#uploadfile’).val(), constant.RESUME_FILETYPES)){ <br/> can_submit = false; // 不允许上传 <br/> $(’#uploadfile’).val(’’); <br/> alert(‘只允许上传: ’ + constant.RESUME_FILETYPES); <br/>} <br/>// 此处省略N行代码</pre></code></pre> <br/><h3>后端</h3> <br/><pre escaped=“true”><pre><code>var util = require(’./public/js/util.js’), <br/> constant = require(’./public/js/constant.js’); <br/>app.post(’/resume/upload/:job_id’, function(req, res, next){ <br/> req.form.complete(function(err, fields, files){ <br/> if(!util.is_filetype(filepath, constant.RESUME_FILETYPES)) { <br/> // 由于客户端已做判断，所以这样的情况都是恶意上传的，直接提示 <br/> res.send(‘文件格式错误: ’ + filepath <br/> + ’ , 请上传’ + constant.RESUME_FILETYPES + ‘格式的文件’); <br/> return; <br/> } <br/> // save file … <br/> // 此处省略N行代码 <br/> }); <br/>});</pre></code></pre> <br/>wow，没冗余了吧！done <br/><h2>其他常用场景</h2> <br/><ul> <br/> <li>常量定义</li> <br/> <li>各种有用的工具模块，如字符串操作</li> <br/></ul> <br/><h2>有爱</h2> <br/>^_^ 希望本文对你有帮助
Node. 如果是这样，还有必要在前后端都调用完全一样的逻辑判断过程吗？对于文中提到的两点：前端永远不可信；前端和后端使用不同的编程语言。并没有解决第一个担忧啊。
本人平常一直在强调并信奉前端工程师的职责范围包括：客户端开发（PC/手持设备）、Web页面制作、与用户的交互（JS/AS/…）、与服务器的交互（Ajax/JSONP/…）、服务器端应用展现层开发。 <br/>虽然因人而异、因业务而异，只要认可这一点，那个人就会最大限度的利用各种技术和资源来提高复用和开发效率，推广本nodejs也会更加自然。
本来所有用户的输入都是不可信的，你所谓的第一个担忧实际上只是一个原则不要完全相信用户输入，由于前端的验证等都可能被绕过。 <br/>而正常逻辑下，用户在页面上填写的内容没有填写完毕，即可立即进行客户端校验，这只是减轻服务器端压力的一种做法，你完全可以客户端不做任何验证，但是这一方面增加服务器压力，另外一方面也在一定程度上降低了可用性。
Google搜索Nodejs路过。 <br/>对JS不太过敏，还是习惯用Python，Java类的语言来写后端。而且前后台根本不存在DRY的问题，前台作后缀分析只是为了降低一部分后端的负担，无论前端是否作判断，后端都一样要作判断。 <br/>而且这种趋势感觉会让WEB入门难度更大，同样的语言，分别用来开发前台和后台，对于刚刚入门的人可能会感到异常困惑…~而且JS的prototype继承方式也感觉比较怪。
语言统一还是比较支持的，但有一个的问题，前后端代码相互复用成为潮流的话，由于js在前端对用户来说是可见的，攻击者连猜测都不需要，就明确知道服务器端的验证逻辑了，+_+。
js引擎对html dom解析的支持现在所有后台语言都无法企及，如果在服务器端跑上jquery，那么从一个网页中抽取内容就不用正则表达式这种容易出错的方式了。 <br/> <br/>另外js对json的支持也是最方便的。
支持前后端可以共享一小部分逻辑。 <br/>不过，个人认为前后端同样的处理逻辑不可取： <br/>1. 前端主要是相对简单的校验，提高反应速度和减轻后端负担 （庞大的JS也影响载入速度） <br/>2. 后端主要是完整的检验，保证安全性和一致性
我想说一下我的理解，前端和后段的问题在于设计时候的问题而不是语言单方面可以解决的。 <br/> <br/>如果按照你这么说的话，用Java或者CGI在后面直接输出HTML和Javascript一样可以做到你所谓的“非冗余”开发。 <br/> <br/>业务逻辑的判断和界面的判断本身就是要分开处理，只能说明你平时设计系统的时候没有真正做到层之间的完善的解耦处理。
