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

bellstar

浏览: 150690 次
性别:
来自: 上海

最近访客更多访客>>

qingshou117

z09026040

zjxysl

michaelyn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

JavaScript JSI jQuery IBM 脚本

目录
（一）有关框架
（二）文件组织与代码组织
（三）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

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

二、变量命名规范

全局变量以$开头，如$user
常量全部大写，单词以下划线分隔，如STATIC_ROOT
变量采用驮峰式写法，如userIcon，UserRelation
类名首字母大写
普通变量、命名空间，首字母小写
局部变量可缩写，命名空间，类名尽量不缩写
条件表达式、正则表式式，如果很复杂，给其命名

三、页面中代码的载入
原则
只在主页面中写初始化的代码
！！！坚决不在主页面中嵌入脚本，
！！！坚决不在ajax载入的HTML片段里面嵌入脚本，载入后要执行代码，可以写在回调里面

主面页
在顶部我们只载入了两个JS，一个是swfobject.js，一个是Comm.js，这两个文件都很小
在comm.js中我们定义了一个ready方法，功能类似jQuery(document).ready。其他的脚本全部放到了页面最底部。

<head>
<script type="javascript" src="Comm.js"></script>
<script type="javascript" src="swfobject.js"></script>
</head>
<body>
<script type="javascript" src="1..n"></script><!--其他脚本-->
<script>
$BASE_URL = {
static: <?php ?>,
user: <?php ?>
}
jQuery(document).ready(function(){
comm.init(); //按顺序执行传给comm.ready()的方法;
})
</script>
</body>
<html>

ajax载入的HTML片段中要用到的脚本，大致做法如下

function loadHTML(target, src, js){ 
   Comm.importJs(js, function(){
     jQuery(target).load(src);
   })
}

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

分享到：

javascript总结（三）js与FLASH的交互 | javascript总结（一）有关框架

2010-03-29 15:13
浏览 2430
评论(4)
论坛回复 / 浏览 (4 / 6695)
分类:Web前端
查看更多

4 楼 bellstar 2010-03-31

fins 写道

JSI 到现在一直不会用...

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

:'(

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

3 楼 fins 2010-03-31

JSI 到现在一直不会用...

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

:'(

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"))

这样定义的都是对象吧，并不是类呀

也可以是类，看你怎么写

1 楼 godfish 2010-03-30

引用

这样定义的都是对象吧，并不是类呀

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论