字节前端语言

Posted iolzyy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了字节前端语言相关的知识,希望对你有一定的参考价值。

前端语言有很多:比如什么HTML,JavaScript,css等等。

这节课介绍的是CSS,HTML,JAVASCRIPT等等

首先我们先介绍CSS:

CSS的基本语法是:选择器 属性名: 属性值; 属性名: 属性值; ……

举个栗子:p color: blue;

上述代码中,p 为选择器,用于选取页面中的所有 <p> 元素,color 为属性名,表示要改变元素的文字颜色,而 blue 则是属性值,用于指定新的文字颜色。

接着是JavaScript:

首先JavaScript是一个脚本语言,主要用于Web开发

接下来是一些最基础的语法操作:

1,变量声明:在 JavaScript 中使用 var 或 let 关键字声明变量,如:

var x = 5; let y = "Hello";

2,函数定义:JavaScript 中函数可使用 function 关键字来定义,如:

 function myFunction(a, b)  return a + b; 
复制代码

3,表达式和语句:JavaScript 中的表达式和语句与其他编程语言类似,例如:

// 表达式 x = 5 * 10;

// 语句 if (x > 50) console.log("x is greater than 50");

else console.log("x is less than or equal to 50");

4,对象和数组:JavaScript 支持对象和数组类型,如:

// 对象 var person = name: "John", age: 30, city: "New York" ;

// 数组 var fruits = ["apple", "banana", "orange"];

5,事件处理程序:在 Web 开发中,JavaScript 经常用于处理 HTML 元素的事件,如:

// 添加点击事件处理程序

document.getElementById("myButton").addEventListener("click", function()

alert("Button clicked"); );

这些知识最基础的语法,还有很多深奥的东西我也正在学习。

接下来是HTML的语法操作;

HTML是一个标记语言,所以和JavaScript有不同。

接下来我们来看他们的语法实现:

1,使用标记标签:HTML 中使用标记标签来定义不同的元素,如:

<h1>这是一个标题</h1> 
<p>这是一个段落。</p>
复制代码

上面的代码中,<h1> 和 </h1> 之间表示一个标题,而 <p> 和 </p> 之间表示一个段落。

2,标记标签和属性:HTML 标记标签可以带有属性,如:

<img src="image.jpg" alt="图片">
复制代码

在上面的代码中,<img> 标签使用 src 属性指定要显示的图像文件的地址,同时使用 alt 属性指定在无法加载图像时的替代文本。

3,HTML 文档结构:HTML 文档通常包含头部和主体两个部分,如:

<!DOCTYPE html> <html> 
<head> 
<title>
页面标题
</title>
</head>
<body>
<h1>
页面主标题
</h1>
<p>
页面内容
</p>
</body>
</html>
复制代码

在上面的代码中,<!DOCTYPE html> 表示 HTML5 标准,而 <head> 标签包含描述文档信息的元素,例如 <title> 标签用于定义文档标题。

HTML还有可以当成示波器和API的操作。

而最近的HTML有许多操作:

比如什么可视化,语义化,能存贮视频等。

字节前端终于开源!吹爆!

Semi Design 发布,前端同学的福音

大家好,我是鱼皮。

最近,字节跳动的抖音前端技术团队开源了一款企业级应用设计系统 Semi Design  。这也是他们团队在 GitHub 上首次公开的项目,短短几天,就收获了 3.6 k 个 star。

GitHub 开源仓库

老实说,看到这个开源项目的那一刻,我真的非常激动!因为我从第一次了解到字节跳动开始,就非常喜欢他家的设计风格,既简约又有现代感。

这次他们开源的 Semi Design,不仅是一套精美的设计系统,还是一套开箱即用的 React 组件库,对于我这种喜欢用 React 来写前端的开发者,真的是福音了。

semi-design 设计风格

下面我带大家来看一下,这个 Semi Design 到底香不香!

体验

打开 Semi Design 的官方文档,可以看到官方对 Semi Design 的介绍:

Semi Design 是由抖音前端团队,MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案,从字节跳动各业务线的复杂场景提炼而来,支撑近千计平台产品,服务内外部 10 万+ 用户。

