この 2 日間、私は Tencent の Weibo 投稿の効果を研究したので、その効果を以下に示したいと思います。
ここで共有する前に、私のコーディング習慣について話したいと思います。私は jquery フレームワークを使用しているのに、なぜ Jquery 形式でコンポーネントを作成しないのかと尋ねるでしょう。当時の私の答えは次のとおりです。コードを書くとき、人にはそれぞれ独自の習慣があります。しかし、私がもっと言いたいのは、この種のコーディングには大きな利点があると個人的に感じているということです。たとえば、淘宝網で使用されているキッシー フレームワークなど、企業によってフレームワークが異なるため、私は Jquery フレームワークにあまり依存していません。 Alipay Baidu で使用される Alipay フレームワークは Baidu フレームワークを使用し、Tencent は Tencent のフロントエンド JS フレームワークを使用します。コードが jquery に依存しすぎる場合。他の人が私のコードを使用したい、または私がいつか Tencent プロジェクトに取り組みたいと思っているが、彼らの JS フレームワークの使用とそのような機能のみを要求されたらどうなるでしょうか?それでは、jquery のエンコード形式に完全に依存している場合、今すぐ再エンコードする必要がありますか?現在のコーディング方法に従ってコーディングすると、jquery セレクターのみを使用することになります。その後、セレクターを変更すれば、他のコードも直接使用できるようになります。私は個人的に、プロのフロントエンド開発者として、ものを作るために jquery を少し知っているだけでなく、高品質のコードを書くことも考慮する必要があると感じています。jquery で単純なコードを書くことでも何かをうまくやることができるかもしれません。ある日、ある機能が追加された場合、またコードを変更する必要があるでしょうか？以前の関数に基づいて新しい関数を書き直すことはできますか?コードを変更する必要はありません。
高品質なコードとは何ですか?
個人的には、以下の点を満たさなければならないと考えています。
1. スケーラビリティ。
2. 保守性。
3. 読みやすさと使いやすさ。
4. JS のパフォーマンス。
最も重要なことは、上記の点を満たすことです。
さて、これ以上ナンセンスはありません！話は変わりますが、Weiboへの投稿の効果は単純です。もちろん、Tencentには絵文字の追加など、Weiboに投稿するための複雑な機能もありますが、現時点ではそのようにはできていません（作業量は比較的少ないです）。大きい）。
以下に書いた JS コードでは、次の 2 つの点に注意する必要があります。
1. 公開するたびにアイテムがリストに追加されると誰もが言っていますが、現在、ajax リクエストは送信されておらず、バックグラウンドにレコードがないため、ページを更新すると削除されます。
2. 時間はクライアントの時間に基づいています。クライアントの時間が間違っている場合、時間も影響を受けます。
実際、この考え方は非常に簡単です。上の効果を見るだけで理解できるので、ここでは詳しく説明しません。または、以下に圧縮されたデモを提供しますので、自分でダウンロードして効果を確認してください。コールバックは、各パブリケーションの後に拡張機能として提供されます。もちろん、項目にマウスを移動すると削除ボタンが表示され、任意に項目を削除できます。コードを直接投稿する場合は、特に言うことはありません。
HTML コードは次のとおりです。
次のようにコードをコピーします。
<div id="msgBox">
<フォーム>
<h2>さあ、あなたが何をしているのか、何を考えているのか教えてください</h2>
<div>
<input id="ユーザー名" value="" />
<p id="顔">
<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></span><strong>140</strong><span> 文字も入力できます</span>
<input id="sendBtn" type="button" value="" />
</p>
</div>
</form>
<div>
<h3><span>みんなが話しています</span></h3>
<ul id="list-msg"></ul>
</div>
</div>
CSS コードは次のとおりです。
次のようにコードをコピーします。
body,div,h2,h3,ul,li,p{マージン:0;パディング:0;}
a{テキスト装飾:なし;}
a:hover{テキスト装飾:下線;}
ul{リストスタイルタイプ:なし;}
ボディ{カラー:#333;背景:#3c3a3b;フォント:12px/1.5 /5b8b/4f53;}
#msgBox{幅: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 フォーム{background:url(img/boxBG.jpg)repeat-x 0bottom;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 ソリッド #7abb2c;}
#ユーザー名{高さ:20px;}
#conBox{幅:448ピクセル;サイズ変更:なし;高さ:65ピクセル;オーバーフロー:自動;}
#msgBox フォーム div{position:relative;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#face{位置:絶対;上:0;左:172ピクセル;}
#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{幅:28px;高さ:28px;ボーダー:1px ソリッド #f60;不透明度:1;フィルター:alpha(不透明度=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}
#sendBtn.hover{背景位置:0 -30px;}
#msgBox フォーム .maxNum{font:26px/30px ジョージア、タホマ、エリアル;パディング:0 5px;}
#msgBox .list{パディング:10px;}
#msgBox .list h3{位置:相対;高さ:33px;フォントサイズ:14px;フォントの重さ:400;背景:#e3eaec;ボーダー:1px ソリッド #dee4e7;}
#msgBox .list h3 スパン{位置:絶対;左:6px;上:6px;背景:#fff;行の高さ:28px;表示:インラインブロック;パディング:0 15px;}
#msgBox .list ul{オーバーフロー:非表示;ズーム: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{背景:#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{表示:インライン;ワードラップ:ブレークワード;}
#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox .list .timespan{float:left;}
#msgBox .list .times a{float:right;color:#889db6;}
.tr{オーバーフロー:非表示;ズーム:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
.hidden {表示:なし;}
JSコードは次のとおりです。
次のようにコードをコピーします。
/**
*テンセントがWeiboで公開した影響を模倣する
※1. 現在、ajaxリクエストは送信されておらず、バックグラウンドでのレコードもないため、ページを更新するとクリアされます。
※2. 時刻はクライアント時刻を基準としています。クライアント時刻が間違っている場合は時刻も影響を受けます。
* 現時点では、このような対話の具体的なアイデアはそれほど複雑ではありません。これをプロジェクトで使用する場合は、特定のニーズに応じて変更できます。
* @constructor ミニブログ
* @日付 2013-12-23
* @author tugenhua
* @メール [email protected]
*/
関数マイクロブログ(オプション) {
this.config = {
maxNum : 140, // 最大文字数
targetElem: '.f-text', // 入力ボックスまたはテキストフィールドのクラス名
maxNumElem: '.maxNum', // あと何個の単語コンテナを入力できるか
sendBtn : '#sendBtn', // ブロードキャストボタン
face : '#face', // 顔文字コンテナ
activeCls: 'active', //マウスクリックによる入力ボックスの追加クラス
currentCls: 'current', // マウスが顔アバターをクリックしたときに追加されるクラス名
inputID : '#userName', //ボックスIDを入力
textareaId : '#conBox', // テキストエリアID
list : '#list-msg', // みんなが話題にしているコンテナ
callback: null // 動的ブロードキャスト後のコールバック関数
};
this.cache = {};
this.init(オプション);
}
マイクロブログ.プロトタイプ = {
コンストラクター:マイクロブログ、
init: 関数(オプション) {
this.config = $.extend(this.config,options || {});
var self = これ、
_config = self.config、
_cache = self.cache;
// 入力ボックスをクリックして入力テキストエリアのテキストエリアの境界線を変更します
$(_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);
});
});
// 顔アバターをクリックしてクラス名を追加（追加）します
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');
}、関数（）{
$(this).hasClass('hover') && $(this).removeClass('hover');
})
//バインドイベント
self._bindEnv();
}、
/*
※漢数字、英語などを含む文字の長さを計算します。
* @param str
* @return 文字列の長さ
*/
_countCharacters: 関数(文字列) {
var totalCount = 0;
for (var i=0; i<str.length; i++) {
var c = str.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
合計数++;
}それ以外 {
合計数+=2;
}
}
totalCount を返します。
}、
/*
* すべてのバインディング イベント
*/
_bindEnv: 関数() {
var self = これ、
_config = self.config、
_cache = self.cache;
//テキストフィールドのキーアップイベント
self._keyUp();
// ブロードキャストボタンのクリックイベント
self._clickBtn();
}、
/*
* テキストフィールドのキーアップイベント
*/
_keyUp: 関数() {
var self = これ、
_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) {
html = _config.maxNum * 1 - len * 1;
}それ以外 {
html = _config.maxNum * 1 - len * 1;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
}、
/*
*ブロードキャストボタンをクリックするイベント
*/
_clickBtn: 関数() {
var self = これ、
_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('名前を入力してください');
戻る;
}else if(reg.test(textVal)) {
alert("ちょっと言ってください!");
戻る;
}
if(maxNum * 1 < 0) {
alert('文字数が制限を超えています。文字数を減らしてください');
戻る;
}
// 当初は ajax リクエストを送信する予定でしたが、ここではバックグラウンド処理がないため、現在はクライアント側でページをレンダリングしているだけです。
self._renderHTML(inputVal,textVal);
});
}、
/*
* HTML構造をレンダリングする
*/
_renderHTML: function(inputVal,textVal) {
var self = これ、
_config = self.config、
_cache = self.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").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();
}、
/*
※時刻をフォーマットします。1桁の場合は0を追加します。
*/
_format: 関数(文字列){
return str.toString().replace(/^(/d)$/,"0$1");
}、
/*
* ソースを取得しています
* @return ソース
*/
_getSrc: 関数() {
var self = これ、
_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');
壊す;
}
}
}、
/*
*クリア値
*/
_clearVal: 関数() {
var self = これ、
_config = self.config、
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
}、
/*
* ホバーイベント
*/
_hover: 関数() {
var self = これ、
_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();
});
});
}、関数（）{
$(this).hasClass('hover') && $(this).removeClass('hover');
!$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
}、
/*
*身長
*/
_animate: 関数(oLi) {
var self = これ;
var iHeight = $(oLi).height(),
アルファ = 0、
タイマー、
カウント = 0;
$(oLi).css({"不透明度" : "0", "高さ" : "0"});
タイマー && clearInterval(タイマー);
タイマー = setInterval(function (){
$(oLi).css({"表示" : "ブロック", "不透明度" : "0", "高さ" : (カウント += 8) + "ピクセル"});
if (カウント > iHeight){
クリアインターバル(タイマー);
$(oLi).css({ "高さ" : iHeight + "px"});
タイマー = setInterval(function (){
$(oLi).css({"不透明度" : alpah += 10});
alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));
},30);
}
},30);
}
};
// 初期化コード
$(関数(){
新しいマイクロブログ({});
});
ソースコードのダウンロード: http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar