模块的独立性与安全性

12. September, 2024 — stylit tech team

我们的Shopify模块具有极强的独立性和安全性，确保不会干扰其他站点内容或框架，在保护敏感信息和数据的同时，采用最佳的编码和版本控制实践。

模块的独立性

我们的模块具有非常强的独立性，功能明确，确保不会对您站点中的其他部分产生额外影响。

CSS隔离

使用命名空间前缀：我们坚持使用唯一的前缀（如stylit-aaa-）为所有CSS类名和ID，避免与模块无关的样式冲突。例如：
```
.stylit-aaa-container{
  /* Styles */
}
.stylit-aaa-button{
  /* Styles */
}
```
避免全局样式：避免在全局范围内定义样式规则，如直接修改全局的body或h1等标签。所有样式均限定在命名空间内。

JavaScript隔离

命名空间作用域：确保JavaScript代码在自己的命名空间或作用域中运行，避免全局作用域污染。通过自执行函数（IIFE）或者ES6模块化（如import/export）实现。例如：
```
(function() {
  const stylitAaaComponent = {
    init: function() {
      // Initialization code
    },
    // Other methods
  };

  stylitAaaComponent.init();
})();
```

Web Components：使用Web Components技术，创建完全封装的、自包含的组件，不会影响全局样式和脚本。例如：

class StylitAaaButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = ``;
  }
}

动态加载和懒加载

仅按需加载：确保你的CSS和JS文件仅在需要时加载，使用按需加载或懒加载技术减少对其他模块的干扰。例如：

// Example of lazy-loading a script
function loadScript(url, callback) {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

loadScript('path/to/your/stylit-aaa.js', function() {
  // Code to execute after script is loaded
});

依赖的安全性

模块安全

避免使用来历不明或未经审核的第三方代码。

减少外部依赖

我们致力于尽量减少外部JavaScript和CSS库的依赖，所选用的第三方库均为知名且经过审查的开源库。

直接路径引用

确保任何静态资源（如图片、脚本、样式表）的引用都部署到您的本地站点，避免引用不安全的外部资源。

避免公开敏感信息

隐藏API密钥和私密数据

我们会经过严格审查，确保在Liquid模块中不会意外泄露API密钥或其他敏感数据，不会向除Shopify外的第三方接口发送任何敏感数据。

模板中的调试信息

避免在生产环境中包含调试信息或冗长的错误信息，防止泄露内部逻辑和设计。

部署安全

代码审查和版本控制

我们的代码会经过严格审查，测评，确保不会出现意外情况。

我们的每个模块都有指定的版本，确保模块出现问题时可以快速回滚。

在您站点中部署时的备份与回滚

在您的站点安装时，我们会对您的整个模版进行备份，确保出现问题后可以随时返回之前版本。

对您的模版中代码的更新，也都会记录在shopify 的更新记录中，也可以灵活的对单个文件进行版本退回。

也就是说在您的站点中，不论是出线不可控的意外，还是您处于个人考虑不想继续用我们的模块，都可以非常丝滑的不留痕迹的退回之前的版本。

模块的独立性与安全性