前言
9月下旬來到XX實習速缨，在web前端崗位。剛來的前幾天很懵逼代乃，看著公司的各種開發(fā)工具和框架文檔旬牲，信息量巨大仿粹，頭大。后來慢慢熟悉了框架和命令原茅，工具的使用吭历，業(yè)務流程和開發(fā)流程，一直在進入狀態(tài)擂橘。
下面記錄一些實習過程遇到的問題和學習到的經(jīng)驗晌区。
代碼設計
減少DOM交互，jquery選擇器避免重復通贞，查詢一次朗若，多次調(diào)用；好的方法是在邏輯頁面開頭就把需要的節(jié)點都查詢好昌罩；
判斷變量是否存在時哭懈，可以用
variable = isexist ? isexist : null代替if else語句；前端頁面要控制好頁面結(jié)構(gòu)茎用，頁面結(jié)構(gòu)先設計再模塊分離遣总，公共模塊寫在common，增加復用轨功；
養(yǎng)成寫頁面初始化的習慣彤避，初始化數(shù)據(jù)，結(jié)構(gòu)夯辖，比如
pageWidthHeight琉预、scrollFunction、container等基礎數(shù)據(jù)和結(jié)構(gòu)初始化蒿褂；客戶端渲染的html模板圆米，可以用jquery委托注冊未來DOM去獲取，如
$('body').on('click','.selector',function(){})去獲取未來的.selector啄栓；觸屏端有下一頁的頁面可以分成三步娄帖，第一步服務端渲染出所有數(shù)據(jù)，寫好下一頁昙楚、上一頁按鈕近速，第二步完成業(yè)務邏輯，第三步移除按鈕堪旧，寫下拉填充削葱，進行用戶優(yōu)化；
函數(shù)復用淳梦，類似
ajax析砸，updateData等獨立性高，復用性大的操作爆袍，封裝成一個參數(shù)根據(jù)需求定義好的函數(shù)首繁，增加復用性作郭；模塊化開發(fā)，渲染通過
mustache等模板寫好結(jié)構(gòu)弦疮，數(shù)據(jù)通過api獲取夹攒，邏輯與數(shù)據(jù)分開，視圖與邏輯分開胁塞，降低耦合性芹助；接著上一條，如果業(yè)務邏輯復雜闲先，可以在靜態(tài)資源中把
js可以分成状土，actio，model伺糠，view蒙谓，即使不使用React；
代碼規(guī)范
//代碼美化之條件判斷
function getEle(id) {
if (id != '') {
return document.getElementById(id);
} else {
return null;
}
}
//改善之后
function getEle(id) {
return !id ? null : document.getElementById(id);
}
//代碼美化之枚舉
function getNote(err) {
if (err == 'NoLogin') {
return '請先登錄';
} else if (err == 'NoActive') {
return '您還沒有激活';
} else if (err == 'Error') {
return '操作異常训桶，請重試';
} else {
return '未知錯誤';
}
}
//改善之后
function getNote(err) {
var obj = {
'NoLogin': '請先登錄',
'NoActive': '您還沒有激活',
'Error': '操作異常累驮，請重試'
};
return obj[err] || '未知錯誤';
}
//代碼美化之與或運算
function clickA(event, callback) {
var srcEl = window.event ? event.srcElement : event.target;
if (srcEl.tagName == 'A') {
if (!!callback) callback(srcEl);
}
}
//改善之后
function clickA(event, callback) {
var srcEl = event.target || event.srcElement;
if (srcEl.tagName == 'A') {
callback && callback(srcEl);
}
}
//代碼美化之IF嵌套
function addUser(username, mobile, pwd) {
if (username != '' && mobile != '' && pwd != '') {
if (/^1\d{10}$/.test(mobile)) {
$.post('adduser.ashx', { username: username, mobile: mobile, pwd: pwd });
return '已提交';
} else {
return '手機號輸入有誤';
}
} else {
return '請將表單填寫完整';
}
}
//改善之后
function addUser(username, mobile, pwd) {
if (!username || !mobile || !pwd) return '請將表單填寫完整';
if (!/^1\d{10}$/.test(mobile)) return '手機號輸入有誤';
$.post('adduser.ashx', { username: username, mobile: mobile, pwd: pwd });
return '已提交';
}
//代碼美化之封裝
// 一般性的代碼封裝
(function () {
// 某一類代碼
})();
// 結(jié)構(gòu)化封裝
var myobj = {
section1: function () {
// 某一類代碼
},
section2: function () {
// 某一類代碼
}
};
// 單件模式封裝
var myobj = (new function () {
this.section1 = function () {
// 某一類代碼
}
this.section2 = function () {
// 某一類代碼
}
});
// 全閉包式封裝
(function () {
function _section1() {
// 某一類代碼
}
function _section2() {
// 某一類代碼
}
window.myobj = {
section1: _section1,
section2: _section2
};
})();
