JS เลียนแบบโค้ดเอฟเฟกต์ Weibo ของ Tencent

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-03-22 20:32:01

ในช่วงสองวันที่ผ่านมา ฉันได้ศึกษาผลกระทบของโพสต์ Weibo ของ Tencent และอยากจะแบ่งปันผลกระทบดังต่อไปนี้

ก่อนที่จะแชร์ที่นี่ ฉันอยากจะพูดถึงนิสัยการเขียนโค้ดของฉัน หลายๆ คนจะถามฉันว่าทำไมฉันไม่เขียนส่วนประกอบในรูปแบบของ Jquery เนื่องจากฉันใช้ jquery framework? คำตอบของฉันในตอนนั้นคือ ทุกคนมีนิสัยในการเขียนโค้ดเป็นของตัวเอง แต่สิ่งที่ฉันต้องการแสดงเพิ่มเติมคือ โดยส่วนตัวแล้วฉันรู้สึกว่าการเขียนโค้ดประเภทนี้มีข้อได้เปรียบอย่างมาก ฉันไม่ได้ขึ้นอยู่กับกรอบงาน Jquery มากนัก เนื่องจากบริษัทต่างๆ มีกรอบงานที่แตกต่างกัน ตัวอย่างเช่น กรอบจูบที่ใช้ใน Taobao และ เฟรมเวิร์ก Alipay ที่ใช้ใน Alipay Baidu ใช้เฟรมเวิร์ก Baidu และ Tencent มีเฟรมเวิร์กส่วนหน้า js ของ Tencent หากโค้ดของฉันขึ้นอยู่กับ jquery มากเกินไป จะเป็นอย่างไรหากคนอื่นต้องการใช้โค้ดของฉัน หรือฉันต้องการทำงานในโปรเจ็กต์ของ Tencent สักวันหนึ่ง แต่พวกเขาต้องการให้เราใช้เฉพาะเฟรมเวิร์ก JS ของพวกเขาและมีฟังก์ชันดังกล่าว ดังนั้นหากฉันพึ่งพารูปแบบการเข้ารหัสของ jquery โดยสมบูรณ์ ฉันจะต้องเข้ารหัสใหม่ตอนนี้หรือไม่ หากคุณเขียนโค้ดตามวิธีการเข้ารหัสปัจจุบัน คุณจะใช้เฉพาะตัวเลือก jquery เท่านั้น ตราบใดที่คุณเปลี่ยนตัวเลือก โค้ดอื่นๆ ก็สามารถนำมาใช้ได้โดยตรง โดยส่วนตัวแล้วฉันรู้สึกว่าในฐานะ Front-End Developer มืออาชีพ คุณไม่เพียงแต่ควรรู้ jquery เพียงเล็กน้อยในการสร้างสิ่งต่างๆ แต่ยังควรพิจารณาการเขียนโค้ดคุณภาพสูงด้วย บางทีการเขียนโค้ดง่ายๆ ด้วย jquery ก็สามารถทำอะไรได้ดีเช่นกัน มีข้อพิจารณาว่าหากวันหนึ่งมีการเพิ่มฟังก์ชั่นบางอย่างตามความต้องการคุณจะต้องเปลี่ยนรหัสอีกครั้งหรือไม่? เราสามารถเขียนฟังก์ชันใหม่โดยอิงจากฟังก์ชันก่อนหน้าได้หรือไม่? ไม่ต้องเปลี่ยนรหัส!

รหัสคุณภาพสูงคืออะไร?

โดยส่วนตัวแล้วฉันคิดว่าจะต้องเป็นไปตามประเด็นต่อไปนี้:

1. ความสามารถในการขยายขนาด

2. การบำรุงรักษา

3. ความสามารถในการอ่านและความสะดวกในการใช้งาน

4. การแสดงของJS

สิ่งที่สำคัญที่สุดคือการบรรลุประเด็นข้างต้น

เอาล่ะ ไม่มีเรื่องไร้สาระอีกต่อไป! การเปลี่ยนหัวข้อ การโพสต์บน Weibo ทำได้ง่ายดาย แน่นอนว่า Tencent มีฟังก์ชั่นที่ซับซ้อนในการโพสต์บน Weibo เช่น การเพิ่มอีโมติคอน เป็นต้น แต่ในปัจจุบันยังไม่ได้ทำแบบนั้น (ปริมาณงานค่อนข้างมาก) ใหญ่).

รหัส JS ที่ฉันเขียนด้านล่างต้องคำนึงถึงสองประเด็น:

1. ใครๆ ก็บอกว่าจะมีการเพิ่มรายการลงในรายการหลังจากการเผยแพร่แต่ละครั้ง ขณะนี้ไม่มีการส่งคำขอ ajax และไม่มีบันทึกในพื้นหลัง ดังนั้นการรีเฟรชหน้าจะล้างข้อมูลนั้น

2. เวลาจะขึ้นอยู่กับเวลาของลูกค้า หากเวลาของลูกค้าไม่ถูกต้อง เวลาก็จะได้รับผลกระทบเช่นกัน

จริงๆ แล้ว แนวคิดนี้ง่ายมาก แค่ดูเอฟเฟกต์ด้านบนก็เข้าใจได้ ดังนั้นฉันจะไม่ลงรายละเอียดที่นี่! หรือฉันจะจัดเตรียมการสาธิตแบบบีบอัดไว้ด้านล่าง คุณสามารถดาวน์โหลดได้ด้วยตัวเองและเห็นผล! มีการโทรกลับเป็นส่วนขยายหลังจากการเผยแพร่แต่ละครั้ง! แน่นอนว่าเมื่อเลื่อนเมาส์ไปที่รายการ ปุ่มลบจะปรากฏขึ้นและสามารถลบรายการได้ตามต้องการ ไม่มีอะไรจะพูดมากหากคุณโพสต์โค้ดโดยตรง!

รหัส HTML มีลักษณะดังนี้:

คัดลอกรหัสรหัสดังต่อไปนี้:

<แบบฟอร์ม>

<h2>มาบอกฉันว่าคุณกำลังทำอะไรและคุณกำลังคิดอะไรอยู่</h2>

<div>

</p>

</div>

<div>

</div>

<div>

<p>

<span>สามารถป้อน</span><strong>140</strong><span>อักขระ</span>ได้ด้วย

</p>

</div>

</แบบฟอร์ม>

<div>

<h3><span>ทุกคนกำลังคุยกัน</span></h3>

</div>

รหัส CSS เป็นดังนี้:

คัดลอกรหัสรหัสดังต่อไปนี้:

เนื้อความ,div,h2,h3,ul,li,p{ระยะขอบ:0;ช่องว่างภายใน:0;}

ก {การตกแต่งข้อความ: ไม่มี;}

a:โฮเวอร์{ตกแต่งข้อความ:ขีดเส้นใต้;}

ul {รายการสไตล์ประเภท: ไม่มี;}

เนื้อความ{สี:#333;พื้นหลัง:#3c3a3b;font:12px/1.5 /5b8b/4f53;}

#msgBox{width:500px;พื้นหลัง:#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 รูปแบบ {พื้นหลัง: url (img/boxBG.jpg) ซ้ำ -x 0 ด้านล่าง; การขยาย: 0 20px 15px;}

#userName,#conBox{สี:#777;border:1px solid #d0d0d0;border-radius:6px;พื้นหลัง:#fff url(img/inputBG.png) ทำซ้ำ-x;padding:3px 5px;font:14px/1.5 อาเรียล;}

#userName.active,#conBox.active{border:1px solid #7abb2c;}

#ชื่อผู้ใช้{ความสูง:20px;}

#conBox{width:448px;ปรับขนาด:none;height:65px;overflow:auto;}

#msgBox แบบฟอร์ม div {position:relative;color:#999;margin-top:10px;}

#msgBox img{รัศมีเส้นขอบ:3px;}

#face{ตำแหน่ง:สัมบูรณ์;ด้านบน:0;ซ้าย: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;พื้นหลัง:url(img/btn.png) ไม่ทำซ้ำ;}

#sendBtn.hover{ตำแหน่งพื้นหลัง:0 -30px;}

#msgBox รูปแบบ .maxNum{font:26px/30px จอร์เจีย ทาโฮมา Arial;padding:0 5px;}

#msgBox .list{ช่องว่างภายใน:10px;}

#msgBox .list h3{ตำแหน่ง:ญาติ;ความสูง:33px;font-size:14px;font-weight:400;พื้นหลัง:#e3eaec;border:1px solid #dee4e7;}

#msgBox .list h3 span{ตำแหน่ง:สัมบูรณ์;ซ้าย:6px;ด้านบน:6px;พื้นหลัง:#fff;line-height:28px;display:inline-block;padding:0 15px;}

#msgBox .list ul {ล้น: ซ่อน; ซูม: 1;}

#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;พื้นหลัง:#fff;overflow:hidden;}

#msgBox .list ul li.hover{พื้นหลัง:#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 .times span{float:left;}

#msgBox .list .times a{float:right;color:#889db6;}

.tr{ล้น:ซ่อน;ซูม:1;}

.tr p{float:right;line-height:30px;}

.tr *{ลอย:ซ้าย;}

.hidden {แสดง:ไม่มี;}

รหัส JS เป็นดังนี้:

คัดลอกรหัสรหัสดังต่อไปนี้:

*เลียนแบบผลกระทบของการเผยแพร่ Tencent บน Weibo

* 1. ขณะนี้ไม่มีการส่งคำขอ ajax และไม่มีบันทึกในพื้นหลัง ดังนั้นการรีเฟรชหน้าจะเป็นการล้างข้อมูล

* 2. เวลาจะขึ้นอยู่กับเวลาของลูกค้า หากเวลาของลูกค้าไม่ถูกต้อง เวลาก็จะได้รับผลกระทบด้วย

* ปัจจุบันแนวคิดเฉพาะของการโต้ตอบเช่นนี้ไม่ซับซ้อนเกินไปหากนำมาใช้ในโครงการก็สามารถเปลี่ยนแปลงได้ตามความต้องการเฉพาะ

* @constructor ไมโครบล็อก

* @วันที่ 23-12-2556

* @ผู้เขียน tugenhua

* @อีเมล [email protected]

ฟังก์ชั่น Microblog (ตัวเลือก) {

นี้.config = {

maxNum : 140, // จำนวนอักขระสูงสุด

targetElem: '.f-text', // ชื่อคลาสของกล่องอินพุตหรือฟิลด์ข้อความ

maxNumElem: '.maxNum', // สามารถป้อนคอนเทนเนอร์คำได้อีกกี่คำ

sendBtn : '#sendBtn', // ปุ่มออกอากาศ

face : '#face', // คอนเทนเนอร์อิโมติคอน

activeCls: 'active', //กล่องใส่การคลิกเมาส์เพิ่มคลาส

currentCls: 'current', // ชื่อคลาสที่ถูกเพิ่มเมื่อคลิกเมาส์บนอวาตาร์ใบหน้า

inputID : '#userName', //ID กล่องใส่

textareaId : '#conBox', // รหัสพื้นที่ข้อความ

list : '#list-msg', // คอนเทนเนอร์ที่ทุกคนพูดถึง

โทรกลับ: null // ฟังก์ชั่นโทรกลับหลังจากการออกอากาศแบบไดนามิก

นี้.แคช = {};

this.init (ตัวเลือก);

ไมโครบล็อก.ต้นแบบ = {

ตัวสร้าง:ไมโครบล็อก,

init: ฟังก์ชั่น (ตัวเลือก) {

this.config = $.extend(this.config,ตัวเลือก || {});

var self = นี่

_config = ตนเอง.config,

_cache = ตนเอง.แคช;

// คลิกกล่องอินพุต พื้นที่ข้อความอินพุต การเปลี่ยนแปลงเส้นขอบพื้นที่ข้อความ

$(_config.targetElem).each(function(index,item){

$(รายการ).unbind('โฟกัส');

$(item).bind('โฟกัส',ฟังก์ชัน(e){

!$(นี้).hasClass(_config.activeCls) && $(นี้).addClass(_config.activeCls);

$(item).unbind('เบลอ');

$(item).bind('เบลอ',function(e){

$(นี้).hasClass(_config.activeCls) && $(นี้).removeClass(_config.activeCls);

// คลิกที่รูปประจำตัวเพื่อเพิ่ม (เพิ่ม) ชื่อคลาส

var faceImg = $('img',$(_config.face));

$(faceImg).each(function(index,item){

$(รายการ).unbind('คลิก');

$(item).bind('คลิก',function(e){

$(นี้).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);

// เหตุการณ์โฮเวอร์ปุ่มออกอากาศ

$(_config.sendBtn).โฮเวอร์(ฟังก์ชั่น(){

!$(this).hasClass('โฮเวอร์') && $(this).addClass('โฮเวอร์');

},การทำงาน(){

$(นี้).hasClass('โฮเวอร์') && $(นี้).removeClass('โฮเวอร์');

//ผูกเหตุการณ์

self._bindEnv();

* คำนวณความยาวของตัวอักษร เช่น ตัวเลขจีน อังกฤษ ฯลฯ

* @param str

* @return ความยาวของสตริง

_countCharacters: ฟังก์ชั่น (str) {

var TotalCount = 0;

สำหรับ (var i=0; i<str.length; i++) {

var c = str.charCodeAt(i);

ถ้า ((ค >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {

จำนวนรวม++;

}อื่น {

จำนวนรวม+=2;

ส่งคืนจำนวนทั้งหมด;

* กิจกรรมที่มีผลผูกพันทั้งหมด

_bindEnv: ฟังก์ชั่น() {

var self = นี่

_config = ตนเอง.config,

_cache = ตนเอง.แคช;

// เหตุการณ์การคีย์ฟิลด์ข้อความ

self._keyUp();

// คลิกปุ่มเหตุการณ์เหตุการณ์

self._clickBtn();

* เหตุการณ์การคีย์ฟิลด์ข้อความ

_keyUp: ฟังก์ชั่น() {

var self = นี่

_config = ตนเอง.config,

_cache = ตนเอง.แคช;

$(_config.textareaId).unbind('keyup');

$(_config.textareaId).bind('keyup',function(){

var len = self._countCharacters($(this).val())

html;

if(_config.maxNum * 1 >= len * 1) {

html = _config.maxNum * 1 - เลน * 1;

}อื่น {

html = _config.maxNum * 1 - เลน * 1;

$(_config.maxNumElem).html(html);

$(_config.maxNumElem).attr('data-html',html);

* คลิกกิจกรรมปุ่มออกอากาศ

_clickBtn: ฟังก์ชั่น() {

var self = นี่

_config = ตนเอง.config,

_cache = ตนเอง.แคช;

var reg = /^/s*$/g;

$(_config.sendBtn).unbind('คลิก');

$(_config.sendBtn).bind('คลิก',function(){

var inputVal = $(_config.inputID).val()

textVal = $(_config.textareaId).val()

maxNum = $(_config.maxNumElem).attr('data-html');

ถ้า (reg.test (inputVal)) {

alert('กรุณากรอกชื่อของคุณ');

กลับ;

} อื่นถ้า (reg.test (textVal)) {

alert("พูดอะไรสักอย่างสิ!");

กลับ;

ถ้า (maxNum * 1 < 0) {

alert('อักขระเกินขีดจำกัด กรุณาลดจำนวนอักขระ');

กลับ;

// เดิมที เรากำลังจะส่งคำขอ ajax แต่ไม่มีการประมวลผลพื้นหลังที่นี่ ดังนั้นขณะนี้เราเพียงแสดงเพจในฝั่งไคลเอ็นต์

self._renderHTML(inputVal,textVal);

* แสดงผลโครงสร้าง html

_renderHTML: ฟังก์ชั่น (inputVal, textVal) {

var self = นี่

_config = ตนเอง.config,

_cache = ตนเอง.แคช;

var oLi = document.createElement("li"),

oDate = วันที่ใหม่ ();

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>';

//ใส่องค์ประกอบ

if($(_config.list + " li").ความยาว > 0) {

$(oLi).insertBefore($(_config.list + " li")[0]);

self._animate (oLi);

}อื่น {

$(_config.list).ผนวก(oLi);

self._animate (oLi);

_config.callback && $.isFunction(_config.callback) && _config.callback();

//ล้างค่าของช่องข้อความในช่องป้อนข้อมูล

self._clearVal();

//เลื่อนเหตุการณ์

self._hover();

* รูปแบบเวลา ถ้าเป็นเลขหลักเดียวให้บวก 0

_รูปแบบ: ฟังก์ชั่น (str) {

กลับ str.toString().replace(/^(/d)$/,"0$1");

* รับ src

* @return src

_getSrc: ฟังก์ชั่น() {

var self = นี่

_config = ตนเอง.config,

_cache = ตนเอง.แคช;

var faceImg = $('img',$(_config.face));

สำหรับ (var i = 0; i < faceImg.length; i++) {

ถ้า($(faceImg[i]).hasClass(_config.currentCls)) {

ส่งคืน $(faceImg[i]).attr('src');

หยุดพัก;

* ค่าที่ชัดเจน

_clearVal: ฟังก์ชั่น() {

var self = นี่

_config = ตนเอง.config,

_cache = ตนเอง.แคช;

$(_config.inputID) && $(_config.inputID).val('');

$(_config.textareaId) && $(_config.textareaId).val('');

* เหตุการณ์โฮเวอร์

_โฮเวอร์: ฟังก์ชั่น() {

var self = นี่

_config = ตนเอง.config,

_cache = ตนเอง.แคช;

$(_config.list + ' li').โฮเวอร์(ฟังก์ชั่น(){

!$(this).hasClass('โฮเวอร์') && $(นี้).addClass('โฮเวอร์').siblings().removeClass('โฮเวอร์');

$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).removeClass('hidden');

var $นั่น = $(นี่);

// ลบกิจกรรม

$('.del',$that).unbind('คลิก');

$('.del',$that).bind('คลิก',function(){

$($นั่น).เคลื่อนไหว({

'ความทึบ' : 0

},500,ฟังก์ชัน(){

$นั่น.remove();

},การทำงาน(){

$(นี้).hasClass('โฮเวอร์') && $(นี้).removeClass('โฮเวอร์');

!$('.del',$(this)).hasClass('ซ่อน') && $('.del',$(this)).addClass('ซ่อน');

*ความสูง

_animate: ฟังก์ชั่น (oLi) {

var self = นี่;

var iHeight = $(oLi).height(),

อัลพาห์ = 0,

จับเวลา,

นับ = 0;

$(oLi).css({"ความทึบ" : "0", "ความสูง" : "0"});

จับเวลา && clearInterval (จับเวลา);

จับเวลา = setInterval (ฟังก์ชั่น () {

$(oLi).css({"display" : "block", "opacity" : "0", "height" : (นับ += 8) + "px"});

ถ้า (นับ > iHeight){

clearInterval (จับเวลา);

$(oLi).css({ "height" : iHeight + "px"});

จับเวลา = setInterval (ฟังก์ชั่น () {

$(oLi).css({"ความทึบ" : alpah += 10});

อัลพา > 100 && (clearInterval(ตัวจับเวลา), $(oLi).css({"opacity":100}));

},30);

// รหัสเริ่มต้น

$(ฟังก์ชั่น(){

ไมโครบล็อกใหม่({});

ดาวน์โหลดซอร์สโค้ด: http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar