前言
从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引入方式:
< script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
举个例子用于对比不使用Vue和使用Vue
<html>
<head>
</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>
<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>
<head>
<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
$("button"); // 选择所有按钮元素
$("#test"); // 选择id为test的元素
$(".test"); // 选择class为test的元素
$("a[href]"); //选择带有href属性的a元素
$("[href]"); //选择带有href属性的元素
$("ul li:first"); // 选择第一个 <ul> 元素的第一个 <li> 元素
Jquery引入方式
< 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
-
- 如果访问的用户较多，每个用户都去请求服务器上js文件，会造成巨大流量开销
-
- 不同国家地区的用户访问你的网站，很可能访问速度不同，而使用CDN节点能缓解该问题
XPath
XPath用于定位XML节点的语法，自然也支持HTML，JS支持XPath定位元素。XPath定位语法不同于选择器，XPath语法的黑科技较多，有兴趣的可以自行研究，这里不做赘述。XPath主要用于爬虫。
//button // 选择所有按钮元素
//*[@id='test'] // 选择id为test的元素
//*[@class='test'] // 选择class为test的元素
//*[starts-with(name(),'W')]" // 选择所有名称包含"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引入方式
<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
其他比较火爆的项目
|Archiver|小黑屋|技术宅的结界
( 滇ICP备16008837号 )|网站地图
发表于 2022-6-13 17:59:46
发表于 2022-6-13 20:39:09
。做前端主要是给别人用，除此之外是省去了开发移动端代码的繁琐过程，直接在移动端用前端技术去做。做移动端得画图做界面，更麻烦。前端框架那么多好看的组件，随便弄上几个，颜值都很高。性能也不输。
