前端的水有多深？

Posted 2020-09-26

　　但凡从事互联网的人基本都会写几行 html，用过 Word 的人用 Dreamweaver 也能做出规整的页面，所以大部分人会很自然地认为“前端开发没什么技术含量，so easy”。当然从业者也有很多疑惑：做前端页面实现，没问题；兼容性，也还好；图片集成，貌似也还行……还能有什么问题？瓶颈啊、天花板啊、转行啊、出路啊、前景啊就在从业者中广泛讨论。是不是真的没什么问题了呢？页面开发还有哪些要求，还要做些什么，这里面的水到底有多深呢？

　　在不同的时期对前端的看法似乎是不同的。在互联网早期的时候，小车还是比房子贵的，烧饼和粉丝还只是用来吃的，菊花还只是用来泡茶的。那时的页面设计风格相对单一，对应的页面需求也比较简单，并且当时的浏览器也基本是 IE6 的天下，javascript 也只是网页特效的代名词，HTML 页面本身没有引起太多人的关注，似乎只要能用 table 加 css 辅助把图片定好位，把页面内容预留好就 OK 了，并且这种观念存在了很长一段时间。随着页面内容的丰富，设计风格的发展，交互复杂性的增加，AJAX 的应用，浏览器的更新换代，让大家重新对最基本的页面重视起来。然后被广泛讨论的是浏览器的兼容性，css hack，是不是的骂一骂坑爹的IE6、7、8……，然后开始寻找出路。下面我们就从这个阶段开始说起。

　　实现效果图是最基本的工作

　　把视觉稿通过页面代码的方式表现出来包含了两个基本诉求：1.能够真实反映视觉稿；2.能够通过浏览器的兼容。这两个诉求的达成需要我们有注重细节的态度和一定的页面功底，但这就代表着我们可以胜任页面开发的工作了吗？不，这才刚刚开始！

　　与设计师的沟通和项目的参与

　　沟通很重要。先抛出几个问题：我们有没有和设计师探讨过某些效果对低端浏览器渲染效率影响比较大？有没有探讨过部分效果可以用 css3实现从而使得结构更加简洁清晰？前端页面的开发面向用户，编写的代码也直接作用在浏览器上，我们有义务对页面的稳定性和渲染效率负责。我们也经常碰到项目在总体进度压力下导致的设计与前端开发同步进行，这时更有必要尽量多地获取项目信息，了解我们还要做些什么，这些可以帮助我们充分考虑重用和框架拓展。

　　良好的页面结构

　　页面结构的编写好比盖房的地基建设，其好坏会直接影响到 CSS 代码的质量、js 开发、后台开发还会影响到以后的页面拓展和页面调整。拿到视觉稿后，不要忙着动手开始，多观察思考。先分析布局，划分框架，然后规划结构，编写代码。特别在大型项目中，合理使用模块化的开发不论从整体进行还是拓展维护都有相当大的好处。

　　关于 hack

　　很多同学在页面开发时上网搜索最多的就是 hack 了，是否我们完全要依赖 hack 来实现页面兼容性，答案是否定的。大部分情况下可以通过变换思路调整 HTML 结构，或使用一些虽然无法解释但相对安全的 css 或者使用兼容性较好的jquery来干掉 hack。谁都无法预计使用 hack 什么时候会让我们栽一个大跟头。

　　优美的代码

　　现在很多 web 项目功能复杂，代码规模也会变得很庞大，如何更好地进行协同开发和维护是我们面临的一个问题。需要考虑完善统一的规划，还有要养成良好的代码开发习惯才会在面临各种情况时游刃有余。翻阅页面代码，看到合理的标签使用、良好的注释、清晰的代码结构、用意准确的 css 不仅犹如欣赏一个艺术品，更为下游开发和协同开发降低了不小的沟通成本，我们有什么理由不去这么做呢？举个反面例子：div 滥用是现在比较典型的一个问题。数数看自己使用的标签有多少个呢？不同的语义都该使用对应的标签代码，特别是 HTML5 提供了更丰富的语义化标签。

　　保障效率

　　作为项目开发中比较靠前的一环，页面开发可能需要尽早完成为项目争取时间，这就需要我们尽可能地提高效率。“工欲善其事，必先利其器”，除了实战经验和代码习惯的形成可以帮助我们提高效率外，想要提高对自己开发的进度掌控能力，还有很多辅助工具可以帮助我们进行页面开发。比如使用 Less 或 Sass 可以帮助我们拓展和组织 CSS，大大提高 CSS 的编写效率增加了可维护性。比如在是用sublime text2/3编辑器时可以通过其丰富的插件来提高开发效率。当然了，还是得找一款适合你自己的编辑器。编辑器这么多，总有一款适合你。

　　针对服务器的优化

　　页面开发也需要了解服务器的优化，尽量减小服务器负担。比如 css sprite 就是一个典型减小服务器请求数的例子。对 class 名进行了混淆压缩避免命名过长的冗余；应用 base64 减少请求数量等等措施。这些都是综合权衡的结果，需要考虑各个方面整体优化。因为当页面访问量达到一定的数量级时，再小的一点优化都会达到可观的效果

　　拥抱 HTML5

　　这是一个充满机会的时代，HTML5时代的来临伴随着移动互联网的兴起创造了更大的机会，还有太多的东西值得我们去学习去发现。 HTML5 提供了丰富的 JS API 接口，需要我们去研究；CSS3的绚丽吸引了足够多的眼球，需要我们去研究；移动设备上如何开发更加适配的页面，需要我们去研究……

　　一大波javascript框架袭来。

　　jQuery、AngularJS、AngularJS2、Vue.js、React、Node.js

　　

　　这些还不够，一个合格的前端还需掌握这些知识，并不要求所有，当然多多益善啦。

　　主流的服务器端知识也是不少。

　　php、Python、Python3、java等等

　　数据库也得会一些，起码的增删改查得会吧！

　　SQL、mysql

 

　　学得越多，发现自己不懂的也越多。哎，一入前端深似海啊！