在构造器中，首先定义 props 参数的格式，并给上默认值。在 init 方法中，则将 data 中的参数赋值给 props，这里一般是会有数据转化处理逻辑。
最后直接进行组件渲染。可以发现，如果想要使用其他模板引擎，是很容易替换的。如果采用 SSR 服务端渲染组件，那可以各种模板库全放进来，一个工厂方法就可以进行自动化处理。
组件的参数被取名为 props，完全是仿造 Vue/React。因为它们的功能和定位基本是一样的，而且官方推荐的最佳实践这里也基本都推荐。具体这样做的几点思路如下：
小项目做不到 Vue/React 的参数验证功能，但显式表示 props 参数有自描述文档的作用，需要哪些参数及其类型一目了然；
构造器中同时给出了 props 默认值，无参数时组件有默认展示形式；
参数只有一个 data 对象。Vue 推荐参数都用基本类型，但内容庞大时，属性繁多，分割成更小组件也不会减少多少使用的复杂性；
props 中的每一个属性不能是对象，只能是 Integer、String、Boolean、Array 等基本类型；
将事件的触发封装到组件中也是为了减少业务的复杂性。很多 Web 项目中都是直接操作页面内容，用户交互、内容处理、业务逻辑都耦合在了一起，这里组件将用户交互封装起来，同时对外提供事件接口。代码如下：
组件内部保存一个事件回调句柄 clickCallback，组件初始化时对用户点击事件进行数据绑定，并触发这个回调。
结论本文简单描述了小型 Web 页面的定位，通过对小型 Web 页面的摸索和演化解释了当前项目结构的设计思路，并对其细节进行了详细描述，重点介绍了数据接入层和组件化开发。
当前的项目并不是最终形态，而只是一个 α 版本的雏形，还有很多地方值得改善：
针对首屏时间进行优化，比如支持 SSR；
继续改善打包部署方案，灵活支持多页面部署，达到或接近离线应用的效果；
一些好的 ES6 语法很值得支持，需要找到一个方法在打包层面上渐进式的引入特定语法；
基于 Promise 的语法值得大面积采用，这是代码层面需要考虑的；
Webpack 挺好，但还不够好，希望插件能更成熟更丰富；
可能还有很多点没考虑到，不过实际需求永远是最高优先级。只要不断的重构和改善，软件就会一直有生命力~
相关文章
精彩导读
热门资讯
关注我们
