JavaScript 模块化疑问

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3621 天前的主题，其中的信息可能已经有所发展或是发生改变。

a.js define [b, c, d], function(){} ,
b.js [e, f, g], function(){},
e.js [h, i] , function(){} 包含a.js, requirejs是否会自动加载a b c d e f g h i 7个js文件?

加载7模块,要发送7次http请求,是不是有点多了?
可是把所有代码写在一个文件里面,是不是有点乱?

呵呵,大家是如何看到JS模块化这个问题的?

a.js

模块

function

32 条回复 • 2014-12-31 08:48:08 +08:00

datou552211

2014-12-30 16:07:54 +08:00

会，实际上是执行了一遍代码，遇到重复加载的就会跳过

iwege

2014-12-30 16:12:44 +08:00

requirejs 有自己的optimize api，可以将文件合并。当然也可以自己合并。

pepsin

2014-12-30 16:16:41 +08:00

控制好粒度吧。最近看到一堆人鼻屎大的东西都搞个模块，也是惊了。

pertersonvv

2014-12-30 16:25:39 +08:00

@datou552211 合并后文件的文本顺序是否为 h i e f g c d a?

pertersonvv

2014-12-30 16:26:58 +08:00

@iwege 合并后,就一个a.js,其他几个都合并到a.js么?

jasonslyvia

2014-12-30 16:34:53 +08:00

骚年，有个东西叫 browserify，还有个东西叫 webpack，有兴趣的话可以在 server 端处理 js 的 combo，读一下 requirejs 的 config 就好

pertersonvv

2014-12-30 16:40:12 +08:00

@jasonslyvia 在浏览器中跑node模块,太夸张了吧,node依赖一堆的,网络怎么加载,node的文件接口,浏览器能执行?

miser

2014-12-30 16:41:08 +08:00

@pertersonvv 有试过合并吗？

damngood

2014-12-30 16:46:01 +08:00

@pertersonvv browserify 只是保持了 node 的接口, 对于不能在浏览器环境中运行的接口有做相应的 shim

pertersonvv

2014-12-30 16:49:09 +08:00

@damngood shim是装饰器吧,关键是浏览器JS不能读本地文件的啊,用了browserify,浏览器可以读写本地文件?

datou552211

2014-12-30 17:17:27 +08:00 via iPhone

browerify把require的包内容合并了

akfish

2014-12-30 17:20:40 +08:00

lz要是玩玩polymer还不被吓死，连HTML页面都是拆成无数块然后import进来的。

boom11235

2014-12-30 18:00:44 +08:00

前端模块化一直是个麻烦的问题，也有很多相关的解决方案出来，requirejs，seajs，duo，webpack，spm等。模块粒度过细，如果不打包或者服务器做combo，会导致请求过多，性能不好，一般不考虑在线上直接使用加载多个的方案，而combo和打包则需要考虑缓存失效问题，稳定下来的模块或者不怎么更新的第三方模块和经常变动的模块需要分开处理。细化下去，还有各种各样的细节问题，楼主请自行挖掘。

boom11235

2014-12-30 18:02:58 +08:00

楼主不用纠结浏览器JS读写本地文件的问题，browserify没说它提供本地fs的读写模块，请详见文档。browserify提供的模块大多都是在实际应用中在浏览器有使用价值和可能性的模块，而不是全包。

RoshanWu

2014-12-30 18:07:27 +08:00

https://github.com/jrburke/r.js/

pertersonvv

2014-12-30 18:10:49 +08:00

@pepsin 粒度怎么划分才是合理的呢?

pertersonvv

2014-12-30 18:33:57 +08:00

@akfish 这货官网居然需要翻墙:(

kmvan

2014-12-30 18:52:36 +08:00

我也纠结过模块化合并的问题，我用的是 wp，想要写个 php 合并程序来合并主题的 commonjs 模块。
一直在分析如何依赖和合并的优先级等问题，头都大。你看我这博客 http://inn-studio.com 就是因为还没合并，init.js 模块文件一堆堆，哎。。。

ianva

2014-12-30 19:08:05 +08:00

如果是 requirejs 的话就 r.js，各种模块管理都有各自的方案

pertersonvv

2014-12-30 19:14:55 +08:00

@kmvan 这个wp主题你自己弄的?

pertersonvv

2014-12-30 19:17:06 +08:00

@kmvan 楼主不是码农,哈哈

bigcoon

2014-12-30 19:43:51 +08:00

用grunt合并，有空研究下Ghost的前端源码，模块化做得不错

另外搭车问下，像Ghost的前端这种模块化程度，我开发的时候是不是很不方便？

jerray

2014-12-30 20:59:08 +08:00

开发环境可以不合并，让requirejs异步加载文件。发布之前用r.js合并一下就可以了。

2014-12-30 22:20:59 +08:00

@pepsin 哈哈。经常看到 20 行不到的代码也要打个包。

kmvan

2014-12-30 22:27:25 +08:00

@pertersonvv 这个wp主题你自己弄的?
是的，如果我能解决在 wp 上合并 commonjs 模块文件的问题，估计就是World first 了。估计我只能从 seajs 源码和 spm 中山寨到php中才行。

muzuiget

2014-12-30 23:01:07 +08:00

现在深度使用了 dojo，dojo 就是用这种 AMD 模块，看上去很美好，其实坑很多，蛋疼无比。

郁闷之余去 Google 了下「JavaScript AMD sucks」，第一篇是

http://tomdale.net/2012/01/amd-is-not-the-answer/

Ember.js 作者之一写的，很认同他的观点。

pepsin

2014-12-30 23:19:59 +08:00

@pertersonvv 多碰坑多试试 Edge 环境加载那些个美好的页面～

pertersonvv

2014-12-31 00:38:42 +08:00

@pepsin
@jerray 用r.js合并,是否要安装grunt?

jerray

2014-12-31 01:25:30 +08:00

@pertersonvv 不需要。跟grunt没关系的。

yjfengwen

2014-12-31 01:28:22 +08:00

感觉这是一个工程化的东西，比较同意张云龙前端工程化的观点。https://github.com/fouber/blog/issues/2

thonatos

2014-12-31 02:53:47 +08:00 via Android

一直在用spm，很舒心。

lwbjing

2014-12-31 08:48:08 +08:00

上线前根据依赖打包下就好了。