作者liaosankai (低温烘焙)
看板Ajax
标题Re: [问题] 有架构化的Java Script
时间Sat Sep 25 16:37:20 2010
关於这个问题，我也是有相同的经验。最主要是因为javascript虽然可以单独
写成一个js档，再透过<script>标签读入，来达成某个程度上的程式码管理，
但是你必须清楚的知道每个独立的js档案是否有用到其他js档，如果有则必须
一并为需要的JS档加上<script>标签来读入。而不是像一般的程式语言有汇入
其他档案的语法，像c++的include或java的import可以使用，所以当一个专案
变得很大的时候，通常最後为了能让网页正确执行，都会把所有js档全部读入
或全部集中成一个js档，但日後的如果有更新，势必要再把所有档案集中压缩
一次。
针对这个问题我尝试用过动态产生<script>来模拟import的方法，但是很遗憾
的，javascript是个直译式的语言，所以他并不会等待<script>建立完成才继
续下一段程式码，以下面为例子，假设Include函式实作了一个功能：
建立<scirpt>，指定参数为url，并将<script>加入<head>的相关程式码。
global.js 定义了某些变数：
----------------------------------------------------------------
var name = 'Kai';
----------------------------------------------------------------
index.html 的javascript内容：
----------------------------------------------------------------
<script src="
http://localhost/js/Include.js"></script>
<script>
function sayHello()[
alert('hello, ' + name);
}
Include('
http://localhost/js/global.js');
sayHello();
</script>
----------------------------------------------------------------
我们尝试呼叫位於另一个js档案所宣告的name变数，你期望应该看到的是
hello, Kai
但是浏览器会很残酷的跟你说没有这个东东，跑出变数未定义的大错误，因为
sayHello()并不会等待 Include()的完成，就会立刻执行，这结果相当令人沮
丧，但是如果你尝试延迟执行函式：
setTimeout('sayHello()', 1000);
你就能看到与预期相符的结果，表示档案确实是有被读入，也有完成程式码的
执行，但是我们没办法限制程式码的执行顺序。
最後透过不同的逻辑方式，我尝试成功实作了档案汇入的机制，当然在规则上
有其一定的限制，但在执行上确实能达到档案组织管理的好处，不妨可以参考
看看或互相交流讨论，提供更好的意见
专案位置
http://code.google.com/p/jclassscript/
--
欢迎来我的网志看看
@
http://liaosankai.pixnet.net/blog
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 124.9.104.124
1F：→ TonyQ:如果说是本站的script ，不一定要script tag 载啊。:~ 09/25 20:23
2F：→ TonyQ:不过这比较建议是纯client side 没有任何 server 可以帮忙时 09/25 20:23
3F：→ TonyQ:不然从server 设定开发环境，设定打包js的程序，会比client 09/25 20:24
4F：→ TonyQ:有效率很多，毕竟省了 request 。 09/25 20:24
5F：→ TonyQ:如果可以把所有档案压缩一次变成自动化而且几秒钟内就可以解 09/25 20:24
6F：→ TonyQ:决的事情，通常就不会觉得它讨厌了。:D 09/25 20:25
7F：→ liaosankai:感谢你的建议，我能了解你的说法。但我只是很单纯的想 09/25 22:14
8F：→ liaosankai:尝试实作出类似的功能，或许等到javascript2.0出来 09/25 22:15
9F：→ liaosankai:这些都已经实作，而且一定会在更好 09/25 22:17
10F：→ liaosankai:但是就目前来说，提出可能解决的方法或许是比较有趣的 09/25 22:24
11F：→ liaosankai:关於效能并不是主要的考量，只要在能接受的范围就好 09/25 22:25
12F：→ TonyQ:yep 可行解一向都是有趣的，不过描述一个 solution 应该是优 09/25 23:08
13F：→ TonyQ:缺点跟适用情境并提的。因为其实效能是不是在能接受的范围是 09/25 23:08
14F：→ TonyQ:很难说的一件事情。 09/25 23:09
15F：→ TonyQ:不过话说回来，我倒比较希望 browser 对 connection 的 09/25 23:10
16F：→ TonyQ:support 可以好一点，让我们可以真的把js的模组化又不伤本XD 09/25 23:10
17F：→ TonyQ:有一些fw有类的功能，像是 rails 因为他是由 rails去产生 09/25 23:13
18F：→ TonyQ:script tag, 所以他可以写多个 js , debug时执行分开没压缩 09/25 23:13
19F：→ TonyQ:的，但是 deploy 时会自动打包成 all.js 而且自动指过去 09/25 23:14
20F：→ TonyQ:另外这方案最大的缺点在於要完全重写既有的东西，去配合你 09/25 23:18
21F：→ TonyQ:的结构，作为一个玩具可以，不过作为一个solution，我想它给 09/25 23:20
22F：→ TonyQ:的诱因并不大。 09/25 23:20
23F：→ TonyQ:oops , 我发现我在一年半前就对你说过一样的话了...XD 09/25 23:22
24F：→ TonyQ:好吧 那当我没说。XD 09/25 23:22
25F：→ TonyQ:想到另一个可行解，using js 这只plug-in 可以用来管理 09/25 23:44
26F：→ TonyQ:js 的 dependency ，几年前有在project用过。XD 09/25 23:45