Javascript 模块化开发的总结遇到的问题
在我们的工作中使用 requirejs 来异步加载 js 的场景经常是加载一些第三方插件,例如:
- require(['jquery', 'lib/lazy/lazyLoad', 'lib/slide/imageSlide', 'lib/carouFredSel/jquery-carouFredSel', 'lib/monitor/monitor'],
- function($, lazyelem, imageSlide, carouFredSel, monitor) { // TODO code });
在这段代码的回调方法里面经常是上千行的业务逻辑代码。
在遇到复杂业务场景时,我们在调试阶段经常就已经被前后交织的逻辑搞得焦头烂额。特别是当代码交接出去给其他人维护的时候,接手代码的同事一定不会很高兴。
以上代码的问题一个文件中的代码量太多 逻辑不明确,这边一段那边一段 变量名称容易被污染我的用法
requirejs 除了引用外部库或者第三方插件的功能外,还可以将页面功能拆解为相对独立的 js 文件,这些文件可以用来做以下几点事情:
1. 将页面拆分成相对独立的几个逻辑区域
2. 每个区域的逻辑放在对应的 js 中开发
3. 在 requirejs 引用的入口文件中引用每个区域的 js 文件
举例
往往一个功能的首页有比较大量的内容展示,其中包括一些数据交互和动效展示,例如:
这个页面可以拆解成以下几个部分:
页头的感恩回馈(这一部分是根据业务需求配置是否展示的) 感恩回馈下面的菜单栏 首页有女生图片的滚屏 热门项目等等……
这些比较明显可以视觉上区分出的区域或者功能上比较独立的区域都可以单独新建 js 文件来书写逻辑。
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: http://www.92to.com/bangong/2017/03-27/19535513.html