评论组件开发
业务拆解
即拆分模块(将相似/相同业务分在一起),根据概要设计文档的模块逻辑图设计主模块,子模块,及与外部模块的数据交互
评论组件子模块 :评论框 评论列表
这么设计在于,评论框作为评论发布的输入框,也可以作为评论列表回复框,而评论列表即最热评论列表,和最新评论列表
排期与工作进度控制
根据拆解的业务模块,把每个模块的功能点详细罗列出来,每天完成哪些功能点做到心中有数/可控,出现问题纠结超过1个小时视情况可以请教前辈
作为开发的准备工作,还可以测试下对外接口,接口数据格式 ,比如登录的回调,登录验证,取用户信息;评论接口返回数据格式,post评论的传递参数
开发前期,可以自行构建dom和css ,毕竟html css js本质上不分家 这样操作dom的时候更熟练
代码开发
遇到业务处理复杂的,不要急于一开始把所有逻辑都能写全,可以先画流程图把逻辑梳理清楚,然后试着写,哪怕写了很多if else,写完后再试着回头来review自己的代码,
将可以重用的抽离出来,或者重新画流程图,重构自己的代码,因为写过一次,这时候对需求更清晰了解的情况下,设计的代码也就会更清晰.
开发过程中遇到的语言细节的问题,自行搜索引擎搜索当然是首选.一开始先学会用,记录下遇到的什么样的问题,完成功能点后再抽时间去研究原理.
一些需要经验的/设计相关的可以请教前辈,这样也不至于跑偏
知识点 (基本是针对jquery API的...)
1.传递参数给on事件的回调函数
给jquery对象绑定事件时,给回调传递参数,查看jqueryAPI可以看出,参数对象会被传递到event.data中
.click( [eventData ], handler )
* eventData
Type: Anything
* An object containing data that will be passed to the event handler.
* handler
Type: Function( Event eventObject )
* A function to execute each time the event is triggered.
jqnode.on('click', '#node',{'name':'nancy',age:24},handleSignInEvent); function handleSignInEvent(event){ console.log(event.data) //object {'name':'nancy',age:24} }
这是一种方式,还有如果传递参数在另外的对象上面,可以用代理
jquery proxy的api
调用方法有好几种
jQuery.proxy( function, context )
jQuery.proxy( context, name )
用哪种形式,依具体情况而定
比如 stackoverflow上面的一个question
$('#myElement').click(function() {
// In this function, "this" is our DOM element.
$(this).addClass('aNewClass');});
But what if we wanted a short delay before adding the class? We might use a setTimeout to accomplish it, but the trouble is that whatever function we give to setTimeout, the value of thisinside that function will be window instead of our element.
$('#myElement').click(function() {
setTimeout(function() {
// Problem! In this function "this" is not our element!
$(this).addClass('aNewClass');
}, 1000);});
So what we can do instead, is to call $.proxy(), sending it the function and the value we want to assign to this, and it will return a function that will retain that value.
$('#myElement').click(function() {
// ------------------v--------give $.proxy our function,
setTimeout($.proxy(function() {
$(this).addClass('aNewClass'); // Now "this" is again our element
}, this), 1000);
// ---^--------------and tell it that we want our DOM element to be the
// value of "this" in the function});
2.异步编程
此次组件开发中比较明显的是列表模块的开发.初始化异步请求数据后渲染到页面前的逻辑处理,刚好开发完后部门的前辈分享了异步请求的博客,我的问题应该是
客户端缓存,就是success拿到数据后缓存,缓存后的数据逻辑处理应该在一个时序,否则就会拿不到数据.值得一提jquery的ajax源码可以重新研究下.
另,值得一提的是try catch ajax是捕获不到异常的.因为它自身做了处理,即如下
try {
$.ajax({ /* do sth*/ });
}catch (e) {
}
这样捕获不到,其异常处理在
error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )