前端MVC手脚架

2024年1月27日 237次阅读 来源: lizzz_led

前端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，轻易以后翻查。

    原文作者：lizzz_led
    原文地址: https://segmentfault.com/a/1190000004234000
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