浏览 6695 次
|
精华帖 (11) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-03-29
最后修改：2010-04-01
目录 （一）有关框架 （二）文件组织与代码组织 （三）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 遵行的规则如下：
二、第三方库： 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 遵行的规则如下：
三、文件混淆与压缩 工具 用过两种： 金大为的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"))
二、变量命名规范
三、页面中代码的载入 原则 只在主页面中写初始化的代码 ！！！坚决不在主页面中嵌入脚本， ！！！坚决不在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专栏。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：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")) 这样定义的都是对象吧，并不是类呀 |
| 返回顶楼 | |
|
发表时间：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")) 这样定义的都是对象吧，并不是类呀 也可以是类，看你怎么写 |
| 返回顶楼 | |
|
发表时间：2010-03-31
JSI 到现在一直不会用...
我们公司一直在用 金大为早期的 jsa做js压缩 后来他出的jsi一直没有用. :'( |
| 返回顶楼 | |
|
发表时间：2010-03-31
fins 写道 JSI 到现在一直不会用...
我们公司一直在用 金大为早期的 jsa做js压缩 后来他出的jsi一直没有用. :'( JSI使用起来还是很方便的，但可能不大适合网站，网站的JS相对比较简单，我认为比较适合大型的WEB软件。但是用JSI描述依赖，并作为开发阶段来用还是很方便的。 |
| 返回顶楼 | |
