지난 이틀간 텐센트 웨이보 출시 효과에 대해 연구해보았는데, 그 효과는 다음과 같습니다.
공유하기 전에 제 코딩 습관에 대해 이야기하겠습니다. 많은 분들이 제가 jquery 프레임워크를 사용하는데 왜 Jquery 형식으로 컴포넌트를 작성하지 않느냐고 묻습니다. 당시 내 대답은 이렇습니다. 모든 사람은 코드를 작성할 때 자신만의 습관이 있습니다. 하지만 제가 더 말하고 싶은 것은, 저는 개인적으로 이런 종류의 코딩이 큰 장점이 있다고 생각합니다. 예를 들어 Taobao에서 사용하는 Kissy 프레임워크와 Jquery 프레임워크가 다르기 때문에 저는 Jquery 프레임워크에 크게 의존하지 않습니다. Alipay Baidu에서 사용하는 Alipay 프레임워크는 Baidu 프레임워크를 사용하고, Tencent에는 Tencent의 프론트엔드 js 프레임워크가 있습니다. 제가 작성하는 코드가 jquery에 너무 많이 의존한다면, 다른 사람들이 내 코드를 사용하고 싶어하거나 언젠가 제가 Tencent 프로젝트에 참여하게 된다면 어떻게 될까요? 하지만 그들은 JS 프레임워크를 사용하고 그러한 기능을 가질 수만 있습니까? 그렇다면 jquery의 인코딩 형식에 전적으로 의존한다면 지금 다시 인코딩해야 합니까? 현재 코딩 방법에 따라 코딩하면 대부분 jquery 선택기만 사용하게 됩니다. 그러면 선택기를 변경하기만 하면 다른 코드도 바로 사용할 수 있습니다. 이런 확장성은 매우 좋습니다! 저는 개인적으로 전문 프론트엔드 개발자로서 무언가를 만들기 위해서는 jquery를 조금 알아야 할 뿐만 아니라 고품질의 코드를 작성하는 것도 고려해야 한다고 생각합니다. 어쩌면 jquery로 간단한 코드를 작성하는 것도 좋은 일이 될 수 있지만, 언젠가 특정 기능이 수요에 추가되면 코드를 다시 변경해야 한다는 점을 고려하면? 이전 함수를 기반으로 새 함수를 다시 작성할 수 있나요? 코드를 변경할 필요가 없습니다!
고품질코드란?
개인적으로는 다음 사항이 충족되어야 한다고 생각합니다.
1. 확장성.
2. 유지 관리성.
3. 가독성과 사용 편의성.
4. JS 성능.
가장 중요한 것은 위의 사항을 충족하는 것입니다.
좋아요, 더 이상 말도 안되는 소리는 하지 마세요! 화제를 바꿔서 제가 현재 하고 있는 웨이보 포스팅의 효과는 그냥 간단합니다. 물론 텐센트에는 이모티콘 추가나 기타 기능 추가 등 웨이보 포스팅을 위한 몇 가지 복잡한 기능이 있지만, 아직까지 그렇게 만들어지지는 않았습니다. 순간(작업량이 상대적으로 큼).
아래 작성한 JS 코드는 두 가지 점에 주의해야 합니다.
1. 게시할 때마다 항목이 목록에 추가될 것이라고 모두가 말합니다. 현재 Ajax 요청이 전송되지 않았고 백그라운드에 기록이 없으므로 페이지를 새로 고치면 삭제됩니다.
2. 시간은 클라이언트 시간을 기준으로 합니다. 클라이언트 시간이 틀리면 시간도 영향을 받습니다.
사실 위의 효과를 보시면 이해가 매우 간단하므로 여기서는 자세히 설명하지 않겠습니다! 아니면 아래에 압축된 데모를 제공하겠습니다. 직접 다운로드하여 효과를 확인해 보세요. 게시할 때마다 콜백이 확장으로 제공됩니다! 물론 항목으로 마우스를 이동하면 삭제버튼이 나타나며, 항목을 마음대로 삭제할 수 있습니다. 코드만 게시하시면 더 이상 할 말이 없습니다!
HTML 코드는 다음과 같습니다.
还能输入140个字
CSS代码如下：
JS代码如下：
this.cache = {};
this.init(options);
}
Microblog.prototype = {
constructor: Microblog,
init: function(options) {
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
// 点击输入框input 文本域 textarea 边框的变化
$(_config.targetElem).each(function(index,item){
$(item).unbind('focus');
$(item).bind('focus',function(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(item).unbind('blur');
$(item).bind('blur',function(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});
// 点击face头像 add(增加)类名
var faceImg = $('img',$(_config.face));
$(faceImg).each(function(index,item){
$(item).unbind('click');
$(item).bind('click',function(e){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
// 버튼 호버 이벤트 브로드캐스트
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover ');
},function(){
} $(this).hasClass('hover') && $(this).removeClass('hover');
})
// 바인딩 이벤트
> var totalCount = 0;
for (var i=0; i
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f) ) {
totalCount ;
/*
* 모든 바인딩 이벤트
*/
_bindEnv: function() {
var self = this,
_config = self.config,
_cache = self.cache;
// 텍스트 필드 키업 이벤트
self ._keyUp();
> this,
_config = self.config,
_cache = self.cache;
$(_config.textareaId).unbind( 'keyup') ;
$(_config.textareaId).bind(' keyup',function(){
var len = self._countCharacters($(this).val()),
html;
if (_config.maxNum * 1 >= len * 1) {
* 1; ~ },
/*
* 点击广播按钮事件
*/
_clickBtn: function() {
var self = this,
_config = self.config,
_cache = self.cache;
var reg = /^\s*$/g;
$(_config.sendBtn).unbind('click');
$(_config.sendBtn).bind('click',function(){
var inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
if(reg.test(inputVal)) {
alert('请输入你的姓名');
return;
}else if(reg.test(textVal)) {
alert("随便说点什么吧!");
return;
}
if(maxNum * 1 < 0) {
alert('字符超过限制 请缩减字');
return;
}
// 本来是要发ajax请求的 但是这边没有后台处理 所以目前只是客户端渲染页面
self._renderHTML(inputVal,textVal);
});
},
/*
* 把html结构渲染出来
*/
_renderHTML: function(inputVal,textVal) {
var self = this,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oDate = new Date();
oLi.innerHTML = '' + ' +
''+
'
'' + ';
'' +
''+textVal+'' +
''+' +
''+self._format(oDate.getMonth() + 1) + "\u6708" + self._format(oDate.getDate()) + "\u65e5 " + self._format(oDate.getHours()) + ":" + self._format(oDate.getMinutes())+''+
''+
'
'
// 插入元素
if($(_config.list + " li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}else {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
// 清空输入框 文本域的值
self._clearVal();
// hover事件
self._hover();
},
/*
* 格式化时间, 如果为一位数时补0
*/
_format: function(str){
return str.toString().replace(/^(\d)$/,"0$1");
},
/*
* 获取ing src
* @return src
*/
_getSrc: function() {
var self = this,
_config = self.config,
_cache = self.cache;
var faceImg = $('img',$(_config.face));
for(var i = 0; i < faceImg.length; i++) {
if($(faceImg[i]).hasClass(_config.currentCls)) {
return $(faceImg[i]).attr('src');
break;
}
}
},
/*
* 清空值
*/
_clearVal: function() {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* hover事件
*/
_hover: function() {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.list + ' li').hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover').siblings().removeClass('hover');
$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).removeClass('hidden');
var $that = $(this);
// 删除事件
$('.del',$that).unbind('click');
$('.del',$that).bind('click',function( ){
$($that).animate({
'불투명도' : 0
},500,function(){
$that.remove();
} );
});
},function(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$( '.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
},
/*
* 높이
*/
_animate: function(oLi) {
var self = this;
var iHeight = $(oLi).height(),
알파 = 0,
타이머,
count = 0;
$(oLi).css({"불투명도" : "0", "높이" : "0"});
타이머 && clearInterval(timer);
타이머 = setInterval(function (){
$(oLi).css({"display" : "block", "opacity" : "0", "height " : (count = 8) "px"});
if (count > iHeight){
clearInterval(timer);
$(oLi).css({ "height" : iHeight "px "});
타이머 = setInterval(function (){
$(oLi).css({"불투명도" : 알파 = 10});
알파 > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));
},30);
}
},30);
}
};
// 初始化代码
$(function(){
new Microblog({});
});