前端开发的技术栈

Posted on

我发现自己博客没次开头都是在说近况和废话。这次也不例外。哈哈哈,工作也算顺畅,顺便总结下最近的前端开发的技术栈来回顾下这半年学到的知识。

HTML开发

对于大型项目,直接书写HTML代码是一个非常繁琐和头疼的事情,因为HTML需要闭合,每次找匹配的HTML标签都要非常花功夫。所以现在的开发都是使用预处理器来书写代码,例如主流的Pug,通过缩进来控制元素的嵌套,还支持多种语法。非常适合大型项目的开发,再也不用担心修改代码的时候出现HTML元素标签没有闭合的情况发生了。而且还规避了一些语法错误,例如在p标签里嵌入block元素是非法的。如果强行嵌入的话,你会发现生成的HTML代码是错误的。

CSS开发

CSS开发更多的需要是良好的模块化功能和合理的作用域。这时候也需要通过预处理器来进行操作,推荐使用SCSS。这里很多人对sassscss之间的区别有疑问。简单的来说,SCSS的格式更接近CSS,所以比较容易上手。但是SASS是通过缩进来书写的,对新手不太友好。所以建议大家使用SCSS来书写模块化代码。

JavaScript开发

现在主流的浏览器支持的JavaScript版本是es5。但是众所周知,JavaScript(es5)有很多陷阱和缺点,例如this指针问题和异步处理等等。基于原型连的继承对于面向对象开发者来说也很不友好。所以推荐使用es6来书写代码。可以使用基于class的继承,和解决this指针问题。而且还能使用import进行模块化开发。虽然只是语法糖,但也提升了开发效率。

自动化构建工具

我们使用了预处理器来书写代码,并使用新版本的es6语法。但是目前浏览器并不支持直接解析这些内容。所以我们需要构建化工具来处理从Pug生成HTML,从SCSS生成CSS,把es6语法的JavaScript转换成es5语法。对于SPA网站推荐使用webpack,而对于普通网站的构建推荐使用Gulp。这里区别开的原因是,webpack必须指定入口文件,但是Gulp只需要指定需要处理的文件或文件夹就可以了,支持通配符匹配。对于多页面的传统网站来说非常便利。

浏览器兼容处理

这是每个前端工程师最头疼的地方了,因为每个浏览器支持程度都不一样。在使用比较新的API记得去Can I use查看下各个浏览器的支持情况,如果实在是需要这个功能的话,那就只能去寻找polyfill了。

参考:

Why p tag can't contain div tag

网站开发中的Modal问题

Posted on

最近在开发的网站基本上全是使用弹出的对话框(Modal)来进行UI交互的,所以对于Modal的处理也算积攒了一点经验。便想写下来供自己以后参考和学习。说实话,在目前响应式布局的主流开发方式下,Modal非常不适合作为一个良好的交互方式。因为对于手机触屏用户非常不友好。当然,我开发的这个网站也没有考虑手机用户。当前的主流方式还是采用SPA,JS软路由切换页面来交互才是正解。

Modal元素的位置

弹出对话框的方式基本是把对话框的z-index设置的比当前页面元素高,然后使用opacity: 0.5来半透明进行遮罩。但是,需要使用Modal的内容最好放在body的下层,而不是嵌套了好多层的某个div里面,因为子元素的z-index是不可能大于父元素的,会导致在某些情况下,其他元素比当前的Modalz-index更高。

Modal滚动条问题

很多情况下,弹出的Modal内容过多导致会产生滚动条。这时如果不处理好会导致出现双重滚动条。一条是页面本身的内容过多产生的滚动条,还有一条是Modal自身的。双重滚动条还有一个问题是当你在Modal里面进行滚动的时候,页面内容本身也会被滚动,这会导致关闭Modal的时候发现页面的位置已不是打开的位置了,用户体验非常不好。这时候有两种解决方案。

