技术宅的结界

 找回密码
 立即注册→加入我们

QQ登录

只需一步,快速开始

搜索
热搜: 下载 VB C 实现 编写
查看: 119|回复: 8
收起左侧

我的前端开发心得

[复制链接]

294

主题

492

帖子

6016

积分

用户组: 真·技术宅

UID
2
精华
71
威望
244 点
宅币
4478 个
贡献
203 次
宅之契约
0 份
在线时间
741 小时
注册时间
2014-1-25
发表于 2022-6-13 17:59:46 | 显示全部楼层 |阅读模式

欢迎访问技术宅的结界,请注册或者登录吧。

您需要 登录 才可以下载或查看,没有账号?立即注册→加入我们

x
本帖最后由 元始天尊 于 2022-6-16 22:28 编辑

前言

 从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

    1. 如果访问的用户较多,每个用户都去请求服务器上js文件,会造成巨大流量开销
    1. 不同国家地区的用户访问你的网站,很可能访问速度不同,而使用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

其他比较火爆的项目

项目 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

评分

参与人数 1威望 +66 宅币 +100 贡献 +50 收起 理由
0xAA55 + 66 + 100 + 50 屌!

查看全部评分

回复

使用道具 举报

1093

主题

2661

帖子

7万

积分

用户组: 管理员

一只技术宅

UID
1
精华
238
威望
606 点
宅币
22186 个
贡献
46077 次
宅之契约
0 份
在线时间
2128 小时
注册时间
2014-1-26
发表于 2022-6-13 20:39:09 | 显示全部楼层
我写过一些 WASM,是纯原生 JS 手搓,用 JS 提供 API 给 WASM,然后调用 WASM 的导出表来调用其内部环境的 C/C++ 函数。像个模拟器,或者虚拟机的环境。

用过一些 jQuery,实现一些简单交互,比如我把页面分为上下左右几个 Panel 然后每个面板的内容请求后台的 cgi,这个时候我就可以选择各种我要的 element 然后进行一些操作。要查询它的文档,看看每个选择出来的东西都有哪些方法。

294

主题

492

帖子

6016

积分

用户组: 真·技术宅

UID
2
精华
71
威望
244 点
宅币
4478 个
贡献
203 次
宅之契约
0 份
在线时间
741 小时
注册时间
2014-1-25
 楼主| 发表于 2022-6-13 22:50:28 | 显示全部楼层
本帖最后由 元始天尊 于 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适合用这个

我是先研究的后端技术,然后是前端,没开发前端那会,直接命令行请求后端,也凑合能用。做前端主要是给别人用,除此之外是省去了开发移动端代码的繁琐过程,直接在移动端用前端技术去做。做移动端得画图做界面,更麻烦。前端框架那么多好看的组件,随便弄上几个,颜值都很高。性能也不输。

50

主题

256

帖子

8393

积分

用户组: 管理员

UID
77
精华
15
威望
174 点
宅币
7527 个
贡献
187 次
宅之契约
0 份
在线时间
205 小时
注册时间
2014-2-22
发表于 2022-6-14 17:58:50 | 显示全部楼层
我只会写最简单的WEB程序,前台HTML+JS,后台PHP。这些都是A5教我的。

至于楼主说的那些库,一个都没听说过。

2

主题

12

帖子

1155

积分

用户组: 管理员

UID
4313
精华
1
威望
35 点
宅币
1047 个
贡献
21 次
宅之契约
0 份
在线时间
113 小时
注册时间
2018-9-24
发表于 2022-6-14 18:36:00 | 显示全部楼层
数据量大起来以后,这些框架的差别就能体现出来了
jQuery那些传统的方式去渲染页面确实和vue,react那些没法比
动态渲染页面,特别是模拟报告页面十几页那种
还有工资表那些,改个基数整个列表都变了
jQuery很多用js去渲染页面组件的
改动后得重新渲染页面,然后效率就低下去了
毕竟是在真实的dom上修改然后重新渲染

自己实现自适应样式 确实是个灾难

异步那些可以做前后台封装然后统一回调,动态配置
但指望全部用异步或者非异步实现肯定也是不对的

1093

主题

2661

帖子

7万

积分

用户组: 管理员

一只技术宅

UID
1
精华
238
威望
606 点
宅币
22186 个
贡献
46077 次
宅之契约
0 份
在线时间
2128 小时
注册时间
2014-1-26
发表于 2022-6-16 15:48:19 | 显示全部楼层
元始天尊 发表于 2022-6-13 22:50
WASM是个和JS并列的东西,这玩意儿是挺牛逼的东西,对于网页3D游戏性能提升不是一点。我觉得WASM的优点主 ...

根据我的实测:

WASM 性能低,里面的 C 再怎么努力也超不过 JS。

对于网页游戏 3D 性能没有任何提升。

请看我的开源项目:https://github.com/0xAA55/WebGL4WASM
给 WASM 提供 OpenGL ES 3.0 的 API

294

主题

492

帖子

6016

积分

用户组: 真·技术宅

UID
2
精华
71
威望
244 点
宅币
4478 个
贡献
203 次
宅之契约
0 份
在线时间
741 小时
注册时间
2014-1-25
 楼主| 发表于 2022-6-16 22:24:11 | 显示全部楼层
0xAA55 发表于 2022-6-16 15:48
根据我的实测:

WASM 性能低,里面的 C 再怎么努力也超不过 JS。

结合各种资料看,这玩意儿主要用CPU,而且在CPU上确实是比JS快。GPU不清楚是否支持了。这块可以持续关注WebAssembly这个项目。对你们做3D的应该还是更有用一些

7

主题

145

帖子

7313

积分

用户组: 真·技术宅

UID
4293
精华
5
威望
414 点
宅币
5516 个
贡献
799 次
宅之契约
0 份
在线时间
229 小时
注册时间
2018-9-19
发表于 2022-6-17 01:40:06 | 显示全部楼层
0xAA55 发表于 2022-6-16 15:48
根据我的实测:

WASM 性能低,里面的 C 再怎么努力也超不过 JS。

话说如果是本机exe的项目中使用WASM是否可以自己用原生的C艹来写WASM虚拟机实现性能超越js?

1093

主题

2661

帖子

7万

积分

用户组: 管理员

一只技术宅

UID
1
精华
238
威望
606 点
宅币
22186 个
贡献
46077 次
宅之契约
0 份
在线时间
2128 小时
注册时间
2014-1-26
发表于 2022-6-18 14:36:43 | 显示全部楼层
元始天尊 发表于 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 毫无用处。

本版积分规则

QQ|申请友链||Archiver|手机版|小黑屋|技术宅的结界 ( 滇ICP备16008837号 )|网站地图

GMT+8, 2022-7-1 13:19 , Processed in 0.045496 second(s), 29 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表