✦✦✦✦✦✦✦✦

今天突然想吃红烧肉，然后就问厨师朋友怎么做。厨师朋友见你学习很有诚意，就扔了两本书：

我们还能做好朋友吗？你的心跳加速，但在你抱怨之前，厨师做了非常专业的分析：肉质是味道的关键，酱油是色香味的保证。基础不扎实，怎么能做出好吃的红烧肉呢？

1 站在前人的肩膀上

HTML和CSS是前端的基础。这是无可否认的事实。就像汽车一样sublime text 3安卓版，当然是一堆钢板和螺丝组装而成的，但是还有人还在用锤子造汽车吗？李书福曾经说过，“汽车就是四个轮子和两个沙发”。去家具店、轮胎店不就可以造车了吗？ （好吧，我承认夸张因素有点大）

在程序员的世界里，经常会提到造轮子，就是为了造一辆汽车，你先用扳手和大锤敲出一个轮子，然后用你做的轮子和你做的座椅来组装车。这种方式绝对是私人定制，但这都是BAT做的。这样做的其他团队和开发人员可能只能制造一辆儿童玩具车，或者一辆适合 3 岁以下儿童的玩具车：

大多数团队要做的就是尽可能多地使用现成的东西来组装，而不是自己开发所有东西。就像现在网上卖的家具一样，送一套部件，组装起来，就成了一张漂亮的桌子。在工程中，对于大型产品，必须采用组件思维来开发。该项目被分解为多个小组件并分配给各个小组进行开发。每个组都是相互独立的，最后所有的组件组合在一起成为一个完整的产品。成品。许多小部件实际上是通用的，许多组织或个人共享自己的组件。直接使用这些现成的组件显然可以大大加快开发进度。

▼

另外，一个明显的事实是，随着技术的日益进步、终端设备的多样化、页面可视化技术的发展，前端技术变得越来越复杂，已经不再是3的水平了。一岁孩子的玩具。例如，用户交互的增强、终端的多样化，大大增加了前端开发的复杂度。这时候，从头开始，从底层开始发展，就如同留下一个现成的打火机，钻木取火一样。元谋人都笑了。

2 一套代码，多平台应用

众所周知，目前移动设备有两大阵营：安卓和苹果，而微信可怕的国内占有率也迫使我们开发微信公众号版本，即一个应用至少需要三个版本：安卓、iOS和网络应用程序。

这三个版本采用完全不同的技术开发，彼此之间不能共享代码，这意味着至少需要三个团队的人来开发。当然，大家都希望直接用一套代码跑在三个平台上。只有Web App技术才有这个能力，因为它本质上是一个网页，而网页并不特定于平台。

然而，纯Web App有两个问题。一是硬件操作能力较弱（原生只有HTML5的一些硬件API），二是性能比原生差。为了提高操作硬件的能力，可以使用这种底层中间件来调用底层硬件，并且可以通过插件的形式进行扩展。可以说，从调用硬件的能力来看，这种方式和原生的没有什么区别。

这种开发方式与开发Web Apps没有什么不同。目前大部分App都是采用这种方式开发的。另一方面，在性能方面，由于HTML5技术的发展以及与CSS3的结合，性能也得到了明显的提升。

▼

这里你可能会说Web App在版微信上很容易卡壳。这里有一些科普。 Web App通过Web View呈现。如果Web View的渲染能力不好，就会出现明显的滞后。 微信的Web View使用X5内核。国产虽好，但仍需努力！作为对比，你可以将同一个Web App放入iOS版微信中，可以看到性能基本上不逊于原生，因为iOS版微信使用的是相同的Web View内核！在 等手机浏览器上，性能也相当高，而且随着技术的发展，可以预见，在不久的将来Web App与原生App的性能差异将基本可以忽略不计。

3 前端这么热闹

由于设备发展如此之快，多平台上的Web开发需求强烈，前端变得比以往更加活跃。各大互联网巨头都推出了自己的前端框架，但框架虽然很多，但核心思想只有一个：组件化开发。

什么是组件开发？你曾经搭过积木吗？组件化就是将每个页面功能做成积木。开发时，将各个部分拼接成一个页面。下面的每个框都是一个组件：

一个网站由多个页面组成，一个页面又由多个组件组成。然后大组件可以由小组件组成。小组件组装成大组件，大组件组装成大组件，再组装成页面模块。这就是组件开发。

3 这么简单？太天真了！

这里看到的组件化只是UI表现层的组件化。完整的组件化还包括交互事件、呈现样式和数据交互。也就是说，组件有自己的属性、方法和数据交互能力。例如，在常见的搜索提示列表中，将用户输入的信息发送至服务器。服务器搜索用户输入的单词并将数据返回给前端，然后由前端显示。效果如下：

常用的UI库实现了样式和动画的封装，但是数据交互需要自己处理。你也可以自己写。服务器返回数据，然后前端使用字符拼接或DOM模板技术合成HTML并放入网页中。此步骤通常称为渲染。当然，渲染可以在前端完成，也可以在服务器端完成。简单的字符串连接可能如下所示：

以上仅是示例。实际项目中，使用较多的是模板技术。现在模板技术那么多，模板Dust.js、doT.js、MVVM框架级别等等，小姐姐们都说最甜了。选择困难的人们，你准备好了吗？

组件完成后，需要一套底层框架将组件有机地组织起来sublime text 3安卓版，根据场景调度不同的组件来实现需求。这是路由模块。以前路由模块放在服务器端，现在需要前端路由来实现单页面应用。当应用比较复杂时，除了使用路由模块实现跳转之外，还需要根据路由按需加载各个场景所需的资源，同时保证各个资源的调度不冲突。这个资源加载器也被认为是一个框架。

