我的前端开发心得
本帖最后由 元始天尊 于 2022-6-16 22:28 编辑 <br /><br />## 前言
 从2019年因业务需要开始接触前端，写出第一个extremely ugly的界面开始，断断续续学习，也算有三年经验了吧。下面来谈谈我对前端开发的理解，希望对没有基础的朋友们提供一点快速入门的思路
## 基础
 前端的基础便是HTML/CSS/JS，这三类文件也是在HTTP GET请求中实际访问的文件(此外还有资源文件)。与端开发(服务端/移动端/PC端)类似，如果专业搞前端的话其实也需要有编译阶段，编译结果便是这三类文件。HTML是超文本标记语言，是用于描述网站的界面结构的静态语言，本质上是扩展的XML语言；JS是用于Web交互的动态语言，主要用于和HTML中的控件进行交互，事件响应，动态执行，数据请求，数据库等操作；CSS即层叠样式表，是控制一类控件布局和显示属性的静态语言。JS/CSS可以通过内嵌或外部链接的方式在HTML中得以生效。如果用HTML类比电脑的话，那么JS就是鼠标和键盘，而CSS就是系统设置，我们需要用桌面上的各种软件来和操作系统进行交互，也需要用系统设置来设置分辨率，壁纸，网络等等属性。这里面JS/CSS都不是必须的，如果网站不使用JS，那么将失去大部分动态交互性，正如我们启动了Windows系统而不用鼠标键盘，只是放在那里什么都不做；如果网站不使用CSS，那么你将需要在每个控件里去指定例如大小，间距，颜色等属性。这无疑是个灾难。资源类就是图片，字体；字体图标是一类矢量图，常用于按钮，本文后面有字体图标库。
 一般来说，前端开发至少需要熟练掌握JS(主要做数据处理)，一个响应式框架(Vue或React)，一个UI库(BootstrapVue或SegmanticUI或MUI或类似)，Jquery非必需，有时候需要手动JS操作控件时更方便一些
## Vue (stars:197k)
 Vue是2013年在Google工作的尤雨溪受到Angular的启发开发的一款前端框架，从star可以看出该框架为前端框架中最火的框架，连苹果公司官网都适用该框架。支持小程序。Vue是一款轻量级框架，具有双向数据绑定，组件化，数据和结构分离，虚拟DOM等特性，目前版本3.x。<https://github.com/vuejs/vue>。Vue官网<https://cn.vuejs.org/>
Vue引入方式:
```html
< script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
```
举个例子用于对比不使用Vue和使用Vue
```html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ foo }}</p>
<button v-on:click="foo='baz'">Change</button>
</div>
<script>
const app = {
el: "#app",
data() {
return {
foo: "bar",
}
}
}
new Vue(app);
</script>
</body>
</html>
```
在上面这个例子中，vue变量foo绑定了p的值，按钮按下时修改了foo，因此p从bar变为baz。如果使用JS达到同样效果需要如下操作:
```html
<html>
<head>
</head>
<body>
<div id="app">
<p id="item1"></p>
<button id="btn1">Change</button>
</div>
<script>
document.getElementById("item1").textContent = "bar";
document.getElementById("btn1").click(() => {
document.getElementById("item1").textContent = "baz";
})
</script>
</body>
</html>
```
通过对比可以看到vue解放了前端开发中的元素操作，将手动JS操作元素变成操作变量，同样的，vue也可以动态绑定任何元素属性，这种编程方式提高了开发效率。在下例中可以看到vue语法动态创建控件的方式：
```html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="item in items">
<input v-model="item.key"> <label>{{item.val}}</label>
</li>
</div>
<script>
const app = {
el: "#app",
data() {
return {
items: [
{key:"key1",val:"val1"},
{key:"key2",val:"val2"},
{key:"key3",val:"val3"}
],
}
}
}
new Vue(app);
</script>
</body>
</html>
```
## Jquery (stars:56k)
 jQuery是一个基于JS的快速访问框架，封装了大部分常用JS操作，其核心便是使用选择器的方式批量“增删查改”界面元素和CSS属性，包括事件响应。所谓选择器，就是根据定位元素的语法，如按id，按class，按tag，按属性值，按层次关系等等定位元素。CSS也支持选择器。Jquery是Web开发中常用库之一。不支持小程序。很多前端框架依赖该库，包括本文的Bootstrap和SemanticUI
