2017年7月中旬开始接触前端...
到现在已经有5个多月了，慢慢体会到现今的社会真的是互联网的时代...
对于我个人而言，从最开始的慕课，菜鸟教程，各种网络教育平台的培训班视频......再到像掘金，segmentfault，CSDN 等各大技术社区...在这期间也加了好几个技术交流群。
虽然现在我仍然是个可能才刚刚入门的菜鸟...但是越是听着大牛们讨论着自己不懂的框架与技术，心里越是下定了决心想要把这条路一直走下去。也是因为知道自己要从写文章博客开始，渐渐的才会对知识了解的更加深刻。
废话不多说 直接上代码总结一下自己学到的知识点吧。由于学的东西很杂所以想到什么就写什么还请见谅...开始也许会很简单，但是希望自己以后能够慢慢的发布一些高质量的技术文章吧......
纯CSS实现淡入淡出下拉菜单
//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属性实现渐变效果，在时间较短的情况下通过设置li元素的opacity和ul元素的高度值在视觉上形成
淡入淡出效果,而visibility正好又实现了display的效果且更加友好。
*/
浅谈JavaScript面向对象的设计实现
JavaScript并不像Java一样有十分规范的语法去实现面向对象的三大特性 封装 - 继承 - 多态。尽管在ES6有class语法的出现，但由于prototype原型属性这个至关重要的概念存在，JS是怎么也实现不了像Java里的 父类 - 子类 - 实例 之间的复制操作的。因为在想要实现传统面向对象的程序设计时只能是基于[prototype]的实时委托。因为在原型链上所有的属性和方法是共享的！
下面用代码总结一下常用的面向对象实现方法，因为大多数模式都是基于构造函数和原型来实现的。至于这样做的原因当然是尽量实现代码的封装和复用，代码越抽象其复用性也就越高。值得一提的是在JS中还有模块化机制...由于自己能力有限希望在以后学的更加深入后再来谈一谈吧。
//描述一个矩形的特征，给出它的长宽计算面积，并赋予它边框样式和背景颜色。
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
/*
这就是常用的寄生组合式继承方法,至于它跟组合式继承相比好处就在于减少了重复的实例属性的创建，免去了不必要的
内存浪费
*/
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类的方法来实现相同的功能，没有了prototype的限制，代码瞬间变得清晰许多。
*/
这次的总结就到这里吧...在新的一年即将来临之际给自己一个目标。每个月至少写一篇技术文章。在2018年必须得把自己当初一冲动就买的很多前端书籍看完。
以下是我的书单......
- 《《 CSS揭秘 》》
- 《《 JavaScript高级程序设计 》》
- 《《 你不知道的JavaScript 》》(上) (中)
- 《《 图解HTTP 》》
- 《《 学习JavaScript数据结构与算法 》》
- 《《 vue.js快速入门 》》
- 《《 Node.js实战 》》
- 《《 JavaScipt设计模式与开发实践 》》
在这里要特别感谢将我领进前端大门的一位学长还有我所在学校的部门组织，是他们让我能更快的入门前端，对前端的技术曲线有了大致的了解，在这几个月也有了更多的实践经验，虽然目前只是一些小demo练手，但相信不久我就能够有能力去做一些真正的项目。
虽然没什么东西拿的出手，但是考虑到以后，还是每次把自己的GitHub账号放上来吧。希望以后能够写出自己满意的代码拿出来分享。
https://github.com/RetroAstro