他有以下几大特点:

  • 遵循简洁轻量、现代化的设计风格,开放自定义,让设计 “活” 起来

  • 提供主题编辑器和主题商店,可以轻松切换视觉风格

    主题商店
  • 完备的国际化,默认支持十几种语言

  • 采用跨前端框架技术方案实现、F/A 分层设计,通过重构,可以快速支持除 React 外的通用组件库,比如 Vue、Svelte 等:

    F/A架构

当然,光有这些并不能让我眼前一亮。毕竟现在前端的组件库实在太多了,像 “国际化” 这种很多组件库都具备的东西已经像是不成文的标准,不再是 “你有它让人很新鲜”,而是 “你没有它反而让人觉得垃圾” 。

然后打开 Semi Design 的组件文档,可以看到页面比较精简、组件也很丰富。但是左侧组件菜单的小图标给我一种不太舒服的感觉,好像色彩太过丰富了一些。

组件文档

此外,整个文档给我的感觉也是似曾相识,好像和蚂蚁的 React 组件库 Ant Design 神似。

Ant Design 组件库

然而,点击查看一个组件后,我发现了一些小惊喜。

首先是每个组件上方都多了一个 版本对比 的按钮:

有了这个东西,我们可以快速了解每个组件随版本的更新和变化,从而减少一些版本不一致导致的 Bug。

版本对比

还有就是提供了 代码实时编辑 的能力,我们想要使用哪个组件,都可以直接实时修改代码并查看效果。可以等调试出自己想要的界面时,再把代码复制到自己的项目中,从而大大提高开发效率。

实时编辑组件

此外呢,Semi Design 还计划上线物料市场,可以理解为一个组件社区。之后会提供更多开箱即用的组件,帮助大家更快地开发出精美的前端界面。

物料市场

总之,整体来说,我还是很看好 Semi Design 的。

杂谈

虽然网上都在说 Semi Design 是抄袭了 Ant Design,但也许这不是什么坏事。

首先,蚂蚁的 Ant Design 本身就已经开源了,开源的理念之一就是希望让大家更好的参与项目的建设、共同促进技术的发展。蚂蚁团队为国内的前端生态做出了不可磨灭的贡献,也有很多成熟的、值得学习的理念和技术,其他组件库去借鉴和学习他们,自然也是对他们的肯定。

当然,我本身很讨厌抄袭,但借鉴和抄袭是两码事。

换个思路想想,假设 Ant Design 做的并不好,字节抖音那么大的团队,难道还会去借鉴他们么?难道他们团队没有实力去做一个又新又好的么?

而且,仔细看 Semi Design 就会发现,他的语法风格和属性名称和 Ant Design 的也很类似。你当然可以说他是抄袭,但仔细想想,对于用户来说,使用不同的组件库时不需要去区分语法,可以保持之前的使用习惯,难道不是一件天大的好事么?

比如很多编程语言的取子字符串函数名都是 substring,已经成为了一种不成文的标准。

当我们做一个新产品、造个新轮子时,能让用户自然平滑地迁移和切换,是一种很机智的策略。

再说了,字节开源了 Semi Design,不仅对我们开发者来说是多了一套选择,而且还变向地给 Ant Design 施加了压力,也许能促进他们更好地进步和完善呢?

当然,以上只代表我个人看法~ 无论如何,希望前端组件库能发展的更好,造福更多的开发者。



以上就是本期分享,我是鱼皮,最后求个 点赞 + 在看 ,这将是我持续创作的最大动力,谢谢 🙏

往期推荐

隔壁厂员工进局子了!

我的个人博客上线啦!

27万,这次事情搞大了!

汇总一波免费 Python 资源

鱼皮 Java 学习路线视频 + 网站

以上是关于字节前端语言的主要内容,如果未能解决你的问题,请参考以下文章

JVM进阶之字节码文件概述

谁看了不得说声牛掰!前端大厂(字节 腾讯 阿里)力荐的JavaScript权威学习指南电子版

谁看了不得说声牛掰!前端大厂(字节 腾讯 阿里)力荐的JavaScript权威学习指南电子版

字节跳动是如何落地微前端的

前端二进制-实战

字节跳动高频111道核心前端面试题解析