摘要：前端手脚架项目地址构建工具基础库这个项目类似，主要是用于记录，以及考察现在比较流行的前端库在实际开发当中的开发体验。其中，构建都是基于，支持语法但在中，只用到的模块管理与析构语法。
前端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的模块管理与析构语法）。
而基础库则分为四个不同实验组，其中前三个，分别是：
代表_mvvm_模式的angular（类似的库还有knockout，vue，avalon）
代表_virtual-dom_模式的react（加上了redux作为store管理）
代表传统_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(
而在业务则使用时，就像正常使用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，方便之后翻查。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78378.html
摘要：还记得一年半前转向后端的那种无助的感觉，独自一人摸黑走路，学习各种前端知识，走了不少弯路，现在终于算是入门了前端我相信不少人也有我当时同样的无助，所以我在空闲时间整理了下所用到的知识，便编写了一个手脚架，希望能给其他正学习前端的同学一些参考 还记得一年半前转向后端的那种无助的感觉，独自一人摸黑走路，学习各种前端知识，走了不少弯路，现在终于算是入门了前端～我相信不少人也有我当时同样的无助...
摘要：服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于已经提供代码热加载，使用预处理，单元测试，代码覆盖率报告，代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于webpack已经提供代码热加载，使用...
摘要：服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于已经提供代码热加载，使用预处理，单元测试，代码覆盖率报告，代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于webpack已经提供代码热加载，使用...
摘要：服务端渲染的手脚架这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于已经提供代码热加载，使用预处理，单元测试，代码覆盖率报告，代码分割等等更多。 Universal React Starter Kit 服务端渲染的React手脚架 这个启动包的设计是为了让你使用一整套最新最酷的前端技术，所有都是可配置，富特性，基于webpack已经提供代码热加载，使用...
阅读 3338·2023-04-26 03:05
阅读 1458·2019-08-30 13:09
阅读 1906·2019-08-30 13:05
阅读 885·2019-08-29 12:42
阅读 1384·2019-08-28 18:18
阅读 3445·2019-08-28 18:09
阅读 512·2019-08-28 18:00
阅读 1711·2019-08-26 12:10
