في اليومين الماضيين، قمت بدراسة تأثيرات منشورات Tencent على Weibo وأرغب في مشاركتها كما يلي:
قبل المشاركة هنا، أود أن أتحدث عن عاداتي في البرمجة، سيسألني الكثير من الناس لماذا لا أكتب مكونات في شكل Jquery لأنني أستخدم إطار عمل jquery. كانت إجابتي في ذلك الوقت: لكل شخص عاداته الخاصة عند كتابة التعليمات البرمجية. ولكن ما أريد التعبير عنه أكثر هو: أنا شخصياً أشعر أن هذا النوع من الترميز له ميزة كبيرة، وأنا لا أعتمد بشكل كبير على إطار عمل Jquery، لأن الشركات المختلفة لديها أطر عمل مختلفة، على سبيل المثال، الإطار القبلي المستخدم في Taobao يستخدم إطار عمل Alipay المستخدم في Alipay Baidu إطار عمل Baidu، بينما تستخدم Tencent إطار عمل Tencent للواجهة الأمامية. إذا كان الكود الخاص بي يعتمد بشكل كبير على jquery ماذا لو أراد أشخاص آخرون استخدام الكود الخاص بي أو كنت أرغب في العمل في مشروع Tencent يومًا ما، لكنهم يطلبون منا استخدام إطار عمل JS الخاص بهم فقط والحصول على مثل هذه الوظيفة؟ لذا، إذا كنت أعتمد بشكل كامل على نموذج التشفير الخاص بـ jquery، فهل يجب علي إعادة تشفيره الآن؟ إذا قمت بالبرمجة وفقًا لطريقة الترميز الحالية، فستستخدم فقط محدد jquery، وطالما قمت بتغيير المحدد، يمكن استخدام الرموز الأخرى مباشرةً. أنا شخصياً أشعر أنه بصفتي مطورًا محترفًا للواجهة الأمامية، لا ينبغي عليك معرفة القليل من jquery لصنع الأشياء فحسب، بل يجب أيضًا أن تفكر في كتابة تعليمات برمجية عالية الجودة. ربما يمكن لكتابة تعليمات برمجية بسيطة باستخدام jquery أن تفعل شيئًا جيدًا، ولكنها كذلك هل هناك أي بالنظر إلى أنه إذا تمت إضافة وظيفة معينة إلى الطلب في يوم من الأيام، فهل سيتعين عليك تغيير الكود مرة أخرى؟ هل يمكننا إعادة كتابة وظائف جديدة بناءً على الوظائف السابقة؟ لا حاجة لتغيير الرمز!
ما هو الكود عالي الجودة؟
شخصياً أعتقد أنه يجب مراعاة النقاط التالية:
1. قابلية التوسع.
2. قابلية الصيانة.
3. سهولة القراءة وسهولة الاستخدام.
4. أداء شبيبة.
الشيء الأكثر أهمية هو تلبية النقاط المذكورة أعلاه.
حسنًا، لا مزيد من الهراء! تغيير الموضوع، وتأثير النشر على Weibo بسيط للغاية. بالطبع، لدى Tencent بعض الوظائف المعقدة للنشر على Weibo، مثل إضافة الرموز التعبيرية، وما إلى ذلك، ولكن لم يتم تنفيذها على هذا النحو في الوقت الحالي (عبء العمل نسبيًا). كبير).
يحتاج كود JS الذي كتبته أدناه إلى الانتباه إلى نقطتين:
1. يقول الجميع أنه سيتم إضافة عنصر إلى القائمة بعد كل منشور. حاليًا، لم يتم إرسال طلب أياكس ولا يوجد سجل في الخلفية، لذا فإن تحديث الصفحة سيؤدي إلى مسحه.
2. يعتمد الوقت على وقت العميل. إذا كان وقت العميل خاطئًا، فسيتأثر الوقت أيضًا.
في الواقع، الفكرة بسيطة جدًا، يمكنك فهمها بمجرد النظر إلى التأثير أعلاه، لذلك لن أخوض في التفاصيل هنا! أو سأقدم عرضًا توضيحيًا مضغوطًا أدناه، يمكنك تنزيله بنفسك ورؤية التأثير! يتم توفير رد الاتصال كامتداد بعد كل منشور! بالطبع، عندما يتحرك الماوس إلى عنصر ما، سيظهر زر حذف ويمكن حذف العنصر حسب الرغبة. ليس هناك الكثير مما يمكن قوله إذا قمت بنشر الرمز مباشرة!
رمز HTML هو كما يلي:
انسخ رمز الكود كما يلي:
<div معرف = "msgBox">
<النموذج>
<h2>تعال وأخبرني بما تفعله وبماذا تفكر</h2>
<ديف>
<معرف الإدخال = "اسم المستخدم" القيمة = "" />
<p معرف = "الوجه">
<img src="img/face1.gif" />
<img src="img/face2.gif" />
<img src="img/face3.gif" />
<img src="img/face4.gif" />
<img src="img/face5.gif" />
<img src="img/face6.gif" />
<img src="img/face7.gif" />
<img src="img/face8.gif" />
</ص>
</div>
<ديف>
<textarea id="conBox"></textarea>
</div>
<ديف>
<ص>
<span>يمكن أيضًا إدخال</span><strong>140</strong><span> حرفًا</span>
<input id = "sendBtn" type = "button" value = "" />
</ص>
</div>
</النموذج>
<ديف>
<h3><span>الجميع يتحدث</span></h3>
<ul id="list-msg"></ul>
</div>
</div>
رمز CSS هو كما يلي:
انسخ رمز الكود كما يلي:
الجسم، div، h2، h3، ul، li، p {الهامش: 0؛ الحشو: 0؛}
أ {زخرفة النص: لا شيء؛}
أ:تحوم {زخرفة النص: تسطير؛}
أول {قائمة نمط النوع: لا شيء؛}
الجسم {اللون:#333;الخلفية:#3c3a3b;الخط:12px/1.5 /5b8b/4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#msgBox شكل h2{font-weight:400;font:400 18px/1.5 /5fae/8f6f/96c5/9ed1;}
#msgBox form{background:url(img/boxBG.jpg) Repeat-x 0 Bottom;padding:0 20px 15px;}
#userName,#conBox{color:#777;border:1px Solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) Repeat-x;padding:3px 5px;font:14px/1.5 اريال;}
#userName.active,#conBox.active{border:1px Solid #7abb2c;}
#اسم_المستخدم{الارتفاع:20px;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#msgBox form div{position:relative;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#face{position:absolute;top:0;left:172px;}
#face img{float:left;display:inline;width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
#face img.hover,#face img.current{width:28px;height:28px;border:1px Solid #f60;opacity:1;filter:alpha(opacity=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) بدون تكرار;}
#sendBtn.hover{background-position:0 -30px;}
#msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px Solid #dee4e7;}
#msgBox .list h3span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}
#msgBox .list ul{overflow:hidden;zoom:1;}
#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px متقطع #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#msgBox .list ul li.hover{background:#f5f5f5;}
#msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px Solid #ccc;border-radius:3px;}
#msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
#msgBox .list .userName{display:inline;padding-right:5px;}
#msgBox .list .userName a{color:#2b4a78;}
#msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox .list .timesspan{float:left;}
#msgBox .list .times a{float:right;color:#889db6;}
.tr {تجاوز: مخفي؛ تكبير: 1؛}
.tr p{float:right;line-height:30px;}
.tr *{تعويم:يسار؛}
.مخفي {عرض: لا شيء؛}
رمز JS هو كما يلي:
انسخ رمز الكود كما يلي:
/**
*تقليد تأثير نشر Tencent على Weibo
* 1. لم يتم إرسال طلب أياكس حاليًا ولا يوجد سجل في الخلفية، لذا فإن تحديث الصفحة سيؤدي إلى مسحه.
* 2. يعتمد الوقت على وقت العميل. إذا كان وقت العميل خاطئًا، فسيتأثر الوقت أيضًا.
* في الوقت الحاضر، الفكرة المحددة للتفاعل بهذه الطريقة ليست معقدة للغاية، إذا تم استخدامها في المشروع، فيمكن تغييرها وفقًا للاحتياجات المحددة.
* @المنشئ المدونات الصغيرة
*@التاريخ 23-12-2013
* @ المؤلف توغنهوا
*@البريد الإلكتروني [email protected]
*/
وظيفة المدونات الصغيرة (خيارات) {
هذا.التكوين = {
maxNum : 140, // الحد الأقصى لعدد الأحرف
targetElem: '.f-text', // اسم الفئة لمربع الإدخال أو حقل النص
maxNumElem: '.maxNum', // كم عدد حاويات الكلمات التي يمكن إدخالها
sendBtn : '#sendBtn'، // زر البث
الوجه: '#face'، // حاوية التعبيرات
activeCls: 'active'، // إضافة فئة إلى مربع الإدخال بالنقر فوق الماوس
currentCls: 'current', // اسم الفئة الذي تتم إضافته عند النقر بالماوس على الصورة الرمزية للوجه
inputID : '#userName'، //معرف مربع الإدخال
textareaId : '#conBox', // معرف منطقة النص
list : '#list-msg', // الحاوية التي يتحدث عنها الجميع
رد الاتصال: وظيفة رد الاتصال فارغة // بعد البث الديناميكي
};
this.cache = {};
this.init(options);
}
نموذج المدونة الصغيرة = {
المنشئ: مدونة صغيرة،
الحرف الأول: وظيفة (خيارات) {
this.config = $.extend(this.config,options || {});
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
// انقر فوق تغييرات حدود منطقة نص منطقة الإدخال في مربع الإدخال
$(_config.targetElem).each(function(index,item){
$(العنصر).unbind('التركيز');
$(العنصر).bind('التركيز',وظيفة(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(item).unbind('طمس');
$(العنصر).bind('طمس',وظيفة(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});
// انقر على الصورة الرمزية للوجه لإضافة (إضافة) اسم الفئة
varfaceImg = $('img',$(_config.face));
$(faceImg).each(function(index,item){
$(العنصر).unbind('انقر');
$(العنصر).bind('انقر',وظيفة(ه){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
// حدث التمرير على زر البث
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover');
}،وظيفة(){
$(this).hasClass('hover') && $(this).removeClass('hover');
})
// ربط الحدث
self._bindEnv();
},
/*
* حساب طول الأحرف بما في ذلك الأرقام الصينية والإنجليزية وما إلى ذلك.
* @param شارع
* @return طول السلسلة
*/
_countCharacters: وظيفة (شارع) {
فار TotalCount = 0;
لـ (var i=0; i<str.length; i++) {
var c = str.charCodeAt(i);
إذا ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
TotalCount++;
}آخر {
TotalCount+=2;
}
}
إرجاع إجمالي عدد؛
},
/*
* جميع الأحداث الملزمة
*/
_bindEnv: الوظيفة () {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
// حدث مفتاح حقل النص
self._keyUp();
// انقر فوق حدث زر البث
self._clickBtn();
},
/*
* حدث مفتاح حقل النص
*/
_keyUp: الوظيفة () {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
$(_config.textareaId).unbind('keyup');
$(_config.textareaId).bind('keyup',function(){
فار لين = self._countCharacters($(this).val()),
أتش تي أم أل؛
إذا (_config.maxNum * 1 >= لين * 1) {
html = _config.maxNum * 1 - len * 1;
}آخر {
html = _config.maxNum * 1 - len * 1;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
},
/*
* انقر فوق زر البث الحدث
*/
_clickBtn: الوظيفة () {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
فار ريج = /^/s*$/g;
$(_config.sendBtn).unbind('click');
$(_config.sendBtn).bind('click',function(){
فار inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
إذا (reg.test (inputVal)) {
تنبيه ("الرجاء إدخال اسمك")؛
يعود؛
}else if(reg.test(textVal)) {
تنبيه ("فقط قل شيئًا!")؛
يعود؛
}
إذا (الحد الأقصى * 1 < 0) {
تنبيه ("الأحرف تتجاوز الحد الأقصى، يرجى تقليل الأحرف")؛
يعود؛
}
// في الأصل، كنا سنرسل طلبًا من نوع ajax، لكن لا توجد معالجة في الخلفية هنا، لذلك نقوم حاليًا بعرض الصفحة من جانب العميل فقط.
self._renderHTML(inputVal,textVal);
});
},
/*
* تقديم بنية HTML
*/
_renderHTML: وظيفة (inputVal، textVal) {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
فار oLi = document.createElement("li"),
oDate = new Date();
oLi.innerHTML = '<div>' +
'<img src="'+self._getSrc()+'" />'+
'</div>' +
'<div>' +
'<div><a href="javascript:;">'+inputVal+'</a>:</div>' +
'<div>'+textVal+'</div>' +
'<div>'+
'<span>'+self._format(oDate.getMonth() + 1) + "/u6708" + self._format(oDate.getDate()) + "/u65e5 " + self._format(oDate.getHours()) + ": " + self._format(oDate.getMinutes())+'</span>'+
'<a href="javascript:;">حذف</a>'+
'</div>' +
'</div>';
// أدخل عنصر
إذا($(_config.list + "li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}آخر {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
// امسح قيمة حقل نص مربع الإدخال
self._clearVal();
// حدث التحويم
self._hover();
},
/*
* تنسيق الوقت، إذا كان رقمًا واحدًا، أضف 0
*/
_ التنسيق: وظيفة (شارع) {
return str.toString().replace(/^(/d)$/,"0$1");
},
/*
* احصل على جي src
* @return src
*/
_getSrc: الوظيفة () {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
varfaceImg = $('img',$(_config.face));
for(var i = 0; i <faceImg.length; i++) {
إذا($(faceImg[i]).hasClass(_config.currentCls)) {
return $(faceImg[i]).attr('src');
استراحة؛
}
}
},
/*
*قيمة واضحة
*/
_clearVal: الوظيفة () {
فار النفس = هذا،
_config = self.config،
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* حدث التمرير
*/
_hover: الوظيفة () {
فار النفس = هذا،
_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');
فار $that = $(this);
// حذف الحدث
$('.del',$that).unbind('click');
$('.del',$that).bind('click',function(){
$($ذلك).تحريك({
"التعتيم": 0
},500,وظيفة(){
$that.remove();
});
});
}،وظيفة(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
},
/*
*ارتفاع
*/
_animate: وظيفة (أولي) {
فار النفس = هذا؛
فار iHeight = $(oLi).height(),
ألفا = 0،
مؤقت,
العد = 0؛
$(oLi).css({"التعتيم" : "0"، "الارتفاع" : "0"});
timer && ClearInterval(timer);
الموقت = setInterval(وظيفة (){
$(oLi).css({"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
إذا (العدد > الارتفاع){
ClearInterval(timer);
$(oLi).css({ "height" : iHeight + "px"});
الموقت = setInterval(وظيفة (){
$(oLi).css({"التعتيم" : alpah += 10});
alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));
},30);
}
},30);
}
};
// رمز التهيئة
$(وظيفة(){
مدونة صغيرة جديدة({});
});
تنزيل كود المصدر: http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar