Dalam dua hari terakhir, saya telah mempelajari dampak postingan Tencent di Weibo dan ingin membagikannya sebagai berikut:
Sebelum berbagi disini, saya ingin berbicara tentang kebiasaan coding saya. Banyak orang akan bertanya mengapa saya tidak menulis komponen dalam bentuk Jquery karena saya menggunakan framework jquery? Jawaban saya saat itu adalah: Setiap orang mempunyai kebiasaannya masing-masing dalam menulis kode. Namun yang lebih ingin saya ungkapkan adalah: Saya pribadi merasa bahwa pengkodean semacam ini memiliki keuntungan besar. Saya tidak terlalu bergantung pada kerangka Jquery, karena perusahaan yang berbeda memiliki kerangka kerja yang berbeda, misalnya kerangka ciuman yang digunakan di Taobao dan Framework Alipay yang digunakan di Alipay Baidu menggunakan framework Baidu dan Tencent memiliki framework js front-end Tencent Jika kode saya terlalu bergantung pada jquery Bagaimana jika orang lain ingin menggunakan kode saya atau saya ingin mengerjakan proyek Tencent suatu hari nanti, tetapi mereka mengharuskan kita hanya menggunakan kerangka JS mereka dan memiliki fungsi seperti itu? Jadi jika saya sepenuhnya mengandalkan bentuk pengkodean jquery, apakah saya harus menyandi ulangnya sekarang? Jika Anda membuat kode sesuai dengan metode pengkodean saat ini, Anda hanya akan menggunakan pemilih jquery. Kemudian selama Anda mengubah pemilih, kode lain dapat digunakan secara langsung. Saya pribadi merasa bahwa sebagai pengembang front-end profesional, Anda tidak hanya harus mengetahui sedikit tentang jquery untuk membuat sesuatu, tetapi juga harus mempertimbangkan untuk menulis kode berkualitas tinggi. Mungkin menulis kode sederhana dengan jquery juga dapat menghasilkan sesuatu yang baik, tetapi memang begitu ada Mengingat jika suatu hari fungsi tertentu ditambahkan ke permintaan, apakah Anda harus mengubah kodenya lagi? Bisakah kita menulis ulang fungsi baru berdasarkan fungsi sebelumnya? Tidak perlu mengubah kode!
Apa itu kode berkualitas tinggi?
Secara pribadi, menurut saya poin-poin berikut harus dipenuhi:
1. Skalabilitas.
2. Pemeliharaan.
3. Keterbacaan dan kemudahan penggunaan.
4. Kinerja JS.
Yang terpenting adalah memenuhi poin-poin di atas.
Oke, jangan omong kosong lagi! Mengganti topik, efek postingan di weibo cukup sederhana. Tentu saja Tencent memiliki beberapa fungsi kompleks untuk postingan di weibo, seperti menambahkan emoticon, dll, namun saat ini belum dibuat seperti itu (beban kerjanya relatif). besar).
Kode JS yang saya tulis di bawah ini perlu memperhatikan dua hal:
1. Semua orang mengatakan bahwa suatu item akan ditambahkan ke daftar setelah setiap publikasi. Saat ini, tidak ada permintaan ajax yang dikirim dan tidak ada catatan di latar belakang, jadi menyegarkan halaman akan menghapusnya.
2. Waktu didasarkan pada waktu klien. Jika waktu klien salah, waktu juga akan terpengaruh.
Sebenarnya idenya sangat sederhana, Anda bisa memahaminya hanya dengan melihat efek di atas, jadi saya tidak akan menjelaskannya secara detail di sini! Atau saya akan memberikan demo terkompresi di bawah ini. Anda dapat mendownloadnya sendiri dan melihat efeknya! Panggilan balik diberikan sebagai perpanjangan setelah setiap publikasi! Tentu saja ketika mouse bergerak ke suatu item, akan muncul tombol hapus dan item dapat dihapus sesuka hati. Tidak banyak yang bisa dikatakan jika Anda memposting kode secara langsung!
Kode HTMLnya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<div id="msgBox">
<bentuk>
<h2>Ayo, beritahu saya apa yang kamu lakukan dan apa yang kamu pikirkan</h2>
<div>
<masukan id="NamaPengguna" nilai="" />
<p id="wajah">
<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" />
</p>
</div>
<div>
<textarea id="conBox"></textarea>
</div>
<div>
<p>
<span>Dapat juga memasukkan</span><strong>140</strong><span> karakter</span>
<masukan id="sendBtn" type="button" value="" />
</p>
</div>
</bentuk>
<div>
<h3><span>Semua orang berbicara</span></h3>
<ul id="daftar-pesan"></ul>
</div>
</div>
Kode CSSnya seperti berikut:
Copy kode kodenya sebagai berikut:
badan,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{dekorasi teks: tidak ada;}
a:hover{teks-dekorasi:garis bawah;}
ul{tipe-gaya-daftar: tidak ada;}
badan{warna:#333;latar belakang:#3c3a3b;font:12px/1.5 /5b8b/4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#msgBox formulir h2{font-weight:400;font:400 18px/1.5 /5fae/8f6f/96c5/9ed1;}
#msgBox form{background:url(img/boxBG.jpg) ulangi-x 0 bawah;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 arial;}
#userName.active,#conBox.active{border:1px solid #7abb2c;}
#namapengguna{tinggi:20 piksel;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#msgBox formulir div{position:relative;color:#999;margin-top:10px;}
#msgBox img{radius-batas:3px;}
#wajah{posisi:mutlak;atas:0;kiri: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) tanpa pengulangan;}
#sendBtn.hover{posisi latar belakang: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 h3 span{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 putus-putus #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#msgBox .list ul li.hover{latar belakang:#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{meluap:tersembunyi;zoom:1;}
.tr p{float:kanan;tinggi garis:30px;}
.tr *{mengapung:kiri;}
.hidden {tampilan: tidak ada;}
Kode JS-nya seperti berikut:
Copy kode kodenya sebagai berikut:
/**
*Tirulah efek penerbitan Tencent di Weibo
* 1. Saat ini tidak ada permintaan ajax yang dikirim dan tidak ada catatan di latar belakang, jadi menyegarkan halaman akan menghapusnya.
* 2. Waktu didasarkan pada waktu klien. Jika waktu klien salah, waktu juga akan terpengaruh.
* Saat ini ide spesifik berinteraksi seperti ini tidak terlalu rumit. Jika digunakan dalam proyek, dapat diubah sesuai kebutuhan spesifik.
* @konstruktor Mikroblog
* @tanggal 23-12-2013
* @penulis tugenhua
*@email [email protected]
*/
fungsi Mikroblog(pilihan) {
ini.config = {
maxNum : 140, // Jumlah karakter maksimum
targetElem: '.f-text', // Nama kelas kotak input atau kolom teks
maxNumElem: '.maxNum', // Berapa banyak lagi penampung kata yang dapat dimasukkan
sendBtn : '#sendBtn', // Tombol siaran
wajah : '#wajah', // wadah emotikon
activeCls: 'aktif', //Klik mouse pada kotak input tambahkan kelas
currentCls: 'saat ini', // Nama kelas ditambahkan ketika mouse mengklik avatar wajah
inputID : '#namapengguna', //ID kotak masukan
textareaId : '#conBox', // ID area teks
list : '#list-msg', // Wadah yang dibicarakan semua orang
panggilan balik: null // fungsi panggilan balik setelah siaran dinamis
};
ini.cache = {};
this.init(pilihan);
}
Mikroblog.prototipe = {
konstruktor:Microblog,
init: fungsi(pilihan) {
this.config = $.extend(this.config,options || {});
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
// Klik pada kotak masukan masukan perubahan batas textarea area teks
$(_config.targetElem).each(fungsi(indeks,item){
$(item).unbind('fokus');
$(item).bind('fokus',fungsi(e){
!$(ini).hasClass(_config.activeCls) && $(ini).addClass(_config.activeCls);
});
$(barang).melepaskan ikatan('kabur');
$(item).bind('blur',function(e){
$(ini).hasClass(_config.activeCls) && $(ini).removeClass(_config.activeCls);
});
});
// Klik pada avatar wajah untuk menambahkan (menambahkan) nama kelas
var faceImg = $('img',$(_config.wajah));
$(faceImg).each(fungsi(indeks,item){
$(barang).melepaskan ikatan('klik');
$(item).bind('klik',fungsi(e){
$(ini).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
//Acara hover tombol siaran
$(_config.sendBtn).hover(fungsi(){
!$(ini).hasClass('hover') && $(ini).addClass('hover');
},fungsi(){
$(ini).hasClass('hover') && $(ini).removeClass('hover');
})
//Mengikat acara
diri._bindEnv();
},
/*
* Hitung panjang karakter termasuk angka Cina, Inggris, dll.
* @param str
* @mengembalikan panjang string
*/
_countCharacters: fungsi(str) {
var totalHitungan = 0;
untuk (var i=0; i<str.panjang; i++) {
var c = str.charCodeAt(i);
jika ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
totalHitungan++;
}kalau tidak {
jumlahJumlah+=2;
}
}
kembalikan totalCount;
},
/*
* Semua acara yang mengikat
*/
_bindEnv: fungsi() {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
//Acara keyup kolom teks
diri._keyUp();
// Klik tombol siaran acara
mandiri._clickBtn();
},
/*
* Acara keyup bidang teks
*/
_keyUp: fungsi() {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
$(_config.textareaId).unbind('keyup');
$(_config.textareaId).bind('keyup',function(){
var len = diri._countCharacters($(ini).val()),
html;
if(_config.maxNum * 1 >= len * 1) {
html = _config.maxNum * 1 - len * 1;
}kalau tidak {
html = _config.maxNum * 1 - len * 1;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
},
/*
* Klik tombol siaran acara
*/
_klikBtn: fungsi() {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
var reg = /^/s*$/g;
$(_config.sendBtn).unbind('klik');
$(_config.sendBtn).bind('klik',fungsi(){
var masukanVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
if(reg.test(inputVal)) {
alert('Silahkan masukkan nama anda');
kembali;
}lainnya jika(reg.test(textVal)) {
alert("Katakan saja!");
kembali;
}
jika(Jumlah Maks * 1 < 0) {
alert('Karakter melebihi batas, harap dikurangi');
kembali;
}
// Awalnya, kami akan mengirimkan permintaan ajax, tetapi tidak ada pemrosesan latar belakang di sini, jadi saat ini kami hanya merender halaman di sisi klien.
self._renderHTML(inputVal,textVal);
});
},
/*
* Render struktur html
*/
_renderHTML: fungsi(inputVal,textVal) {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
var oLi = dokumen.createElement("li"),
oTanggal = Tanggal baru();
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:;">Hapus</a>'+
'</div>' +
'</div>';
//Sisipkan elemen
if($(_config.list + " li").panjang > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}kalau tidak {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
//Hapus nilai kolom teks kotak input
diri._clearVal();
//arahkan acara
diri._hover();
},
/*
* Format waktu, jika satu digit tambahkan 0
*/
_format: fungsi(str){
return str.toString().replace(/^(/d)$/,"0$1");
},
/*
* Dapatkan src
* @kembalikan src
*/
_getSrc: fungsi() {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
var faceImg = $('img',$(_config.wajah));
for(var i = 0; i < faceImg.length; i++) {
if($(faceImg[i]).hasClass(_config.currentCls)) {
kembalikan $(faceImg[i]).attr('src');
merusak;
}
}
},
/*
* Nilai yang jelas
*/
_clearVal: fungsi() {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* arahkan acara
*/
_melayang: fungsi() {
var diri = ini,
_config = mandiri.config,
_cache = mandiri.cache;
$(_config.list + ' li').hover(fungsi(){
!$(ini).hasClass('hover') && $(ini).addClass('hover').siblings().removeClass('hover');
$('.del',$(ini)).hasClass('tersembunyi') && $('.del',$(ini)).removeClass('tersembunyi');
var $itu = $(ini);
// hapus acara
$('.del',$itu).melepaskan ikatan('klik');
$('.del',$itu).bind('klik',fungsi(){
$($itu).menghidupkan({
'opasitas' : 0
},500,fungsi(){
$itu.hapus();
});
});
},fungsi(){
$(ini).hasClass('hover') && $(ini).removeClass('hover');
!$('.del',$(ini)).hasClass('tersembunyi') && $('.del',$(ini)).addClass('tersembunyi');
});
},
/*
*tinggi
*/
_menghidupkan: fungsi(oLi) {
var diri = ini;
var iTinggi = $(oLi).tinggi(),
alfa = 0,
pengatur waktu,
hitungan = 0;
$(oLi).css({"opacity" : "0", "tinggi" : "0"});
pengatur waktu && interval jelas(pengatur waktu);
pengatur waktu = setInterval(fungsi (){
$(oLi).css({"display" : "block", "opacity" : "0", "height" : (hitungan += 8) + "px"});
jika (hitung > iTinggi){
clearInterval(pengatur waktu);
$(oLi).css({ "tinggi" : iTinggi + "px"});
pengatur waktu = setInterval(fungsi (){
$(oLi).css({"opasitas" : alfa += 10});
alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));
},30);
}
},30);
}
};
// kode inisialisasi
$(fungsi(){
Mikroblog baru({});
});
Unduh kode sumber: http://xiazai.VeVB.COM//201312/yuanma/wb(VeVB.COM).rar