[size=medium]
[u][b]目录[/b][/u]
[url=http://www.iteye.com/topic/625734]（一）有关框架[/url]
（二）文件组织与代码组织
[url=http://www.iteye.com/topic/627439]（三）JS与FLASH交互[/url]
[url=http://www.iteye.com/topic/627538]（四）ajax局部刷新与RPC[/url]
[url=http://www.iteye.com/topic/628228] (五）获取设置元素样式与监听元素事件[/url]
[url=http://www.iteye.com/topic/629165] (六）页面元素的创建调整与关联[/url]
（七）浏览器兼容性问题
（八）WEB软件的前端架构实践
[/size]
[color=red]文章中的代码只为表达文章意义，非真正能执行的代码。[/color]
现在公司的文件组织结构就不列举了，有点儿乱，有不能算理由的历史原因和不严谨的因素 :oops: ，要整。我的重整方案：
[size=large][b]文件组织[/b][/size]
[size=medium]一、自己开发的代码[/size]
[u][b]文件命名[/b][/u]：与类的名字一样，如有MessageBox类，则文件名也为MessageBox，当然前提是没有在一个文件里放两个类，这个目前做到了。
[u][b]文件夹命名[/b][/u]：
小写，与命名空间一致：
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
[b]遵行的规则如下[/b]：
[list]
[*]公用的类库（与具体业务逻辑无关）放到comm目录下，公用代码区分版本
[*]业务逻辑放到app目录下，app目录下是各模块的文件夹，模块下如果还有子模块，继续建立子模块文件夹
[*]业务逻辑代码不区分版本
[/list]
[size=medium]二、第三方库：[/size]
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
遵行的规则如下：
[list]
[*]建立版本号文件夹，版本号中的.转为_表示，版本号前加小写字母v
[*]如果某个第三方库为依赖于某个框架，则放到此框架根目录之下，不必放到依赖的版本之下
[*]下载到的第三方库文件原样全部直接放到版本号文件夹下，不重命名原来的文件或文件夹，包含的css，images文件夹也保持原样。这样做目的是为了保持原样。
[/list]
[size=medium]三、文件混淆与压缩[/size]
[b]工具[/b]
用过两种：
[url=http://jindw.iteye.com/]金大为[/url]的[url=http://www.xidea.org/project/jsa/]JSA[/url]：可配置ANT来批量压缩，会进行脚本分析，采用[url=http://www.iteye.com/wiki/JSI]JSI[/url]来管理脚本的话，就用JSA
[url=http://developer.yahoo.com/yui/compressor/]yui-compressor[/url]：可在命令行下运行，我写了RUBY脚本来批量压缩，参见[url=http://bellstar.iteye.com/blog/376780]自动批量压缩JS和CSS[/url]
[b]有关压缩脚本的存放位置[/b]
我们的SVN静态目录结构是这样的
static------js
|---js_min
|---css
|---css_min
把源和压缩目录分开，而不是放到一起，有以下好处
[list]
[*]源文件不与压缩文件放一起，很清爽
[*]模板中定义一个文件夹的变量，通过更改它便可切换源目录与压缩文件目录
[/list]
[size=large][b]代码组织[/b][/size]
[size=medium]一、命名空间的实现[/size]
[url=http://bellstar.iteye.com/blog/544948]参见实现javascript的namespace声明[/url]
//example
[size=medium]二、变量命名规范[/size]
[list]
[*]全局变量以$开头，如$user
[*]常量全部大写，单词以下划线分隔，如STATIC_ROOT
[*]变量采用驮峰式写法，如userIcon，UserRelation
[*]类名首字母大写
[*]普通变量、命名空间，首字母小写
[*]局部变量可缩写，命名空间，类名尽量不缩写
[*]条件表达式、正则表式式，如果很复杂，给其命名
[/list]
[size=medium]三、页面中代码的载入[/size]
[u][b]原则[/b][/u]
只在主页面中写初始化的代码
！！！坚决不在主页面中嵌入脚本，
！！！坚决不在ajax载入的HTML片段里面嵌入脚本，载入后要执行代码，可以写在 回调里面
[u][b]主面页[/b][/u]
在顶部我们只载入了两个JS，一个是swfobject.js，一个是Comm.js，这两个文件都很小
在comm.js中我们定义了一个ready方法，功能类似jQuery(document).ready。其他的脚本全部放到了页面最底部。
[u][b]ajax载入的HTML片段中要用到的脚本，大致做法如下 [/b][/u]
[u][b]项目很大，依赖关系复杂[/b][/u]
用JSI来管理和导入你的脚本，SO EASY！参见[url=http://www.iteye.com/wiki/JSI]JSI专栏[/url]。
[u][b]目录[/b][/u]
[url=http://www.iteye.com/topic/625734]（一）有关框架[/url]
（二）文件组织与代码组织
[url=http://www.iteye.com/topic/627439]（三）JS与FLASH交互[/url]
[url=http://www.iteye.com/topic/627538]（四）ajax局部刷新与RPC[/url]
[url=http://www.iteye.com/topic/628228] (五）获取设置元素样式与监听元素事件[/url]
[url=http://www.iteye.com/topic/629165] (六）页面元素的创建调整与关联[/url]
（七）浏览器兼容性问题
（八）WEB软件的前端架构实践
[/size]
[color=red]文章中的代码只为表达文章意义，非真正能执行的代码。[/color]
现在公司的文件组织结构就不列举了，有点儿乱，有不能算理由的历史原因和不严谨的因素 :oops: ，要整。我的重整方案：
[size=large][b]文件组织[/b][/size]
[size=medium]一、自己开发的代码[/size]
[u][b]文件命名[/b][/u]：与类的名字一样，如有MessageBox类，则文件名也为MessageBox，当然前提是没有在一个文件里放两个类，这个目前做到了。
[u][b]文件夹命名[/b][/u]：
小写，与命名空间一致：
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
[b]遵行的规则如下[/b]：
[list]
[*]公用的类库（与具体业务逻辑无关）放到comm目录下，公用代码区分版本
[*]业务逻辑放到app目录下，app目录下是各模块的文件夹，模块下如果还有子模块，继续建立子模块文件夹
[*]业务逻辑代码不区分版本
[/list]
[size=medium]二、第三方库：[/size]
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
遵行的规则如下：
[list]
[*]建立版本号文件夹，版本号中的.转为_表示，版本号前加小写字母v
[*]如果某个第三方库为依赖于某个框架，则放到此框架根目录之下，不必放到依赖的版本之下
[*]下载到的第三方库文件原样全部直接放到版本号文件夹下，不重命名原来的文件或文件夹，包含的css，images文件夹也保持原样。这样做目的是为了保持原样。
[/list]
[size=medium]三、文件混淆与压缩[/size]
[b]工具[/b]
用过两种：
[url=http://jindw.iteye.com/]金大为[/url]的[url=http://www.xidea.org/project/jsa/]JSA[/url]：可配置ANT来批量压缩，会进行脚本分析，采用[url=http://www.iteye.com/wiki/JSI]JSI[/url]来管理脚本的话，就用JSA
[url=http://developer.yahoo.com/yui/compressor/]yui-compressor[/url]：可在命令行下运行，我写了RUBY脚本来批量压缩，参见[url=http://bellstar.iteye.com/blog/376780]自动批量压缩JS和CSS[/url]
[b]有关压缩脚本的存放位置[/b]
我们的SVN静态目录结构是这样的
static------js
|---js_min
|---css
|---css_min
把源和压缩目录分开，而不是放到一起，有以下好处
[list]
[*]源文件不与压缩文件放一起，很清爽
[*]模板中定义一个文件夹的变量，通过更改它便可切换源目录与压缩文件目录
[/list]
[size=large][b]代码组织[/b][/size]
[size=medium]一、命名空间的实现[/size]
[url=http://bellstar.iteye.com/blog/544948]参见实现javascript的namespace声明[/url]
//example
(function(user){
user.User = function(){
//code ...
}
})(ibm.namespace("ibm.app.user"))
[size=medium]二、变量命名规范[/size]
[list]
[*]全局变量以$开头，如$user
[*]常量全部大写，单词以下划线分隔，如STATIC_ROOT
[*]变量采用驮峰式写法，如userIcon，UserRelation
[*]类名首字母大写
[*]普通变量、命名空间，首字母小写
[*]局部变量可缩写，命名空间，类名尽量不缩写
[*]条件表达式、正则表式式，如果很复杂，给其命名
[/list]
[size=medium]三、页面中代码的载入[/size]
[u][b]原则[/b][/u]
只在主页面中写初始化的代码
！！！坚决不在主页面中嵌入脚本，
！！！坚决不在ajax载入的HTML片段里面嵌入脚本，载入后要执行代码，可以写在 回调里面
[u][b]主面页[/b][/u]
在顶部我们只载入了两个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>
[u][b]ajax载入的HTML片段中要用到的脚本，大致做法如下 [/b][/u]
function loadHTML(target, src, js){
Comm.importJs(js, function(){
jQuery(target).load(src);
})
}
[u][b]项目很大，依赖关系复杂[/b][/u]
用JSI来管理和导入你的脚本，SO EASY！参见[url=http://www.iteye.com/wiki/JSI]JSI专栏[/url]。
扫一扫
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
