H5的框架近三年多以来发展的特别快，且各个公司用的框架不尽相同，有时候好不容易研究会了其中一种，结果入职或者换项目时，又换框架了。很多时候前端都要快速的用一种没有用过的框架去写项目。
这篇文章只说怎么快速入门，至于框架本身深层次的理念和底层代码逻辑，需要自己去深挖。如果你刚接触前端不久，那这篇文章的帮助可能没那么大（皮一下：没有帮助也可能因为我写的不好）。
如果有人接触过很多种的H5框架，那么就大概能知道，很多H5框架在代码的书写规范上，封装模式上，都很类似。它们之所以这么类似，是因为H5开发本身的体系比较简单。
在H5开发这里，无论遇到什么样的项目，归根结底，就三部分，结构，样式，逻辑。这是H5第一课里，就讲的概念。为什么要提到这个，因为只要是H5的框架，它就离不开这三个部分。所以在H5框架里，只要掌握了这三部分及它们的关系，就能快速入门这个框架。
下面只说步骤，没有代码示例，你要去结合官方文档。在看以下步骤之前，花几分钟时间大致的过一遍文档，看看有哪些内容。
步骤：
（1）框架本身的特性是什么？
学习一门新的框架之前，一定要知道它自己有什么特点（优点和缺点），这样你才能知道你在哪一种项目中用哪一种框架比较好。就像你要追一个女孩之前，一定要弄清楚这个女孩的性格特征和喜好一样。比如Bootstrap适合做响应式的布局，JQuery降低了DOM的操作代码量。新的框架之所以会出现，基本上都是因为旧的代码模式在某方面有不足。
H5的框架，特点大多都是，模块化开发模式（封装，这两个字几乎是贯穿整个框架的核心思想），且绝大部分都是用面向对象的编程思想实现的（可见面向对象有多重要）。
（2）框架的项目结构是什么？
第一，要搞清楚整个项目的前端页面的入口文件都是哪个，即HTML结构入口（根组件）和JS逻辑入口。
第二，在当前这个框架中，单个组件是什么呈现方式，单个组件封装之后应该如何使用。
一般框架都有严格的命名规范及模块划分规范，文件与文件之间的层级关系很重要。所以要搞清楚，我们的项目开发代码应该在哪个文件夹下。单个组件的HTML，CSS，JS是什么关系（是以组件为单位，新建文件夹，在这个文件夹中分别新建HTML，CSS，JS的单个文件，还是按照框架本身的特性，新建符合框架规则的单个文件，并将这个组件的HTML，CSS和JS都包含在这一个文件中）。
至于单个组件的使用，多半都是将当前这个组件导出，然后在使用他的父级组件里导入，按照框架指定的方式引用就可以了。
第三，可以更改的配置有哪些，这些配置分别都在哪个配置文件里（其实如果基本的都搞不清楚，配置块儿...你们懂得）。
（3）HTML如何处理？
其实就是DOM的渲染。HTML这里不需要你去研究HTML怎么写，因为HTML基本没有发生变化，你要搞清楚的是，你当前研究的这个框架，在书写HTML代码时，有没有特殊的要求和限制（比如Vue要求必须写在单独的template标签中，且单个模块的HTML要被一个父级block标签包裹）。一般情况下，有以下几点：
a. HTML代码写在哪儿（例如，Vue要写在单个组件的.vue文件里，React要写在类的render()函数里）。
b. 既然是模块化的开发，那么对于单个模块的HTML，是不是需要做特殊的整体化的处理。一般情况下，需要一个block标签去包含这个组件所有的结构代码。或许还要为这个组件加单独的唯一的标识（类名或ID）；
（4）CSS如何处理？
如果在这个框架中，一个组件的CSS代码写在单独的CSS文件里，那就要去看一下，这个组件的CSS文件是通过什么方式引入到它对应的结构代码中的，这个CSS文件的名称需不需要和结构渲染文件统一，一个组件中是否可以引入多个不同的CSS文件（可能有公共的CSS文件或者插件的CSS文件）。
还要弄明白，组件与组件互相引用时，它们的CSS代码是不是也在互相影响。即如何让CSS代码生效于全局，如何让CSS代码只生效于当前组件。
如果当前这个项目中使用了UI框架，那么自己写的CSS文件和UI框架的CSS是否冲突。
（5）JS！
JS这块儿要整清楚的几个基本问题，请仿照CSS的处理方式，类似。
紧着着就是掌握框架中JS的模式，其实就是JS代码本身，只不过是面向对象的编程思想体现较为强烈，但是无论再怎么变，它都绝对符合JS本身的语法规范，也就是别把框架的JS想象成一门新的语言。
比如，在React中，每个组件的JS文件中都会导出一个类，类里面含有组件的DOM渲染，数据，函数。当前组件中所用的所有的函数，都封装在这个类里，有人问我，函数与函数之间如何访问。那么既然它是类，那就必定符合JS类的所有规范，类中你自己封装的若干个函数明显都是原型函数，那么这其实就是最底层的类的原型函数访问类的原型函数。
代码方面，要透过“框架”这个外衣，看清楚代码本质，本质就是JS。所以要注意的问题其实还是理念性的：
a. 当前组件中的数据（变量）和函数如何声明，都声明在什么地方。
b. 函数中如何访问数据和其他函数。组件生命周期各个阶段的函数如何声明。有没有特殊名称的函数，去执行特殊的代码任务。
c. 如何将数据渲染在DOM节点上。框架几乎没有DOM操作代码，都是通过控制数据控制DOM的结构。所以会直接在DOM节点里渲染数据。方式一般有，指定符号包裹（大部分都为{}或者{{}}），属性中渲染（使用指令），条件渲染，列表渲染。
d. 事件的绑定。事件对象怎么使用（框架中事件对象本身的作用和意义不变，只是写法有所变化）。绑定事件时如何传参。有没有事件修饰符，有的话大致浏览一遍都有什么。事件绑定的函数中的this是否还像以前一样指向事件驱动的DOM节点。
f. 再啰嗦一遍，无论是哪种框架，都符合JS本身的语法规范，那么高频率使用的JS代码就可以被单独的封装，导出，并且在其他文件中引入使用（比如路由的配置可以按模块划分规则，单独封装JS文件，以数组的形式配置，最后导入到数据根配置文件中。如果某个项目有繁琐冗长的多级菜单，那可以以JSON的模式，将菜单单独的封装在JS文件中，然后再菜单栏组件中导入，以循环渲染的形式渲染到页面上）。
（6）高级。
a. 组件封装和引用。
b. 路由配置和使用。
路由的跳转标签（例如Vue中是router-link）怎么写。
路由的配置应该如何调用（Vue中是在router-link标签的to属性中，写入提前配置好的路由的路径信息）。
路由对应的视图组件如何渲染（Vue中是使用router-view）。
路由的调用标签和渲染标签有没有其他的一些属性来执行指定的代码任务。
路由如何携带参数，页面跳转时如何动态响应路由中的参数（从商品列表跳转到商品详情就是动态响应路由参数的典型应用场景，商品详情是一个组件，在路由中配置，当从商品列表跳到商品详情页时调用，并在路由中携带所选商品的ID，然后根据这个ID，在商品详情页展示对应的信息，那么商品详情这个组件的封装时，就要在组件生命周期“载入”这个阶段的钩子函数中，通过框架提供的方式，获取路由中的参数，并发送HTTP请求，获取对应数据，渲染到页面上）。
如何动态监听路由中的参数变化。路由可能会在不进行任何页面跳转或组件切换时变化，有时候会因为一个简单的业务逻辑。比如点击了页面的某个按钮，导致路由变化，那就相当于动态监听路由参数变化了。
路由的子路由如何配置。配置子路由时，如果有个模块是需要默认展示的，那应该怎么处理（比如有父级菜单为服装，二级菜单有男装、女装、童装，在点击服装这个菜单时，视图展示模块默认展示男装，然后根据操作再去切换三个子菜单）。
项目当中，如果有个404组件，作用是如果用户在路由跳转中出错了，那么就展示这个组件，那么这个组件对应的路由应该如何配置。
c. HTTP请求（跨域）。
d. 状态管理库。
组件之间的互相传值。
e. Echarts的结合使用。
（7）综合。
a. 框架一般都会提供一些UI框架。安装使用了UI框架后，可能会对原本的HTML的写法有所影响，以UI框架为主，一般框架的文档里，都会有代码示范。
b. 如果有两种写法，都能实现同一种效果，那么一定要去研究这两种的区别在哪里。
c. 在研究新的代码时，对比旧的代码去研究，对于新的东西的理解，会更广一点。我们的研究很容易限制在文档展示的部分，被动的研究。其实很多东西，文档中是没办法完全体现的，或者你并没有理清楚学习的先后顺序，看文档时没有看全面。对比之前就已经掌握的内容，去测代码，会让你掌握很多文档中没体现出来的东西。
比如，你没接触过框架，在研究框架的事件这个模块时，对比JS本身，比如，在框架中，是否也可以改变事件流的方向，阻止默认事件，利用事件对象实现事件代理等。
如果你接触过框架，比如你接触过Vue，Vue提供了状态管理工具Vuex，那么在Angular和React中是否也有相似的工具。
d. 在研究新的东西时，可以结合自己的项目经验，联想下这个知识在项目中可以用来做什么。比如框架中都使用模块化的开发模式，将单独的模块封装成组件，使用时导入，然后调用。那么项目中的公共的导航部分，菜单栏部分就可以用这种便捷的方式代替旧模式中的笨办法。
e. 框架的文档里都会提供项目示例，可以下载个项目示例，在研究完以上内容之后，再去过一遍示例项目，细化一下。项目示例下载下来可能不会有node_modules这样的工具包文件夹，因为这个文件夹里内容太多，太大，上传下载既耗时间又耗网速，所以下载下来之后，要现在本地根据框架的规范安装一下这种工具包类的文件夹。如果这个项目示例中还使用了一些后期安装才能用的工具块，比如路由，Echarts，HTTP请求等，那你想让项目跑起来，那还要去安装下这些工具块。但是一般情况下不用。
个人觉得，前端代码的学习是一个由简入难最后归简的过程。由简单的代码模式，升华成有强封装体系的模块化的开发模式，最后在理解时，要将这种模块化的开发模式，拆分成JS基础语言，因为它本就来源于此，分支，循环，函数，封装，引用。所以我一直在说代码其实是最好理解的，因为只要你书写的代码符合语言本身的规则和模式，就会得到想要的效果。
你所羡慕的一切，都是有备而来。
网友评论