87,910
社区成员
发帖
与我相关
我的任务
分享被时代抛弃之前的最后挣扎
被时代抛弃之前的最后挣扎
做Web开发有十多年了，既是前端也是后台，后来才知道，这叫全栈。最近几年，发现我跟不上时代了。啥npm webpack Redux React Vue TypeScript JSX AngularJS 什么什么的。我全都不懂。最近稍微了解一下，感觉都挺高大上的，这逼装得我不得不给满分。但我内心是抗拒的。不就写个Js，犯得着搞得像后台一般吗？还要NodeJs支持，编译导包什么的。而且那依赖包动辄几百M。学了那么多语言，我最喜欢的就是Js语言。因为它灵活无比。难道要把Js弄得跟后台语言一样笨拙？
好吧，我不得不承认，如果是开发单页面Web应用，没有那些高大上的框架，可能还真的不容易搞定。但我作为一个传统的男人。我还是喜欢常规的多页面Web应用。那么开发多页面Web应用有没有必要用那些框架呢？就我目前只了解过React还一知半解的水平来看，那些框架主要作用是方便绑定数据和方便组件化。但是！React的代码真的太不直观、太反传统了。
如果只是为了方便绑定数据、组件化。我可以自己写个函数来代替框架啊，只需要几天就能搞定，而且仅仅只是函数，根本不需要npm install, npm run build什么的。
所以呢，我就写了这个示范项目，主要是用来绑定数据的。跟React一样方便绑定数据。不同的是，变量名是直接写在html文件上的。 嗯，你可能很容易想到“模板”两个字。模板是好的。但模板语法我觉得是多余的。有什么特殊显示需求应通过修改数据来实现（如示例中的dataForUI方法）。而不是在模板上加if while什么的。
我其实就想看看还有没有人喜欢这种传统开发方式。喜不喜欢这个项目的绑定方式。如果没人喜欢，那就让传统开发方式变成历史吧。如果很多人喜欢，那么我们可以一起完善这个绑定方式。
至于组件化，我觉得挺简单的，例如select标签,每个公司的美工可能都设计得不太一样。其实可以写个函数，直接把整个页面所有select标签替换成基于ul的美工设计的样子。而Js操作的还是原始的select，开发时完全不用考虑select最终会被替换成什么。
项目地址 https://github.com/bajie2/mybind
做Web开发有十多年了，既是前端也是后台，后来才知道，这叫全栈。最近几年，发现我跟不上时代了。啥npm webpack Redux React Vue TypeScript JSX AngularJS 什么什么的。我全都不懂。最近稍微了解一下，感觉都挺高大上的，这逼装得我不得不给满分。但我内心是抗拒的。不就写个Js，犯得着搞得像后台一般吗？还要NodeJs支持，编译导包什么的。而且那依赖包动辄几百M。学了那么多语言，我最喜欢的就是Js语言。因为它灵活无比。难道要把Js弄得跟后台语言一样笨拙？
好吧，我不得不承认，如果是开发单页面Web应用，没有那些高大上的框架，可能还真的不容易搞定。但我作为一个传统的男人。我还是喜欢常规的多页面Web应用。那么开发多页面Web应用有没有必要用那些框架呢？就我目前只了解过React还一知半解的水平来看，那些框架主要作用是方便绑定数据和方便组件化。但是！React的代码真的太不直观、太反传统了。
如果只是为了方便绑定数据、组件化。我可以自己写个函数来代替框架啊，只需要几天就能搞定，而且仅仅只是函数，根本不需要npm install, npm run build什么的。
所以呢，我就写了这个示范项目，主要是用来绑定数据的。跟React一样方便绑定数据。不同的是，变量名是直接写在html文件上的。 嗯，你可能很容易想到“模板”两个字。模板是好的。但模板语法我觉得是多余的。有什么特殊显示需求应通过修改数据来实现（如示例中的dataForUI方法）。而不是在模板上加if while什么的。
我其实就想看看还有没有人喜欢这种传统开发方式。喜不喜欢这个项目的绑定方式。如果没人喜欢，那就让传统开发方式变成历史吧。如果很多人喜欢，那么我们可以一起完善这个绑定方式。
至于组件化，我觉得挺简单的，例如select标签,每个公司的美工可能都设计得不太一样。其实可以写个函数，直接把整个页面所有select标签替换成基于ul的美工设计的样子。而Js操作的还是原始的select，开发时完全不用考虑select最终会被替换成什么。
项目地址 https://github.com/bajie2/mybind
...全文
请发表友善的回复…
发表回复
圣殿骑士18 2019-07-31
- 打赏
- 举报
1、为什么要用nodejs？因为里边有十几万个组件，应有尽有，不需要反复造轮子，这提高了开发效率。
2、传统开发方式的绑定，我用knockout。也有很多JQuery时代的绑定框架，并不需要依赖nodejs。
3、前端为什么要搞react，vue这种新东西？因为前端要做的越来越漂亮，这是趋势。要越来越容易漂亮，这是趋势。就像女主播一样，打开美颜,打开瘦脸,打开大眼，你也可以是美女！
2、传统开发方式的绑定，我用knockout。也有很多JQuery时代的绑定框架，并不需要依赖nodejs。
3、前端为什么要搞react，vue这种新东西？因为前端要做的越来越漂亮，这是趋势。要越来越容易漂亮，这是趋势。就像女主播一样，打开美颜,打开瘦脸,打开大眼，你也可以是美女！
scscms太阳光 2019-07-31
- 打赏
- 举报
不一样的，我弄的是基于传统的开发方式，不需要NodeJs支持。我写的mybind只是不到两百行的代码。引用一下就可以用了。
最主要的是，你只要看到Html文件，你就知道展现出来大概是什么样子。
而如果你是看别人的React项目，你很难猜出页面的大概样子。你得根据一个个组件的引用，查看各个组件源码，然后慢慢拼出一个整体。[/quote]
首先搞清楚，你这些与人家NodeJS扯不上关系，Nodejs属于后端级语言。vue,react本身也是不需要nodejs支持的，不要搞错了。
而是为了更方便开发vue,react，借助webpack工具来打包和npm管理库。是webpack和npm依懒nodeJS而已。
说到“猜出页面的大概样子”你就更错了。听过修改即自动刷新看效果吗，这些都是webpack功能实现的（相反你的实现不了）。
组件就更不要看不起人家，连浏览器自己都实现原生组件支持。哪个高楼不是由一个个砖组成？你非要建茅屋没关系，但不要看不起摩天大厦！
医手 2019-07-31
- 打赏
- 举报
不一样的，我弄的是基于传统的开发方式，不需要NodeJs支持。我写的mybind只是不到两百行的代码。引用一下就可以用了。
最主要的是，你只要看到Html文件，你就知道展现出来大概是什么样子。
而如果你是看别人的React项目，你很难猜出页面的大概样子。你得根据一个个组件的引用，查看各个组件源码，然后慢慢拼出一个整体。
scscms太阳光 2019-07-31
- 打赏
- 举报
瞧不起人家vue,react,Node,angularjs,又非要学人家整数据绑定功能算什么？!
潇湘忆梦 2019-07-31
- 打赏
- 举报
从现在来看，使用前端框架也是一个趋势，从作用于项目来说，现有框架的美观度、统一度、组件化都可以支持大部分的业务需求，只需要专注于前后端交互、性能、安全即可，我现在也在使用react、vue，但是这些框架也有弊端，比如组件就会受制于框架，有些特殊化的组件就没办法实现，没有自己使用js开发的灵活。
从总体来说，这些前端框架、移动框架、搜索框架等能省却不少的开发时间，也能满足绝大部分的业务需求，所以现在使用的很广泛。
HQChart 2019-07-31
- 打赏
- 举报
其实使用开源框架是为了让多人开发一个项目的时候提高项目开发进度，现在的前端开源框架基本会用几个，通过开源的框架把项目细分就可以了。除非你有一个固定的开发团队，团队有积累自己的框架或组件，这样使用自己的东西比用开源的要好，毕竟开源的都是大而全的东西，很多模块都是用不到的。对于新项目新团队还是建议使用通过的开源框架。再说了开源的框架不也是js写的嘛，你只需要改下你自己的代码，就可以适应这些框架，不是更好嘛。
https://github.com/jones2000/HQChart 这个是我们团队开发的K线图，最开始也是js裸写的，什么框架都没用，但随着新成员的加入和适应更多的开发人员，我们不得不加入VUE框架，小程序等支持。单这些都是只需要在上层封装一下就可以。你的开源项目支持开源的框架可以让更多的人使用它。
前端_小学生 2019-07-30
- 打赏
- 举报
可以做ssr做成多入口文件项目
医手 2019-07-30
- 打赏
- 举报
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mybind</title>
<link href="index.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="mybind.js"></script>
<script type="text/javascript">
// 原始数据
var data = {
realName: "小人物",
mobile: "10086+0",
color: "blue",
list: [{
title: "新华字典",
price: 12
}, {
title: "现代汉语词典",
price: 36
}, {
title: "辞海",
price: 520
}, ]
};
// 没什么用的方法，只是用来模拟数据的改变
function changeData() {
var i = data.mobile.match(/\d+$/);
data.mobile = data.mobile.replace(/\d+$/, ++i);
var list = data.list;
if (list.length > 7) {
list.splice(3, 5);
}
var index = Math.floor(Math.random() * list.length);
var item = list[index];
item.price += Math.floor(Math.random() * 10);
var id = Math.floor(Math.random() * 100)
list.push({
title: "小册子" + id,
price: id
});
}
// 加工界面专用数据
function dataForUI() {
var list = data.list;
list.forEach(item => {
item.className = item == list.selected ? "selected" : "";
});
}
// 刷新界面
function refresh() {
dataForUI();
// 最关键的方法,把数据绑定到界面
myBind(data);
}
// 点击按钮事件
function btnOK_click() {
changeData();
refresh();
}
// 点击一本书的事件
function li_onclick(li) {
data.list.selected = li.theData; // theData是绑定时对应的循环项数据
refresh();
}
</script>
</head>
<body>
<div>姓名:${realName} 手机:${mobile}</div>
<p>请点击一本书: <b>${list.selected.title}</b></p>
<!-- theData 表示只使用原始数据的某个属性作为绑定数据源 -->
<ul theData="list">
<!-- loop-bind 表示这是一个列表循环项 -->
<li class="loop-bind ${className}" onclick="li_onclick(this);">${title} <b class="price">${price}</b></li>
</ul>
<button type="button" onclick="btnOK_click();">OK</button>
</body>
</html>
