XX实习记录

前言

9月下旬来到XX实习，在web前端岗位。刚来的前几天很懵逼，看着公司的各种开发工具和框架文档，信息量巨大，头大。后来慢慢熟悉了框架和命令，工具的使用，业务流程和开发流程，一直在进入状态。
下面记录一些实习过程遇到的问题和学习到的经验。

代码设计

1. 减少DOM交互，jquery选择器避免重复，查询一次，多次调用；好的方法是在逻辑页面开头就把需要的节点都查询好；

2. 判断变量是否存在时，可以用variable = isexist ? isexist : null代替if else语句；

3. 前端页面要控制好页面结构，页面结构先设计再模块分离，公共模块写在common，增加复用；

4. 养成写页面初始化的习惯，初始化数据，结构，比如pageWidthHeight、scrollFunction、container等基础数据和结构初始化；

5. 客户端渲染的html模板，可以用jquery委托注册未来DOM去获取，如$('body').on('click','.selector',function(){})去获取未来的.selector；

6. 触屏端有下一页的页面可以分成三步，第一步服务端渲染出所有数据，写好下一页、上一页按钮，第二步完成业务逻辑，第三步移除按钮，写下拉填充，进行用户优化；

7. 函数复用，类似ajax，updateData等独立性高，复用性大的操作，封装成一个参数根据需求定义好的函数，增加复用性；

8. 模块化开发，渲染通过mustache等模板写好结构，数据通过api获取，逻辑与数据分开，视图与逻辑分开，降低耦合性；

9. 接着上一条，如果业务逻辑复杂，可以在静态资源中把js可以分成，actio，model，view，即使不使用React；

代码规范

//代码美化之条件判断
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 () {
        // 某一类代码
    })();



// 结构化封装
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
    };
})();