```Jquery
$("button"); // 选择所有按钮元素
$("#test");// 选择id为test的元素
$(".test");// 选择class为test的元素
$("a"); //选择带有href属性的a元素
$(""); //选择带有href属性的元素
$("ul li:first"); // 选择第一个 <ul> 元素的第一个 <li> 元素
```
Jquery引入方式
```html
< script src="jquery-1.10.2.min.js"></script>
< script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
```
注意，上述引入方式中的第一种，使用服务器本地的js文件，会有如下弊端，因此推荐用第二种方式，即CDN
* 1. 如果访问的用户较多，每个用户都去请求服务器上js文件，会造成巨大流量开销
* 2. 不同国家地区的用户访问你的网站，很可能访问速度不同，而使用CDN节点能缓解该问题
### XPath
 XPath用于定位XML节点的语法，自然也支持HTML，JS支持XPath定位元素。XPath定位语法不同于选择器，XPath语法的黑科技较多，有兴趣的可以自行研究，这里不做赘述。XPath主要用于爬虫。
```
//button // 选择所有按钮元素
//*[@id='test'] // 选择id为test的元素
//*[@class='test'] // 选择class为test的元素
//*"// 选择所有名称包含"W"的元素
//div/button // 选择所有父节点为div的按钮元素
```
## SemanticUI (stars:50k)
 SemanticUI是精美的UI组件库。<https://github.com/Semantic-Org/Semantic-UI>。
  官方展示页面使用SemanticUI模拟了一个精美的github主页!!!<https://semantic-org.github.io/example-github/>
## Bootstrap (stars:158k)
 Bootstrap是Twittter在2013年出品的前端框架，它提供了基本的网格系统和大量组件，以及一些CSS样式。所谓组件就是Web页面上所有可见元素或者元素组，比如按钮，文本框；这些组件由于有设计优秀的CSS的加持，颜值比纯HTML可高不少，虽然比真正的UI库还是差不少。(说点废话，一般在写网页时，好的CSS，好的JS功能，或者组件中已有的，拿来即用即可，如果有特殊需求一般不会去重新设计一套，而是在这些前端框架基础上添加CSS或者做些修改。其实做任何领域的开发都是这样，每个框架都有自己的设计思想，如果不是有重大问题需要推倒重来，或者落后于时代了，其实是没有必要自己设计一套。前人做得好做得早于是定下游戏规则，后来者不宜上来就推翻规则，而是先精通规则，有自己的优秀作品，再想着去建新规则。不过大部分人连精通这一点都达不到)。Bootstrap是前端开发中常用库之一。<https://github.com/twbs/bootstrap>
 Bootstrap目前已经更新到Bootstrap5版本，支持的组件库包括:折叠框，警告框，徽标，面包屑导航，按钮，按钮组，卡片，轮播图，下拉菜单，列表框，弹窗，导航条，分页，滚动条，进度条等。不支持小程序。Bootstrap老版本默认会提供字体图标，Bootstrap4中已经不提供免费的Glyphicons字体图标和FontAwesome字体图标；从Bootstrap5开始Twittter自己构建了一套免费图标库为Bootstrap-icons
Bootstrap官方文档
<https://getbootstrap.com/docs>
Bootstrap引入方式
```html
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
< script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
</head>
```
## FontAwesome (70k)
 FontAwesome是用于前端的字体图标库，从5.x版推出收费版。<https://github.com/FortAwesome/Font-Awesome>
## BootstrapVue (14k)
 BootstrapVue是基于Bootstrap和Vue2.x的UI框架。其提供了大量可响应式的精美UI控件，同时还提供了字体图标，使用Vue也避免了手动使用JS进行界面交互，非常方便。<https://bootstrap-vue.org>
 笔者第一次看到该库也是源于没有找到顺手的table组件，而bootstrapvue完全满足了笔者的需求，从此扔掉bootstrap-table，拥抱bootstrapvue，<https://bootstrap-vue.org/docs/components/table#complete-example>，bootstrapvue完全具备vue的动态绑定特性，这样只需要对请求数据的过程稍加处理，即可实现一个动态表格
## React (stars:189k)
 React是Vue最大的的竞争对手，他的设计理念和Vue刚好相反。笔者认为Vue本质上是在HTML的XML结构中通过元素属性嵌入JS高级语言逻辑，而React反其道而行之，即在JS代码中支持XML语法，而这种语法扩展称作JSX。目前Vue也支持了JSX，两个框架都在吸取对方优点，不断进步。<https://github.com/facebook/react>
