网络13116赵钦 毕业论文《web前端的发展》.docx

毕 业 论 文Web前端的发展学 院： 计算机与通信工程学院 专 业： 网络施工与管理 班 级： 网络 131 学 号： 16 姓 名： 赵 钦 指导教师： 王 瑞 计算机与通信工程学院2016年5月黑 龙 江 建 筑 职 业 技 术 学 院 毕 业 论 文Web前端的发展摘要随着互联网的迅猛发展和普及，一个新型的行业和新兴的职位正在上升到技术的层面：web前端开发工程师。Web前端表现层及与前后端交互的架构设计和开发配合后台开发人员实现产品界面和功能利用各种Web技术模拟开发产品原型Web新技术调研和资讯整理，精通HTML/XHTML、CSS，熟悉页面架构和布局，对Web标准和标签语义化有深入理解。熟悉Ajax、JavaScript、DOM等前端技术，掌握面向对象编程思想。Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。关键字：模块化 技术调研 产品还原。AbstractWith the rapid development and popularization of the Internet, a new type of industry and emerging positions are rising to the level of Technology: Web front-end development engineer. Web front end performance layer and before and after the end of the interaction with the architecture design and development with the backend developer product interface and functions to achieve the simulation of product development prototype web technology research and organize information using a variety of web technology, proficient in HTML / XHTML, CSS, familiar with the structure and layout of the page, the semantic web standards and labels have in-depth understanding. Familiar with Ajax, JavaScript, DOM and other front-end technology, to grasp the idea of object-oriented programmingWeb front-end development engineer, the main responsibility is to use (X) HTML/CSS/JavaScript/Flash and other Web technology for client product development. Complete client program (is browser) development. The development of JavaScript, combined with the background to develop technology to simulate the whole effect, rich Internet web development, working through technology to improve the user experience.Key words: modular technology research product reduction.目 录第1章 绪论 5第2章 Web 前端发展的目的及意义 62.1.1 对于前端的开发工具了解所述 62.1.2 对于前端的开发工具了解所述 7 2.2.1 我们是否需要使用库和框架等 7 第三章 原生代码的关键性 8 第四章 移动端的发展 11 第五章 关于APP 12 结论 15 致谢 20 参考文献 21 第一章绪论1.1web前端的发展在计算机的茫茫码海中，技术在不断地更新，我们在不断地完善着计算机世界，在众多技术中，各个新兴技术不断崛起，对于web前端正是如此，不在只限于作图PS，而是可以通过代码技术来完成开发页面，因此前端也就不只局限于美工，一个好的前端完全可以根据设计师的PSD图，百分百还原设计稿，来用代码完成页面展示，又有各种奇幻的效果来增加了前端在互联网行业的进一步发展。由于现在手机的高速发展，前端可以通过HTML5与CSS3技术来完成绚丽的效果与现在智能手机的页面。已经从最早的切图前端发展到了技术（代码）前端，然而技术前段又分很多个技术。1.1.1对于前端技术的概论前端分为很多种技术，有用来完成静态页面的HTML与CSS，又有JavaScript来成静态页面的动态效果，又通过AJAX来完成后台与前台的交互，又分为MVC等模块化管理，因为时代的更新浏览器的发展，每一个浏览器的内核不同，对于代码的兼容性问题又有很多问题，所以一个专业的前端，会完成浏览器的兼容性处理来实现适用于各大浏览器，对于现在技术的发展又有很多帮助前端人员来开发的库、框架、插件等，比如说现在前端人员广泛流传的JQuery的库，angularJS框架，swiper框架，还有很多辅助框架等，由于公司要求的高效率所以导致很多人已经把原生代码给遗忘，这是我感觉悲伤的地方。静态页面的效果，其实很多做前端的人不屑于写静态的页面，可能是因为感觉静态页面简单，其实不然，我们可以通过很多例子来发现静态页面其实不简单，比如说我们需要考虑到很多地方，为后期交互做考虑，后台来运行代码，和动态页面的完成，需要考虑的地方很多，还有语义化等基础的理论与知识，我需要用少量的标签来完成简单的布局与样式，如果前期静态页面写的不够标准的话对后期JS等程序有一定的影响，或是导致布局错乱动态页面的完成，需要很多逻辑性代码来完成，语义化符合逻辑这些都是写JS需要考虑到的，比如一个小小的循环（遍历）对其了解，比如说其中循环的一个变量，双次利用，造成循环的BUG，或是死循环等，又可以通过this等面向对象写法来完成，对于前端来说需要学习的还是比较多的。 1.1.2 前端如何持续发展作为现在前端的崛起，很多程序员工程师，已经选择了很多快速开发工具，比如说库类，框架类，插件类，虽然说用上这些比较方便快些，比如拿库来说，的确方便快捷就像JQ来说，调用函数，获取函数等，完全可以用一个$符完成，写事件也比较方便，点击事件的话原生JS代码会需要obj.onclick=function()这样来写，对于JQ来说的话便是方便了很多$(id).click这样就完成了点击事件，虽然说方便快捷，但是对于新手来说的话，没有一个良好的JS基础，只会JQ这类的库的话，就像一个没有内力的侠客，没有其真正拿出手的东西，因为JQ等的库也使用原生JS来写的，所以其价值你应该已经了解了。第二章 Web前端发展的目的及意义 2.1.1 对于前端的开发工具了解所述上面已经提到了JQ等辅助程序员开发库的利弊，下面我们来讲讲关于框架的一些利弊，简单说框架的话字面意思就能发现，他是类似一个模具，比方说建筑工人砌墙的话他会用线来搭建出所需要的框架，来限制搭建上的失误位置偏移等，所以现在也应该理解框架是一个怎么样的一个开发工具，对，没错，他是一个限制程序员开发的东西，你所需要编写的程序要根据他定义好的内容来写，虽然他大大的限制了程序员的开发，但是还是犹如主题一样，他是一个有利有弊的一个东西，对于框架来说，他省掉了跟多布局上的一些规矩，又可以与后台配合，完全是一个后台类的前端工具，而且每一个框架的功能不一比如说angularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：使用双大括号语法进行数据绑定；使用DOM控制结构来实现迭代或者隐藏DOM片段；支持表单和表单的验证；能将逻辑代码关联到相关的DOM元素上；能将HTML分组成可重用的组件。所以框架也是看属不属于适不适合开发人员来使用。 2.1.2对于前端的开发工具了解所述经过对于库和框架的初步了解，所以我们再来讲讲插件的利与弊，对于插件怎么说呢，她就像一个装饰品，用的好的话，完美无瑕，用的不好的话真是丑态百出啊，插件顾名思义，一个完美的东西来继续装饰他展示出另一功能，我们就拿一个插件来说说swiper这个是一个轮播图（幻灯片）的插件，对于开发人员来说轮播图可以说是一个让人认非常上火的东西，他不是很难但是很烦，所以就有人写了这个插件，以后需要些轮播图的时候他就会拿出来用，swiper里面各种各样的轮播图，任何功能都能完成，但是不是自己写的东西拿过来用你懂的，他会出现很多问题，哪一个最实际的例子来说，我前两天写过某汽车的官网，里面有一个功能就是从后台来获取数据，在布局的时候当然会考虑到他不是一个轮播，而是很多个而且还不定量是几个，本来我为了方便就打算用swiper这个插件，但是客户的需求的原因出现了问题，因为客户需要它显示隐藏，和个问题当然很简单的解决掉了在swiper里面也写了关于怎么解决掉显示隐藏后的问题，但是新的问题出现了，因为所有的轮播没有办法定义数量所以都是创建出来的，这对swiper来说就会出现一个问题，插件失效，显示隐藏后他的数据没办法初始化，然而这个初始化只对第一个创建出来的有效果，最后没有办法只能自己写轮播图了因为是自己写的原生所以没有任何问题。而且一个页面里面引入的插件过多的话会相当卡。通过这个问题来看，插件总会有一些项目需求完成不了的功能，这也就是没有最好的插件框架，没有任何一种语言或是框架，只有适不适合的语言，因为时代不停地变迁，计算机的程序也在不断更新加强完善。 2.2.1 我们是否需要使用库和框架等对于这个问题我是这样理解的，库和框架等，已经很明显了，就是辅助程序员开发的工具，当然要用，但是需要找到合适的来用，不是盲目的用，对于工作中的程序员，需要的是高效开发，这也是大多数公司注重的，使用框架之类的，对于开发效率来说的确是很合适，但是怎么说呢，有得公司也需要用各种框架，其实万变不离其宗原生JS玩的好的话，对于任何框架插件使用起来学习起来都是很轻松的，因为他们都是基于原生JS来写出来的，我们回到主题，建议使用框架等，但是我们不应该吧主要学习的东西放在他们上边，因为这些东西，都在不断地更新，不断地提高版本，但是JS不会一直更新，只有用JS写的软件在不断更新，可想而知，JS的重要性于主导作用了，每当一个辅助插件更新内容后，就要不断地跟着他来学习，像框架这类的你永远都不可能学完，如果原生代码学的精通后，完全可以自己来写插件框架库之类的，这就是区别，建议使用开发工具，但是不建议以他们为主，术业有专攻，为何不学精其之本之根呢？第三章 原生代码的关键性 3.1.1 原生代码的关键性话不多说，对于很多人来说，的确原生代码比JQ的库难，其实只不过是难在原生比较繁琐，比喻一个获取对象var obj=document.getElementsByTagName(class),然而JQ呢？很简单一个$符号搞定，想获取谁就$（class）那个就可以了，因此很多人已经用JQ取代了原生，可是原生代码真的可以被取代么?答案是不可以，JS完完全全可以写出各种需求效果简单的说一下JS: “avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能” JavaScript脚本语言具有以下特点:(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C+等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。 3.1.2 原生代码为何会不被推广的确，原生代码来说很复杂，上面已经不止一次的说其复杂，关键的是他的逻辑性，电脑读取代码是从上往下来读取，也是文档流，而且代码一多便会感觉很乱这就考验了程序员的代码规范，下面我来总结一下他的优点于缺点。缺点-1：代码量比较大。2：学习比较难。3：逻辑性强。4：原生代码比较繁琐。优点-1：方便维护。2：代码优化性好。3：代码轻巧。4：价值性强。5：逻辑性高上述所见，其原生的缺点优点，但是JQ库就比较方便可开发，在工作上要求效率，所以很多人都已经舍弃了原生代码，关于代码的运用的理解，一千个人有一千零一种看法。 3.2.1 JQ代码的关键性对于现在的很多人来说JQ并不陌生，因为工作上都在用，是的，为什么会用JQ呢，原因很简单，快捷，方便，简单，在工作上可以高效率完成任务，所以在工作上比较推广使用，其原理跟原生代码又是异曲同工，又比原生简单，为什么我们非要跟自己走对呢?所以原生代码已经被各种库来代替，但是说以后库可以取代JS原生代码那我只能跟他对喷一下了，库只能代替原生，如果说取代原生我只想说XXX。 3.2.2 JQ代码的开发效率开发效率来说当然毋庸置疑的事情，一个快字怎能了得，方便效率高，而且没有任何不兼容性问题，代码量少，而且很适合新手使用，简单方便快捷这是JQ的特点，比如说一个项目用原生代码一上午才能写完但是用，JQ的话大概一两个小时就解决了，虽然说我这个比喻不太恰当但是我只想说明JQ的快捷性，效率性，用于工作中那是相当的方便，不过里面的一些命令和事件还要好好学习一下的。第四章 移动端的发展 4.1.1 C3和H5对于现在前端的重要性C3和H5顾名思义CSS3和HTML5，这只是CSS和HTML新的版本，跟以前的版本比多了许多属性和标签，比如说旋转，反转，拉伸等，对于现在手机端也就是所谓的移动端，比如平板手机等这类移动的电子产品的进步所以要在网页上显示的功能也在变化，对于现在的前端来说H5这些新的版本技术是要求前端人员掌握的，因为计算机语言在不断地变化于更新。APP当然很多人都知道现在很多app都是用HTML开发然后经过软件包装出来的，我说的只是个别的，比如某宝，某东等，类似这些的APP都是用HTML包装出来的，于此可见现在的H5等技术的发展。 4.1.2 C3和H5的发展性综上所述都是我自己的感觉，它的发展性很大，说是新技术其实也不算是新技术也有两年时间了，他还是一个需要时间来考验的，因为它是有兼容性问题的，很多浏览器都没有办法来实现，无法实现的基本上都是一些老版本的浏览器，所以在移动端的上面运用的比较多，因为他不会考虑到太多的兼容性问题，但是移动端的兼容性问题只是手机内核，再次不做过多的叙述，我举个例子吧，我之前在各大招聘网站上找工作的时候，很多公司都会问你会不会H5，而且H5的薪资会比不会H5的薪资高很多，各个公司也都会有自己的网站，在手机技术没有这么普及的时候人们大概不会像都弄一个手机的网站或是APP但是现在不同了，上到六十岁的大娘下到几岁的儿童都在用手机，所以商家也注意到了移动端的重要性，H5只不过是有很多很多特别炫的效果。 4.2.1 移动端的崛起其实我不得不说近几年由于各个高科技的崛起各种新的技术诞生，移动端已经成为一个新的趋势，很多公司也转战到了移动端上，而且现在很多的游戏都是可以用H5来写的，或者是一个很简单的画布就可以完成这也是现代市场上面的一个主流，在这个手机已经普及的世界我相信H5等技术还会有很多发展的空间，应该不止局限于这些。 4.2.2 移动端的发展当然了，智能手机几乎人人都在用，我想未来还会出现更高科技的手机，只不过这些都是要等到出来以后再说，移动端开发的确是现在市场上的一块肥肉，现在也有很多后台技术的转战前台来写移动端，移动端现在的发展确实不错，也因为开发移动端的人比较少所以写移动端页面的工资普遍都比较高，所以导致现在群雄并起一拥而上的感觉，以至于现在鱼龙混杂。达到饱和的状态也用不了几年的时间，我想最后剩下的也只有大牛或是天赋异禀的高手了。只有在这条路上不断地学习坚持差能走下去，不想被淘汰就紧跟着时代的步伐，我们需要找到适合自己的一个位置，不想被看成弱者就不断的变强吧。然自己有能力决定自己未来的方向。第五章 关于APP 5.1.1 APP的区别Native App开发Native App开发即我们所称的传统APP开发模式（原生APP开发模式），该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发，该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。Web App开发Web App开发即是一种框架型APP开发模式（HTML5 APP 框架开发模式），该开发具有跨平台的优势，该模式通常由“HTML5云网站+APP应用客户端”两部份构成，APP应用客户端只需安装应用的框架部份，而应用的数据则是每次打开APP的时候，去云端取数据呈现给手机用户。Web APP应用呈现以下特点：（1）每次打开APP，都要通过APP框架向云网站取UI及数据；（2）手机用户无法上网则无法访问APP应用中的数据。（3）框架型的APP无法调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）（4）框架型APP的访问速度受手机终端上网的限制，每次使用均会消耗一定的手机上网流量；（5）框架型APP应用的安装包小巧，只包含框架文件，而大量的UI元素、数据内容刚存放在云端；（6）APP用户每次都可以访问到实时的最新的云端数据；（7）APP用户无须频繁更新APP应用，与云端实现的是实时数据交互；适用企业：电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。Native App（原生型APP）应用呈现以下特点：（1）每次获取最新的APP功能，需要升级APP应用；（2）原生型APP应用的安装包相对较大，包含UI元素、数据内容、逻辑框架；（3）手机用户无法上网也可访问APP应用中以前下载的数据。（4）原生型的APP可以调用手机终端的硬件设备（语音、摄像头、短信、GPS、蓝牙、重力感应等）（5）APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核。适用企业：游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。移动Web无所不在，移动Web是目前唯一的支持各种设备访问的平台，与桌面Web一样，移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台，它将各种移动交互与桌面任务有效地连接了起来；而开发Native App可以充分利用设备的特性，而这一点往往是Web浏览器做不到的。 5.2.1 Web app虽然说是APP但是基本上是由HTML等构建出来的程序，虽然说其快捷方便但是的确不如原生APP安全高性能，咱们先抑后扬，怎么说呢，app对现在来说的确是有很大的发展空间，而且很多人有要求效率轻巧，所以人们基本上会选择WEB的，而这仅仅只是一个简单的开始，在很久以前，前端这个行业人们只是感觉很简单，案后慢慢的发展越来越复杂，其实不然，我感觉前端还是一样的，只是多了一些看似复杂的东西而已。结论 前端学习之路我先对于这个还是朝阳的职业大家都比较向往，所以我借鉴了别人的文章来给大家概述一下这个职业的进阶流程，将一个代码之路分成了八个等级，入门登堂入室入微化蝶大侠宗师来划分等级，【入门】能够解决一些问题的水平。有一定的基础（比如最常见的html标签及其属性、事件、方法；最常见的css属性；基础的javascript编程能力），能够完成一些简单的web前端研发需求。入门”阶段是每个程序员的必经之路，只要”入门”，你就上路了。所谓”师傅领进门，修行靠个人”，有了这个”入门”的基础，自己就可以摸索着前进了。进阶方法：将javascript、html、css之类的编码帮助手册里的每个方法/属性都通读几遍！只有将基础打好，以后的路才能走的顺畅。参考这些帮助文档，力争写出无瑕疵的代码。这些编码文档建议不仅是在入门提高期看，在你以后每个阶段破阶的时候都应该看看，最基础的东西往往也是最给力的东西，有时能够给你带来意想不到的收获。【登堂】能够正确地解决问题。不管你是通过搜索网络，或者通过改造某些成品代码（jquery/dojo/ext/yui）案例，只要能够无错地完成需求。对比”入门级”的代码，不管是从代码量、代码效率、代码优美性、代码思路来说，”登堂”级的这个日期处理代码都要优秀很多。进阶方法：这个阶段虽然能够给出正确的解题方案，但是不一定是最优秀的方案。如何才能得到最优秀的方案呢？首先就是积累各种能够解决需求的方案，然后再验证每个方案，在这些方案中选择最好的一种。因此该阶段的进阶之路就是”行万里路，看万卷书”，积累各个需求的各个解决方案。你可以扎身在专业论坛（蓝色理想、无忧、csdn）里，通读所有的faq及帖子；你可以打开搜索引擎，穷举所有的搜索结果。自己建立测试环境一一验证这些代码：去揣摩每段代码的意图，去比较每段代码之间的差异。这两条路可以让你快速完成原始积累，当你再面对大多数需求时能够说这些问题我以前做过，那你就水到渠成地晋阶了。【入室】最强代码，知道所有能够解决需求的各种方案，能够选择使用最优秀的方案满足需求。这个级别基本上产品开发编程中的代码主力。给出的一招一式，招招都是绝招。能够解决问题的方法会有很多，但是对于程序员来说应该选择最优秀的。上面这段代码从代码量来说”正则表达式”最优秀；从代码执行效率来说： “字符串剪裁”法最高（chrome中”正则表达式”效率最高），split法最次；从可扩展性上来说，”正则表达式”法最优。具体使用那种方案视具体的需求环境而定。“入室”阶段，程序员应该能够肯定的回答：对于这个需求而言，我的代码就是最优秀的代码。”入室”级别追求的就是每一招每一式的完美无缺。从web前端编程来说，通过2年左右的努力，很多人能够达到这个水平，但是，很大一部分人的编程能力也就止步于此。或限于产品的需求单一性，或限于需求开发的时间紧迫性，或限于人的惰性，能够完美地解决当前的需求就够了。由于长期处于技术平台期，技术上得不到提高，通常这个级别的工程师会比较燥。技术上小有所成；或追求个人的突破；或追求产品差异性带来的新鲜感；或者只是想换个心情；因此很多此级别的工程师会经常换公司。切勿以为自己能写一手漂亮的代码而自满；切莫以为别人”尊称”你一声”大侠”你就以 “大侠”自居；切莫以为自己积累了一些得意的代码就成了框架式开发。细节决定成败，优秀的方案并不能保证最终的成功。还以”删除指定字符串”为例，原始字符串从格式上来看应该是了个url链接，在去除”pn=0之后，最末尾处留了一个尾巴”?”；如果原始字符串是”/?pn=0&a=1“，去除”pn=0之后 ? 和 & 两个符号紧贴一起，这更是明显的bug。进阶之路:此阶段进阶之路就是：切勿心浮气躁；你不再被需求牵着走，而是你牵着需求走。注重细节，注意那些当前需求里没有明文给出的细节：代码性能的差异、运行平台（浏览器）的差异、需求的隐性扩展、代码的向后兼容等等。我建议这个级别的工程师做一做webtreeview控件，要求总节点量一万左右操作流畅，你的晋升之路就在这个控件的编码过程中。【入微】最强解决方案。你能够走在需求的前面，将当前需求里有的、没有直接提出来的、现在暂时没有但将来可能有的等等，及前端编程潜规则等各个方方面面都综合考虑，给出最优方案。以一招胜万招。这个阶段已经不再追求一招一式，对你来说不是使用什么创新绝招解决需求，而是给出成熟稳重的方案，从根上解决问题。针对某个当前需求你的代码可能不是最优，但是针对此类的需求你的代码却是最优秀的代码。进阶之路：很多web前端研发工程师在做了3-4年之后就会进入一个瓶颈期：产品开发需求是小菜一碟，没有新鲜的可以挑战的东西；代码开发中的稀奇的解题方法都已经尝试过。没有了可挑战的难题，失去了探索的激情，也就没有了再上升的动力，好不容易走过”入室”级别的人又会有八九成止步于此。或转做技术领导人，或转到其它的领域，或换公司。这些人的上升之路在哪里呢？这个阶段单单依靠技巧和数量的累积已经没有什么效果了，突破之路在第5层化蝶里会详细说明，我建议你在这个阶段末尾着重关注编程理论：面向对象/过程、代码组织形式、编译、代码规范、其它的框架设计等等。我建议这个级别的工程师做一做webeditor控件，不要求完整功能，但是该控件里的模块划分、代码组织、编程思想做到位，给出一个系统的解决方案。【化蝶】破茧重生，这个层次关注的是编程语言本身，而不再关心产品需求。什么是茧？产品需求就是茧。当你一招胜万招，打遍天下需求之时，你如果还拘泥于需求开发，那就是你限于茧中而不自知。要么就在这个茧里默默地老去，要么就破开茧获得新生。从代码实现上来说没有太大的区别，但是从思路上来说却有着本质的区别：1、不再是就事论事，头疼医头，而是把一类问题抽象理论化，一招破万招；2、有封装的概念，不再是每次从零开始，而是站在半山腰开始爬。在web前端研发队伍里也有很大一部分人入室层次时就自我感觉良好，直接跨跃到化蝶，积累自己的代码库，抽象化问题。但没有基础，缺少强大的后劲，即使能够破茧也经受不了风吹雨打。一份不成熟的架构设计对团队开发带来的危害远大于它带来的好处，这种例子在业界屡见不鲜。不要拔苗助长，不要不会走就想着跑，夯实基础，水到渠成地成长