说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

编写代码?先熟悉一下编程语言界限吧!

HTML文档下载 WORD文档下载 PDF文档下载
把每个编程语言当作是一个集合,从语言设计到编程格式,它们一定是含有交集的。为了解决因“交集”而带来的代码编程错误,文中详细分析了HTML、CSS、JavaScript、Server-side Languages和SQL之间所存在怎样的界限。

本文作者Cory House是一个软件开发者,笃信清洁代码和务实开发。最近他总结了不同的编程语言之间存在的界限规则,他还认为不了解编程语言之间存在的界线无异于选择错误的开发工具,要想简化、加快软件开发过程,了解语言之间的异同是必不可少的。(以下是编译内容)

如今开发者有很多种途径去解决编程问题,不管是利用大量的类库还是各种各样的技术工具。当然了,随便选择一些错误的工具导致的代码错误也是工作里最头疼的事情。另外总结出,不了解工具与工具之间、语言与语言之间的界限所带来的风险和选错工具带来的风险是一样的。下面这几个常用的构建Web App的工具,每一个都有特定的使用目的。

  • HTML:为编写的内容提供语义标记。
  • CSS:将设计风格从标记里区分出来。 
  • JavaScript:提供表现行为。
  • Server-side Languages:管理商业逻辑。
  • SQL:对RDBMS数据存取和数据操作有很大的帮助。

下面就来分析一下不同的技术之间存在哪些界限和互动点,以及它们是怎样给开发者在工作当中制造麻烦的。

HTML和JavaScript之间的界限

尽量避免将HTML放入JavaScript字符串里,不然出现的结果可能会像这样:


值得注意的是,如何在for循环语句下面生成一个HTML行,然后设置成一个称之为carRow的变量。将HTML放入JavaScript字符串里,这样就能更灵活的将HTLM插入在网页上,但应该标记为本地 HTML。当选择一个模板解决方案的时候,需要寻找一个简单的、较旧的HTML作为模板来源。KnockoutJS和AngularJS模板都是使用这一方法的。

如果你想把HTML储存在.js文件里的话,必须三思而后行,因为JavaScript是典型的用来储存标记的错误工具——也就是说,保持本土化没什么意义可言了(代码颜色、语法检查等等)。

另一方面,避免将复杂的JavaScript放在HTML里的DOM基础上:


有的人直接把JavaScript放在HTML里面,但是这种通过直接插入行为到标记里的方法使得问题变得更为混淆,同时还消除了缓存和重复使用的机会。

这种低调的JavaScript行为的确降低了上述的问题出现几率,但是新的框架像Knockout和Angular是可以将JavaScript推到HTML标记里的。不过在HTML里简单声明一下标记还是有好处的,因为当绑定比较简单的时候标记很容易被发现,并具有可读性。但要小心,涉及到很多简单声明绑定的时候,JavaScript属于.js文件,HTML属于.html文件。

HTML和SQL之间的界限 

这里有两个简单的案例:忽略了数据和HTML之间的重要界限所导致的现象。


关系型数据库应该包含原始规范化数据,这样的数据也是多用途的。因此,存储HTML在DB或注入HTML在查询结果里,如上所示都是有问题的。它将整个演示和数据存储在一起使得重复使用变得很困难。

内容管理系统是一个常见的问题,在这里用户必须能够存储和管理在数据库里的HTML。就相当于利用数据重复使用和数据规范化来换取最终用户管理权。除此之外,应该最大限度的避免混合表示和混合数据,因为它们会分离关注点,必须第一时间处理掉。

HTML和CSS之间的界限

HTML和CSS 之间的“过节”相对简单,只要避免做这样的事就行了:


人们经常将设计风格放入线上的HTML里,但是这样会把语义标记和风格搞混淆。

分离关注点的同时还消除了缓存和重复使用CSS的机会。DRY原理在这里比较适用:如果你想把一个风格使用在多个点上,那就需要事先声明这个风格是在一个单独的样式表里的。

SQL和Server-side Language之间的界限

利用一个服务器端语言来创建高层次的动态SQL是很容易的,就像使用C#字符串生成SQL语句一样简单,但是存储的程序和ORM通常会提供一个更安全、更优雅的方法来生成动态的SQL。编写动态SQL字符串的同时也打开了通往“SQL资料隐码攻击漏洞”的大门,并且取消了DBA管理和提高查询性能的机会。含有SQL字符串的App在运行时也存在很高的风险,尤其是当模式发生变化的时候。ORM向数据库提供增强型的类型接口,可是当模式不能够和现有的数据库查询同步的时候,这些数据库就无法编译了。

JavaScript和Server-side Language之间的界限

