「趣学前端」元编程,翻书学习时发现的陌生词汇,当然是记个笔记

简介: 最近在重学前端,今天分享元编程的知识点。

背景

最近睡前习惯翻会书,最近在重温《JavaScript权威指南》这本书。这本书,文字小,内容多。两年了,我才翻到第十章。因为书太厚,平时都充当电脑支架。

今天看文章目录的时候,发现一个章节叫「元编程」。我看书中的解释

常规编程是写代码去操作数据,元编程则是写代码去操作其他代码。

我是这样理解的,用代码去操作代码就意味着被操作的代码有可以被扩展的特性,比如可写、可枚举等。而这些特性,可以帮助实现一些特别的功能。利用特性去编写功能的过程可以被归结为「元编程」。比如编写可重用的库等。

元编程特性

属性的三个特性

可写、可枚举、可配置,这三个特性前两个我晓得,但是最后一个我没啥印象了。来看书里对三个特性的解释

可写(writable)特性指定是否可以修改属性的值。

可枚举(enumerable)特性指定是否可以通过for/in循环和Object.keys()方法枚举属性。

可配置(configurable)特性指定是否可以删除属性,以及是否可以修改属性的特性。

可以使用Object的getOwnPropertyDescriptor方法,帮助获取对象上某个属性的属性描述符。如果不存在则会返回undefined。

letobj= {
name: '张三',
age: 17,
};
// name属性存在console.log(Object.getOwnPropertyDescriptor(obj, 'name')); // => { value: '张三', writable: true, enumerable: true, configurable: true }// interest属性不存在console.log(Object.getOwnPropertyDescriptor(obj, 'interest')); // => undefined

示例代码中不存在interest属性,但是也不是不可以有。Object.defineProperty()方法可以帮助对象创建一个指定了特性的属性。

Object.defineProperty(obj, 'interest', {
value: '华夏美食、国漫、古风重度爱好者',
writable: true,
enumerable: true,
configurable: true,
});
console.log(obj.interest); // => 华夏美食、国漫、古风重度爱好者

Proxy

使用Proxy可以修改JavaScript对象的基础行为,并创建具体普通对象无法企及能力的代理对象。

代理对象可以从目标对象和处理器对象上获取它们的行为,进行特定处理;也可以只拦截对象操作,但仍然把操作委托给目标对象。

前一种方式可以帮助创建一个只读器,所有试图写入的操作都会抛出异常。

functionreadonlyProxy(p) {
functionreadonly() {
thrownewTypeError('该方法是只读方法');
  }
returnnewProxy(p, {
set: readonly,
defineProperty: readonly,
deleteProperty: readonly,
setPrototypeOf: readonly,
  });
}
letobj= {
name: '张三',
age: 17,
};
letw=readonlyProxy(obj);
// 可以正常读取属性console.log(w.name); // => 张三// 删除报错deletew.age; // => TypeError: 该方法是只读方法// 写入报错w.interest='华夏美食、国漫、古风重度爱好者'; // => TypeError: 该方法是只读方法

后一种方式可以用于打印日志。这个功能占了满满三页,太长了,容我再学习一下。

模版标签

位于反引号之间的字符串被称为“模版字面量”。可以把定义使用标签化模版字面的标签函数看成是元编程。

比如String.raw``,可以返回反引号中未经处理的文本。

letlen=String.raw`\n`.length;
console.log(len); // => 2:一个反斜杠字符和一个字母n

虽然不知道实际使用场景,但是多学一点总有好处,保不齐将来可能会用到。

总结

温故果然可以知新。学习完元编程的章节,已经没有最初看到它的时候那么困惑了,感觉有些难读懂的源代码有望读懂了。而且打印日志的功能,我准备再研究研究,我有预感,肯定能有用。

《JavaScript权威指南》真是一本宝藏图书,看来有必要把其他章节都学习一下。

今天也特别有收获的一天。

目录
相关文章
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1143 14
|
3月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
246 0
|
3月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
192 0
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
395 0
|
12月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
576 26
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
286 4
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
548 6
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
718 1
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
700 1

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    648
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    274
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    246
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    192
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    299
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    431
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    189
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    133
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    198
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    278