走进前端

「前端」英文称为: Front-End Developer

2016年9月,我开始准备走进前端,在此想分享一些我在学习过程中有趣的事情。

因为本身对C和C#有过接触,喜欢倒腾,所以学习过程还是蛮开心的,在这里我向大家推荐几本不错的书:《CSS权威指南》、《JavaScript权威指南》,我认为学习前端可以从这里入手。 在阅读的过程中,我进行了第一次的自我练习,使用Sublime Text编写了一个静态而又简单的百度首页,当然在看这两本书之前,我是通过慕课网进行学习的,同时也进行了一些小的练习(当然那些的代码文件我已经删除了,因为我认为可读性很糟糕)。 在完成百度首页后,我开始模仿制作小米的官网首页,在模仿小米官网首页的过程中,同样也使用了一些jQuery,它让我更高效的进行开发,并且慢慢的提高代码编写的可读性(有兴趣可以在我上传的项目中查看源码),也学习了一些有意思的CSS样式:

  • float:left/right; + clear:left/right/both; 可以解决一些错位bug
  • icon小图标并非需要image文件,CSS同样可以实现
  • transition: ; 可以使动画不那么生硬
  • rgba(R,G,B,Alpha); 可以让颜色有透明度

期间我用微博和Twitter关注了一些行业内的大牛以及有名的框架,只是很简单的了解了下他们:Bootstrap、jQuery、Node.js、Vue、AngularJS、React,同时也了解了下MVC的工作模式。 有趣的事,我购买了一本郝老师的鸡汤书《技巧》,的确像网友所说的,这本书里都是鸡汤,但是千万别喝,读完这本书,我只领会到一句话:学习考方法,有想法就去做,其他就别信了。 当然在模仿小米官网时,我已经开设了GitHub账号,已经可以使用Mac OS以及Ubuntu的git命令维护我的GitHub了,有机会我可以为大家分享下Ubuntu的使用小技巧。

在完成小米官网的模仿后,开始模仿京东官网的商品页面,开发工具改为:WebStorm,在这里我改善了一点,image文件我不再下载到本地,而是利用京东服务器,我认为这样可以提高客户的访问速度。 模仿京东商品页面时,也学习了一些有趣的事:

  • 可以使用 data-example 来设置数据,使用.data("example"); 来读写
  • 设置 <body>{width: ;} 参数来解决小窗口页面破页bug
  • CSS 子元素选择器 > 在很多动画场景都能用到
  • z-indexposition: relative/absolute/fixed; 有了一些新的认识,他们可以实现很多同一区域的动画效果

同时尝试自己编写了一个放大镜工具:

$("#goods-img-zoom").hover(
    function (event) {
        $("#goods-img-zoom").append('<div class="jqzoompup"></div>');
                //创建图片鼠标跟踪区域

        $(".goods-preview").append('<div class="imgzoomdiv"></div>');
                //创建放大镜显示区域

        $("#goods-img-zoom").mousemove(
            function (event) {
                var goods_img_zoom_jq_x = event.pageX - $("#goods-img-zoom").offset().left - 87.5;
                var goods_img_zoom_jq_y = event.pageY - $("#goods-img-zoom").offset().top - 87.5;
                if (goods_img_zoom_jq_x < 0) {goods_img_zoom_jq_x = 0;};
                if (goods_img_zoom_jq_x > 175) {goods_img_zoom_jq_x = 175;};
                if (goods_img_zoom_jq_y < 0) {goods_img_zoom_jq_y = 0;};
                if (goods_img_zoom_jq_y > 175) {goods_img_zoom_jq_y = 175;};
                    //控制鼠标移动的区域

                $(".jqzoompup").attr("style","top:" + goods_img_zoom_jq_y + "px; left:"+ goods_img_zoom_jq_x +"px;");
                    //根据鼠标移动位置动态调整区域位置

                $(".imgzoomdiv").attr("style","background:url(" + $("#goods-img-zoom img").attr("data-img") +") no-repeat; background-position:"+ -(goods_img_zoom_jq_x/175*400) + "px " + -(goods_img_zoom_jq_y/175*400) + "px;");
                    //根据跟踪区域显示放大镜内的区域
            }
        );
    },
    function () {
        $("#goods-img-zoom .jqzoompup").remove();
        $(".imgzoomdiv").remove();
                //鼠标移开消失
    }
);

更多其他代码可以前往我的GitHub查看。因为时隔几个月,感谢Github帮助我回忆之前学习到的内容,更细的内容可以查看更新Commits。 需要提到一点,我的主页是使用Bootstrap制作的。 将来的项目中,我会将更细内容写的更加具体,让我可以更好地总结和分享给大家。

推荐读物

《CSS权威指南》

《JavaScript权威指南》

《CSS Secrets》

一些不错的站点

MDN

慕课网

JS秘密花园

Iconfont

SegmentFault

写这段小记得前几天,也就是2017年01月,我购买了《JavaScript语言精粹》,我决定提高我的JavaScript基础,让基础更扎实,可以更好地去学习并运用市场上的框架!

在此预祝大家2017年新年快乐,鸡年大吉!

以上仅个人观点,若有不足请大牛指点,谢谢!

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×