Rumah > Soal Jawab > teks badan
两段较长的代码:
I 普通写法:
(function(){
/*** 定义相关变量 ***/
var con = $id('container');
var leftCon = $cn('left')[0];
var rightCon = $cn('right')[0];
var thumb = $cn('user_thumb' , leftCon)[0];
var menusList = $id('func_area');
.....
/*** 初始化 ***/
checkEleH();
menuSlide(menus , levelTwo);
showTime();
resizeIfr();
window.addEventListener('resize' , resizeIfr , false);
window.addEventListener('resize' , checkEleH ,false);
/*** 工具函数 ***/
function checkEleH({...}
function menuSlide(menus , levelTwoList){...}
function showTime(){...}
}());
II 面向对象的写法
(function(){
// 定义搜索功能
function Search(){
this.searchForm = $id('search_form');
this.main = $cn('search_result')[0];
this.startBtn = $id('start_btn');
this.endBtn = $id('end_btn');
...
}
Search.prototype = {
// 变量重置
init: function(){...} ,
setVar: function(){...} ,
clearTimeout: function(){...} ,
// 发起搜索
search: function(){...} ,
// 终止搜索
stopSearch: function(){...} ,
initial: function(self){
self.startBtn.addEventListener('click' , function(){
self.search();
cso.remove(self.searching , 'hide');
cso.remove(self.stopBtn , 'hide');
} , false);
self.stopBtn.addEventListener('click' , function(){
self.stopSearch();
cso.add(this , 'hide');
} , false);
}
};
/*
* 上面的对象定义了页面所有的事件
* 下面只需要简单的调用一下初始文件,整个页面的 所有 js 事件就都定义了
*/
var search = new Search();
search.initial(search);
})();
不知道这两种写法的优缺点是什么?? 有没有更好的写法?? 大牛们都是怎样组织代码去实现一个页面的 js 的??
ringa_lee2017-04-11 12:44:54
面向对象的写法采用了构造函数模式和原型模式,构建函数用于定义实体属性,原型模式用于定义方法和共享的属性。这样,Search的实例会有自己的一份实力属性的副本,又同时共享着方法的应用,最大限度地节省了内存