二阶段:
1、一开始按照代码类型进行分类,如html里只写html,css中只写css,js中只写js
2、讲到插件时,就会发现,每个插件里有完整的html,css和js,插件其实不是已经按照文件类型进行分类了,而是把html,css和js写在一个文件里,如:一个轮播图插件里,包括了自己的html,css和js代码。
三阶段:
按照功能进行分类,即一个功能里,有自己完整的html,css和js。其实一个完整的功能就包括自己的界面和数据。界面是用html和css完成的,数据是靠js完成的。而js的数据最终要呈现在自己的html和css对应的界面上的。
1、vue组件,一个vue组件包括<template>,<style>,<script>。即对应的html,css和js
2、react组件,一个react组件的render函数该组件功能的html和css代码;其它部分是js的数据
三阶段的组件就是一个大的标签,自定义标签。这个自定义标签就是一个特定的独立的功能
三阶段做项目的思路:
1、把功能按照布局进行拆分,拆分成不同的小块,每个小块是一个独立的可以复用的组件(自定义标签),每个组件的功能是独立的,与其它组件之间要低耦合,需要组件时,引入即可(ES6的import)
2、实现每个组件的功能
3、把组件进行组合,组合成一个页面。
总结:其实最终按照功能是最合理的方式,
1、从最早用c/s开发模式做的企业级应用,就是按照功能的方式组织代码的。
2、对于项目来说,用功能来组织代码结构,模块之间的低耦合度才能有基石。
同学们:好好反思,好好反思二三阶段的代码结构,好好对比,你的认识会有很大的提升,加油!