2017年7月中旬開始接觸前端...
到現(xiàn)在已經(jīng)有5個多月了吏垮，慢慢體會到現(xiàn)今的社會真的是互聯(lián)網(wǎng)的時代...
對于我個人而言障涯，從最開始的慕課罐旗，菜鳥教程，各種網(wǎng)絡(luò)教育平臺的培訓(xùn)班視頻......再到像掘金唯蝶，segmentfault九秀，CSDN 等各大技術(shù)社區(qū)...在這期間也加了好幾個技術(shù)交流群。
雖然現(xiàn)在我仍然是個可能才剛剛?cè)腴T的菜鳥...但是越是聽著大牛們討論著自己不懂的框架與技術(shù)粘我，心里越是下定了決心想要把這條路一直走下去鼓蜒。也是因為知道自己要從寫文章博客開始，漸漸的才會對知識了解的更加深刻征字。
廢話不多說 直接上代碼總結(jié)一下自己學(xué)到的知識點吧都弹。由于學(xué)的東西很雜所以想到什么就寫什么還請見諒...開始也許會很簡單，但是希望自己以后能夠慢慢的發(fā)布一些高質(zhì)量的技術(shù)文章吧......
純CSS實現(xiàn)淡入淡出下拉菜單
//HTML
<div class="tt-dropdown">
<span>RetroAstro</span>
<ul class="dropdown secondrop">
<li class="drop-menu">Vue</li>
<li class="drop-menu">Node</li>
<li class="drop-menu">React</li>
<li class="drop-menu">Angular</li>
<li class="drop-menu">ReactNative</li>
</ul>
</div>
//CSS
*{margin:0;padding:0;}
.tt-dropdown {
width:100px;
text-align:center;
margin:auto;
font-size:14px;
cursor:pointer;
font-weight:bold;
color:#999;
}
.tt-dropdown:hover .dropdown {
border-bottom:1px solid #d9d9d9;
height:208px;
}
.tt-dropdown:hover .drop-menu {
visibility:visible;
opacity:1;
}
.drop-menu:hover {
background:#f4f5f6;
}
.dropdown {
height:0;
border:1px solid #d9d9d9;
border-top:0px;
border-bottom:0px;
transition:all 0.5s ease;
line-height:42px;
}
.drop-menu {
visibility:hidden;
opacity:0;
color:#999;
transition:all 0.4s ease;
list-style:none;
}
/*
利用transition屬性實現(xiàn)漸變效果匙姜，在時間較短的情況下通過設(shè)置li元素的opacity和ul元素的高度值在視覺上形成
淡入淡出效果,而visibility正好又實現(xiàn)了display的效果且更加友好畅厢。
*/
淺談JavaScript面向?qū)ο蟮脑O(shè)計實現(xiàn)
JavaScript并不像Java一樣有十分規(guī)范的語法去實現(xiàn)面向?qū)ο蟮娜筇匦?封裝 - 繼承 - 多態(tài)。盡管在ES6有class語法的出現(xiàn)搁料，但由于prototype原型屬性這個至關(guān)重要的概念存在，JS是怎么也實現(xiàn)不了像Java里的 父類 - 子類 - 實例 之間的復(fù)制操作的系羞。因為在想要實現(xiàn)傳統(tǒng)面向?qū)ο蟮某绦蛟O(shè)計時只能是基于[prototype]的實時委托郭计。因為在原型鏈上所有的屬性和方法是共享的！
下面用代碼總結(jié)一下常用的面向?qū)ο髮崿F(xiàn)方法椒振，因為大多數(shù)模式都是基于構(gòu)造函數(shù)和原型來實現(xiàn)的昭伸。至于這樣做的原因當(dāng)然是盡量實現(xiàn)代碼的封裝和復(fù)用，代碼越抽象其復(fù)用性也就越高澎迎。值得一提的是在JS中還有模塊化機制...由于自己能力有限希望在以后學(xué)的更加深入后再來談一談吧庐杨。
//描述一個矩形的特征，給出它的長寬計算面積夹供，并賦予它邊框樣式和背景顏色灵份。
function Super (border,background) {
this.border = border;
this.background = background;
}
Super.prototype.acreage = function (width,height) {
this.width = width;
this.height = height;
console.log(this.width * this.height);
}
function inheritPrototype(SuperType, SubType){
var prototype = Object.create(SuperType.prototype);
prototype.constructor = SubType;
SubType.prototype = prototype;
}
inheritPrototype(Super,Calculate);
function Calculate (opts) {
Super.call(this,opts.Border,opts.Background);
console.log(this.border + " " + this.background);
this.acreage(opts.Width,opts.Height);
}
new Calculate({
Width : 30 ,
Height : 50 ,
Border : "solid" ,
Background : "red"
});
//solid red 1500
/*
這就是常用的寄生組合式繼承方法,至于它跟組合式繼承相比好處就在于減少了重復(fù)的實例屬性的創(chuàng)建，免去了不必要的
內(nèi)存浪費
*/
class Super{
constructor(width,height) {
this.width = width;
this.height = height;
}
acreage() {
console.log(this.width * this.height);
}
}
class Calculate extends Super {
constructor(width,height,border,background) {
super(width,height);
this.border = border;
this.background = background;
}
sayRectangle() {
console.log(this.border + " " + this.background);
}
}
var coco = new Calculate(40,80,"dashed","orange");
coco.sayRectangle();
coco.acreage();//dashed orange 3200
/*
這次是用ES6中class類的方法來實現(xiàn)相同的功能哮洽，沒有了prototype的限制填渠，代碼瞬間變得清晰許多。
*/
這次的總結(jié)就到這里吧...在新的一年即將來臨之際給自己一個目標鸟辅。每個月至少寫一篇技術(shù)文章氛什。在2018年必須得把自己當(dāng)初一沖動就買的很多前端書籍看完。
以下是我的書單......
- 《《 CSS揭秘 》》
- 《《 JavaScript高級程序設(shè)計 》》
- 《《 你不知道的JavaScript 》》(上) (中)
- 《《 圖解HTTP 》》
- 《《 學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法 》》
- 《《 vue.js快速入門 》》
- 《《 Node.js實戰(zhàn) 》》
- 《《 JavaScipt設(shè)計模式與開發(fā)實踐 》》
在這里要特別感謝將我領(lǐng)進前端大門的一位學(xué)長還有我所在學(xué)校的部門組織匪凉，是他們讓我能更快的入門前端枪眉，對前端的技術(shù)曲線有了大致的了解，在這幾個月也有了更多的實踐經(jīng)驗再层，雖然目前只是一些小demo練手贸铜，但相信不久我就能夠有能力去做一些真正的項目堡纬。
雖然沒什么東西拿的出手，但是考慮到以后萨脑，還是每次把自己的GitHub賬號放上來吧隐轩。希望以后能夠?qū)懗鲎约簼M意的代碼拿出來分享。
https://github.com/RetroAstro
