前言
9月下旬来到XX实习，在web前端岗位。刚来的前几天很懵逼，看着公司的各种开发工具和框架文档，信息量巨大，头大。后来慢慢熟悉了框架和命令，工具的使用，业务流程和开发流程，一直在进入状态。
下面记录一些实习过程遇到的问题和学习到的经验。
代码设计
减少DOM交互，jquery选择器避免重复，查询一次，多次调用；好的方法是在逻辑页面开头就把需要的节点都查询好；
判断变量是否存在时，可以用
variable = isexist ? isexist : null代替if else语句；前端页面要控制好页面结构，页面结构先设计再模块分离，公共模块写在common，增加复用；
养成写页面初始化的习惯，初始化数据，结构，比如
pageWidthHeight、scrollFunction、container等基础数据和结构初始化；客户端渲染的html模板，可以用jquery委托注册未来DOM去获取，如
$('body').on('click','.selector',function(){})去获取未来的.selector；触屏端有下一页的页面可以分成三步，第一步服务端渲染出所有数据，写好下一页、上一页按钮，第二步完成业务逻辑，第三步移除按钮，写下拉填充，进行用户优化；
函数复用，类似
ajax，updateData等独立性高，复用性大的操作，封装成一个参数根据需求定义好的函数，增加复用性；模块化开发，渲染通过
mustache等模板写好结构，数据通过api获取，逻辑与数据分开，视图与逻辑分开，降低耦合性；接着上一条，如果业务逻辑复杂，可以在静态资源中把
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
};
})();