第一个方案是页面本身采用position:fixed进行固定,并用JS记住滚动位置,但必须保持页面本身和Modal是并列关系。例:

    <body>
    <div class="content"></div>
    <div class="modal"></div>
    </body>

这样,Modal采用position:absolute定位,当内容过长就会自动出现滚动条。但是当关闭Modal的时候,必须把网页内容的position:fixed属性去除,并用JS滚动到当初打开Modal的位置。如果Modal是透明的,那就必须在打开Modal的时候设置网页内容的topleft属性来保持位置不变。

第二个方案是,网页内容采用overflow: hidden来隐藏滚动条。Modal采用position:fixed方案进行定位,但是这时候Modal不得不设置overflow: auto来进行滚动。 第二个方案对于网页内容和Modal的位置并没有特殊的要求,比较灵活,而且不需要JS的介入。

浏览器重绘

在一个方案中,由于网页内容被设置成了position:fixed,滚动条自然消失。所以滚动位置回到了浏览器的最上面才对。但是有时候遇到打开Modal的时候发现Modal打开之后滚动条不在最上方,这时候的原因是因为我们虽然设置了CSS进行了变更,但是浏览器没有进行重新绘制,我们可以使用会导致浏览器重绘的JS API来让浏览器更新滚动条信息,使得打开的Modal处于浏览器的最上方。

参考:

Force reflow

Github团队协作

Posted on

社畜也快半年了,说实话工作确实没有学生生活有趣。每天基本都是坐在电脑前写代码,可能我是那种更喜欢新鲜生活的人吧。对于重复的生活很容易就厌倦了,但生活由不得自己,上班的理由很简单,仅仅是因为穷。学生时代写代码基本都是一个人单干,但进入公司就开始正式的团队协作,也算是学到很多团队合作的知识了吧。特别是利用Github进行高效的合作开发。

Github协作开发

首先是切换到需要开发的分支,这里我们假设要在dev分支上进行开发。

git checkout dev

然后,在dev分支上建立属于自己的分支。命名可以以功能命名也可以用解决的issue命名。例如:dev-add-page dev-issue20,之后再切换到自己建立的分支。

    git branch dev-issue20
    git checkout dev-issue20

这样,就可以在自己分支上开发了,开发之后push到服务器上,在请求pull request进行合并操作,在pull request的时候,可以让同事来进行代码review保证开发质量。

协作要用到的Github命令很简单,之后再说说经常用的其他命令。例如,当我们写了半天发现自己在错误的分支上进行了开发,该怎么处理呢?我们可以使用git stash命令来把临时修改隐藏起来。

    git stash 
    git checkout dev-issue20
    git stash pop

如果我们不小心在dev分支上直接进行了开发,可以使用上面的命令迅速把自己的修改切换到自己的分支上。

还有一种情况是,我们在自己的分支上进行开发的过程中,dev分支上合并了其他同时的代码,我们需要和dev分支保持一致。这时可以使用git pull origin dev分支来同步其他同事的代码,避免自己的代码和主分支产生冲突。

自己的分支在上传到服务器并合并之后通常服务器会删掉这个分支,但本地还是会保留。我们需要定期删掉自己本地已经合并的分支,这里推荐使用下面的命令。

git branch --merged | egrep -v "(^\*|master|dev)" | xargs git branch -d

正则表达式里面是不需要删除的分支。

有时候发现某个分支做的功能被砍掉了,然后需要删掉这个分支。可以使用下面的命令:

    git push -d origin <branch_name>
    git branch -d <branch_name>

分别删掉远程服务器和本地的分支。

有时候发现自己写的思路是错的,需要舍弃现在所有的修改,可以使用reset命令来重置。

    git reset --hard

当然这个操作比较危险,你应该慎用。

当你需要移除所有新加的文件,但这些文件还没加入库当中。你可以使用clean命令来清除所有新加文件。

    git clean -f

目前经常使用的就是这么多,如果大家有更好的学习Git命令的推荐资料,欢迎留言。谢谢!

参考:

Stack Overflow

高质量的Git中文教程

tagged: github