从上面来看，要想实现组件化开发，我们至少要用几个框架来组织代码。如果业务职责更灵活的话，这样的底层架构是不能随便简单创建的。而如果自己做UI的话，工作量至少要翻几倍。如果不增加人员，就意味着开发周期将增加一倍。想想现在互联网的发展速度。当你花几周时间做出一个相对复杂的UI时，你原本价值数百亿美元的想法可能已经被100du和100du这样的公司完成了，你会泪流满面。这一刻，你终于想起了火云邪神所说的话：

“世界上唯一无法被击败的武术就是速度。”

快，这是互联网行业的向日葵手册（姑娘们别担心，程序员叔叔们不会看第一页的）。

5.选择一个有用的开发环境

为了实现组件化开发，我们一般会用到UI库、MVVM框架、模块加载器、项目管理和配置工具等一套东西。这时候，良好的发展环境就显得更加重要。只需使用编辑器键入代码即可。刀耕火种的农业时代已经成为过去。

在前端开发环境中，有的公司会使用大型、综合的IDE，有的公司会使用各种轻量级的工具组合。这取决于公司的技术水平和技术架构设置。另外，每个公司的开发或多或少都会引入一些现有的框架和类库，也就是俗称的轮子。近年来前端空前繁荣，各种框架层出不穷（qun）（mo）不（luan）（wu）。如何找到最适合你的项目的框架并不是一件容易的事。

现在前端框架的更新速度非常快。一个框架可能只需要两三年的时间，就可以流行起来并消失在人们的视线中。显然，追随流行的风险相当高，特别是对于一些个人贡献的框架。由于精力有限，后续技术支持难以保证。选择一个适合公司业务且稳定的主流框架技术，这需要相当的技术积累才能最终确定。否则，你就会带领你的开发伙伴一起踩坑。当你填坑的时候，你突然发现这条路已经走完了。已经...

▼

就开发工具而言，前端世界中最流行的是文本（它只是一个编码器），并且这两个都是非常可定制的。也就是说，你需要安装很多插件或者搭配很多工具才能变得好用，比如好用的编码。调试所必需的插件、精美的UI组件库、合适的自动化部署工具、便捷的测试工具、标准化的项目管理插件等。

对于初学者或者技术积累不足的开发者来说，这些框架/工具的选择是相当困难的，需要专家来进行技术选型。另外，大牛手下的朋友也必须会十八般武艺。因此，对于一个没有如此完整技术架构的团队来说，这样的技术包显然并不明智。

▼

那么为什么不选择一个大型且综合的开发环境呢？举个例子，我就不多介绍了。这里我要讲的是基于开发的WeX5。首先，Wex5是基于开发的。不用说，IBM生产了Java开发的首选IDE，这意味着WeX5可以实现前后端的无缝集成。另外，WeX5使用的框架都非常稳定和流行，再加上最初的技术支持，不用在夜深人静的时候一个人对着大坑默默哭泣。

在组件化方面，WeX5集成了很多组件，并使用框架来绑定组件属性和数据。样式、用户交互和数据交互都被完全封装。数据绑定后，前端数据的变化会自动反映到数据库中，数据库中数据的变化也会自动反映到前端显示中。无需考虑太多与数据和性能相关的实现问题。

而且除了组件之外，WeX5 比较有趣的一点是，它提供了很多现成的应用模板，大到大型网站（电子商务、旅游等），小到登陆页面等小型模板。这实在是太不周到了。我们开发的很多组件都可以直接从上面应用，也可以通过添加小的改动来达到想要的效果。好好利用这些现成的东西，把精力花在业务逻辑上。这就是快速发展的王者。

6 WeX5 中的视觉开发

当学生听到视觉开发时，他们的第一反应就是C#界面或者PS中的图像编辑效果。无论您将鼠标指向何处，效果都会到达那里。然而，事实并非如此。前端开发不同于桌面软件开发，这意味着它必须遵守W3C标准。

最简单的示例：选择一个按钮，然后在设计视图上绘制该按钮。该按钮不会出现在您的鼠标指定的位置，而是根据 W3C 标准文档流程确定该位置。您不能随意将组件拖到任何位置。组件的布局和风格仍然必须符合标准文档流程的要求。当然，你可以指定绝对定位来脱离文档流，这样就可以指定位置了。这些都是符合 W3C 标准的做法。本质上，WeX5只是提供了一个方便添加组件和修改样式的接口。它并不是一个可以让你随心所欲地设计界面的作弊工具。当你想要实现布局时，实际上和直接在编辑器中编写代码是一样的。您还需要指定定位、浮动和边距。只是WeX5可以更直观地实现。当然，很多同学都想到了视觉设计。 DW的视觉设计产生的代码会有很多垃圾代码。只能用于原型开发，不能直接用于在线发布。 WeX5生成的代码符合W3C标准。代码，这是两个不同的概念。

WeX5上的App开发同样采用调用底层中间件的方式，使用内核框架，UI系统完全基于W3C的HTML5+CSS3+js； Hex的引入以及针对移动端的底层优化，使得效率和性能接近原生应用。 。因此，使用Wex5开发的应用程序可以打包为 Apps或iOS Apps，也可以作为Web Apps在微信公众号上运行。当然，PC版也可以。回到大家关心的性能和体积，由于WeX5以插件的形式调用框架，并在UI层实现了按需加载，因此在代码精简和性能上都有不错的表现。

✦✦✦✦✦✦✦✦

点击图片了解野狗

☟☟☟

如有侵权请联系删除！