码迷,mamicode.com
首页 > Web开发 > 详细

vue.js组件化开发实践

时间:2016-07-01 22:45:01      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:

前言

公司以往制作一个H5活动,特别是有一定统一结构的活动都要每次用html、css、js滚一次重复的轮子,费时费力。后来接到了一个基于模板的活动发布系统的需求,于是就有了下面的内容。

 

开始

需求一到,接就是怎么实现,技术选型自然成为了第一个问题。鉴于目前web前端mvvm框架的流行,以及组件化开发方式的出现,决定采用vue进行开发。

这里首先简单说下web前端组件化开发方式的历程:

最早的组件化结构,或者叫做组件化1.0时代,代码结构可能如下:

1 - lib/components/calendar
2   |- calendar.css
3   |- calendar.js
4   |- calendar.html

将同功能的组件文件放到同一目录下,结构清晰、职责明确,视图、样式、脚本的关系显著,也易于单元测试,是独立展示和交互的最小单元

组件化2.0:

在1.0基础上对组件进行了生命周期的加工,理顺了组件的各个阶段,有助于对组件实现(从初始化到销毁)的理解。并且借助于组件各个阶段的钩子可以对组件有更好的利用和扩展。而且数据绑定的加入,也让整个层级上升了一个level。ExtJs、YUI等都是这方面的专家。

3.0时代:

有了2.0发展,进步是很大的,但依然不够。组件的可复用性(基础样式,基础逻辑,基础属性、可复用的稳定业务逻辑等),甚至是能否有更好的代码组织方式等依然是问题。angular、React、Polymer、Vue等mvvm框架和webpack、browserify等构建工具的出现正在解决这些问题。

 

vue.js组件化开发实践

标签:

原文地址:http://www.cnblogs.com/rock-roll/p/5634319.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!