背景

之前写了一篇《低代码系列——js沙箱设计》，于是萌生了干脆将完整的低代码平台设计的整个过程都整理一遍，然后输出文章，同时准备搞个人开源项目用来实现低代码平台。

低代码平台核心部分是编辑器，编辑器里最重要一块如何将组件抽象化，存储到一个可描述的对象中。

下面我们就针对这种组件抽象描述做一次深入的设计。

组件

是什么

参考资料

JSON Schema 规范
JSON 可视化

背景

参考资料

性能优化经验分享

背景

掘金最近上了一个活动，用来庆祝中秋佳节，想薅羊毛获取奖品，因此突发奇想顺便给自己的技术领域扩展一下，之前对VR、AR技术感兴趣，干脆趁这这个机会去尝试开发一个XR小程序。

涉及知识点：

1. 小程序XR-Frame框架
2. 小程序云函数
3. 天气 API
4. 地理位置 API

方案设计

产品设计

• 目标用户：对AR技术感兴趣的开发同学
• 作用：利用AR给大家营造一种中秋气氛感觉

整体功能设计如下：

1. 通过小程序进来后，获取当前位置坐标，转换成具体的地址，然后获取天气
2. 打开摄像头进行【千里共婵娟】，需要将手机对着月亮的位置，然后才出现3D月亮模型
3. 看到月亮后，可以点击月亮 查看一共有多少人与你一起赏月
4. 分享给家人或朋友，会在屏幕下面出现一排人与你一起赏月
5. 彩蛋，不同手势，会触发不同场景，比如：比心，会掉下很多爱心， 比6，会掉下很多666表情

实现思路

1. 核心功能：利用小程序XR-FRAME框架实现3d月亮展示
2. 开发框架直接用原生微信小程序开发即可，一共就3个页面
3. 后台数据保存直接用云函数即可，主要保存访问用户数据量

必备知识

小程序原生开发基础知识，我这里就不详细说了，主要讲

XR-Frame学习

是什么？ 官方介绍如下：

xr-frame是一套小程序官方提供的XR/3D应用解决方案，基于混合方案实现，性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。

云函数使用

项目开发

摄像头显示月亮

调用云函数存储用户数据

结合GitHub Action持续集成交付

所有源码均以上传到Github

体验版

这里放个小程序二维码图片，大家感兴趣可以扫一下体验一版本。

参考资料

• 小程序XR-FRAME指南

背景

参考资料

盘点开源“Copilot”，do it yourself
如何搭建免费的GitHub Copilot？

介绍

面试题经常会提到一个问题，就是前端安全问题哪些，我们基本上都回答上来以下几个：

• XSS脚本攻击，利用网站漏洞，注入非法脚本
• CSRF跨站请求伪造，攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求
• 运营商劫持，一般是经过某些运营商DNS网关后，在外层套入iframe，然后实现页面劫持

但是在前端安全中，还有一个问题就是 ：JS原型链污染， 那么是原型链污染怎么回事，请看下面详细介绍。

这里插入一条新闻，新出一个很邪恶的js库叫Evil.js，名字还取得很lodash，其中主要就是利用原型prototype进行重写项目中常用的方法，如：

• Array.map 有5%概率会丢失最后一个元素，
• 当数组长度可以被7整除时，Array.includes 永远返回false。

所以学会如何防御项目内被攻击，了解更多JS原型安全知识很重要，起码周末不用调试半天问题，才发现项目中代码被恶意写入。

背景

最近在打开一些网站的，查看其CSS样式的时候，发现如下图：

所以就很好奇，原来现在CSS样式变量已经可以正式投入生产使用了，所以希望能够做个简单了解。

浏览器的兼容性：

简介

由于自己参与过低代码平台开发，所以希望能把我自己开发低代码中遇到的问题或者一些设计思路进行总结汇总，这是开始写的第一篇，也是比较基础的一篇，关于低代码平台的介绍会放在介绍篇章，这篇就不做过多介绍。

这里为什么会一开始介绍js沙箱设计呢？

因为低代码平台，会运行用户本身自己编写的业务逻辑代码，这里就需要平台去运行用户写的js代码，但是js代码保存到数据库是一个字符串，那么平台应该怎么运行呢？

答案是js沙箱，那么如何设计一个沙箱呢？按照低代码平台的需要特性，主要以下几方面：

• 隔离，隔离是为了保证当前执行代码不影响整个平台的代码
• 插入，沙箱允许插入平台的内置对象
• 容错，沙箱内代码即使有错误，也不影响整个平台执行

主要步骤

• 添加站点地图 sitemap.xml文件和搜索机器人文件robots.txt
• 提交站点到搜索引擎(百度和谷歌)
• hexo针对搜索的优化

添加站点地图

添加站点地图 sitemap.xml

1. 添加hexo插件

   1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

2. 修改_config.yml配置

1
2
3
4

sitemap: 
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

搜索机器人文件robots.txt

在source目录下新建robots.txt文件，文件内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

User-agent: *
Allow: /
Allow: /archives/
Allow: /categories/
Allow: /tags/ 
Allow: /resources/ 
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Disallow: /fancybox/

Sitemap: https://hoxis.github.io/sitemap.xml
Sitemap: https://hoxis.github.io/baidusitemap.xml