XX實習記錄

前言

9月下旬來到XX實習速缨,在web前端崗位。剛來的前幾天很懵逼代乃,看著公司的各種開發(fā)工具和框架文檔旬牲,信息量巨大仿粹,頭大。后來慢慢熟悉了框架和命令原茅,工具的使用吭历,業(yè)務流程和開發(fā)流程,一直在進入狀態(tài)擂橘。
下面記錄一些實習過程遇到的問題和學習到的經(jīng)驗晌区。

代碼設計
  1. 減少DOM交互,jquery選擇器避免重復通贞,查詢一次朗若,多次調(diào)用;好的方法是在邏輯頁面開頭就把需要的節(jié)點都查詢好昌罩;

  2. 判斷變量是否存在時哭懈,可以用variable = isexist ? isexist : null代替if else語句;

  3. 前端頁面要控制好頁面結(jié)構(gòu)茎用,頁面結(jié)構(gòu)先設計再模塊分離遣总,公共模塊寫在common,增加復用轨功;

  4. 養(yǎng)成寫頁面初始化的習慣彤避,初始化數(shù)據(jù),結(jié)構(gòu)夯辖,比如pageWidthHeight琉预、scrollFunctioncontainer等基礎數(shù)據(jù)和結(jié)構(gòu)初始化蒿褂;

  5. 客戶端渲染的html模板圆米,可以用jquery委托注冊未來DOM去獲取,如$('body').on('click','.selector',function(){})去獲取未來的.selector啄栓;

  6. 觸屏端有下一頁的頁面可以分成三步娄帖,第一步服務端渲染出所有數(shù)據(jù),寫好下一頁昙楚、上一頁按鈕近速,第二步完成業(yè)務邏輯,第三步移除按鈕堪旧,寫下拉填充削葱,進行用戶優(yōu)化;

  7. 函數(shù)復用淳梦,類似ajax析砸,updateData等獨立性高,復用性大的操作爆袍,封裝成一個參數(shù)根據(jù)需求定義好的函數(shù)首繁,增加復用性作郭;

  8. 模塊化開發(fā),渲染通過mustache等模板寫好結(jié)構(gòu)弦疮,數(shù)據(jù)通過api獲取夹攒,邏輯與數(shù)據(jù)分開,視圖與邏輯分開胁塞,降低耦合性芹助;

  9. 接著上一條,如果業(yè)務邏輯復雜闲先,可以在靜態(tài)資源中把js可以分成状土,actiomodel伺糠,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
    };
})();
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市舵揭,隨后出現(xiàn)的幾起案子谤专,更是在濱河造成了極大的恐慌,老刑警劉巖午绳,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件置侍,死亡現(xiàn)場離奇詭異,居然都是意外死亡拦焚,警方通過查閱死者的電腦和手機蜡坊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赎败,“玉大人秕衙,你說我怎么就攤上這事〗┕危” “怎么了据忘?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長搞糕。 經(jīng)常有香客問我勇吊,道長,這世上最難降的妖魔是什么寞宫? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任萧福,我火速辦了婚禮,結(jié)果婚禮上辈赋,老公的妹妹穿的比我還像新娘鲫忍。我一直安慰自己,他們只是感情好钥屈,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布悟民。 她就那樣靜靜地躺著,像睡著了一般篷就。 火紅的嫁衣襯著肌膚如雪射亏。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天竭业,我揣著相機與錄音智润,去河邊找鬼。 笑死未辆,一個胖子當著我的面吹牛窟绷,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播咐柜,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼兼蜈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了拙友?” 一聲冷哼從身側(cè)響起为狸,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎遗契,沒想到半個月后辐棒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡牍蜂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年涉瘾,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片捷兰。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡立叛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出贡茅,到底是詐尸還是另有隱情秘蛇,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布顶考,位于F島的核電站赁还,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏驹沿。R本人自食惡果不足惜艘策,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望渊季。 院中可真熱鬧朋蔫,春花似錦罚渐、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至青扔,卻和暖如春源织,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背微猖。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工谈息, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凛剥。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓侠仇,卻偏偏與公主長得像,于是被迫代替她去往敵國和親当悔。 傳聞我的和親對象是個殘疾皇子傅瞻,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,344評論 25 707
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    程序員poetry閱讀 114,432評論 24 450
  • 最近看到朋友圈幾個朋友在猛讀類似成功學的文章嗅骄,什么如何管理好你的時間,什么堅持下去就能成功饼疙,吧啦吧啦吧啦的有的沒的...
    阿正_fz閱讀 92評論 0 0
  • 終究有一天我會變成一個名字溺森,躺在了你的記事本里,無聲無息窑眯。你讀它屏积,就像讀一個陌生的故事,曾經(jīng)有過的感情磅甩,連一張紙的...
    江七閱讀 519評論 0 0
  • 文/莫小葉 1 虹說卷要,當她接到那個陌生女孩的電話時渣聚,整個人像被澆了一盆冷水,讓她瞬間在三伏天里僧叉,從頭到腳結(jié)成了冰奕枝。...
    我是莫小葉閱讀 1,834評論 2 18