前端语言串讲 ｜ 青训营笔记

落影汐雾
82 阅读1分钟

前端语言基本能力

CSS

developer.mozilla.org/zh-CN/docs/…

JavaScript

image.png

  1. 借鉴C语言的基本语法
  2. 借鉴Java语言的数据类型和内存管理
  3. 借鉴Scheme语言，将函数提升到“第一等公民”（first class）的地位
  4. 借鉴Self语言，使用基于原型（prototype）的继承机制

image.png

image.png

Browser

image.png

image.png

前端语言协作能力

Trending

image.png

CSS in HTML

Inline CSS

<p style="color: blue;">This is a paragraph.</p>

Internal CSS

<head>
    <style type = text/css>
        body {background-color:blue;}
        p{ color: yellow;}
    </style>
</head>

External CSS

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

JavaScript in HTML

to-do

HTML in JavaScript

//file: render.js
function renderHello() {
    var template = document.getElementById('template').innerHTML;
    var rendered =Mustache.render(template, { name: 'Luke' });
    document.getElementById('target').innerHTML = rendered;
}
<html>
    <body onload="renderHello()">
        <div id="target">Loading...</div>
        <script id="template" type="x-tmpl-mustache">
            Hello {{ name }}!
        </script>
    <script src="https://unpkg.com/mustache@latest"></script>
    <script src="render.js"></script>
    </body>
</html>

JSX

class HelloMessage extends React.Component {
    render() {
        return(
            <div>
                Hello{this.props.name}
            </div>
        );
    }
}
ReactDOM.render(
    <HelloMessage name="Taylor" />,
    mountNode
);

CSS in JavaScript

to-do

HTML5

HTML DTD

HTML不是图灵完备，只是标记语言。

image.png

WebAssembly

image.png

拓展

对用户友好

  • 无需安装
  • 无需强大硬件
  • 升级非常方便
  • 容错率强
  • 传播方便

对开发者友好

  • 心智模型成熟
  • 丰富的API能力
  • 框架、工具标准化
  • 开发、调试简单
  • 具备跨平台能力

领域成熟度

  • whatwg/w3c/ecma
  • 浏览器厂商整合
  • 各类Web应用风靡
  • 商用平面设计标准化
  • 全面组件化

未来的方向

  • 效率工具(Rust)
  • JS 2 Anything
  • 服务端容器化
  • 低（无）代码站点
  • 大前端的统一
  • 三维可视化
avatar
文章
阅读
粉丝