新手问题 js 全部写成函数,页面调用,用着挺好,会有问题不

as181920 · 2013年09月12日 · 最后由 xds2000 回复于 2013年09月15日 · 3170 次阅读

背景:Rails 尽量保持原习惯不做定制,js 技术有限所以 js 不多还不需要上框架,rails3+coffeescript+turbolinks 使用,js 简单写成一个个函数,类似

@function_a = () ->
  console.log "xxx"
  function_b()

页面 erb 直接调用函数

<% javascript_tag do %>
  function_a();
<% end %>

一直这样用着挺好,最主要是上 turbolinks 很顺利,几乎没有影响,因为执行到页面自然会执行相应 js。 (turbolinks 好坏前面讨论够深入的,这里不论了,对于基本不动 js 但又优化效果的,这样用着挺好。上前端 js 框架,对前后端代码和结构都要考虑,暂时没时间做)

但是这样不知道是否会有什么问题,或者不符合哪个习惯?身边孤家一个技术,没的咨询,来这里问下:)

唯一要动的几个地方也简单列下,比如 turbolinks 本身加载的状态显示,ruby-china 引入了一个大 js 文件,这里暂时不需要那么复杂,只简单显示一个圈圈(icon-spinner)就好了,于是

$(document).on 'page:fetch',   () ->
  $("#turbolinks_status").removeClass("hide")
  $("#turbolinks_status").show()
$(document).on 'page:change',  () ->
  $("#turbolinks_status").hide()
$(document).on 'page:restore', () ->
  $("#turbolinks_status").remove()

还有 rails_kindeditor,没用官方的方案,直接

@load_kindeditor = () ->
  KindEditor.create ".kindeditor_area",
    width: "100%",
    allowFileManager: true,
    uploadJson: "/kindeditor/upload",
    fileManagerJson: "/kindeditor/filemanager",
    items: ["formatblock", ........]

还有 nested_form 关联的 js 也可以直接调函数,turbolinks 不影响

$(document).on "nested:fieldRemoved", (event) =>
  if $(".items_preview").length > 0
    console.log "xxx"

其它地方都很简单的一个个小函数,不知这个方式有何问题

如果你现在没问题,那就是没问题。随着你的应用的发展碰到了问题,到时候再去具体问题具体分析看看要怎么改进更好。个人觉得你现在的担心在未来的发展方向尚不确定的情况下实在是有点多余。

如果是我的话,既然现在没什么问题那就保持现状不折腾,腾出时间干什么呢?去看点更深层次的关于 JavaScript 的书籍。看着看着你就会对你现在写的代码有一种新的见解,那时候你自然会清楚现在的写法究竟合适不合适,有没有进一步改善优化的空间等等。

这种事情向来都是根据项目的实际情况和需要而定的,实在是没什么固定的法则。事实上任何程序的编写都是如此,只要实现了目的就是对的。在对的的基础上再去考虑代码结构是否清晰?简洁?可读性是否好?冗余和重复有没有?多不多?核心逻辑的算法是否高效?等等。

没一个问题的答案都不是固定,往往取决于回答问题者的经验和编程水平,甚至包含其他多方面的综合素质。而每一个答案又会对应出很多种解决方案,每一个解决方案都有自己最适宜的场景。

比如说我可以这样回答:

  1. 你的一个一个函数里是否会有重复的代码?若有,依次提取出来变成一些功能库吧。
  2. 在你提取成功能库的时候,或许会发现现有的一些库完全可以取代你提取的那些代码,比如试试 Underscore,试试 Lo-Dash 之类的。
  3. 随着你的业务逐渐丰富,代码越来越多,是不是组织这些函数会变得越来越麻烦,既不好读,也不好改?若是,请考虑使用一些框架吧,Angular,Backbone, Ember……

你看,不管怎么回答,最终都会引导到这个方向上来。这个过程恰恰印证了 JS 的发展历程:零散的组织结构 -> 以功能划分的函数库 -> 以代码组织和设计为导向的框架。

那是不是就直接告诉你:“请用 AngularJS——秒杀一切”等诸如此类的答案就完事了呢?你不能说这是错的,但未必就是好的。听我一句,现在能用的就保持不变,剩下时间去看书,去升华自己对 JS 这门语言,甚至是对 Web 开发这个行当的了解,你绝对会比问别人收获的更多更好。

卧槽!我今天怎么这么闲,罪过……

#1 楼 @nightire 非常感谢,看到最后一句,让我释然一点:)

js 扩展的方法和方向大致了解(零散->提炼->框架->定制),也清楚暂时用不到。 主要是看看有没有基础的显而易见的违背习惯的地方或者问题,没有就好。

时间是个大问题,现在把时间花光了都不够吃饭,看了确实要找个工作了。

#2 楼 @as181920 对了,如果你时间够用也喜欢折腾的话,尝试为你所有的函数写单元测试,主要的好处如下:

  1. 单元测试保证你的函数是健壮的,撰写单元测试可以促使你考虑很多边界条件,有很大的可能帮助你解决一些不太显眼的 bugs;

  2. 在你写单元测试的过程中会体会到有哪些函数不具备“良好的模块化及解耦”,并且促使你在这个层面对你的代码进行重构,也许在重构一些代码之后你就会发现可能使用一些库或者框架会更有效,更优雅。

函数化是第一步,等东西写多了,就需要模块化了,不然会弄得乱七八糟。 到时候你可以看看这种方式哈:http://blog.linjunhalida.com/blog/js-controller/

开源项目可参考我领导的 cantas, 有测试,有用 backbonejs,地址在我的 Github 上

需要 登录 后方可回复, 如果你还没有账号请 注册新账号