在服务器上编写动态JavaScript字符串,会出现这样的情况:


这是误用工具所出现的最常见的现象:使用一个Server-side Language生成动态的JavaScript,大多数情况下JavaScript应该保留在.js文件里,从服务器里返还出来的JSON可以提供更多的活力。

所以在你很投入的写出下一行代码的时候,最好考虑一下你离这些编程语言的边界是不是很近?或者说靠哪一边更近?热爱清洁代码的程序员应该努力保持本地化:文件扩展名在技术方面应该是一个很好的指示器。

保持本地化

本地化的重要性不只是针对于JavaScript,当你发现在保持本地化的同时没什么取舍可选的时候,你只能和字符串较劲了。不过这其中的底线是,避免通过字符串把一种编程语言编写在另一种编程语言或者是格式里。不过目前在比较流行的编程语言里,解决这样的问题首先要考虑到动态化,并利用类库来生成这样的编程格式。要想通过字符串创造这么多东西就需要程序员同时理解两种语言之间的界限。所以,一旦你发现一个文件里有两种编程语言的话,最好先考虑如何使用更好的、更特殊的方法去消除其中的一个编程语言。                                                                     (编译/薛梁  校审/付江)

原文:BitNative

2014Unity亚洲开发者大会倒计时 干货内容日程汇总 TIOBE 2014年4月编程语言排行榜:Perl跌至历史最低点 Hadoop集群环境下网络架构的设计与优化 CloudFoundry架构优化:NATS集群化方案 Dropbox推独立应用,公司估值已达100亿美元 【走近院士】梅宏:云计算时代软件技术发展需求和挑战 云计算战争:OpenStack vs. VMware Cortana与Siri、Google Now的较量:支持功能更多 代码面试最常用的10大算法 “颠覆医疗” 时云医疗推三款硬件产品 华为章宇:如何学习开源项目及Ceph的浅析 EMC:大数据时代中对于数据保护的重新定义 Google Glass于4月15日在美对外开放购买,售价为1500美元 电脑上的网址怎么样复制到手机 创客天下——《Make》及Maker Faire创办人、O'Reilly Media创始人Dale Dougherty专访 《近匠》aGlass团队:透析眼控技术的价值 一周消息树:超级充电器来袭,30秒可为手机充满电 北森CTO张庆化:利用Spark实现数据驱动价值 大公网冯咀志:站内搜索系统的PowerLinux迁移实践 2014移动开发者必备的十大应用测试工具 前《连线》主编Chris Anderson:创客就要DIT UC多屏战略 推出电脑版和电视版浏览器 “全国云计算大数据创新项目评选”征集活动正式启动 【走近院士】李伯虎:云制造技术的应用及发展 一周热点: Twitter的下一代分布式数据库Manhattan 专访微软陆奇:大转型中最难的是文化的改变 【CTO俱乐部走进腾讯】问题征集进行中 颠覆移动营销世界的女王Yunha Kim为女性CEO正名 Google揭露“仙女座”虚拟网络,及分散和集中架构之辩 DHTMLX Touch:开源的HTML5和JavaScript框架 Supercell下一城:《海岛奇兵》续写芬兰手游传奇 我想学autocad,不知autocad能做矢量图吗??? 请问写检查内存泄漏的测试程序有什么好的方法吗?不用工具 Exchange5.5怎样才能屏蔽不相关的垃圾邮件? 有用C语言编的五子棋吗???? 请问大侠,谁会使用Rational Robot? 我做了一个监控程序,如何实现重新启动该程序??? 请问那位高手:如何用jdk开发自己的包!以供别人使用!! 50分求助,谢谢!~~在线等待! 请教 关于猴子分花生的问题 路漫漫其修远兮,征成熟软件开拓市场! 学习项目管理手记 vb能否做出象中国游戏在线中心这样的客户端? 关于COM调用的问题 jsp中有没有取前一天,后一天的数据的类,相当于数据库中的dateadd(dd,1,'')函数?? 我想做一个类似XP Form的模板,请问窗体改变尺寸的消息是什么?谢谢! 想用VC做三星手机N188里的音乐编辑器。 大家好:如何用Delphi报表打印信封,还要有邮政编码,就是像个信封。谢意! 请问那位高手:如何用jdk开发自己的包!以供别人使用!! DataGrid如何调整每列的高度? 在Vbscript中,我的这段代码有问题吗? 使用vc++写一个关于检测网络流量和硬盘读写速度的软件使用哪几个函数? 求救:我在GUI中用到了Jbuilder的xyLayout,怎样打包成为一个独立的应用程序 答者有分 dbGrid 高分!! 谁有jdk的帮助呀?或是我该在哪里下载? 中国队世界杯进攻名列倒数第一 数据库该学哪种语言??? =====在英文系统下,我用vc,为什么edit控件不能输入中文?==== 急!高分求助:水晶报表在Web上的打印问题 MaskEdBox控件的一个简单问题 凭证检索错误 层的显示位置问题? 数据库该学哪种语言??? 高手进来 TClientSocket和TServerSocket之间采用阻塞方式通信,讨论 大家请帮帮忙!一个关于数据库备份的问题!先谢了! 关于汉诺塔升级版。 TClientSocket和TServerSocket之间采用阻塞方式通信,讨论 如何将系统的短日期格式由yy-MM-dd改为yyyy-MM-dd 100分,再次求助,关于jsp中应用java bean的问题! 求助:如何在自己的程序里控制其它应用程序,主要实现对另一应用程序的鼠标定时自动单击 为什么???? 数据库该学哪种语言??? win2000并口编程,怪事?? 请问一个关于超链接的问题! 动态的软件演示用什么软件做?好象播放时用的是screencam.谢谢 一个利用Access 的report design做完报表后怎样用Delphi编程打印输出此报表的问题 数据库该学哪种语言??? 为什么老是说“要求对象”?高手请进! 蝴蝶破茧而出的全过程写作文用、要有细节、其他能表现、生命向上精神的也可以.最好是那种一推开窗户就可以看到的植物、因为我的题目是《推开窗》、我想写的是推开窗看到一番景象、 关于蝴蝶的悲伤的句子?不要是蝴蝶飞不过沧海,和飞蛾扑火. 一个空水池,有甲乙两个进水管和一个排水管,单开甲管5分钟能注满水池,单开乙管需10分钟注满水池,满池水如果单开排水管需6分钟流尽,某次池中没有水,打开甲管若干分钟后,发现排水管未关 一道流水的奥数题一艘快艇从码头逆流而上,半小时后一艘游船也从该码头开出逆流而上.经过1小时发现了1小时前快艇上掉下来的一样东西,则快艇的航行速度是游船的静水速度的几倍? 关于蝴蝶的句子 要优美,又有忧伤的感觉.就像言情小说里,非常忧伤 一空水池有甲乙两根进水管和一根排水管.单开甲管需5分钟注满水池,单开乙管需10分钟注满水池,满池水若单开排水管需6分钟流尽.某次池中没有水,打开甲管若干分钟后,发现排水管未关上,随 关于流水问题的一道数学题一艘船顺水航行108千米,逆水航行176千米,共用12小时;顺水航行189千米,逆水航行110千米也共用12小时,求水流速度? CET-6 用英语读是不是 College English Text Band six?111 卷子24页:一个水池有甲、乙两个进水管和丙一个排水管.单开甲管16分钟可将水池注满、单开乙管10分钟可将池注满,单开丙管20分钟可将全池水放完,若现在甲、乙两管,4分钟后关上甲管开丙管 问到奥数题(流水)有人在河中游泳逆流而上,某时某地丢失了水壶,水壶顺流而下,经30分钟此人才发觉此事,他立即返回寻找,结果在离丢失时地点下游6千米处找到水壶,此人返回寻找了多长时 哪位大侠帮我翻译一下这个英语.We( ) ( )get up at six o’clock.我们必须六点起床.两个括号是要填两个单词~谢谢啦 一件工作,甲单独做四小时,乙单独做五小时,甲乙工作时间的比是( ),甲乙工作效率的比是( ).急,求,快! 如果你的作文在报刊上发表了.请写出形容你当时心情的三个词语? 有甲、乙两个粮库,甲库里存粮120吨.如果把甲粮库中粮食的六分之一搬进乙粮库中,两个粮库中的存粮数量就相等,原来乙粮库中存粮多少吨? 蝗虫共有几对足?几对翅? 106用英语读成one o six对不对?磁带这么读的! 难道不是应该这样读吗----one hundred and six 文章最雅成语(至少4个) 蝗虫的翅共几对,是它的什么器官 还有一个问题,比如,1.75米,读one point seven five.可以读one point seventy-five吗? 我要观察蚂蚁的作文 100--150字 两只蝗虫和一只苍蝇一共有适于运动的翅和足分别是几对? 有一个底面积为1.2dm2,高为20cm的长方体水缸,缸内水深15cm.放入苹果水深18cm. 蝗虫的足翅触角各有和特点?,这对蝗虫的生活有何意义? 打印一份文件,甲每小时可以完成它的5分之1,乙可以完成它的4分之1,甲乙工作效率的最简比?工作时间最简比? 一个圆锥和一个圆柱的体积相等,它们的底面半径之比是3:2.圆锥的高是8厘米,圆柱的高是多少? 蝗虫的特征 校运会广播稿(200字) 一个圆锥和一个圆柱的体积相等,它们的底面半径比是3:2,圆柱 德高是8厘米 如何区分铁棒,铜棒,磁铁棒.(不知道那一个是铁棒,铜棒,磁铁棒)如何区分铁棒,铜棒,磁铁棒.(不知道那一个是铁棒,铜棒,磁铁棒) 如何区分沙子,食盐,木屑,铁屑 如何区别铁棒,铜棒和磁铁棒 一个长方体,长15cm,宽13cm,高20cm.他右侧面的周长是多少厘米?面积是多少平方 现有三根金属棒 分别是铁棒 铜棒 磁铁棒 如果从外表无法分辨 那么如何将三根金属棒区分开?要具体方法 不用说明原理 没有其它的辅助材料 要两篇关于校运会的广播稿!大概200字这样! 一个圆锥和一个圆柱的体积相等,它们底面半径的比是3:2,圆锥的高是8厘米,圆柱的高是【】厘米.帮帮偶啦,帅男美女们,猛男萌女们! 拆、组注塑模具为什么用铜棒轻敲,而不是铁棒或其他什么? 一个水池安放两个进水管和一个排水管,单开甲管4小时能把水池注满;单开乙管5小时能把水池注满;单开丙管3小时能把满池的水放完,现在三管同时开放,几小时能注到水池的百分之七十? 蚊子,蚱蜢,蜜蜂,螳螂按食性分类 有三根外形完全相同的金属棒,其中有两根是具有磁性的磁铁棒,另一根是无磁性的铁棒.在不借助其他任何器材和物体的情况下,有什么方法能将他们分开?若可以选择其它器材,还有哪些新的设 形容蝴蝶美丽的诗句又不说蝴蝶 读了《风筝》这篇课文,你如何评价风筝的作者鲁迅?你怎样看待鲁迅?(结合对文章的理解)300字以上,不要大多,可以写一个300字以上的,然后再展开来写.要结合对文章的理解! 属于完全变态发育的是 A螳螂 B蝗虫 C蝼蛄 D蜜蜂下列生物新个体的产生,属于有性生殖 A椒草的叶片长出新植株 B草履虫通过分裂成新个体 C玉米种子种下长出玉米植株 D蜂王产下的未受精卵发 形容读书很有感情的成语 童年趣事350字左右 0.25是zero point two five还是zero point twenty-fiveschool was over and the students went out of the school by[ ] A;two and three B;second and third C;twos and threes D;seconds and thirds这道题该选哪个答案啊,一个半小时和半小时用 读了文章,我想用这些成语来形容大明湖 400字左右的童年趣事 甲乙两人修一条路,甲乙两人的工作时间比是5:4,工作效率比3:5,工作总量比是() 形容富有情感的读文章的成语有哪些? 一项工程,单独做甲,乙两人工作效率的比是5比4,单独完成这项工程,甲所需时间比乙少百分之几 zero point three five metres.请问单复数 怎么决定?而又表达ozero point three five metres.请问单复数 怎么决定?而又表达one metre 对弧长和曲线积分 童年趣事400字以上, 一项工程.甲单独五天完成.乙单独四天完成.甲乙工作总量之比是()甲乙工作时间之比是()甲乙工作效率之比是() 将一张36平方分米的正方形白铁皮减去四个角后,制成一个无盖的正方体的盒子,然后给这个盒子的完整然后给这个盒子的内外喷上红漆。求它的油漆面积和容积? 一批工程分别让甲 乙2人同时作业,两人工作5天共完成这批工程的3分之2,已知甲乙功效是5:3,甲要多少时间 长:3dm 宽:10cm 高:20cm求长方体的陵长和表面积. 将一张36平方分米的正方形白铁皮剪去四个角后,制成一个无盖的正方体的盒子,然后给这个盒子的内外喷上红漆.求它的油漆面积和容积?36=6×6 6÷3=2(分米) 就按我这个算式写下去,为什么要6÷3? 一个圆锥与一个圆柱的底面积相等.已知圆锥与圆柱的体积的比是 16 ,圆锥的高是4.8厘米,圆柱的高是多少一个圆锥与一个圆柱的底面积相等.已知圆锥与圆柱的体积的比是 16 ,圆锥的高是4.8厘米 一个长方体长20cm宽10cm高8cm如何算前面面积还有后面面积。还有上面面积。下面面积。左面面积。右面面积 两根外表一样的金属棒,一根是磁棒,一根是铁棒.你能不用任何工具分辨它们吗?
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