javascript小结（二）文件组织与代码组织

2012-11-22

javascript总结（二）文件组织与代码组织目录（一）有关框架（二）文件组织与代码组织（三）JS与FLASH交互（四）ajax

javascript总结（二）文件组织与代码组织

目录
（一）有关框架
（二）文件组织与代码组织
（三）JS与FLASH交互
（四）ajax局部刷新与RPC
(五）获取设置元素样式与监听元素事件
(六）页面元素的创建调整与关联
（七）浏览器兼容性问题
（八）WEB软件的前端架构实践

文章中的代码只为表达文章意义，非真正能执行的代码。
现在公司的文件组织结构就不列举了，有点儿乱，有不能算理由的历史原因和不严谨的因素，要整。我的重整方案：
文件组织
一、自己开发的代码
文件命名：与类的名字一样，如有MessageBox类，则文件名也为MessageBox，当然前提是没有在一个文件里放两个类，这个目前做到了。

文件夹命名：
小写，与命名空间一致：
jsroot--comm------util-------v1_0------Cookie.js
                 |                |
                 |                ui-------v2_0------MessageBox.js
                 |----------Comm.js （定义公用库的shortname）
                 |
             app----------user----- User.js
                 |                |---------Profile.js
                 |                |---------IconEdit.js
                 |                |---------Relation.js
                 |
                 |-------- space-----Share.js
                                   |----------MyApps.js
遵行的规则如下：
公用的类库（与具体业务逻辑无关）放到comm目录下，公用代码区分版本业务逻辑放到app目录下，app目录下是各模块的文件夹，模块下如果还有子模块，继续建立子模块文件夹业务逻辑代码不区分版本
二、第三方库：
jsroot--vendor----jQuery---v1_2_4----jQuery-1.2.4.min.js
                 |                |
                 |                |--------plugin----imagAreaSelect-----v0_9_2_3----[lib all files]
                 |
                 |---------firebug---v1_0----firebug-lite-compressed.js

遵行的规则如下：
建立版本号文件夹，版本号中的.转为_表示，版本号前加小写字母v如果某个第三方库为依赖于某个框架，则放到此框架根目录之下，不必放到依赖的版本之下下载到的第三方库文件原样全部直接放到版本号文件夹下，不重命名原来的文件或文件夹，包含的css，images文件夹也保持原样。这样做目的是为了保持原样。

三、文件混淆与压缩
工具
用过两种：
金大为的JSA：可配置ANT来批量压缩，会进行脚本分析，采用JSI来管理脚本的话，就用JSA
yui-compressor：可在命令行下运行，我写了RUBY脚本来批量压缩，参见自动批量压缩JS和CSS

有关压缩脚本的存放位置
我们的SVN静态目录结构是这样的
static------js
           |---js_min
           |---css
           |---css_min
把源和压缩目录分开，而不是放到一起，有以下好处
源文件不与压缩文件放一起，很清爽模板中定义一个文件夹的变量，通过更改它便可切换源目录与压缩文件目录

代码组织
一、命名空间的实现
参见实现javascript的namespace声明
//example



ajax载入的HTML片段中要用到的脚本，大致做法如下 
function loadHTML(target, src, js){    Comm.importJs(js, function(){     jQuery(target).load(src);   })}

项目很大，依赖关系复杂
用JSI来管理和导入你的脚本，SO EASY！参见JSI专栏。





    1 楼    godfish    2010-03-30              引用//example
Javascript 代码

   1. (function(user){  
   2. user.User = function(){  
   3.  //code ...  
   4. }  
   5. })(ibm.namespace("ibm.app.user"))  

(function(user){
user.User = function(){
 //code ...
}
})(ibm.namespace("ibm.app.user"))



这样定义的都是对象吧，并不是类呀    2 楼    bellstar    2010-03-31              godfish 写道引用//example
Javascript 代码

   1. (function(user){  
   2. user.User = function(){  
   3.  //code ...  
   4. }  
   5. })(ibm.namespace("ibm.app.user"))  

(function(user){
user.User = function(){
 //code ...
}
})(ibm.namespace("ibm.app.user"))



这样定义的都是对象吧，并不是类呀
也可以是类，看你怎么写    3 楼    fins    2010-03-31              JSI 到现在一直不会用...

我们公司一直在用 金大为早期的 jsa做js压缩
后来他出的jsi一直没有用.

:'(    4 楼    bellstar    2010-03-31              fins 写道JSI 到现在一直不会用...

我们公司一直在用 金大为早期的 jsa做js压缩
后来他出的jsi一直没有用.

:'(
JSI使用起来还是很方便的，但可能不大适合网站，网站的JS相对比较简单，我认为比较适合大型的WEB软件。但是用JSI描述依赖，并作为开发阶段来用还是很方便的。

热点排行

JavaScript

javascript小结（二）文件组织与代码组织