## 其他比较火爆的项目
|项目 |star |版本 |组件 |图标 |
|- |- |- |- |- |
|https://github.com/ElemeFE/element |52k |vue2 |56 |280 |
|https://github.com/vuetifyjs/vuetify |34k |vue2/3?|48 | |
|https://github.com/quasarframework/quasar |21k |vue2/3 |56 | |
|https://github.com/vueComponent/ant-design-vue |17k |vue2/3 |58 |421 |
|https://github.com/element-plus/element-plus |16k |vue3 |67 |280 |
|https://github.com/bootstrap-vue/bootstrap-vue |14k |vue2 |49 |1370 |
|https://fonts.google.com/icons | | | |2500 |
|https://materialdesignicons.com | | | |5500 |
|https://icons.getbootstrap.com | | | |1600 |
我写过一些 WASM，是纯原生 JS 手搓，用 JS 提供 API 给 WASM，然后调用 WASM 的导出表来调用其内部环境的 C/C++ 函数。像个模拟器，或者虚拟机的环境。
用过一些 jQuery，实现一些简单交互，比如我把页面分为上下左右几个 Panel 然后每个面板的内容请求后台的 cgi，这个时候我就可以选择各种我要的 element 然后进行一些操作。要查询它的文档，看看每个选择出来的东西都有哪些方法。
本帖最后由 元始天尊 于 2022-6-13 22:55 编辑
0xAA55 发表于 2022-6-13 20:39
我写过一些 WASM，是纯原生 JS 手搓，用 JS 提供 API 给 WASM，然后调用 WASM 的导出表来调用其内部环境的...
WASM是个和JS并列的东西，这玩意儿是挺牛逼的东西，对于网页3D游戏性能提升不是一点。我觉得WASM的优点主要是：
1. 性能高，JS再怎么优化也超越不了C。
2. 传输代码资源小速度快，js换wasm，应该可以类比于json和protobuf的数据大小关系，体积小十几倍不止。(要是这种也有CDN就更牛逼了，我不知道现在有没有)
3. 可以做更高级的加密和混淆，要懂C++逆向才能还原。JS的混淆虽然也是混淆，但是相比C++还是差一些的。
4. 可以部分脱离JS异步编程模式，有时候异步太多了也蛮烦人
对于普通的Web网页，用不用WASM倒是都行。如果用到计算,3D和各种耗CPU/GPU适合用这个
我是先研究的后端技术，然后是前端，没开发前端那会，直接命令行请求后端，也凑合能用:lol。做前端主要是给别人用，除此之外是省去了开发移动端代码的繁琐过程，直接在移动端用前端技术去做。做移动端得画图做界面，更麻烦。前端框架那么多好看的组件，随便弄上几个，颜值都很高。性能也不输。
我只会写最简单的WEB程序，前台HTML+JS，后台PHP。这些都是A5教我的。:lol
至于楼主说的那些库，一个都没听说过。;P 数据量大起来以后，这些框架的差别就能体现出来了
jQuery那些传统的方式去渲染页面确实和vue，react那些没法比
动态渲染页面，特别是模拟报告页面十几页那种
还有工资表那些，改个基数整个列表都变了
jQuery很多用js去渲染页面组件的
改动后得重新渲染页面,然后效率就低下去了
毕竟是在真实的dom上修改然后重新渲染
自己实现自适应样式 确实是个灾难
异步那些可以做前后台封装然后统一回调，动态配置
但指望全部用异步或者非异步实现肯定也是不对的 元始天尊 发表于 2022-6-13 22:50
WASM是个和JS并列的东西，这玩意儿是挺牛逼的东西，对于网页3D游戏性能提升不是一点。我觉得WASM的优点主 ...
根据我的实测：
WASM 性能低，里面的 C 再怎么努力也超不过 JS。
对于网页游戏 3D 性能没有任何提升。
请看我的开源项目：https://github.com/0xAA55/WebGL4WASM
给 WASM 提供 OpenGL ES 3.0 的 API。
0xAA55 发表于 2022-6-16 15:48
根据我的实测：
WASM 性能低，里面的 C 再怎么努力也超不过 JS。
结合各种资料看，这玩意儿主要用CPU，而且在CPU上确实是比JS快。GPU不清楚是否支持了。这块可以持续关注WebAssembly这个项目。对你们做3D的应该还是更有用一些 0xAA55 发表于 2022-6-16 15:48
根据我的实测：
WASM 性能低，里面的 C 再怎么努力也超不过 JS。
话说如果是本机exe的项目中使用WASM是否可以自己用原生的C艹来写WASM虚拟机实现性能超越js？ 元始天尊 发表于 2022-6-16 22:24
结合各种资料看，这玩意儿主要用CPU，而且在CPU上确实是比JS快。GPU不清楚是否支持了。这块可以持续关注W ...
JS 也用 CPU，所以性能上和 WASM 持平，并且不少地方 WASM 比 JS 慢。GPU 的支持是没有原生的，而第三方则有，并且是我写的：https://github.com/0xAA55/WebGL4WASM
给 WASM 提供 OpenGL ES 3.0 的 API。
对我们做 3D 毫无用处。
页:
[1]