前言
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
};
})();