前端MVC手脚架

前端MVC手脚架

项目地址 https://github.com/lizzz0523/mvc-mode-seed

1.构建工具

• [x] webpack

• [x] babel-loader

• [x] babel-preset-es2015

• [x] babel-preset-react

2.基础库

react+redux+fetch

• [x] react

• [x] react-dom

• [x] react-redux

• [x] redux

• [x] redux-thunk

• [x] isomorphic-fetch

angular

• [x] angular

backbone+jquery

• [x] backbone

• [x] underscore

• [x] jquery

react+jquery+bacon

• [x] react

• [x] react-dom

• [x] jquery

• [x] bacon

这个项目相似todomvc，主要是用于记录，以及考察如今比较流行的前端库在实际开发当中的开发体验。

其中，构建都是基于wepback+babel，支持es6语法（但在demo中，只用到es6的模块管理与析构语法）。

而基础库则分为四个不一样实验组，其中前三个，分别是：

1. 表明_mvvm_模式的angular（相似的库还有knockout，vue，avalon）

2. 表明_virtual-dom_模式的react（加上了redux做为store管理）

3. 表明传统_mvc_模式的backbone（相似的库还有ember）

而第四个实验组，是我在项目中使用react+redux的组合在开发中小型项目时，发现其学习成本和维护成本远大于其带来的开发体验上的提高，直白的说，就是把简单的项目复杂化了。

虽然说jquery已是上个时代的产物，不过说句公道话，在中小型项目中，jquery仍是王道，其通用性和灵活性都是获得充分的验证的。

既然react+redux在中小型项目中优点不出来（主要是redux形成的），那不如把react和jquery结合，而我采用的结合方式则是，你们耳熟能详的jquery插件模式。举个简单的例子：

$.fn.pagination = function (options) {
    return this.each(function () {
        page(this, options);
    });
};

function page(elem, options) {
    ReactDOM.render(<Pagination { ...options } />, elem);
}

而在业务则使用时，就像正常使用jquery插件就能够了：

$('#page').pagination({
    page: 0,
    size: 15,
    total: 30
});

这样对于不熟悉react的小伙伴，就正常的写jquery式的代码就好，而有react经验的，则可使用react做为底层的dom操做工具。

并且这样编写代码，还带来另一个好处，就是不用整个页面都使用react来生成，只在关键部件使用react。这是我在项目中一个很重要的经验所得。在页面元素中，其实有很大部分是和数据无关，能够直接渲染的，例如一些表单、导航、confirm、alert、toast等。若是整页都使用react来渲染，就会使得js文件异常的复杂，对于中小项目而言，这是不可接受的。

可能有些小伙伴以为redux带来的函数式编程，能够梳理页面的数据流。单向数据流正是fb提出来的一个很是好的概念，我我的也很喜欢这样函数式的开发模式，因此最后我选择性的引入了bacon这个著名的frp库，来代替redux处理数据流，不过因为把react隐藏在jquery插件后，函数式开发彷佛已经没有必然存在的理由的，这里引入只是做为一个demo，方便以后翻查。