ホームページ >ウェブフロントエンド >jsチュートリアル >TencentのWeiboエフェクトコードを模倣したJS_JavaScriptスキル
この 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 コードは次のとおりです:
还能输入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.list).append(oLi); // 清空输入框 文本域的值 // hover事件 $(_config.inputID) && $(_config.inputID).val(''); }, // 删除イベント timer && clearInterval(timer); アルファ > 100 && (clearInterval(timer), $(oLi).css({"opacity":100})); },30); // 初始化代码
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover ');
},function(){
} $(this).hasClass('hover') && $(this).removeClass('hover');
})
// バインディング イベント
文字列の長さ
*/
_countCharacters: function(str) > 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();
🎜> _keyUp: function() {
var self = 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 {
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
self._clearVal();
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.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(),
alpah = 0,
タイマー,
count = 0;
$(oLi).css({"opacity" : "0", "height" : "0"});
timer = setInterval(function (){
$(oLi).css({"display" : "block", "opacity" : "0", "height " : (count = 8) "px"});
if (count > iHeight){
clearInterval(timer);
$(oLi).css({ "height" : iHeight "px "});
timer = setInterval(function (){
$(oLi).css({"opacity" : alpah = 10});
}
},30);
}
};
$(function(){
new Microblog({});
});