Php乎

zblog如何正确开发跨域的功能

Fri, 21 Jul 2023 11:53:01 +0800

开发zblog插件的时候，我们可能会需要解决跨域的问题。

核心代码是标准的，也没有难度

if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN']) {
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
                header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
            }
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
                header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
            }
            exit();
        }
    }

zblog提供了很多钩子

那代码要放到哪个钩子呢？

我开始的时候是放到：Filter_Plugin_API_Begin ，即在插件执行之前。在1.7.3版本之前都很正常。

思路陷阱：因为插件执行就最开始的地方。

最近升级到最新的1.7.3之后，发现登录之后就不行了。爆如下错误：

not allowed access control origin ,status 500

开始以为是服务器配置出了问题。对比，排除，分析，一头雾水。

最后，才发现，只要是需要验证登录状态的请求都本拦截，提示这个错误。

所以，估计是提前验证登录了，还没返回支持跨域的option请求的结果。

兄弟，你首先要了解跨域的请求原理，不然也一头雾水。浏览器在拦截跨域的时候，是先发一个option方法前请，返回服务端跨域的配置结果。告诉浏览器是否支持跨域。如果支持，浏览器才发对于的post/get方法的请求。

如果我使用Filter_Plugin_API_Begin的钩子，这个时候有点滞后了。因为登录验证是在这个钩子之前。之前是正常的，现在不正常估计是代码做了调整。

那就必须在登录验证之前的钩子把跨域的配置代码先执行。

源码分析，找到了原因。

首先是api文件的入口文件执行顺序：看源码

// 标记为 API 运行模式
define('ZBP_IN_API', true);

require 'function/c_system_base.php';

$zbp->Load();

ApiCheckEnable();

HookFilterPlugin('Filter_Plugin_API_Begin'); //这个地方是我最开始挂的钩子的地方

再看 c_system_base.php ,看是否有登录验证和钩子，发现没有登录验证，因为必须在登录验证。

$GLOBALS['zbp'] = ZBlogPHP::GetInstance();
$GLOBALS['zbp']->Initialize();

/*
 * 加载主题和插件APP
 */
if (ZBP_SAFEMODE === false) {
    $theme_preset = GetVarsFromEnv('ZBP_PRESET_THEME');
    if ($theme_preset != '') {
        $GLOBALS['blogtheme'] = $theme_preset;
        $style_preset = GetVarsFromEnv('ZBP_PRESET_THEME_STYLE');
        if ($style_preset != '') {
            $GLOBALS['blogstyle'] = $style_preset;
        }
    }
    $theme_name = $GLOBALS['blogtheme'];
    $file_base = $GLOBALS['usersdir'] . 'theme/' . $GLOBALS['blogtheme'] . '/theme.xml';
    $theme_include = $GLOBALS['usersdir'] . 'theme/' . $GLOBALS['blogtheme'] . '/include.php';

    if (is_readable($file_base)) {
        $GLOBALS['activedapps'][] = $theme_name;

        // 读主题版本信息
        $GLOBALS['zbp']->themeapp = $GLOBALS['zbp']->LoadApp('theme', $theme_name);
        $GLOBALS['zbp']->themeinfo = $GLOBALS['zbp']->themeapp->GetInfoArray();

        if ($GLOBALS['zbp']->themeapp->isloaded && is_readable($theme_include)) {
            include $theme_include;
        }
    }

    $aps = GetVarsFromEnv('ZBP_PRESET_PLUGINS');
    $aps2 = $GLOBALS['zbp']->GetPreActivePlugin();
    if ($aps != '') {
        $aps = explode('|', $aps);
        foreach ($aps2 as $ap) {
            $aps[] = $ap;
        }
        $aps = array_unique($aps);
    } else {
        $aps = &$aps2;
    }

    foreach ($aps as $ap) {
        if (is_readable($file_base = $GLOBALS['usersdir'] . 'plugin/' . $ap . '/plugin.xml')) {
            $GLOBALS['activedapps'][] = $ap;
        }
        if (is_readable($file_base = $GLOBALS['usersdir'] . 'plugin/' . $ap . '/include.php')) {
            include $file_base;
        }
    }

    foreach ($GLOBALS['plugins'] as &$fn) {
        if (function_exists($fn)) {
            $fn();
        }
    }
}

unset($file_base, $aps, $aps2, $fn, $ap, $opk, $opv);
unset($theme_name, $theme_include, $theme_preset, $style_preset);

//1.7新加入的
$GLOBALS['zbp']->PreLoad();

继续看ZBlogPHP类的初始化方法Load（）

 public function Load()
    {
        if (!$this->isinitialized || !$this->ispreload || $this->isload) {
            return false;
        }

        //找到了可以挂的钩子
        foreach ($GLOBALS['hooks']['Filter_Plugin_Zbp_Load_Pre'] as $fpname => &$fpsignal) {
            $fpreturn = $fpname();
        }

        if (!headers_sent()) {
            header('Content-type: text/html; charset=utf-8');
        }

        if ($this->option['ZC_LOADMEMBERS_LEVEL'] == 0) {
            $this->option['ZC_LOADMEMBERS_LEVEL'] = ZC_MEMBER_LEVER_ADMINISTRATOR;
        }
        $this->isloadmembers || $this->LoadMembers($this->option['ZC_LOADMEMBERS_LEVEL']);
        $this->isloadcategories || $this->LoadCategories();
        //$this->isloadtags || $this->LoadTags();
        $this->isloadmodules || $this->LoadModules();
        $this->RegBuildModules();

        //登录验证
        if ($this->CheckIsLoggedin() == false) {
            $this->Verify();
        }
        ......
        
 }

所以应该用这个钩子：

Filter_Plugin_Zbp_Load_Pre

javascript最搞不懂的boolean判定，你必须学会

Sun, 16 Jul 2023 22:25:31 +0800

Boolean 对象是一个布尔值的对象包装器。

描述

如果需要，作为第一个参数传递的值将转换为布尔值。如果省略该参数或参数值为 0、-0、null、false、NaN、undefined，或空字符串（""），则该对象具有的初始值为 false。所有其他值，包括任何对象，空数组（[]）或字符串 "false"，都会创建一个初始值为 true 的对象。

注意不要将基本类型中的布尔值 true 和 false 与值为 true 和 false 的 Boolean 对象弄混了。

其值不是 undefined 或 null 的任何对象（包括其值为 false 的布尔对象）在传递给条件语句时都将计算为 true。例如，以下 if 语句中的条件评估为 true：

const x = new Boolean(false);

if (x) {

// 这里的代码会被执行

}

基本类型的布尔值不受此规则影响。例如下面的 if 语句的条件为假：

const x = false;

if (x) {

// 这里的代码不会执行

}

不要用创建 Boolean 对象的方式将一个非布尔值转化成布尔值，直接将 Boolean 当做转换函数来使用即可，或者使用双重非（!!）运算符：

const x = Boolean(expression); // use this...

const x = !!(expression); // ...or this

const x = new Boolean(expression); // don't use this!

对于任何对象，即使是值为 false 的 Boolean 对象，当将其传给 Boolean 函数时，生成的 Boolean 对象的值都是 true。

const myFalse = new Boolean(false); // initial value of false

const g = Boolean(myFalse); // initial value of true

const myString = new String('Hello'); // string object

const s = Boolean(myString); // initial value of true

最后，不要在应该使用基本类型布尔值的地方使用 Boolean 对象。

备注：当将非标准属性 document.all 用作此构造函数的参数时，结果是值为 false 的布尔对象。此属性是旧的、非标准的属性，不应使用。

当使用非严格相等（==）来比较一个对象和布尔原始值时，最重要的是需要弄明白最终比较的是什么。请看一下的示例：

if ([]) { console.log("[] is truthy")} // logs "[] is truthy"

if ([] == false) { console.log("[] == false")} // logs "[] == false"

[] 是真值而 [] == false 也同时成立的原因是：非严格比较 [] == false 会将 [] 的原始值和 false 进行比较。而获取 [] 的原始值时，JavaScript 引擎会首先调用 [].toString()。其结果为 ""，也是最终和 false 一起比较的值。换句话说，[] == false 等价于 "" == false，而 "" 是假值——这也解释了为什么会得到这一结果。

H5可视化编辑器如何适配不同设备的屏幕？

Thu, 06 May 2021 14:16:59 +0800

最近做了一会展包名签到的程序。但是有个问题，就是总有设备不能很好的适配。比例失调就影响美观，也影响了会展活动给人的印象。

毕竟是一个后台开发程序员，前端的技能还是有限，思路也是有点固化，想着通过css来解决设备的适配度问题。

这个方式也是也可以。一般用vw或者rem的中间尺寸单元。如果是纯编码的方式可以的。

问题是我们的项目使用的可视化编辑器，设置尺寸的时候用vw和rem肯定不方便。

今天研究了一个国内做的很好的h5设计网站的作品，无意间发现是用通viewport来适配的。醍醐灌顶，真是一好办法。这样在h5设计器端就可以px来设置相关的参数，统一了设计和展示在参数是统一的。

核心步骤

1、设置viewport 固定宽度=320

2、动态计算缩放比例 initial-scale=动态计算 = 设备窗口宽带/320

关键示例代码

function setScale() {
  var pageScale = 1;
  // 这里不能用body.clientWidth 等 因为ios 上可能刷新后这个值还没设置回去
  const screenWidth = window.screen.width;
  var height = document.documentElement.clientHeight || 486;
  if (screenWidth / height >= 320 / 486) {
    pageScale = height / 486;
  } else {
    pageScale = screenWidth / 320;
  }
  // meta
  var content =
   'width=320, initial-scale=' +
   pageScale +
   ', maximum-scale=' +
   pageScale +
   ', user-scalable=no' +
   ',viewport-fit=cover';
   document.getElementById('viewport').setAttribute('content', content);
}