素材牛VIP会员
大家是怎样管理JS的?
 生***炸  分类:Java代码  人气:749  回帖:8  发布于6年前 收藏

一个页面里

$("").on("click", function(){
   一堆代码
})

一堆这种东西,写完了自己都不想再看。
快吐了

 标签:htmljavascriptjava

讨论这个帖子(8)垃圾回帖将一律封号处理……

Lv4 码徒
朱***叶 UI设计师 6年前#1

webpack,你值得拥有
ES6更支持所谓的模块化
你可以搜索一下《Javascript模块化7日谈》
写的很棒

Lv6 码匠
飞***猪 交互设计师 6年前#2

我在大概一年前也有同样的困扰,你可以看到,大家的回复都很重肯,很多老司机。
其中这个回答非常棒,体现了很清晰的良好的设计思想,可以说一下点醒了我:

如何在绑定事件的时候,不用关心具体绑定给谁?

事实上,当你开始思考这个问题的时候,说明你开始走起了前端之路。

从jQuery解脱

你需要改变现有类似$('.class1')这种方式,有计划的用事件委派来绑定,这样你的问题解决了,也是第一步迈出了。想想看为什么你看到的牛逼的代码感觉很牛逼?
你需要抽离jQuery的部分和真正逻辑部分,相信我,我理解DOM操作复杂度,我也理解业务复杂度,所以你才需要拆分,不要再看到$('.class').parent().next().next()这种的。

面向对象

记得大学的课程吗,之所以叫面向对象思想,因为这是一种思考方式。你需要将代码颗粒、分散成小而美满足面向对象思想的结构,比如可复用性、适度的封装、善用继承等。
接下来对项目目录和文件结构,甚至命名有要求。简单说不再是一个页面一个js或者一个功能一个js,而是一个对象一个js。

沉淀代码

开始尝试比如React,AngularJS等,看看为什么这些框架写出来的和你现在业务代码不一样。推荐React。
这时候在回来思考你的代码,封装自己的DOM操作方式,形成自己的框架,和完整的前端工程体系。

最后

我总结了下这个路程:

  1. 开始有计划的用事件委派来绑定

  2. 开始抽离jQuery的部分和真正逻辑部分

  3. 开始将代码颗粒、分散成小而美满足面向对象思想的(比如可复用性、适度的封装、善用继承等)结构

  4. 开始对项目目录和文件结构,甚至命名有要求

  5. 善用技巧,摆脱类似$('.class1')这种方式

  6. 开始尝试比如React,AngularJS等。

  7. 封装自己的DOM操作方式

  8. 形成自己的框架

  9. 形成完整的前端工程体系

祝好运

Lv7 码师
疯***了 学生 6年前#3

react + redux + webpack 不光解决你 这么长的问题。。还附带前端性能优化,,代码组织优化,逻辑优化,语法优化 等 各种各样的大礼包

Lv1 新人
何***孽 软件测试工程师 6年前#4

模块化、良好的项目构建、源码组织是跑不了的了

Lv1 新人
真***溜 职业无 6年前#5

angular 模块化开发。gulp 做包管理。压缩合并编译之类。

Lv1 新人
冷***知 职业无 6年前#6

看一下设计模式吧,感觉非常的优雅,可以用漂亮来形容

Lv3 码奴
空***子 职业无 6年前#7

你可以学一下javascript设计模式。
可以让你的代码更优雅
http://www.oschina.net/translate/learning-javascript-design-patterns?lang=chs&page=1#
另外现在操作dom已经越来越少使用到jQuery了,你可以尝试使用react这样的东西,可以让你发现一个全新世界。

Lv4 码徒
日***天 职业无 6年前#8

我目前用的解决方式是seajs来进行javascript模块化,解决了库的依赖和模块化问题,另外还支持异步加载

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取