爱情的纹理 - Warn的个人代码与故事分享博客

如何在macOS上安装旧版本的Xcode

Mon, 15 Dec 2025 18:20:00 GMT

上周末下班前看到我的macOS15.7系统软件更新中提示Xcode有更新，本着小版本能更则更的原则就更新了。今天发现竟然是更新到了Xcode 26.1版本，然后发现老项目打不开了，又更新到了Xcode 26.2版本，发现项目中有个废弃的SDK被移除了，只能安装一个旧版本的Xcode先解决打包构建的问题。

获取旧版本Xcode安装文件

Apple 官方和社区提供了多种获取旧版本 Xcode 的途径，但都需要登录 Apple 账户（不需要是你开发App时使用的账户）。我们今天只记录下通过Apple官方获取旧版本Xcode的方法。

登录Apple账户

访问并登录Apple 开发者网站。

下载安装文件

打开Apple Developer Downloads页面，往下划拉到我们需要的版本，比如Xcode 16.4版本（可能Apple开发者工具都和Xcode相关，所以输入Xcode检索没看到明显的结果变化）。点击View Details按钮会展开.xip格式的安装包，形如Xcode 16.4.xip,我们直接点击下载即可。

Xcode_16.4

安装及并行运行

Xcode 的设计允许您在同一台 Mac 上同时安装和使用多个大版本的 Xcode。

解压安装文件

找到下载完成的.xip文件，双击它来解压。这可能需要一些时间，解压后会生成一个名为Xcode.app的文件。

重命名和移动

尽量不要覆盖你当前使用的Xcode版本（就是当前在Applications目录中存在的Xcode.app），比如我的是Xcode 26.2。

把解压完成的Xcode.app应用文件重命名，例如Xcode_16.4.app。

把重命名后的Xcode_16.4.app应用文件移动到Applications目录中。

此时，你已经拥有了两个并行运行的Xcode版本：Xcode 26.2和Xcode 16.4。

使用旧版本`Xcode`打开项目

在Finder中，右键点击您的项目文件（.xcodeproj或.xcworkspace），选择“打开方式”，然后选择您安装的旧版本Xcode（例如Xcode_16.4.app）。

这样，您就可以使用旧版本的Xcode来打开和编辑您的项目了。

指定命令行工具（看需求）

默认情况下，macOS的命令行工具（如git、swift等）会链接到 /Applications/Xcode.app。如果您希望将命令行工具切换到旧版本，可以使用以下命令：

sudo xcode-select --switch /Applications/Xcode_16.4.app/Contents/Developer

在需要使用新版 Xcode 26.2 时，您需要将路径再切换回来：

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

uni-appx启动参数备忘录

Tue, 09 Dec 2025 16:00:00 GMT

本文记录uni-appx开发项目中启动参数的相关知识。

整体参数预览

path: 启动时的页面路径，首次启动时一般为pages.json中配置的首页（即第一项，如：/pages/index/index）。
query: 启动时携带的参数，目前在App端默认是UTSJSONObject类型的空对象，该参数主要为小程序端预留使用。
scene: 场景参数，用于指定启动的场景，App端默认值为1001，该参数主要为小程序端预留使用。
refererInfo: 来源信息，包含来源应用的AppID、启动场景等内容，目前在App端默认是UTSJSONObject类型的空对象，该参数主要为小程序端预留使用。
appScheme: 启动时的完整URL Scheme，仅App端支持，默认值为空字符串。
appLink: 通过通用链接AppLink启动时的完整appLink参数，用于传递AppLink相关信息，仅App端支持，默认值为空字符串。

目前在App端开发中，实际常用的参数只有3个：path、appScheme和appLink。

API差异说明

uni.getLaunchOptionsSync()：获取应用首次启动时的参数，返回值与App.onLaunch的回调参数结构一致。
uni.getEnterOptionsSync()：获取应用本次进入前台时的参数，返回值与App.onShow的回调参数结构一致。

应用首次启动或杀死进程后重新启动时，会触发App.onLaunch回调；每次应用从后台进入前台显示时，都会触发App.onShow回调。

应用初始化时获取参数

如果需要在App.onLaunch中获取启动参数，可以直接使用其回调函数传递的参数：

<script lang="uts">
export default {
  onLaunch: function (launchOptions) {
    console.log('launchOptions:', launchOptions);
  }
}
</script>

如果需要在其他页面或公共函数中获取首次启动参数，无需在App.onLaunch中保存后再传递，直接调用uni.getLaunchOptionsSync()即可：

// 获取App.onLaunch首次启动时的参数
const launchOptions = uni.getLaunchOptionsSync();
console.log('launchOptions:', launchOptions);

应用显示时获取参数

如果需要在App.onShow中获取启动参数，可以直接使用其回调函数传递的参数：

<script lang="uts">
export default {
  onShow: function (enterOptions) {
    console.log('enterOptions:', enterOptions);
  }
}
</script>

同样，如果需要在其他页面或公共函数中获取本次进入前台的参数，无需在App.onShow中保存后再传递，直接调用uni.getEnterOptionsSync()即可：

// 获取App.onShow本次进入前台时的参数
const enterOptions = uni.getEnterOptionsSync();
console.log('enterOptions:', enterOptions);

iOS App端使用示例

通过AppLink启动时的参数

首次启动时launchOptions参数的返回示例：

{
    "path": "pages/index/index",
    "query": {},
    "scene": 1001,
    "referrerInfo": {},
    "appScheme": null,
    "appLink": "https://www.imwarn.com/hanzi/?channelId=1_imwarn_com_1"
}

每次进入前台时enterOptions参数的返回示例（例如：应用切入后台时显示的是pages/novel/novel页面）：

{
    "path": "pages/novel/novel",
    "query": {},
    "scene": 1001,
    "referrerInfo": {},
    "appScheme": null,
    "appLink": "https://www.imwarn.com/hanzi/?channelId=1_imwarn_com_1"
}

更新日志

2025-12-09

HBuilderX版本：4.85 (ARM架构)
重点：对iOS AppLink启动参数的记录

在Next.js V15中使用React Scan

Tue, 02 Dec 2025 16:37:00 GMT

在开发Next.js应用时，性能优化是一个永恒的话题。随着应用规模的不断扩大，我们经常会遇到这样的困惑：为什么一个看似简单的组件更新会触发大量其他组件的重新渲染？这不仅会导致应用响应缓慢，还会影响用户体验。今天，我们将介绍一个强大的工具——React Scan，它可以帮助我们自动检测和识别React应用中的性能问题。

React Scan 是什么？

React Scan 是一个专为React应用设计的性能分析工具，它的主要功能是自动检测React应用中的性能问题。与其他性能分析工具不同的是，React Scan的一大优势是无需更改代码就能使用，这使得我们可以快速集成并立即开始分析应用性能。

主要特点

自动检测性能问题：精准高亮需要优化的组件
零代码侵入性：不需要修改现有代码即可使用
多种集成方式：支持通过脚本标签、npm、CLI等多种方式使用
可视化分析：直观地展示组件渲染情况和潜在瓶颈

在Next.js项目中集成React Scan

Next.js作为目前最流行的React框架之一，集成React Scan非常简单。下面我们将详细介绍在App Router中的集成步骤。

项目环境

Next.js 版本：15.2.3
React 版本：19.0.0
react-scan 版本：0.4.3

在Next.js项目中，可以通过CDN引入或者npm包集成React Scan，我们直接说自己用的方式，更多了解可以去React Scan 官方文档查看。

1. 安装React Scan

首先，我们需要通过npm或yarn安装React Scan依赖：

# 使用pnpm
pnpm add react-scan
 
# 使用npm
npm install react-scan
 
# 使用yarn
yarn add react-scan

创建`react-scan`组件

// src/components/tool/react-scan.tsx
 
"use client";
import { scan } from "react-scan";
import { useEffect } from "react";
import type { FC } from "react";
 
export const ReactScan: FC = () => {
  useEffect(() => {
    scan({
      enabled: true,
    });
  }, []);
 
  return <></>;
};

在`layout`布局组件中引入`ReactScan`组件

路径：src/app/layout.tsx

// src/app/layout.tsx
// ...
import { ReactScan } from "@/components/tool/react-scan";
 
export default function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <html lang="en">
      <ReactScan />
      <body>
        {children}
      </body>
    </html>
  );
}

使用React Scan分析性能问题

集成完成后，我们可以开始使用React Scan来分析我们的Next.js应用性能。

启动开发服务器

首先，启动Next.js开发服务器：

pnpm dev
# 或
npm run dev
# 或
yarn dev

查看性能分析结果

打开浏览器访问你的应用，React Scan会自动在浏览器中显示一个控制面板。通过这个面板，你可以：

查看组件渲染次数和时间
识别不必要的重渲染
分析组件树结构
定位性能瓶颈

如图示，我们可以拖拽这个React Scan的控制面板中，然后点击展开查看组件渲染次数和时间，以及识别不必要的重渲染等等。

实际案例：解决重渲染问题

假设我们有一个Next.js应用，其中包含一个频繁更新的计数器组件，并且发现它导致了整个页面的重渲染。使用React Scan，我们可以轻松识别问题所在。

问题组件示例：

// components/Counter.tsx
import { useState, useEffect } from 'react';
 
const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  
  useEffect(() => {
    const timer: NodeJS.Timeout = setInterval(() => {
      setCount((prev: number) => prev + 1);
    }, 1000);
    
    return () => clearInterval(timer);
  }, []);
  
  return <div>Count: {count}</div>;
};
 
export default Counter;


使用React Scan后，我们会发现ExpensiveComponent在每次计数器更新时都会重新渲染，即使它没有使用任何与计数器相关的数据。
优化方案：
// pages/index.tsx
import { memo } from 'react';
import Counter from '../components/Counter';
import ExpensiveComponent from '../components/ExpensiveComponent';
 
// 使用memo包装昂贵的组件，并添加泛型类型
// 注意：在React 19中，memo仍然作为高阶组件存在，用于性能优化
const MemoizedExpensiveComponent: React.FC = memo(ExpensiveComponent);
 
const Home: React.FC = () => {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <Counter />
      <MemoizedExpensiveComponent />
    </div>
  );
};
 
export default Home;
通过React Scan的可视化分析，我们可以直观地看到优化前后的性能差异。
高级配置选项
React Scan提供了一些高级配置选项，可以根据需要进行自定义：
// 自定义配置示例
export interface Options {
  /**
   * 启用/禁用扫描
   *
   * Please use the recommended way:
   * enabled: process.env.NODE_ENV === 'development',
   *
   * @default true
   */
  enabled?: boolean;
 
  /**
   * 强制React Scan在生产环境中运行（不建议）
   *
   * @default false
   */
  dangerouslyForceRunInProduction?: boolean;
  /**
   * 日志渲染信息到控制台
   *
   * 警告：当应用频繁重新渲染时，这可能会显著增加开销
   *
   * @default false
   */
  log?: boolean;
 
  /**
   * 显示工具栏
   *
   * 如果将此设置为true，且将{@link enabled}设置为false，工具栏仍会显示，但扫描将被禁用。
   *
   * @default true
   */
  showToolbar?: boolean;
 
  /**
   * 动画速度
   *
   * @default "fast"
   */
  animationSpeed?: "slow" | "fast" | "off";
 
  /**
   * 跟踪不必要的渲染，并在检测到时将其轮廓标记为灰色
   * 不必要的渲染被定义为组件在没有改变组件对应dom子树的情况下重新渲染
   *
   * @default false
   * @warning 跟踪不必要的渲染可能会显著增加react-scan的开销
   */
  trackUnnecessaryRenders?: boolean;
 
  onCommitStart?: () => void;
  onRender?: (fiber: Fiber, renders: Array<Render>) => void;
  onCommitFinish?: () => void;
  onPaintStart?: (outlines: Array<Outline>) => void;
  onPaintFinish?: (outlines: Array<Outline>) => void;
}
 
scan({
    enabled: process.env.NODE_ENV === 'development',
    log: true,
    showToolbar: true,
    animationSpeed: 'fast',
    trackUnnecessaryRenders: true,
    onCommitStart: () => console.log('Commit start'),
    onRender: (fiber, renders) => console.log('Render:', fiber, renders),
    onCommitFinish: () => console.log('Commit finish'),
    onPaintStart: (outlines) => console.log('Paint start:', outlines),
    onPaintFinish: (outlines) => console.log('Paint finish:', outlines),
})

uni-app(Vue2)抖音小程序开发中接入官方小说阅读器插件

Fri, 21 Mar 2025 12:28:14 GMT

抖音小说阅读器插件依赖于行业SDK权限，因此一定要先在代码配置行业SDK权限。如果尚未配置过，可参考uni-app(Vue2)编译为抖音小程序时，自动生成package.json文件配置行业SDK权限。

小程序服务类目为「文娱-文娱-在线阅读」无需申请，会自动开通小说资源内容库接入依赖的接口权限。

能力申请

自定义页面结构

申请入口：抖音开放平台-控制台-能力-互动能力-容器界面-自定义页面结构

阅读器有自定义导航栏，需要开启【自定义页面结构】后在页面style中设置"navigationStyle": "custom"支持沉浸式阅读，如果暂时不满足能力开通条件，可以使用"transparentTitle": "always"设置导航栏透明来临时避免双重导航栏UI情况。

添加到桌面

申请入口：抖音开放平台-控制台-能力-互动能力-系统能力-添加到桌面

如果要在阅读器中展示【加桌按钮】，需要提前申请开通此能力。

阅读器页面

阅读器接入的硬性规定：阅读器页面路径必须是/pages/novel_plugin/index。创建页面后在pages.json绑定行业SDK，配置其他可选参数，示例如下：

// pages.json
// #ifdef MP-TOUTIAO 
{
    "path": "pages/novel_plugin/index",
    "style": {
        "navigationBarTitleText": "...",
        "navigationStyle": "custom",
        // "transparentTitle": "always",
        "mp-toutiao": {
            "extends": "ext://industry/novel",
            "isPageExtension": true,
            "pluginConfig": {
                "addBookshelf": true,
                "addDesktopIcon": true, 
                "preventScreenRecorder": "never",
                "pageTurnMode": "horizontalSlide",
                "refreshLockChapter": true
            },
            "usingComponents": {
                "payModal": "/components/novel-modal/pay"
            }
        }
    }
},
// #endif

页面样式

阅读器自带了自定义导航栏，因此需要开通【自定义页面结构】能力，配置"navigationStyle": "custom"自定义导航栏来支持沉浸式阅读，避免双重导航栏UI情况。

如果小程序暂不满足能力申请条件，临时解决方案：配置"navigationStyle": "default", "transparentTitle": "always",设置导航栏透明也可以【注意：IDE显示可能会有错乱】。

绑定行业能力

绑定小说行业能力是固定写法"extends": "ext://industry/novel", "isPageExtension": true，没有什么转圜余地。

小说插件配置项

pluginConfig对应插件配置项。

配置"addBookshelf": true展示加入书架按钮，boolean类型，默认值true
配置"addDesktopIcon": true展示加桌按钮，boolean类型，默认值false
配置"preventScreenRecorder": "never"是否防录屏，iOS 3160版本以上生效，枚举值always|never，默认值never
配置"pageTurnMode": "horizontalSlide"新用户首次进入阅读器时默认翻页模式为左右滑动翻页，枚举值verticalScroll|horizontalSlide对应上下滑动翻页|左右滑动翻页，默认值verticalScroll
配置"refreshLockChapter": true解锁状态变更时强制刷新章节内容，boolean类型，默认值false

注意事项

加桌按钮展示addDesktopIcon依赖于互动能力能力，开通成功后才可以正常使用。申请入口：抖音开放平台-控制台-互动能力-系统能力-添加到桌面。
章节内容刷新refreshLockChapter，官方说法如下:

阅读器出于性能考量，传入章节文本内容后会做缓存，解锁状态变更时，不会重新拉取文本内容；因此增加一个强制刷新开关，开启章节强制刷新后，当章节解锁状态发生变更，即从未解锁变为解锁状态，会重新调用queryChapterInfo查询章节内容，即使用后一次查询的章节文本内容，覆盖之前传入的章节文本，并重新渲染；

页面插槽组件的引用

usingComponents对应页面插槽组件的定义。

截止目前（2025-03-20）官方只支持两种组件：自定义支付弹窗组件payModal和自定义挂件点击拉起的自定义面板组件floatModal。

由于uniapp编译后组件名都是采用的连接线格式（这里组件名是固定的驼峰格式），所以我们需要在这里把页面中引入过的或者easycom自动引入的组件再重新引入一下，否则目前调用组件会显示空白的，也就是阅读器页面找不到组件。

阅读器实现

页面完整代码可以参考官方文档接入示例代码，示例会有更新，一定要记得去官方文档查看最新示例代码。

和常规uniapp的Vue2页面代码规范稍有不同，就是把data、methods和页面生命周期函数的定义都放在一个对象变量NovelExtensionOption内部，然后传递给tt.NovelExtension(NovelExtensionOption)，大致形式如下：

import payModal from "@/components/novel-modal/pay.vue"
const {
    NovelExtension,
    getNovelManager
} = tt;
let novelManage = null;
 
const NovelExtensionOption = {
    data() {
        return {}
    },
    onLoad(options) {
        novelManage = getNovelManager()
        novelManage.onNovelError((e) => {
            //...
        })
 
        novelManage.onClickUnlockPrimaryButton((res) => {
            console.log('解锁按钮1触发', res)
        })
 
        uni.$on('payModalEvent', this.handlePayModalEvent)
    },
    onReady(){},
    onShow(){},
    onHide(){},
    onUnload(){
        uni.$off('payModalEvent', this.handlePayModalEvent)
    },
    methods: {
        queryContentsInfo(params) {
            const { bookId, page, pageSize} = params;
            return {
                chapterList: [
                    {"chapterId": "1", "status": 0}
                ]
            }
        },
        queryLockModalText(chapterId) {
            return {
                title: "弹窗标题",
                primary: "弹窗第一个按钮内容"
            }
        },
        // 其他使用的方法函数
        handlePayModalEvent(params) {},
        //...
    }
}
 
NovelExtension(NovelExtensionOption)
 
export default {
    ...NovelExtensionOption,
    components: {
        payModal
    }
}

支付弹窗组件

组件的实现没什么区别，主要有两点需要注意。

参数接收

在props中定义三个参数bookId、chapterId和params，其中bookId和chapterId是阅读器页面固定传入的抖音小说资源库对应的ID，params是在监听支付弹窗点击时回调函数showPayModal传递的对象参数。

props: {
    bookId: "",
    chapterId: "",
    params: {
        type: Object,
        default(){
            return {}
        }
    },
}

事件传递

正常组件调用时我们可以定义事件后在组件内通过this.$emit('change', params)传递给页面，但是抖音阅读器页面是不支持这种形式的。我们只能通过全局事件的传递uni.$emit('change', params)触发在页面或者其他地方监听的uni.on('change', (params) => {})接收。

需要注意的是，我们的页面的onLoad周期中进行监听，最好就在onUnload周期中取消监听。

uni.$emit('payModalEvent', {
    type: 'account'
})

自定义支付弹窗

自定义支付弹窗的一个实战逻辑：

1、在methods中实现queryLockModalText函数返回弹窗文案

2、阅读器页面在锁定章节弹出解锁组件

3、用户点击解锁组件按钮，触发onClickUnlockPrimaryButton|onClickUnlockSecondaryButton事件监听，根据我们实现queryLockModalText函数的逻辑判断展示广告还是支付弹窗

4、如果是支付弹窗，我们就可以获取onClickUnlockPrimaryButton(res)|onClickUnlockSecondaryButton(res)事件回调的res参数中的showPayModal和closePayModal函数

5、使用$novel.setClosePayModal(closePayModal)把closePayModal函数存到全局，等待我们之后在其他地方调用它关闭支付弹窗。

6、使用showPayModal(params)函数传递参数，唤起支付弹窗组件后可以在组件内接收。

7、在支付弹窗组件内，用户触发关闭按钮事件时，使用$novel.callClosePayModal()关闭组件。用户触发购买或付费完成事件时，使用uni.emit('payModalEvent', params)通信父页面（阅读器），在uni.on('payModalEvent', this.handlePayModalEvent)监听事件中接收参数进行业务处理，最后再使用$novel.callClosePayModal()关闭弹窗组件。

示例代码：

在公用js文件中定义closePayModal的存取函数

// novel.js
let closePayModal;
function setClosePayModal(fn) {
    closePayModal = fn
}
 
function callClosePayModal() {
    if(typeof closePayModal === 'function') {
        closePayModal()
    }
}

在阅读器页面中使用

// pages/novel-plugin/index
novelManage.onClickUnlockPrimaryButton((res) => {
    console.log('解锁按钮1触发', res)
    novelManage.onClickUnlockPrimaryButton((res) => {
        console.log('解锁按钮1触发', res)
        const {
            showPayModal,
            closePayModal
        } = res
        showPayModal({
            test: '解锁按钮1触发',
            bookInfo
        })
        $novel.setClosePayModal(closePayModal)
    })
})
 
// 充值等事件完成触发关闭支付弹窗
$novel.callClosePayModal()

在支付弹窗组件中触发关闭事件时使用

$novel.callClosePayModal()

常见问题

1、未解锁章节免费字数

免费字数是由服务端调用小说资源接入接口时更新控制的，小程序内部无法通过传入参数来设置。

2、小说等级的作用

小说资源接入时grade等级枚举值只有A|B，A级需要把小说所有章节内容都接入（至少1章）才能上架，强制只有A级接入的小说才可以通过巨量引擎进行投放。

3、阅读器内目录信息的展示

阅读器内目录信息的展示（包含且不限于章节数、章节标题、字数）都是由服务端接入小说资源库创建更新的。小程序内调用queryContentsInfo查询更新章节解锁信息时，只有章节IDchapterId和解锁状态status字段是有意义的。

4、完成内容库接入

完成内容库的接口对接，且小程序内上传/被授权的小说内容的dau占比该小程序总dau的80%以上，视为该小程序“完成内容库接入”。

接入完成的标准是根据改造后的阅读器path为pages/novel_plugin/index，统计小程序的dau占比该小程序总dau的80%以上,视为该小程序”完成内容库接入”。也就是统计投放入口路径，pages/novel_plugin/index路径/投放入口路径总数大于80%代表接入完成。

写在最后

相关文章: uni-app(Vue2)编译为抖音小程序时，自动生成package.json文件配置行业SDK权限

参考文档: 抖音小程序小说阅读器开发者文档

参考文档: 抖音小程序小说资源接入文档V2

AI程序员养成指南：零代码使用Trae AI编辑器从零实现一个3D多仓库可视化大屏

Thu, 20 Feb 2025 14:33:19 GMT

本文描述了如何使用Trae 编辑器从零开始实现一个3D、可交互、多数据展示、多仓多库区的库存可视化应用。包含如何进行提示，以及对让 AI 对结果进行修正和优化。

年前字节发布了编辑器的Mac版本，2月17日又同步发布了Windows版本。作为要和Cursor、Windsurf比肩的国产AI编辑器，它到底好不好用？不好说，毕竟工具都需要迭代优化，充满期待的测试了下Trae AI的自动化编程能力，结果却让人异常惊喜。你不需要写一句代码，仅凭提示词对话就能实现一个可交互、多维度的 3D 多仓库可视化大屏。

第一个场景

先从最简单的开始，我们创建一个空目录visual-warehouse，然后在Trae中打开，右侧对话窗口Chat切换到Builder，让AI完整的从零开始实现项目。

提示词

帮我使用 Threejs 编写一个仓库可视化的页面。库位有 10排10列4层，库位用半透明的正方体表示，库位的不同颜色表示放置不同的商品和数量。

Trae AI会给出整体思路，然后创建项目基础框架、安装依赖、创建额外的文件，最后会总结主要完成了哪些工作。当然在过程中提示你授权【运行】通过终端创建目录文件、安装依赖。

基础通用名词解释

运行：创建目录文件/安装依赖，都需要你点击运行后执行

预览：点击预览可以在编辑器内直接预览实时效果

全部接受：接受代码变动，保存当前版本最新代码

我们可以看到这个版本的预览效果：自动配色基本协调，也支持通过鼠标进行拖动、缩放、旋转。

简易地面

我们增加一个地面，并且优化一下展示。

提示词

增加一个地面，库位每两排一组，组与组之间留出更多的间隔作为巷道

然后Trae AI重写了布局页面。

颜色优化、增加交互

接下来我们再增加几个功能：

排与排之间直接增加距离
颜色统一使用从绿到红进行填充，标识库位放东西的多少（绿色标识空、红色标识满）
鼠标放到库位上，当前库位高亮并使用tooltip显示库位的容量

提示词

排与排之间的距离留一个库位大小，每个储位都随机颜色（绿色到红色的过度），绿色表示空库位，红色表示库位放满了。鼠标放到库位上，高亮这个库位并使用 tooltip 显示库位的容量。

颜色更换成功（需求演示，色值具体以大家喜欢或者设计稿为准）。而且鼠标放到库位上，不仅高亮了方块， Tooltip也显示库位的容量。

背景和地面优化

我们可以看出来红绿色和黑色地面太不搭了，把地面简单优化一下。

提示词

页面背景使用深蓝色渐变。并优化地面，选取一个更适合作为地面的颜色和材质，需要和整体颜色更协调且有辨识度。而且现在Tooltip的文本显示太小了，需要优化一下。

场景背景颜色进行了优化，地面加了反射、阴影，但是地面太黑了，而且Tooltip文本依然存在一些显示的小问题，我们需要通过提示词微调一下。

优化一下场景光照和地面材质，使整个场景看起来更明亮自然

Tooltip的宽度是不是不够，文本内容都竖排展示了，而且鼠标悬停库位时会有事件穿透影响，现在悬停外层库位时会出现多个Tooltip。这些都需要再优化一下。

预览一下当前效果：

多库区隔离带和过道间隔

提示词

现在每个仓库只有一个区域，优化一下：生成仓库库位数据的时候，随机生成两个或者多个库区，每个库区有自己的排列层。库位的位置每两列中间多空出来一个过道，库区请用放光的隔离带围起来，并且两个库区之间需要有 6 个位置的间隔。

发现实际效果有些出入，每排每列都会有过道间隔，我们继续优化一下。

每个库区的的库位布局中，过道间隔需要优化，现在是每排每列都有过道间隔，实际应该是每两排或每两列后有一个过道间隔，以此循环。

预览一下效果：

优化Tooltip展示内容

提示词

丰富一下库存数据，并且在 Tooltip 中展示出来：

每个库位展示以下库存数据：

商品名称

规格

数量

重量

金额

体积

库容占比

库存天数

丰富库存展示数据，这个效果还可以，我们直接看效果。

仓库统计面板

提示词

在页面右侧悬浮生成可视化图表，包含3个面板，垂直排列布局。

第1个面板：出入库统计，包含今日已出库、今日库存、今日已入库、剩余库位数4项数据

第2个面板：使用折线图展示实时仓储剩余情况

第3个面板：使用折线图展示今日已出库、今日已入库2项数据

我们可以看到Trae AI使用单独的组件实现了右侧数据统计面板，但是引入报错了，反馈让它自己检查一下。

现在出现报错啦 Uncaught ReferenceError: StatsPanel is not defined

预览一下效果，有点简陋，但是该有的都有：

丰富统计面板

提示词

在页面左侧悬浮生成3个可视化统计图表，垂直排列布局。

第1个面板的标题：仓库使用情况。使用环形饼图展示仓库库位占用百分比，同时在环形图右侧展示三项数据：库位总数、使用库位数、剩余库位数

第2个面板的标题：仓区状态。使用多数值柱状图展示最近一个月，每日不同库区的库位占用数量，数据过多时可用鼠标拖动展示

第3个面板的标题：仓库状态。使用柱状图展示最近一个月，每日仓库的库位占用数量，数据过多时可用鼠标拖动展示

把右侧的统计面板拆分为三部分，对应展示标题：出入库统计、实时仓储剩余情况、今日出入库统计。优化左右两侧的可视化图表样式，尽可能酷炫一些，也可以对页面背景、地面进行调整

提示词太长的时候，效果就可能会比较随机，因此我们可能需要根据实际情况多调整几次。

多仓库切换和控制面板

接下来假设我们有多个仓库，增加一个仓库切换功能。

提示词

增加一个仓库控制面板，包含仓库切换和可视化属性切换功能

使用下拉框实现5个仓库切换的功能，每个仓库有不同的库区和库位数，点选仓库选项可以切换并刷新可视化的库存场景

使用SelectButton实现可视化属性切换功能，显示数量、重量、体积、价值、容量、库存天数等，点选按钮时库位颜色随之对应变化

仓库切换和属性切换功能水平布局

控制面板悬浮位于屏幕中间上方，使用圆角、阴影、不透明度背景等元素，样式炫酷一点

重新执行生成的代码，可以看到效果：

生成的代码效果可能不是我们想要的，就需要多调整几次。现在下拉选择仓库选项时库位显示和统计图表都会跟随实时更新，切换可视化属性时库位显示颜色也会变化。（嗯，库区库位数据和切换仓库展示的还是不一样的）

这个时候，我们已经算是实现了基本的功能。剩下的就是最难的根据设计稿优化细节样式啦。

多模态

多模态在编码工具中的实现，只要是对图片的识别处理。

我们先随便去网上找一个大屏效果图（需要不大于5M），扔给Trae AI，让它参照优化一下。

提示词

参考设计图中的配色和布局，对我们整个页面进行优化，可以移除地面

实际上经过多轮磨合，效果并不明显。

大家感兴趣的话，可以自己尝试着继续和它对话让它干下去。

写在最后

在AI大模型每次出现大突破新闻时，大家都热衷于使用AI实现各种需求，包括启发我实现这个3D可视化大屏的推文，然后绕不开的就是程序员要失业的话题。

程序员会不会失业呢？当然会，而且一直在进行中，但是AI的发展只会是部分原因。新技术的发展总会改变工种，有失业同样也会带了新的职业变化，我们也只能拥抱变化。

现在大家都对AI写代码很感兴趣，相信在不远的将来大家也会参与AI写代码的这个过程。如同我今天用Trae AI零代码从零实现的这个3D可视化大屏一般，AI编辑器会让这一步更快地成为现实，毕竟谁不向往自己成为一个AI程序员呢？

抖音小程序跳转到其他小程序的能力接入

Fri, 03 Jan 2025 19:00:00 GMT

写在前面

实践开发环境：依然是基于uniapp+Vue2进行开发，编译到抖音小程序。

能力说明

抖音小程序刚上线时，属于【试运营期】，只可以使用平台提供的基础能力。只有通过【试运营期】后进入【运营期】正式上线的小程序才可以直接使用【跳转小程序】等能力，详情可查看开发者文档小程序「试运营期」能力说明。

这个能跳转到其他抖音小程序的能力，关联的接口包含tt.navigateToMiniProgram及tt.navigateBackMiniProgram。

开发实录

首页呢，我们要先看看tt.navigateToMiniProgram的接口文档，尤其要注意使用限制和注意事项。

配置`navigateToMiniProgramAppIdList`属性

使用限制：该方法需要预先在 app.json 中配置 navigateToMiniProgramAppIdList 属性。每个小程序可跳转的其他小程序数量限制为不超过10个。

在uniapp的开发中，我们需要在manifest.json的源码视图模式下的mp-toutiao对象下添加navigateToMiniProgramAppIdList属性，值的形式是小程序appid的字符串数组。示例如下：

{
    "mp-toutiao" : {
        "usingComponents" : true,
        "appid": "ttdf123456",
        "setting" : {
            "es6" : true,
            "postcss" : true,
            "minified" : false,
            "urlCheck" : true
        },
        "navigateToMiniProgramAppIdList": ["ttappid01", "ttappid02"]
    }
}

用户主动点击触发的事件回调中使用`navigateToMiniProgram`

注意事项：跳转需要由用户点击触发，只能在 bindtap 的事件回调中同步使用该 api，并且会弹窗询问是否允许跳转。

注意，使用uniapp开发时，就是在click事件的点击回调中直接使用该API。

template标签中使用示例如下：

<!-- #ifdef MP-TOUTIAO -->
<view class="ucenter-item" @click="handleJumpMp('mini')">
    <text class="text">魔法故事会</text>
    <text class="right"></text>
</view>
<!-- #endif -->

事件定义示例如下：

handleJumpMp(f) {
    if(f === 'mini') {
        uni.navigateToMiniProgram({
            appId: "ttappid01",
            path: "pages/index/index?say=hello",
            success: (res) => {
                console.log('success', res)
            },
            fail: (res) => {
                console.log('fail', res)
            }
        })
    }
}

错误示例：在原始代码中，click点击事件触发时先判断了网络状态，然后再使用该API。

错误事件示例如下：

handleJumpMp(f) {
    uni.getNetworkType().then(({
        networkType
    }) => {
        if (networkType == "none") {
            $uniApi.showToast("网络异常，请检查网络");
            return;
        }
        if(f === 'mini') {
            uni.navigateToMiniProgram({
                appId: "ttappid01",
                path: "pages/index/index?say=hello",
                success: (res) => {
                    console.log('success', res)
                },
                fail: (res) => {
                    console.log('fail', res)
                }
            })
        }
    }) 
}

实践效果

点击按钮，弹窗提示跳转，然后允许后跳转到对应的小程序。

常见问题

1、错误代码{errMsg: "navigateToMiniProgram:fail must be invoked by user tap gesture", errNo: 21500}

原因：没有在用户点击事件的回调中直接调用navigateToMiniProgramAPI接口，可参考上述错误示例。

2、错误代码{errMsg: "navigateToMiniProgram:fail platform auth deny", errNo: 10101}

原因：先参考错误码：开发者错误,没有申请appid的权限。请查看能力对应文档，申请对应的能力白名单部分，发现是没有对应的能力权限，检查当前运行的小程序是否已经处于【正式运营期】。

uniCloud新建云对象上传部署报错：Trying to get property 'id' of non-object

Fri, 27 Dec 2024 19:00:00 GMT

使用uni-app开发App时，官方提供的用户/支付体系的便捷插件越来越离不开sass服务uniCloud的结合。比如像uni-id-pages是接入可以满足你大部分使用的用户注册及登录服务。

这时候，如果还想和自有的服务端做一些业务交互，就需要加一些自定义逻辑，但是为了避免在更新官方模块插件时被覆盖掉，我们就需要把自定义逻辑拆分成独立的云函数/云对象上传部署。

云对象的基础文件结构包含index.obj.js和package.json,根据官方指引创建完后，再参照公共云对象uni-pay-co丰富完善下，此时的package.json大致内容如下：

{
  "name": "we-server",
  "dependencies": {
    "uni-id-common": "file:../../../uni_modules/uni-id-common/uniCloud/cloudfunctions/common/uni-id-common"
  },
  "extensions": {},
  "cloudfunction-config": {
    "concurrency": 1,
    "memorySize": 512,
    "path": "\/we-server",
    "timeout": 60,
    "triggers": [],
    "runtime": "Nodejs18"
  },
  "origin-plugin-dev-name": "we-server",
  "origin-plugin-version": "0.0.1",
  "plugin-dev-name": "we-server",
  "plugin-version": "0.0.1"
}

`package.json`的解读

name

name最简单，就是函数/云对象名称，因为云对象也是云函数，除非特殊说明我们下面就使用云函数来代称。我们在客户端需要用name来调用这个云函数。

const weServer = uniCloud.importObject('we-server')

dependencies

dependencies就是云函数依赖的公共模块，比如我需要用到uni-id的uid/token信息，我就在这里写入了依赖uni-id-common。

extensions

extensions是云函数依赖的扩展库，比如我需要用到短信服务或者一键登录，就需要在这里写入依赖。

cloudfunction-config

cloudfunction-config是云函数的配置信息，就是期望云函数在怎样的服务器环境下运行。其中的path就是把云函数URL化的路由，便于外部服务以API形式调用云函数。triggers则是定时任务设置的定时触发器。

其他

origin-plugin-dev-name、origin-plugin-version、plugin-dev-name、plugin-version这几项是干嘛的，还真不知道，只看是插件名称/版本号之类的，先放着吧。

问题出现

噌噌噌的，废了九牛二虎之力终于把逻辑写完了，本地云函数运行两边，很完美的经过多次调试后和服务端交互成功。那咱就把云函数上传部署了吧，毕竟大周五的。

问题就出现了。。。

上传失败：Trying to get property 'id' of non-object

是we-server这个名字不允许使用么？不是，复制改名后错误依然不变。

是代码逻辑有问题么？也不是，毕竟本地运行很成功。

怎么办？新建一个空白云函数，把怀疑报错的逻辑一块块搬运过去后尝试上传部署，看看是哪块的问题。

运气不错，package.json平移过去之后就报错了，移除【解读】中【其他】的那4个参数，就可以成功上传部署了。正确的内容如下：

{
  "name": "we-server",
  "dependencies": {
    "uni-id-common": "file:../../../uni_modules/uni-id-common/uniCloud/cloudfunctions/common/uni-id-common"
  },
  "extensions": {},
  "cloudfunction-config": {
    "concurrency": 1,
    "memorySize": 512,
    "path": "\/we-server",
    "timeout": 60,
    "triggers": [],
    "runtime": "Nodejs18"
  }
}

由于origin-plugin-dev-name、origin-plugin-version、plugin-dev-name、plugin-version这几个参数也没在官方文档中搜索到（也可能是我漏掉了），结合uni-pay猜测下，这几项应该是云函数和uni_modules依赖的关联映射。但是我自定义云函数没有这部分依赖，所以就报错了。

写在最后

在写一些不太熟悉的东西时，还是不要尝试没弄懂的属性。

当化妆和美颜成为一种必要的时尚

Thu, 12 Dec 2024 19:00:00 GMT

无论是化妆和美颜，还是素颜和直拍，都可能成为不同时代的时尚选择。这个标题确实不知道对不对，但是实在不确定对应面是不是素颜和直拍。

一个无厘头的想法

时尚运动过后，化妆和美颜才是真实的个人形象。

某某年的创意公司的创意方案中需要一张无美颜的真人素颜照片，但是搜遍网络都找不到一张。

创意总监一看这问题大条了，以往公司只出现过创意匮乏的情况，从没出现过素材匮乏的情况。立马向上汇报，组织公司高管会议进行头脑风暴。

会议决定以升职加薪的条件来寻求公司内部员工拍摄符合素颜要求的照片，员工不为所动，甚至有员工表示：“升职加薪这种短视的利益就想要我以后无法做人？太缺德了”。

最终，只能重新进行匮乏的创意创作。

一个更无厘头的想法

每天化妆太麻烦了，出门前往身上一套，省时又省事。

某某年的课堂上，历史老师给同学们展示电子教案，上面是一个多年前的素颜游客照片。

学生发出不可思议地惊叹：“My God！他怎么敢这样？为什么不穿好衣服？而且还在公共景点这么自信的拍照片？”

是的，化妆可能进化为外套一样的存在，必要的出门仪表。

简单点

化妆和美颜是为了开心，素颜也是为了开心。所以在追寻时尚的路上只要能让我们开心，或者是保持轻松，怎么做都是好的。

简单点，自己开心最重要。

uni-app(Vue2)编译为抖音小程序时，自动生成package.json文件配置行业SDK权限

Thu, 26 Sep 2024 16:40:00 GMT

截至目前，抖音小程序一共提供了四套交易系统，根据行业类别不用需要接入对应的行业解决方案。其中工具/内容消费行业是使用新版本【通用交易系统】支付能力的tt.requestOrder代替了旧版本【担保交易】支付能力的tt.pay，表现形式上就是直接唤起聚合支付宝/微信/抖音支付的原生收银台。

但由于【通用交易系统】属于行业开放能力，除了正常的开发实现，接入的时候需要新增一个行业SDK权限配置。

如果没有配置行业SDK权限，或者配置不正确，会有什么样的表现呢？

行业权限异常的丑态

如果你打开抖音后，直接进入你的小程序，不管是刷十分钟还是直接唤起收银台支付，大概率是支付失败，无法唤起的。
如果你打开抖音后，刷10秒左右的视频或者先打开一个其他的小程序，之后再进入你的小程序，这时候大概率可以成功唤起收银台进行正常支付。

错误码示例

错误码示例格式如下：

{
    "errMsg": "pay:fail Fail to get order info, 支付失败，请稍后重试 2010",
    "errNo": 10401,
    "errorCode": 10003,
    "errorType": "D"
}

问题剖析

非官方说明：如果你的小程序正确配置行业SDK权限，在你的小程序加载时，抖音会默认预加载对应的行业SDK，这样你无论何时唤起收银台，SDK都是可以正常使用的。但是如果没有正确配置，就需要看缘分啦，这个时候能不能唤起收银台就是个概率问题。

那么应该如何正确配置行业SDK权限呢？

配置行业SDK权限

官方文档中描述，在package.json文件正确配置后，上传完成即可。实际测试中，上传完成后并提审当前版本，无需通过审核（可撤销审核）即可更新线上小程序的行业SDK加载权限。

详情可查看官方文档：配置行业 SDK 的权限

抖音小程序原生开发

1、只需要在package.json文件中新增"industrySDK": true。

2、第一次配置保存后，重启IDE。

3、编译代码并上传。无须通过审核，线上小程序即可更新行业SDK加载权限。

uniapp/taro等三方框架开发

1、在HbuilderX/Cli命令中进行发行编译。

2、在抖音开发者工具中打开混合编译后的产出代码（也就是我们日常要进行的上传操作的前置步骤）。

3、退出工具的Lite模式，打开编辑器面板，在根目录新建package.json文件。

4、在package.json文件中加入"industrySDK": true。

{
  "industrySDK": true
}

5、为了保险起见，我们遵循官方说明，保存并重启IDE。

6、上传代码，并去开发者中心控制台提交审核。顺利的话，几分钟后线上小程序的行业SDK权限就配置成功了。

7、这个代码提审版本审核要不要撤销，完全就取决于你自己的实际情况啦。

那么，我们是如何查看是否成功配置行业SDK权限了呢？我们可以根据官方文档自查。

查看行业SDK权限是否配置成功

1、在Android手机上打开你的抖音小程序，点击右上角的【…】按钮。

2、在打开的半屏弹窗中，点击你的小程序名称【爱情的纹理】，进入到【关于】界面。

3、在【关于】界面连续点击10次小程序icon图标下方的小程序名称。

4、不要管连续点了10次还是20次，知道在底部的空白区域出现了一些小程序相关信息。其中只要包含了industrySdkVersion字段，就代表配置成功了。

uniapp发行编译自动生成`package.json`文件

我们在uni-app(Vue2)自定义条件编译平台，动态配置修改小程序appid的文章中为了动态修改发行的小程序appid，已经修改了vue.config.js文件。那么这次呢，我们继续是在这个配置文件里面添加自动生成package.json的逻辑。

module.export = {
    chainWebpack: config => {},
    configureWebpack: {
        plugins: [{
            apply: (compiler) => {
                compiler.hooks.done.tap('GeneratePackageJson', (stats) => {
                    if (process.env.UNI_PLATFORM === 'mp-toutiao') {
                        const outputPath = stats.compilation.outputOptions.path;
                        const packageJsonPath = path.join(outputPath, 'package.json');
                        const packageJsonContent = JSON.stringify({
                            industrySDK: true
                        }, null, 2);
 
                        fs.writeFileSync(packageJsonPath, packageJsonContent);
                        console.log('Generated package.json for Douyin Mini Program');
                    }
                });
            }
        }]
    }
}

补充说明：在非严谨的官方社区问答中，看到有"industrySDK": true只需要配置上传一次即可的说明。但是不确定是否如此，因此每次编译uniapp代码发行生成抖音小程序代码包后都自动生成了package.json文件。

uniapp项目环境

HBuilderX: 4.15

Vue版本: 2.x

已实现平台: 微信小程序/抖音小程序/快手小程序

写在最后

相关文章: uni-app(Vue2)自定义条件编译平台，动态配置修改小程序appid

参考文档: 通用交易系统接入问题汇总

参考文档: 配置行业 SDK 的权限

往事随风：外婆的二十周年纪念

Mon, 22 Jul 2024 14:10:00 GMT

要说人生有多长？45分钟的一堂课漫长如一辈子。

要说人生有多短？近20年时光流逝仿佛就是一瞬间。

风雨不相忘

老家的风俗中，如果配偶健在，在人逝去的第9个年头就当作十周年纪念，同样在第19个年头就当作二十周年纪念。

半月前接到妈妈的电话，我也不确定自己是否能回去，在接下去的一周老家开始第二轮持续降雨了。考虑了很久，我最终在初八买了车票，然而初九就下了一场需要救援队的大暴雨，因此直到初十上午我准备出发时妈妈还在问我要不把票退了。看了看天气预报，我回去的时间恰好应该是雨最小的两个半天，我决定相信预报，就依然按照原计划回老家。

在回去的高铁上，我一直在刷直播间看市区被淹的情况，网约车群里面在说去不了高铁站，司机让大家坐公交车转到市区再说。快中午的时候，租车服务小哥也打电话说有上午租车的客户几个小时了还没出高铁站，问我还有没有其他出行方案，不建议租车。我确实也没有其他方案，我只能赌这半天儿的时间淹没道路的水位变低一些，实在不行到时候就只能重新买票原路返回。

幸运的是，高铁站附近的高速口在下午解封了。跟随路牌指引在停车场取了车，穿过红绿灯全部瘫痪的站外道路，小心翼翼地避过积水路段上横七竖八趴窝的车，终于上了高速。

这种极端天气，再加上远离法定假期，高速上车还算少，总算在水花和半挂车的夹道欢迎中平稳到家。简单修整修整去看望了外公，一块儿吃了个简单的晚饭。

晚上躺在床上，听着外面停不下来的雨声，往常顶好的白噪音如今反而让人不能安然入眠。

往事随风

2005年的农历六月处于多雨的季节，当时还在上初中的我还能享受一个漫长的暑假，就和妈妈一起待在猪厂里。那也是一个手机还不便宜的年代，大部分人都用不上手机。初十晚上，外婆病危再次住进了县人民医院，舅舅给有点远亲关系的一个厂领导打了好几个电话，厂领导才冒着大雨去通知我和妈妈。因为连日大雨淹没了去县城的大桥，从凌晨到天亮，开着三轮车的姑父冒着大雨绕了好远的路才把我和妈妈送到了医院。

那一场暴雨，让妈妈没能见到外婆最后一面，就如同那场阴雨一直没停过，一直在她心里下个不停。

为了纪念的相聚

19年时间就这么过去了，他们兄弟姐妹几个也不复年轻了，我们这一辈儿的兄弟姐妹们也都很难从家庭和工作中脱身。刚好这个时间我也能请下假来，我觉得我应该陪着，即使可能会造成一些负面影响，但是这事儿我向来也不在意。

农历十一这一天淅淅沥沥下到了八九点钟，好在短暂放晴了几个小时。快十一点的时候，我们相聚在这个好多年没聚在一起的地方，这其中还有没见过外婆的妹妹和侄儿们。

奈何经过持续多天的雨水洗礼，哪怕是碎砖沙石垫过的路面依然无法过车。我们光着脚拿着砍刀，抱着贡品深一脚浅一脚的走过泥泞，穿过玉米地，到了坟前。我们用砍刀清理了坟上一人多高的杂草和野生灌木，摆上贡品，唠一唠只有在这里才能诉说的思念。

我只是磕了三个头，什么也没说，只是不知道是不是被炮仗的烟气迷了眼。

平凡的一天

生命是不可预估的，生活是值得珍惜的。困苦是本色，温暖是真我。

从儿女上不起学吃不上纯面馍馍走过来，外婆的大部分时光是清贫为主色的，但是遇到过她的大部分人留下的都是温暖的回忆。

20年的时间足够一辈人长大，也足够一代人遗忘。或许在念想中是该让逝去的人为自己重新活一次，也或许是该让有念想的人放下负担为自己而活。

痛苦和爱的一个个瞬间，组成了平凡的一天。

uni-app(Vue2)自定义条件编译平台，动态配置修改小程序appid

Sun, 07 Jul 2024 19:00:00 GMT

小程序通过前几年的井喷式爆发，通过技术服务更新快和业务结合能力已经把快应用甩在了身后，包括不限于微信/抖音/支付宝/百度/QQ/快手/京东/360这些流量头部IP都在自己的App架构上搞起了小程序。虽说小程序已经比较泛滥，而且小程序的比重大多不如小游戏，但是小程序依然是大部分中小型企业快速验证自己在国内业务的最优选择之一。

uniapp在服务开发者方面，既能提供快速跨端能力，又能让开发者采用易入门的Vuejs语法，成为大部分小型开发团队的首选。

自定义条件编译

前段时间产品经理想要快速上线一个抖音小程序，就从兄弟公司借来了一套代码。后来又想要快速上线对应的微信小程序，幸好代码中通过package.json中的自定义条件编译已经预留了不同环境变量的配置环境配置，足以满足不同自定义平台环境下的需求。

项目环境

HBuilderX: 4.15

Vue版本: 2.x

已实现平台: 微信小程序/抖音小程序/快手小程序

uniapp文档中的实现

uniapp文档中关于实现自定义条件编译平台的一些事

简单说一下自定义条件编译的要点

{
    /**
     * package.json其它原有配置 
     * 拷贝代码后请去掉注释！
     */
    "uni-app": {// 扩展配置
        "scripts": {
            "mp-dingtalk": { // custom-platform，自定义编译平台配置，可通过cli方式调用
                "title":"钉钉小程序", // 自定义扩展名称，在HBuilderX中会显示在 运行/发行 菜单中
                "browser":"",  //运行到的目标浏览器，仅当UNI_PLATFORM为h5时有效
                "env": { //环境变量
                    "UNI_PLATFORM": "mp-alipay",  //基准平台
                    "MY_TEST": "", // ... 其他自定义环境变量
                 },
                "define": { //自定义条件编译
                    "MP-DINGTALK": true //自定义条件编译常量，建议为大写
                }
            }
        }    
    }
}

其实官方这段代码在注释中已经解释的比较清楚了，但是我在最初看到时确实还是有一点点不理解，比如define下的自定义条件编译常量有什么用呢？我们来看看。

先看看官方的注意事项：

UNI_PLATFORM仅支持填写uni-app默认支持的基准平台，目前仅限如下枚举值：h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qq
browser 仅在UNI_PLATFORM为h5时有效,目前仅限如下枚举值：chrome、firefox、ie、edge、safari、hbuilderx
package.json文件中不允许出现注释，否则扩展配置无效
vue-cli需更新到最新版，HBuilderX需升级到2.1.6+版本

补充说明一下：

UNI_PLATFORM也就是支持有正妻名分的基准平台，比如mp-alipay，后来拓展出来的侧室像钉钉小程序的mp-dingtalk是不在此列的，但是你要想偷偷给钉钉小程序不一样的待遇，就需要新增自定义条件编译平台，但是UNI_PLATFORM这里要归在mp-alipay门下。
define下的编译常量才是你另眼相待钉钉小程序的地方，在这里设置{ "MP-DINGTALK": true }以后，你就可以在代码的任意地方使用钉钉小程序特有的条件编译了。

如同官方这个示例：

// #ifdef MP
小程序平台通用代码（含钉钉）
// #endif
// #ifdef MP-ALIPAY
支付宝平台通用代码（含钉钉）
// #endif
// #ifdef MP-DINGTALK
钉钉平台特有代码
// #endif

但是作为自定义编译常量，你是可以随意命名的，并非固定为MP-DINGTALK,你起名为亲爱的honey来代表钉钉小程序平台也行，只要你想，只要你愿意。就像下面这样：

// package.json
{
    "scripts": {
        "honey": {
            "title": "钉钉小程序",
            "env": {
                "UNI_PLATFORM": "mp-alipay",
                "NAME": "dingtalk"
            },
            "define": {
                "HONEY": true
            }
        }
    }
}

代码中进行条件编译判断的时候：

// #ifdef HONEY
钉钉平台特有代码
// #endif

然后,你通过HbuilderX的运行或者发行/自定义发行菜单选择钉钉小程序进行编译时，你新增的自定义条件编译就会生效啦。

需求的自我实现

研究完官方文档，我们就可以在package.json中给测试环境和正式环境配置不同的变量，足以满足真实的多个环境区分调用。

多说一点，我们也可以通过条件编译来加载不同的代码逻辑，比如在微信小程序中小说类目需要使用官方的阅读器插件，如果糅合在一个项目中，相关代码放在MP-WEIXIN编译判断中是比较合理的。

通常这个时候，产品经理想要的我们都能满足了。但是现在，产品经理还想要更多，要同一套代码上线不止一个的微信小程序。

条件编译动态配置appid

通常的uniapp项目是在manifest.json中配置小程序的appid的，但是一个项目常理上是对应一个微信小程序的，默认也就可以配置一个。

那我能怎么办呢？简单粗暴的方法，就是把manifest.json复制成manifest-plana.json和manifest-planb.json，编译哪个小程序的时候就使用哪个替换掉manifest.json。

如果想要简单优雅点实现呢，我们就要研究一下如何动态修改manifest.json中的appid配置。搜索到uni-app自定义多环境配置，动态修改appid这个参考方案，但是作者是在uniapp+Vue3项目中使用vite.config.js来实现的。

由于我这个项目是Vue2版本，为了配置这个切换成Vue3可能会踩一些莫名的坑，时间紧迫不划算（~~也来不及测试~~），那就需要研究一下怎么在vue.config.js中实现配置逻辑。

多编译环境配置

配置多环境变量，是为了在vue.config.js中配合自定义编译平台修改appid，那我们就把一些代码中能用到的的配置参数从自定义条件编译中挪出去。

创建env配置文件

env文件的变量是需要和package.json中自定义编译条件进行联动的，因此请允许在这里再回顾一下自定义编译条件的示例配置：

{
    "uni-app": {
        "scripts": {
            "ceshi": {
                "title": "测试环境",
                "env": {
                    "UNI_PLATFORM": "mp-toutiao",
                    "NAME": "ceshi"
                }
            },
            "prod": {
                "title": "生产环境",
                "env": {
                    "UNI_PLATFORM": "mp-toutiao",
                    "NAME": "prod"
                }
            }
        }
    }
}

为了后续的调用一致性，package.json中自定义编译平台的变量名最好和其下的env.NAME保持一致。

我们原本在项目的helper目录放置了一些配置文件/工具函数，那就在这里创建一个env.js文件，放置需要配置的appid等自定义变量。示例代码如下：

const baseUrl = 'https://imwarn.com'
const platIds = {
    wechat: 1,
    toutiao: 2,
    kuaishou: 3
}
const ceshi = {
    baseUrl,
    appid: '',
    appName: '测试',
    packageName: 'com.imwarn.ceshi',
    platId: platIds.toutiao
}
const prod = {
    baseUrl,
    appid: '',
    appName: '爱情的纹理',
    packageName: 'com.imwarn.prod',
    platId: platIds.toutiao
}
 
module.exports = {
    ceshi,
    prod
}

我们在env.js中定义导出的ceshi等变量需要和package.json中自定义编译配置定义的NAME保持一致，以便于后续通过对象方式直接取值。

我们现在就可以在项目中通过引入env.js文件来使用对应的配置变量了，简单使用方式如下：

import ENV_CONFIG from '@/helper/env.js'
console.log(ENV_CONFIG[process.env.NAME].packageName)

此时通过【运行】菜单运行【测试环境】编译完成后，会在引用的页面打印出com.imwarn.ceshi。

当然这种每使用一次就需要引用一次的方式不够友好，而且我们还要动态修改manifest.json中的appid变量，我们就需要用到vue.config.js配置文件了。

默认vue.config.js文件在uniapp项目中是不存在的，因此我们先在项目根目录新建这个js文件。

创建config文件

我们创建vue.config.js文件后，先把env.js导出的内容挂载到环境变量上，这样就等同于全局引用，后续在任意位置都可以直接使用了。相关代码如下：

// vue.config.js
const ENV_CONFIG = require('./helper/env.js');
 
module.exports = {
    chainWebpack: config => {
        config.plugin('define').tap(args => {
            args[0]['process.env'].config = JSON.stringify(ENV_CONFIG)
            return args
        })
    },
};

在我们通过自定义编译条件平台运行编译项目时，定义在自定义条件中env下的变量都会被自动合并挂载到process.env变量中，因此我们可以在这种情况下使用process.env.NAME获取定义的值为ceshi。

此时我们在process.env下定义了一个全局变量config，通过全局变量process.env.config可以获取到env.js默认导出的所有变量，那我们要拿到当前自定义编译平台对应的变量就是水到渠成的事情了。

// 获取ceshi这个对象变量
const ceshi = process.env.config[process.env.NAME]
 
// 获取其中定义的API域名URI
const apiBaseURL = ceshi.baseUrl

动态修改appid

Vue项目进行编译构建时，我们可以通过node的一些API来对文件进行操作。我们在此处也可以借用node对文件的操作API，根据当前运行/发行的自定义平台获取到appid，再对manifest.json的文件内容进行读取、遍历、匹配修改、写入保存，就实现了我们的小目标（~~不是一个亿的那种~~）。

uniapp有提供发布时动态修改manifest.json的示例代码片段，再结合参考方案，我们这部分的代码实现如下：

const fs = require('fs');
const path = require('path');
 
// 读取 manifest.json ，修改后重新写入
const manifestPath = path.resolve(__dirname, 'manifest.json');
let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' });
 
function replaceManifest(path, value) {
    const arr = path.split('.');
    const len = arr.length;
    const lastItem = arr[len - 1];    
    let i = 0;
    let ManifestArr = Manifest.split(/\n/);
 
    for (let index = 0; index < ManifestArr.length; index++) {
        const item = ManifestArr[index];
        if (new RegExp(`"${arr[i]}"`).test(item)) ++i;
        if (i === len) {
            const hasComma = /,/.test(item);
            ManifestArr[index] = item.replace(
                new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`),
                `"${lastItem}": ${typeof value === 'string'? '"'+value+'"' : value}${hasComma ? ',' : ''}`
            );
            break;
        }
    }
    Manifest = ManifestArr.join('\n');
}
 
// 具体使用，找到对应key值替换为新的值
// console.log(process.env)
const appid = ENV_CONFIG[process.env.UNI_SCRIPT].appid;
console.log('appid:', appid, process.env.VUE_APP_PLATFORM)
const replacePath = `${process.env.VUE_APP_PLATFORM}.appid`
console.log(replacePath)
replaceManifest(replacePath, appid);
 
fs.writeFileSync(manifestPath, Manifest, { flag: 'w' });

在这部分代码中，我们获取了两个参数：

process.env.VUE_APP_PLATFORM获取到当前编译所属的小程序平台，判断是微信小程序还是抖音小程序这类
ENV_CONFIG[process.env.UNI_SCRIPT].appid获取到自定义编译环境对应的appid变量，也就是我们想动态配置的主要参数

注意：参考方案中是在process.env.UNI_CUSTOM_DEFINE下面找到package.json中定义的NAME变量的，但是在实际使用中打印process.env并没有看到这个值，而是通过process.env.UNI_SCRIPT获取到了自定义编译平台的变量名，也就是package.json中uni-app.scripts.ceshi的这个ceshi，当然这样就够了，我们就能从配置文件中拿到appid啦。

不同开发版本中全局变量可能会有变化，因此大家使用的时候一定要先打印process.env来判断我们能使用哪个变量。

使用方式

1、本地调试时，通过HBuilderX菜单栏的运行菜单选择底部的自定义环境测试环境或其他环境来运行编译。通过cli命令运行示例：

npm run dev:custom ceshi

2、发布上线时，稍微有点区别，通过HBuilderX菜单栏的发行菜单底部自定义发行的生产环境等自定义环境来编译发布。通过cli命令运行示例：

npm run build:custom prod

在发行时HbuilderX会弹出【发行】弹窗，里面会展示原有manifest.json文件的appid，这点没影响的哈。因为我们只有在确认发行之后，项目才进入编译过程，进行appid变量的动态替换，然后才会进入编译构建流程。

3、在业务代码中，可以通过process.env.config[process.env.NAME]来获取env.js配置的环境变量。

写在最后

参考方案: uni-app自定义多环境配置，动态修改appid

参考文档: uni-app发布时动态修改manifest.json

参考文档: uni-app实现自定义条件编译平台

在uniapp微信小程序开发中使用官方阅读器插件

Mon, 01 Jul 2024 08:00:00 GMT

2024年6月份上架小说类目微信小程序时，发现直接被拒审，原因是必须引用官方的阅读器插件。

但是查看站内信什么的都没找到相关提示，只在小程序【设置】-【第三方设置】-【插件管理】中看到了【阅读器】插件的一个简要开发文档。

那怎么办呢？去社区搜索吧，从其他开发小伙伴的报错反馈中，找到了官方版本企业微信文档的开发指引文档，有一个简短的原生引入demo，和小说管理平台及官方阅读器插件开放的API。

uniapp中如何使用

引入第三方插件

微信小程序原生引入

{
  "plugins": {
    "novel-plugin": {
      "version": "latest",
      "provider": "wx293c4b6097a8a4d0"
    }
  }
}

对应到uniapp项目中，就是在manifest.json的mp-weixin结构下引入微信小程序特有的第三方插件。截止到目前[2024-07-01],官方的阅读器插件开放了3个自定义组件的接口，其中只有charge-dialog自定义充值区组件是稳定版本支持的，其他两个组件是dev版本支持属性。

// manifest.json
{
    // ...
    "mp-weixin" : {
        // ...
        "plugins" : {
            "novel-plugin" : {
                "version" : "latest",
                "provider" : "wx293c4b6097a8a4d0",
                "genericsImplementation" : {
                    "novel" : {
                        "charge-dialog" : "/wxcomponents/charge-dialog/index",
                        "paragraph-block" : "/wxcomponents/paragraph-block/index",
                        "full-screen" : "/wxcomponents/full-screen/index"
                    }
                }
            }
        }
    }
}

我们接下来进行自定义组件的创建。

自定义组件

uniapp项目和原生项目的区别在这里尤为明显，我在实践过程中才发现这里要满足官方插件引入的自定义组件要用原生小程序方式来开发。

也就是说： uniapp方式嵌套官方阅读器插件，微信小程序原生开发自定义组件嵌进官方阅读器组件。

在uniapp项目结构中，我们习惯于在根目录创建wxcomponents目录用来存放微信小程序专有特性的组件。

按照官方文档开放的API来看，现在可以嵌入3个自定义组件：

charge-dialog 自定义充值区，展示形式：拉起半屏最高不超过75%的高度。
paragraph-block 文中开放区域，展示形式：嵌入在正文内容之间。配合novelManager.setParagraphBlock()方法服用，可以设置组件高度以及在第几个段落前展示。
full-screen全屏开放区域，展示形式：脱离正文内容，悬浮在正文内容之上。配合novelManager.setFullScreenComponentStatus()方法服用,可以设置全屏组件的显示状态。

由于后两个组件还在dev阶段，需求没那么强烈，就先实现稳定版本的charge-dialog充值组件。

创建charge-dialog组件，先来复习一下微信小程序的原生开发要包含.js/.json/.wxml/.wxss四大金刚文件，简单的对应关系是：

index.js对应uniapp的script中基础变量/生命周期和函数方法的定义
index.json对应uniapp的components中组件引入的声明
index.wxml对应uniapp的template中DOM元素的定义
index.wxss对应uniapp的css中布局样式的定义

主要逻辑

1、插件声明

在/wxcomponents/charge-dialog/index.js中引入配置中声明的novel-plugin，进行全局的交互。

const novelPlugin = requirePlugin("novel-plugin");
let novelManager = null;
 
Component({});

2、props参数的接收

根据官方文档说明，自定义组件可以接收到父组件传递的4个properties参数，novelManagerId是novelManager的句柄ID，bookId是MP小说管理平台的书籍ID，chapterId是MP小说管理平台生成的章节ID，chapterIndex是从0[第一章]开始的章节索引下标。

 
Component({
    properties: {
        novelManagerId: {
            type: Number,
            value: -1
        },
        bookId: {
            type: String,
            value: ''
        },
        chapterIndex: {
            type: Number,
            value: -1
        },
        chapterId: {
            type: String,
            value: ''
        },
    }
})

3、novelManager的监听和主逻辑处理

微信小程序的一些原生概念：

observers是数据监听器，相当于watch来监听数据的变化。
lifetimes定义组件的生命周期。
attached()生命周期方法，是在组件实例进入页面节点树时执行，基本等同于mounted()的节点。

在这里，我使用observers监听了novelManagerId值的变化，更新novelManager管理器，然后在attached()中使用emitCustomEvent和onCustomEvent进行自定义事件的触发监听来获取充值商品列表并赋值到变量。

Component({
 
    lifetimes: {
        attached() {
            novelManager.emitCustomEvent('event', { action: 'charge' });
            novelManager.onCustomEvent('productList', params => {
                this.setData({
                    productList: params.productList
                })
            });
        }
    },
    observers: {
        'novelManagerId': function(id) {
            novelManager = novelPlugin.getNovelManager(id);
        }
    }
})

4、其他API方法的调用

同样的，我们也可以在methods中调用novelManager的其他一些API方法。

比如可以通过novelManager.getCustomServerParams()方法查询到我们自己在其他页面组件中设置的透传给服务端的自定义内容，可以在充值完成后调用novelManager.paymentCompleted()方法来通知官方插件付费成功。

为什么需要在自定义组件中写一堆自定义事件呢？这些事件又是在哪里使用呢？

原生实现的我不太清楚，但是我目前手上这个项目，牵扯到服务端API的加密请求/数据存取都通过uniapp封装实现了，因此我如果不想再使用微信原生实现一遍的话，就需要emit去触发uniapp实现的方法。

这，就又回到了官方文档所述的插件接入的初始化流程。

`App.vue`初始化接入

微信小程序原生实现的话，初始化就在app.js中，具体可查阅官方文档。uniapp的实现呢，就是在App.vue中。

1、判断环境，引入配置文件中声明的阅读器插件。

// #ifdef MP-WEIXIN
const novelPlugin = requirePlugin("novel-plugin");
// #endif

2、在methods中定义阅读器插件加载的方法onNovelPluginLoad。

onNovelPluginLoad方法接收阅读插件传入的值，然后在方法内部定义对插件的初始化赋值及更新操作。

methods: {
    onNovelPluginLoad(data) {
        // 获取novelManager实例
        const novelManager = novelPlugin.getNovelManager(data.id)
 
        // 设置用户关闭插件/小说详情页点击返回键后的跳转路径
        novelManager.setClosePluginInfo({
            mode: 'switchTab',
            url: '/pages/index/index'
        })
 
        // 监听用户点击添加/移除书架的事件并更新状态,如果记得处理服务端书架操作状态
        novelManager.onClickBookshelf((params) => {
            novelManager.setBookshelfStatus({
                bookshelfStatus: status,
            })
        })
 
        // 监听自定义事件，将服务端返回的数据通过emit交互回自定义子组件
        novelManager.onCustomEvent('event', async (params) => {
            const productList = await $novel.getChargeProduct()
            novelManager.emitCustomEvent('productList', {
                productList
            });
        })
    }
}

3、在应用启动监听函数onLaunch()中订阅小程序初始化成功的事件

onLaunch(){
    // #ifdef MP-WEIXIN
    // 订阅小程序初始化成功的事件
    novelPlugin.onPageLoad(this.onNovelPluginLoad)
    // #endif
}

在页面中跳转使用插件

uniapp的官方说明

这里可以参考下uniapp小程序专题的使用小程序插件教程。

在页面内使用插件内包含的组件需要在pages.json内对应页面的style节点下配置对应平台的usingComponents或usingSwanComponents[百度智能小程序字段]，示例如下：

以"hello-component": "plugin://myPlugin/hello-component"为例，key（冒号前的hello-component）为在页面内使用的组件名称。

value分为三段，plugin为协议（在百度小程序内为dynamicLib），myPlugin为插件名称即引入插件时的名称，hello-component为插件暴露的组件名称

// pages.json微信小程序
{
  "path": "pages/index/index",
  "style": {
    "mp-weixin": {
      "usingComponents": {
        "hello-component": "plugin://myPlugin/hello-component"
      }
    }
  }
}

在页面中使用配置的插件：

// <!-- 微信小程序和支付宝小程序 -->
<navigator url="plugin://myPlugin/hello-component">
  Go to pages/hello-page!
</navigator>

但是请注意，这里说的是要在页面中使用插件，但是我们是跳转到插件页面，不是在页面中使用。

阅读器插件的官方文档

官方文档中关于跳转插件页的示例如下：

wx.redirectTo({
    url: "plugin-private://wx293c4b6097a8a4dQ/pages/novel/index?bookId=xxx"
});

所以我们应该怎么做呢？

实现探索

在pages.json中需要使用阅读器插件的页面中声明我们要嵌进阅读器插件的自定义组件
在页面中进行插件的路由跳转

示例如下：

假设我们需要在pages/novel/novel页面中跳转去插件页面，就先在pages.json的对应path配置声明自定义组件路径，然后在pages/novel/novel页面中跳转。

// pages.json声明
{
    "pages": [{
        "path": "pages/novel/novel",
        "style": {
            "navigationBarTitleText": "",
            "mp-weixin": {
                "usingComponents": {
                    "charge-dialog": "/wxcomponents/charge-dialog/index",
                    "paragraph-block": "/wxcomponents/paragraph-block/index",
                    "full-screen": "/wxcomponents/full-screen/index"
                }
            }
        }
    }]
}

pages/novel/novel.vue页面的<script>模块中跳转的不完整示例如下。

export default{
    methods: {
        toNovelDetail() {
            const customServerParams = '123';
            const { bookId, chapterIndex } = this;
            const url = `plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=${bookId}&chapterIndex=${chapterIndex}&blockUnpaidScroll=1&customServerParams=${customServerParams}`
            
            uni.redirectTo({
                url
            })
 
        }
    }
}

好啦，现在你已经可以继续快乐的玩耍了，慢着！常见问题还是要说一下的。

常见问题

1、按照上述流程，接入阅读器插件后为什么跳转就是空白页？

神说：看文档需要看完整的。

消息推送虽然放在了文档最后，但整个阅读器的主要流程都要靠它。阅读器插件每次打开小说的时候，都会通过消息推送去和我们的服务端进行交互，询问章节的解锁状态，如果服务端不回复，那整个插件就罢工啦。

2、短篇小说只有2个章节，章节付费状态的数组要怎么设置？

首先要记住，章节索引是从0开始的。

其次，如果每次返回的是一个章节的状态，StartChapterIndex和EndChapterIndex设置成一样的就行。

3、消息推送选用了【安全模式】加密，回包一直不正确？

这里稍微有点坑，官方文档没有标明，回包数据是明文模式的。

也就是说，加密模式只决定开发者服务器【我们】接收到微信推送消息的模式，但是【我们】回包给微信时是采用的明文模式。

{
    "ErrCode": 0,
    "ErrMsg": "",
    "ChapterPerms": [
        {
            "StartChapterIndex": 0,
            "EndChapterIndex": 0,
            "Perm": 0
        },{
            "StartChapterIndex": 1,
            "EndChapterIndex": 1,
            "Perm": 2
        }
    ]
}

在Astro中使用React重构一个全屏时间展示工具

Sun, 30 Jun 2024 11:30:00 GMT

全屏时间展示：https://blog.imwarn.com/time/

四年前在码云fork过一个全屏时钟仓库,是大圣老师用来配合早起学习用的,而我简单修改后就放到那儿啦。

倒是近两年开始跟着直播跳操,开始把这个全屏时钟用起来了,习惯性地放在分屏看下时间。很不幸的是,最近Gitee Pages打不开了。打开Time.is用了几天，发现还是更习惯之前的时钟模式。

因此，就在这次Astro版本的博客网站中，使用devv.ai的react传授术，重构了一个全屏时钟。

第一个版本，完全就是主打能用就行，UI是完全没带管的。

简要内核

时间的刷新展示

作为一个时钟，最最关键的就是：获取当前时间，然后不断刷新时间的展示。

初始版本使用了setInterval()计时器实现，在这个版本决定改用requestAnimationFrame()来执行时间的获取和刷新任务。

import React, { useEffect, useRef, useState } from 'react'
 
function Clock() {
    const [currentTime, setCurrentTime] = useState(new Date())
 
    const updateClock = () => {
        setCurrentTime(new Date())
        requestRef.current = requestAnimationFrame(updateClock)
    }
 
    useEffect(() => {
        requestRef.current = requestAnimationFrame(updateClock)
        return () => cancelAnimationFrame(requestRef.current)
    }, [])
}

全屏与退出全屏

重构这个时间展示工具就是为了在使用中减少纷杂因素的干扰，所以全屏必不可少。

初始版本使用的document的原始API，通过使用document.documentElement.requestFullscreen()和document.fullscreenElement兼容性方案来实现全屏状态的切换，在这个版本用了react-full-screen依赖库来简化DOM的兼容使用,只需要在点击时判断当前全屏状态并给予切换。

import { FullScreen, useFullScreenHandle } from 'react-full-screen'
const handle = useFullScreenHandle()
const handleBodyClick = () => {
    if (handle.active) {
        handle.exit()
    }
    else {
        handle.enter()
    }
}
 
return (
    <>
        <FullScreen handle={handle}>
            {/* <!----> */}
        </FullScreen>
    </>
)

拓展业务

Time.is还是很强大的，虽然目前好多功能个人是用不到的，但是总会想有亿点点定制，不然也不会自己吭哧瘪肚地复制粘贴代码搞自己的站。为了不让自己想定制的时候还需要去改代码，就需要拓展出来定制的功能。

比如根据语言显示日期/定制不一样的数字显示字体/定制主题配色。

语言切换

const locales = [
    { code: 'en-US', label: 'English (US)' },
    { code: 'zh-CN', label: '中文 (中国)' },
    { code: 'fr-FR', label: 'Français (France)' },
    { code: 'de-DE', label: 'Deutsch (Deutschland)' },
    { code: 'ja-JP', label: '日本語 (日本)' },
]
 
const [locale, setLocale] = useState(locales[0].code)
const hour = currentTime.getHours().toString().padStart(2, '0')
const minute = currentTime.getMinutes().toString().padStart(2, '0')
const second = currentTime.getSeconds().toString().padStart(2, '0')
const year = currentTime.getFullYear()
 
const formattedDate = currentTime.toLocaleDateString(locale, {
    weekday: 'long',
    year: 'numeric',
    month: 'long',
    day: 'numeric',
})
const handleLocaleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setLocale(event.target.value)
}

定制字体

const fontSchemes = [
    { id: 'default', label: '默认', fontFamily: '', fontWeight: 600 },
    { id: 'timeis', label: 'Time.is', fontFamily: 'TimeTravelerPal', fontWeight: 400 },
]
const [fontScheme, setFontScheme] = useState(fontSchemes[0])
const handleFontChange = (index: number) => {
    setFontScheme(fontSchemes[index])
}

定制主题

 
const colorSchemes = [
    { background: '#1f1c19', color: '#caccdf' }, // 默认配色
    { background: '#282c34', color: '#61dafb' }, // 深色配色
    { background: '#ffffff', color: '#000000' }, // 浅色配色
    { background: '#ff6347', color: '#ffffff' }, // 番茄配色
    { background: '#4caf50', color: '#ffffff' }, // 绿色配色
]
const [colorScheme, setColorScheme] = useState(colorSchemes[0])
const handleColorChange = (index: number) => {
    setColorScheme(colorSchemes[index])
}

使用Mac的Apache服务配置Vue Router History模式

Thu, 04 Jul 2019 13:25:41 GMT

Mac的Apache基本操作

Mac OS X 系统自带了Apache服务器，我们偶尔用来在本地测试一下简单的Web应用还是可以玩的。

打开终端的命令

# 开启apache: 
sudo apachectl start
# 重启apache: 
sudo apachectl restart
# 关闭apache: 
sudo apachectl stop

过程中注意事项

1、使用sudo权限，回车会提示输入电脑密码。

2、开启Apache服务器后，在浏览器地址栏输入127.0.0.1，成功可正常出现【It Works】的默认提示页面。

3、网站的根目录：打开Finder(访达)，使用command+shift+g组合键，可以快速前往路径/Library/WebServer/Documents，这就是Mac下Apache服务器的文件路径。把我们的web项目代码放到这个路径下，就可以在浏览器打开了～

4、使用完毕需要关闭Apache服务器，不然会一直消耗电脑内存。

Vue Router的history模式及Apache配置

1、路由配置中设置mode为history模式（默认hash）

当你使用 history 模式时，一定是需要后台服务配置支持的！需要后台服务配置支持！需要后台服务配置！

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2、Apache重写配置

在Vue项目/public目录下新建.htaccess文件，这样生产打包后生产的/dist目录下就会包含该文件（或者直接新建到Web站点根目录）按照Vue Router官方文档中配置例子，编辑并保存文件内容

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

3、修改Apache默认配置

让Apache支持mod_rewrite及允许override

3-1 打开Apache目录,并备份原始的备份文件

cd /etc/apache2
sudo cp httpd.conf httpd.conf.bak
 
#// 如果后续发生错误，使用以下命令恢复备份文件
sudo cp httpd.conf.bak httpd.conf

3-2 修改配置文件`httpd.conf`

sudo模式下使用vi或者vim编辑httpd.conf配置文件

#// 使用vi编辑,sudo命令使用admin权限
sudo vi httpd.conf

启用rewrite

# vi命令行模式下，查找rewrite_module位置（回车键开始查找，N键查找下一处）
/rewrite_module
# 输入i 进入vi编辑模式(ESC键退出编辑模式，回到命令行模式)
i
# 启动rewrite_module,将行首的#号去掉即可

设置允许Override

# 在对应发布的文件夹允许Override
# vi命令行模式下，输入/AllowOverride查找AllowOverride位置
/AllowOverride
# 输入i进入到编辑模式，将AllowOverride None修改为AllowOverride All
i
AllowOverride All
# ESC退出编辑模式，输入:wq!强制退出并保存
:wq!

3-3 重启Apache服务

任何的修改之后，都不要忘记重启

sudo apachectl restart

4、打包Vue部署应用

4-1 修改vue.config.js文件

在devServer下面增加historyAPIFallBack的重写配置

是否可省略待考究,请根据自身实际情况调整

publicPath: process.env.NODE_ENV === 'production'? '/': '/',
devServer: {
        // history模式下的url会请求到服务器端，但是服务器端并没有这一个资源文件，就会返回404，所以需要配置这一项
        historyApiFallback: {
            rewrites: [{
                from: /^\*/g,
                to: '/index.html' //与publicPath有关(HTMLplugin生成的html默认为index.html)
            }]
        }
 
    }

4-2 生产打包并部署到站点根目录

npm run build

通过build命令打包，然后把/dist目录下文件部署到站点根目录/Library/WebServer/Documents

4-3 测试使用这个时候，通过http://127.0.0.1/可以愉快地访问站点了，并且在你的站点里面玩命的刷刷刷新，如果刷新之后挂了，多半还是Apache的服务配置没成功。

写在最后

Vue Router-HTML5 History模式：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

mac自带本地web服务器的使用：https://blog.csdn.net/xie123_csdn/article/details/76131208

新手如何在Mac配置Apache服务器：https://blog.csdn.net/wanxue0804/article/details/79434058

vue-router apache 配置history mac环境：https://blog.csdn.net/HangMine/article/details/83027677

记一次break&continue引发的头脑风暴

Sat, 16 Mar 2019 11:36:59 GMT

前言

作为杂谈的第一篇（也可能是唯一一篇，哈哈），还是应该记录一下前情概要的。

每年的315都变成一个媲美春晚受关注的直播晚会，毕竟我们共同拥有一个“消费者”的身份。今天的315，早上吹着散霾的微风，走在上班的路上，断断续续听一下耳机里传来的Python基础课，在听到老师讲循环的跳出【break和continue】方式的区别时，突然大脑一抽，就开始想怎么来形象的形容它们的区别呢？

示例代码

为了便于理解二者的区别，简单一段示例代码的逻辑演示：

# break
for i in range(10):
    if i % 2 == 0:
        break
    print(i)
# >>> 输出为空
 
# continue
for i in range(10):
    if i % 2 == 0:
        continue
    print(i)
# >>> 输出：1,3,5,7,9

第一记

首先，我风暴了一下【看电视】的情景来形象类比。

虚构人物

主角：小王一家人
关系线：电视剧和打麻将

摘要： 无论是在工作中，还是在面试中，web前端性能的优化都是很重要的，那么我们进行优化需要从哪些方面入手呢？可以遵循雅虎的前端优化34条军规，不过现在已经是35条了，所以可以说是雅虎前端优化的35条军规。已分类，挺好的，这样对于优化有一个比较清晰的方向。

内容部分

1.尽量减少HTTP请求数

80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。

减少页面组件数的一种方式是简化页面设计。但有没有一种方法可以在构建复杂的页面同时加快响应时间呢？嗯，确实有鱼和熊掌兼得的办法。

合并文件是通过把所有脚本放在一个文件中的方式来减少请求数的，当然，也可以合并所有的CSS。如果各个页面的脚本和样式不一样的话，合并文件就是一项比较麻烦的工作了，但把这个作为站点发布过程的一部分确实可以提高响应时间。

CSS Sprites是减少图片请求数量的首选方式。把背景图片都整合到一张图片中，然后用CSS的background-image和background-position属性来定位要显示的部分。

图像映射可以把多张图片合并成单张图片，总大小是一样的，但减少了请求数并加速了页面加载。图片映射只有在图像在页面中连续的时候才有用，比如导航条。给image map设置坐标的过程既无聊又容易出错，用image map来做导航也不容易，所以不推荐用这种方式。

*行内图片（Base64编码）*用data: URL模式来把图片嵌入页面。这样会增加HTML文件的大小，把行内图片放在（缓存的）样式表中是个好办法，而且成功避免了页面变“重”。但目前主流浏览器并不能很好地支持行内图片。减少页面的HTTP请求数是个起点，这是提升站点首次访问速度的重要指导原则。

2.减少DNS查找

域名系统建立了主机名和IP地址间的映射，就像电话簿上人名和号码的映射一样。当你在浏览器输入www.yahoo.com的时候，浏览器就会联系DNS解析器返回服务器的IP地址。DNS是有成本的，它需要20到120毫秒去查找给定主机名的IP地址。在DNS查找完成之前，浏览器无法从主机名下载任何东西。

DNS查找被缓存起来更高效，由用户的ISP（网络服务提供商）或者本地网络存在一个特殊的缓存服务器上，但还可以缓存在个人用户的计算机上。DNS信息被保存在操作系统的DNS cache(微软Windows上的”DNS客户端服务”)里。大多数浏览器有独立于操作系统的自己的cache。只要浏览器在自己的cache里还保留着这条记录，它就不会向操作系统查询DNS。

IE默认缓存DNS查找30分钟，写在DnsCacheTimeout注册表设置中。Firefox缓存1分钟，可以用network.dnsCacheExpiration配置项设置。(Fasterfox把缓存时间改成了1小时 P.S. Fasterfox是FF的一个提速插件)

如果客户端的DNS cache是空的（包括浏览器的和操作系统的），DNS查找数等于页面上不同的主机名数，包括页面URL，图片，脚本文件，样式表，Flash对象等等组件中的主机名，减少不同的主机名就可以减少DNS查找。

减少不同主机名的数量同时也减少了页面能够并行下载的组件数量，避免DNS查找削减了响应时间，而减少并行下载数量却增加了响应时间。我的原则是把组件分散在2到4个主机名下，这是同时减少DNS查找和允许高并发下载的折中方案。

3.避免重定向

重定向用301和302状态码，下面是一个有301状态码的HTTP头：

HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html

浏览器会自动跳转到Location域指明的URL。重定向需要的所有信息都在HTTP头部，而响应体一般是空的。其实额外的HTTP头，比如Expires和Cache-Control也表示重定向。除此之外还有别的跳转方式：refresh元标签和JavaScript，但如果你必须得做重定向，最好用标准的3xxHTTP状态码，主要是为了让返回按钮能正常使用。

牢记重定向会拖慢用户体验，在用户和HTML文档之间插入重定向会延迟页面上的所有东西，页面无法渲染，组件也无法开始下载，直到HTML文档被送达浏览器。

有一种常见的极其浪费资源的重定向，而且web开发人员一般都意识不到这一点，就是URL尾部缺少一个斜线的时候。例如，跳转到http://astrology.yahoo.com/astrology会返回一个重定向到http://astrology.yahoo.com/astrology/的301响应（注意添在尾部的斜线）。在Apache中可以用Alias，mod_rewrite或者DirectorySlash指令来取消不必要的重定向。

重定向最常见的用途是把旧站点连接到新的站点，还可以连接同一站点的不同部分，针对用户的不同情况（浏览器类型，用户帐号类型等等）做一些处理。用重定向来连接两个网站是最简单的，只需要少量的额外代码。虽然在这些时候使用重定向减少了开发人员的开发复杂度，但降低了用户体验。一种替代方案是用Alias和mod_rewrite，前提是两个代码路径都在相同的服务器上。如果是因为域名变化而使用了重定向，就可以创建一条CNAME（创建一个指向另一个域名的DNS记录作为别名）结合Alias或者mod_rewrite指令。

4.让Ajax可缓存

Ajax的一个好处是可以给用户提供即时反馈，因为它能够从后台服务器异步请求信息。然而，用了Ajax就无法保证用户在等待异步JavaScript和XML响应返回期间不会非常无聊。在很多应用程序中，用户能够一直等待取决于如何使用Ajax。例如，在基于web的电子邮件客户端中，用户为了寻找符合他们搜索标准的邮件消息，将会保持对Ajax请求返回结果的关注。重要的是，要记得“异步”并不意味着“即时”。

要提高性能，优化这些Ajax响应至关重要。最重要的提高Ajax性能的方法就是让响应变得可缓存，就像在添上Expires或者Cache-Control HTTP头中讨论的一样。下面适用于Ajax的其它规则：

我们一起看看例子，一个Web 2.0的电子邮件客户端用了Ajax来下载用户的通讯录，以便实现自动完成功能。如果用户从上一次使用之后再没有修改过她的通讯录，而且Ajax响应是可缓存的，有尚未过期的Expires或者Cache-Control HTTP头，那么之前的通讯录就可以从缓存中读出。必须通知浏览器，应该继续使用之前缓存的通讯录响应，还是去请求一个新的。可以通过给通讯录的Ajax URL里添加一个表明用户通讯录最后修改时间的时间戳来实现，例如&t=1190241612。如果通讯录从上一次下载之后再没有被修改过，时间戳不变，通讯录就将从浏览器缓存中直接读出，从而避免一次额外的HTTP往返消耗。如果用户已经修改了通讯录，时间戳也可以确保新的URL不会匹配缓存的响应，浏览器将请求新的通讯录条目。

即使Ajax响应是动态创建的，而且可能只适用于单用户，它们也可以被缓存，而这样会让你的Web 2.0应用更快。

5.延迟加载组件

可以凑近看看页面并问自己：什么才是一开始渲染页面所必须的？其余内容都可以等会儿。

JavaScript是分隔onload事件之前和之后的一个理想选择。例如，如果有JavaScript代码和支持拖放以及动画的库，这些都可以先等会儿，因为拖放元素是在页面最初渲染之后的。其它可以延迟加载的部分包括隐藏内容（在某个交互动作之后才出现的内容）和折叠的图片。

工具可帮你减轻工作量：YUI Image Loader可以延迟加载折叠的图片，还有YUI Get utility是一种引入JS和CSS的简单方法。Yahoo!主页就是一个例子，可以打开Firebug的网络面板仔细看看。

最好让性能目标符合其它web开发最佳实践，比如“渐进增强”。如果客户端支持JavaScript，可以提高用户体验，但必须确保页面在不支持JavaScript时也能正常工作。所以，在确定页面运行正常之后，可以用一些延迟加载脚本增强它，以支持一些拖放和动画之类的华丽效果。

6.预加载组件

预加载可能看起来和延迟加载是相反的，但它其实有不同的目标。通过预加载组件可以充分利用浏览器空闲的时间来请求将来会用到的组件（图片，样式和脚本）。用户访问下一页的时候，大部分组件都已经在缓存里了，所以在用户看来页面会加载得更快。

实际应用中有以下几种预加载的类型：

无条件预加载——尽快开始加载，获取一些额外的组件。google.com就是一个sprite图片预加载的好例子，这个sprite图片并不是google.com主页需要的，而是搜索结果页面上的内容。
条件性预加载——根据用户操作猜测用户将要跳转到哪里并据此预加载。在search.yahoo.com的输入框里键入内容后，可以看到那些额外组件是怎样请求加载的。
提前预加载——在推出新设计之前预加载。经常在重新设计之后会听到：“这个新网站不错，但比以前更慢了”，一部分原因是用户访问先前的页面都是有旧缓存的，但新的却是一种空缓存状态下的体验。可以通过在将要推出新设计之前预加载一些组件来减轻这种负面影响，老站可以利用浏览器空闲的时间来请求那些新站需要的图片和脚本。

7.减少DOM元素的数量

一个复杂的页面意味着要下载更多的字节，而且用JavaScript访问DOM也会更慢。举个例子，想要添加一个事件处理器的时候，循环遍历页面上的500个DOM元素和5000个DOM元素是有区别的。

大量的DOM元素是一种征兆——页面上有些内容无关的标记需要清理。正在用嵌套表格来布局吗？还是为了修复布局问题而添了一堆的<div>s？或许应该用更好的语义化标记。

YUI CSS utilities对布局有很大帮助：grids.css针对整体布局，fonts.css和reset.css可以用来去除浏览器的默认格式。这是个开始清理和思考标记的好机会，例如只在语义上有意义的时候使用<div>，而不是因为它能够渲染一个新行。

DOM元素的数量很容易测试，只需要在Firebug的控制台里输入：

document.getElementsByTagName('*').length

那么多少DOM元素才算是太多呢？可以参考其它类似的标记良好的页面，例如Yahoo!主页是一个相当繁忙的页面，但只有不到700个元素（HTML标签）。

8.跨域分离组件

分离组件可以最大化并行下载，但要确保只用不超过2-4个域，因为存在DNS查找的代价。例如，可以把HTML和动态内容部署在www.example.org，而把静态组件分离到static1.example.org和static2.example.org。

9.尽量少用iframe

用iframe可以把一个HTML文档插入到父文档里，重要的是明白iframe是如何工作的并高效地使用它。

<iframe>的优点：

引入缓慢的第三方内容，比如标志和广告
安全沙箱
并行下载脚本

<iframe>的缺点：

代价高昂，即使是空白的iframe
阻塞页面加载
非语义

10.杜绝404

HTTP请求代价高昂，完全没有必要用一个HTTP请求去获取一个无用的响应（比如404 Not Found），只会拖慢用户体验而没有任何好处。

有些站点用的是有帮助的404——“你的意思是xxx？”，这样做有利于用户体验，，但也浪费了服务器资源（比如数据库等等）。最糟糕的是链接到的外部JavaScript有错误而且结果是404。首先，这种下载将阻塞并行下载。其次，浏览器会试图解析404响应体，因为它是JavaScript代码，需要找出其中可用的部分。

css部分

11.避免使用CSS表达式

用CSS表达式动态设置CSS属性，是一种强大又危险的方式。从IE5开始支持，但从IE8起就不推荐使用了。例如，可以用CSS表达式把背景颜色设置成按小时交替的：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

12.选择`<link>`舍弃`@import`

前面提到了一个最佳实践：为了实现逐步渲染，CSS应该放在顶部。

在IE中用@import与在底部用<link>效果一样，所以最好不要用它。

13.避免使用滤镜

IE专有的AlphaImageLoader滤镜可以用来修复IE7之前的版本中半透明PNG图片的问题。在图片加载过程中，这个滤镜会阻塞渲染，卡住浏览器，还会增加内存消耗而且是被应用到每个元素的，而不是每个图片，所以会存在一大堆问题。

最好的方法是干脆不要用AlphaImageLoader，而优雅地降级到用在IE中支持性很好的PNG8图片来代替。如果非要用AlphaImageLoader，应该用下划线hack：_filter来避免影响IE7及更高版本的用户。

14.把样式表放在顶部

在Yahoo!研究性能的时候，我们发现把样式表放到文档的HEAD部分能让页面看起来加载地更快。这是因为把样式表放在head里能让页面逐步渲染。

关注性能的前端工程师想让页面逐步渲染。也就是说，我们想让浏览器尽快显示已有内容，这在页面上有一大堆内容或者用户网速很慢时显得尤为重要。给用户显示反馈（比如进度指标）的重要性已经被广泛研究过，并且被记录下来了。在我们的例子中，HTML页面就是进度指标！当浏览器逐渐加载页面头部，导航条，顶部logo等等内容的时候，这些都被正在等待页面加载的用户当作反馈，能够提高整体用户体验。

js部分

15.去除重复脚本

页面含有重复的脚本文件会影响性能，这可能和你想象的不一样。在对美国前10大web站点的评审中，发现只有2个站点含有重复脚本。两个主要原因增加了在单一页面中出现重复脚本的几率：团队大小和脚本数量。在这种情况下，重复脚本会创建不必要的HTTP请求，执行无用的JavaScript代码，而影响页面性能。

IE会产生不必要的HTTP请求，而Firefox不会。在IE中，如果一个不可缓存的外部脚本被页面引入了两次，它会在页面加载时产生两个HTTP请求。即使脚本是可缓存的，在用户重新加载页面时也会产生额外的HTTP请求。

除了产生没有意义的HTTP请求之外，多次对脚本求值也会浪费时间。因为无论脚本是否可缓存，在Firefox和IE中都会执行冗余的JavaScript代码。避免不小心把相同脚本引入两次的一种方法就是在模版系统中实现脚本管理模块。典型的脚本引入方法就是在HTML页面中用SCRIPT标签：

<script type="text/javascript" src="menu_1.0.17.js"></script>

16.尽量减少DOM访问

用JavaScript访问DOM元素是很慢的，所以，为了让页面反应更迅速，应该：

缓存已访问过的元素的索引
先“离线”更新节点，再把它们添到DOM树上
避免用JavaScript修复布局问题

17.用智能的事件处理器

有时候感觉页面反映不够灵敏，是因为有太多频繁执行的事件处理器被添加到了DOM树的不同元素上，这就是推荐使用事件委托的原因。如果一个div里面有10个按钮，应该只给div容器添加一个事件处理器，而不是给每个按钮都添加一个。事件能够冒泡，所以可以捕获事件并得知哪个按钮是事件源。

18.把脚本放在底部

脚本会阻塞并行下载，HTTP/1.1官方文档建议浏览器每个主机名下并行下载的组件数不要超过两个，如果图片来自多个主机名，并行下载的数量就可以超过两个。如果脚本正在下载，浏览器就不开始任何其它下载任务，即使是在不同主机名下的。

有时候，并不容易把脚本移动到底部。举个例子，如果脚本是用document.write插入到页面内容中的，就没办法再往下移了。还可能存在作用域问题，在多数情况下，这些问题都是可以解决的。

一个常见的建议是用推迟（deferred）脚本，有DEFER属性的脚本意味着不能含有document.write，并且提示浏览器告诉他们可以继续渲染。不幸的是，Firefox不支持DEFER属性。在IE中，脚本可能被推迟，但不尽如人意。如果脚本可以推迟，我们就可以把它放到页面底部，页面就可以更快地载入。

javascript, css

19.把JavaScript和CSS放到外面

很多性能原则都是关于如何管理外部组件的，然而，在这些顾虑出现之前你应该问一个更基础的问题：应该把JavaScript和CSS放到外部文件中还是直接写在页面里？

实际上，用外部文件可以让页面更快，因为JavaScript和CSS文件会被缓存在浏览器。HTML文档中的行内JavaScript和CSS在每次请求该HTML文档的时候都会重新下载。这样做减少了所需的HTTP请求数，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS在外部文件中，并且已经被浏览器缓存起来了，那么我们就成功地把HTML文档变小了，而且还没有增加HTTP请求数。

20.压缩JavaScript和CSS

压缩具体来说就是从代码中去除不必要的字符以减少大小，从而提升加载速度。代码最小化就是去掉所有注释和不必要的空白字符（空格，换行和tab）。在JavaScript中这样做能够提高响应性能，因为要下载的文件变小了。两个最常用的JavaScript代码压缩工具是JSMin和YUI Compressor，YUI compressor还可以压缩CSS。

混淆是一种可选的源码优化措施，要比压缩更复杂，所以混淆过程也更容易产生bug。在对美国前十的网站调查中，压缩可以缩小21%，而混淆能缩小25%。虽然混淆的缩小程度更高，但比压缩风险更大。

除了压缩外部脚本和样式，行内的<script>和<style>块也可以压缩。即使启用了gzip模块，先进行压缩也能够缩小5%或者更多的大小。JavaScript和CSS的用处越来越多，所以压缩代码会有不错的效果。

图片

21.优化图片

尝试把GIF格式转换成PNG格式，看看是否节省空间。在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）

22.优化CSS Sprite

在Sprite图片中横向排列一般都比纵向排列的最终文件小
组合Sprite图片中的相似颜色可以保持低色数，最理想的是256色以下PNG8格式
“对移动端友好”，不要在Sprite图片中留下太大的空隙。虽然不会在很大程度上影响图片文件的大小，但这样做可以节省用户代理把图片解压成像素映射时消耗的内存。100×100的图片是1万个像素，而1000×1000的图片就是100万个像素了。

23.不要用HTML缩放图片

不要因为在HTML中可以设置宽高而使用本不需要的大图。如果需要

<img width="100" height="100" src="mycat.jpg" alt="My Cat" />" class="rehype-pretty-copy" onclick="navigator.clipboard.writeText(this.attributes.data.value);this.classList.add('rehype-pretty-copied');window.setTimeout(() => this.classList.remove('rehype-pretty-copied'), 2500);">

那么图片本身（mycat.jpg）应该是100x100px的，而不是去缩小500x500px的图片。

24.用小的可缓存的favicon.ico（P.S. 收藏夹图标）

favicon.ico是放在服务器根目录的图片，它会带来一堆麻烦，因为即便你不管它，浏览器也会自动请求它，所以最好不要给一个404 Not Found响应。而且只要在同一个服务器上，每次请求它时都会发送cookie，此外这个图片还会干扰下载顺序，例如在IE中，当你在onload中请求额外组件时，将会先下载favicon。

所以为了缓解favicon.ico的缺点，应该确保：

足够小，最好在1K以下
设置合适的有效期HTTP头（以后如果想换的话就不能重命名了），把有效期设置为几个月后一般比较安全，可以通过检查当前favicon.ico的最后修改日期来确保变更能让浏览器知道。

25.给Cookie减肥

使用cookie的原因有很多，比如授权和个性化。HTTP头中cookie信息在web服务器和浏览器之间交换。重要的是保证cookie尽可能的小，以最小化对用户响应时间的影响。

清除不必要的cookie
保证cookie尽可能小，以最小化对用户响应时间的影响
注意给cookie设置合适的域级别，以免影响其它子域
设置合适的有效期，更早的有效期或者none可以更快的删除cookie，提高用户响应时间

26.把组件放在不含cookie的域下

当浏览器发送对静态图像的请求时，cookie也会一起发送，而服务器根本不需要这些cookie。所以它们只会造成没有意义的网络通信量，应该确保对静态组件的请求不含cookie。可以创建一个子域，把所有的静态组件都部署在那儿。

如果域名是www.example.org，可以把静态组件部署到static.example.org。然而，如果已经在顶级域example.org或者www.example.org设置了cookie，那么所有对static.example.org的请求都会含有这些cookie。这时候可以再买一个新域名，把所有的静态组件部署上去，并保持这个新域名不含cookie。Yahoo!用的是yimg.com，YouTube是ytimg.com，Amazon是images-amazon.com等等。

把静态组件部署在不含cookie的域下还有一个好处是有些代理可能会拒绝缓存带cookie的组件。有一点需要注意：如果不知道应该用example.org还是www.example.org作为主页，可以考虑一下cookie的影响。省略www的话，就只能把cookie写到*.example.org，所以因为性能原因最好用www子域，并且把cookie写到这个子域下。

移动端

27.保证所有组件都小于25K

这个限制是因为iPhone不能缓存大于25K的组件，注意这里指的是未压缩的大小。这就是为什么缩减内容本身也很重要，因为单纯的gzip可能不够。

28.把组件打包到一个复合文档里

把各个组件打包成一个像有附件的电子邮件一样的复合文档里，可以用一个HTTP请求获取多个组件（记住一点：HTTP请求是代价高昂的）。用这种方式的时候，要先检查用户代理是否支持（iPhone就不支持）。

服务器

29.Gzip组件

前端工程师可以想办法明显地缩短通过网络传输HTTP请求和响应的时间。毫无疑问，终端用户的带宽速度，网络服务商，对等交换点的距离等等，都是开发团队所无法控制的。但还有别的能够影响响应时间的因素，压缩可以通过减少HTTP响应的大小来缩短响应时间。

从HTTP/1.1开始，web客户端就有了支持压缩的Accept-Encoding HTTP请求头。

Accept-Encoding: gzip, deflate

如果web服务器看到这个请求头，它就会用客户端列出的一种方式来压缩响应。web服务器通过Content-Encoding相应头来通知客户端。

Content-Encoding: gzip

尽可能多地用gzip压缩能够给页面减肥，这也是提升用户体验最简单的方法。

30.避免图片src属性为空

Image with empty string

src属性是空字符串的图片很常见，主要以两种形式出现：

straight HTML <img src=””>
JavaScript var img = new Image(); img.src = “”;

这两种形式都会引起相同的问题：浏览器会向服务器发送另一个请求。

31.配置ETags

实体标签（ETags），是服务器和浏览器用来决定浏览器缓存中组件与源服务器中的组件是否匹配的一种机制（“实体”也就是组件：图片，脚本，样式表等等）。添加ETags可以提供一种实体验证机制，比最后修改日期更加灵活。一个ETag是一个字符串，作为一个组件某一具体版本的唯一标识符。唯一的格式约束是字符串必须用引号括起来，源服务器用相应头中的ETag来指定组件的ETag：

HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

然后，如果浏览器必须验证一个组件，它用If-None-Match请求头来把ETag传回源服务器。如果ETags匹配成功，会返回一个304状态码，这样就减少了12195个字节的响应体。

GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified

32.对Ajax用GET请求

Yahoo!邮箱团队发现使用XMLHttpRequest时，浏览器的POST请求是通过一个两步的过程来实现的：先发送HTTP头，在发送数据。所以最好用GET请求，它只需要发送一个TCP报文（除非cookie特别多）。IE的URL长度最大值是2K，所以如果要发送的数据超过2K就无法使用GET了。

POST请求的一个有趣的副作用是实际上没有发送任何数据，就像GET请求一样。正如HTTP说明文档中描述的，GET请求是用来检索信息的。所以它的语义只是用GET请求来请求数据，而不是用来发送需要存储到服务器的数据。

33.尽早清空缓冲区

当用户请求一个页面时，服务器需要用大约200到500毫秒来组装HTML页面，在这期间，浏览器闲等着数据到达。PHP中有一个flush()函数，允许给浏览器发送一部分已经准备完毕的HTML响应，以便浏览器可以在后台准备剩余部分的同时开始获取组件，好处主要体现在很忙的后台或者很“轻”的前端页面上（P.S. 也就是说，响应时耗主要在后台方面时最能体现优势）。

较理想的清空缓冲区的位置是HEAD后面，因为HTML的HEAD部分通常更容易生成，并且允许引入任何CSS和JavaScript文件，这样就可以让浏览器在后台还在处理的时候就开始并行获取组件。

例如：

    <!-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
    <!-- content -->


如果你用的是Apache服务器，用ExpiresDefault指令来设置相对于当前日期的有效期。下面的例子设置了从请求时间起10年的有效期：
ExpiresDefault "access plus 10 years"

写在最后
转载原文：【原】雅虎前端优化的35条军规
【慕课】Yahoo军规：https://www.imooc.com/learn/50

JSON字符串正则表达式替换多余空格及换行

Tue, 11 Dec 2018 13:31:12 GMT

正则表达式是功能强大的利器，无关乎语言，无关乎场景。

故事的背景

但凡是故事，都会有背景，这段故事的背景大致如下：服务端通过API返回了一组JSON数据，其中包含一个参数是通过富文本编辑器编辑的内容（服务端应邀，把html标签做了处理，只保留链接的<a>标签）。但是呢，在我实际接收到的数据中又包含多个\r\n\t的空格或者换行及制表符标签。

我的处理办法是把包含的连续多个\r\n\t的标签替换为一个\n标签，然后再把\n标签替换为<span></span>来控制样式的展示。

故事的转折

逻辑设计的一切都好，但是在替换多个连续的\r\n\t标签替换时，总是会在替换结束依旧存在多个\n标签，这样就会造成我最终呈现的<span></span>标签会出现连续多个，样式就会在某些细节上变得不可控。

正则替换之路

JSON数据示例

[
  {
    "id": 26,
    "name": "那年，我曾爱过你",
    "content": "\r\n\r\n\r\n\r\n那年，我曾爱过你</a>点击查看原文\r\n\r\n\t那年她说她怀孕了。\r\n\t她失去了一双眼睛和一个孩子；\r\n\r\n\t那年她逃走了。\r\n\t她失去了一颗子宫和一条命……\r\n\r\n\t陆晓死了，死在一场大火中，萧楚北站在漂泊的风雨下，\r\n\r\n\t对着墓碑上微笑的少女，跪地不起：晓晓，我后悔了……\r\n\r\n\t\r\n</p>",
    "createTime": "2018-12-07 18:27:34.0",
    "picArr": [
      "http://ttak-novel-pic.oss-cn-hangzhou.aliyuncs.com/ad_subject/b57b3c3afa0a11e8a1f100163e0e3021.jpg"
    ]
  },
  {
    "id": 25,
    "name": "笙歌落尽长生花",
    "content": "\r\n\t她出生在狗窝，3岁后被虐待长大……\r\n\r\n\t终于功成名就，可历史总是惊人的相似，谁也无法逃出其中的轮回……\r\n\r\n\t飞鸟尽，良弓藏；狡兔死，走狗烹\r\n\r\n\t作为大将之女，她一心辅佐他登上帝位！\r\n\r\n\t大婚之日，心念之人却求娶了另一个恨她入骨的女人，让她国破家亡。\r\n\r\n\t她声声质问心如刀绞：“你我是三书六礼定下的亲事，我才是你名正言顺的妻子啊。”\r\n\r\n\t他落拓而立，怀拥佳人，话语冷然，“我是答应要娶你，可没说，只娶你一人！”\r\n\r\n\t她苦笑，我允许你有三宫六院！可为什么偏偏是她？\r\n\r\n\t也许，一切从开始就错了……\r\n\r\n\t猛戳↓↓↓\r\n\r\n\t<a href=\"http://m.tiantianaikan.com/read/209997/1.shtml\" target=\"_blank\">《笙歌落尽长生花》</a>查看完整原文\r\n\r\n\t爱别离，怨憎会，求不得。人生七苦，慕歌儿都一一尝过了，她喜欢那个宛若长生花般的男子，多年以后，长生花落，情归何处？\r\n\r\n\t既然你无情，我定也不会纠缠你，此生，不复相见……\r\n</p>",
    "createTime": "2018-12-07 17:55:36.0",
    "picArr": [
      "http://ttak-novel-pic.oss-cn-hangzhou.aliyuncs.com/ad_subject/3e47fd28fa0611e8a1f100163e0e3021.jpg"
    ]
  }
]

其实，在整个JSON中，我们本篇需要处理的对象就是content字段。以以下简化变量来示例：

var cont = "\r\n\r\n\t终于功成名就，可历史总是惊人的相似，谁也无法逃出其中的轮回……\r\n\r\n\t飞鸟尽，良弓藏；狡兔死，走狗烹\r\n\r\n\t作为大将之女，她一心辅佐他登上帝位！\r\n\r\n\t她声声质问心如刀绞：“你我是三书六礼定下的亲事，我才是你名正言顺的妻子啊。”\r\n\r\n\t他落拓而立，怀拥佳人，话语冷然，“我是答应要娶你，可没说，只娶你一人！”\r\n\r\n\t她苦笑，我允许你有三宫六院！可为什么偏偏是她？\r\n\r\n\t也许，一切从开始就错了……\r\n\r\n\t猛戳↓↓↓\r\n\r\n\t<a href=\"http://m.tiantianaikan.com/read/209997/1.shtml\" target=\"_blank\">《笙歌落尽长生花》</a>查看完整原文\r\n\r\n\t爱别离，怨憎会，求不得。人生七苦，慕歌儿都一一尝过了，她喜欢那个宛若长生花般的男子，多年以后，长生花落，情归何处？</p>";

中间定稿方案

var con = cont.replace(/\n\s*\r|\r\n|\r|\t|\n|\n\n/g, '\n').replace(/\n\n|\n+/g, '\n').replace(/\n/g, '<span class="space1 space"></span>');

简述思路如下：

1.先将任意多个连续\n或者\r或者\r\n或者\t或者\n或者\n\n替换为\n
2.此时，若替换正确，替换后的con中应当是只包含\n或者\n\n的存在
3.将以上两种情况替换为\n
4.将\n替换为<span></span>

在控制台验证了下，发下我们这种方法，依然得不到满意的效果

终极方案（暂定）

var con = cont.replace(/\t/g, ''); //去除空格
con = con.replace(/(\r\n)\s*/g,'\n'); // 连续出现的\r\n替换为\n
con = con.replace(/\n/g,'<span class="space1 space"></span>'); //把全局的\n替换为<span></span>

在控制台验证了下，目前是可行的，连续存在的换行等已经替换为只保留一个\n了。

思路直接写在代码注释里，很简单，不再赘述。为什么是暂定呢？因为这种方案，依旧需要时间来考验。

写在最后

中途相关正则替换

str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim()  //去掉所有的html标签和&nbsp;之类的特殊符号
var con = cont.replace(/<[^>]+>|&[^>]+;|\t/g, ''); //去除html<>标签及空格

正则表达式的不断组合，不一样的组合都会产生不一样的效果。

console控制台也依然强大，某些代码我们直接通过console控制台来调试，反而可以看到更清晰的效果。

python发现：python2&&python3共存踩坑日记

Sun, 02 Dec 2018 22:40:15 GMT

Python2&Python3共存时安装pip

Python环境说明

系统环境：腾讯开发平台Cloud Studio Ubuntu16.04已安装Python2.7.12,Python3.5.2

Python共存使用

1、安装Python

如果初始环境不存在Python，可以参照知乎回答（或自行搜索）来安装两个版本的Python。由于笔者使用的Cloud Studio云编辑运行环境已默认安装两个版本的Python，所以无需再次安装，当然此时默认的Python为Python2.7.12，Python3对应Python3.5.2版本。

➜  workspace git:(master) python --version
Python 2.7.12
➜  workspace git:(master) pip --version
pip 8.1.1 from /usr/lib/python2.7/dist-packages (python 2.7)
➜  workspace git:(master) python3 --version
Python 3.5.2

2、安装pip3

sudo apt-get install python-pip
sudo apt-get install python3-pip

此时pip是已经存在的，而且是存在于默认的Python2.7版本下。如果我们使用以上命令安装pip3会出现报错E: Unable to locate package python3-pip,具体如下：

➜  workspace git:(master) which pip3
pip3 not found
➜  workspace git:(master) sudo apt-get install python3-pip
Reading package lists... Done
Building dependency tree
Reading state information... Done
E: Unable to locate package python3-pip

根据报错信息查询了下，提示原因应该是：新安装Ubuntu后需要先更新软件源。

#更新命令：
sudo apt-get update

更新完成后，我们再次使用sudo apt-get install python3-pip命令进行安装pip3即可。

➜  workspace git:(master) which pip3
/usr/bin/pip3

安装完成后，查看pip3已经存在。这时，我们就可以在共存环境下分别使用pip及pip3了。

写在最后

知乎回答：同时安装了Python3和Python2，怎样用pip?

Ubuntu安装包时报错 E:Unable to locate package xxx（如：python3-pip）

wap开发在iOS设备中的bug备忘

Mon, 19 Nov 2018 18:00:00 GMT

IOS中click点击事件失效

问题描述

当使用委托给一个元素添加click事件时，如果事件是委托到 document 或 body 上，并且委托的元素是默认不可点击的（如 div, span 等），此时 click 事件会失效。

可以使用下面的代码在iOS中进行测试。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>iOS click bug test</title>
 
    <style>
        .container {
        }
 
        .target {
            display: block;
            text-align: center;
            margin: 100px 30px 0;
            padding: 10px 0;
            border: 1px solid #ccc;
        }
    </style>
</head>  
<body>  
    <div class="container">
        <div class="target"> Click Me! </div>
    </div>
 
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        // 或者 $(document).on('click', ....)
        $('body').on('click', '.target', function (e) {
            alert('click');
        });
    </script>
</body>  
</html>

解决办法

解决办法有 4 种可供选择：

将 click 事件直接绑定到目标元素（即 .target）上
将目标元素换成 <a> 或者 button 等可点击的元素
将 click 事件委托到非 document 或 body 的父级元素上
给目标元素加一条样式规则 cursor: pointer;
click事件改用touch事件，或者两者共存

推荐3、4两种。从解决办法来看，推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

实践说明

通过添加 cursor: pointer给div元素后，点击仍不可用，直接在元素上添加了onclick事件。

微信内长按二维码图片无识别选项

长按二维码图片不弹出识别选项遇到的三种原因

图片是作为背景图插入存在的
图片中二维码尺寸太小，未正常显示
图片中二维码在页面初始化时为隐藏状态。如果知道了无法弹出识别选项的原因，那对于的解决方法就很明了了。

解决方法

首先，长按识别的二维码图片不能是背景图；如果是，请改为正常的img标签。其次，二维码图片尽可能100%显示；并且不能太靠顶部或者底部，显示要完整。最后，如果初始化时，需要根据状态来判断是否显示二维码，不管是二维码图片的外层还是图片本身都不要添加display属性，可以使用opacity等标签来代替。

错误代码示例

<div class="poster" style="display: none;">
    <img class="posterimg">
</div>
<script type="text/javascript">
//<!--伪代码-->
if(res.status == 0){
    $('.posterimg').attr("src",res.res.posterImgUrl);
    $('.poster').show();
}
</script>

错误代码分析

此代码可以正常运行，显示效果正常，安卓机微信内长按识别正常，IOS端则会出现“长按不出现识别二维码选项”的情况。现在我们使用opacity替代方案来改进修复。

改进代码示例

<div class="poster" style="opacity: 0;">
    <img class="posterimg">
</div>
<script type="text/javascript">
//<!--伪代码-->
if(res.status == 0){
    $('.posterimg').attr("src",res.res.posterImgUrl);
    $(".poster").css('opacity','1');
}
</script>

改进代码说明

此处代码唯一的不同，就是使用opacity代替了display属性。

写在最后

iOS Safari 中点击事件失效的解决办法

iphone上click事件不触发的问题解决。

微信长按图片无法弹出识别二维码选项解决方案

JavaScript中使用append()与appendChild()的区别

Fri, 16 Nov 2018 21:22:00 GMT

众所周知，appendChild()是原生JavaScript插入子元素的方法，append()是Jquery的插入子元素的方法。但是，如果我们在使用原生JavaScript（未引入jQuery）时，使用append()也是不报错，可以正常执行插入操作的。为什么？他们之间的联系和区别又是什么？

`jQuery.append()`

使用方法： parentNode.append(childNode)

在此不再赘述，引入jQuery库后，可以随意插入各种子元素，还有搭配参数，控制插入位置，具体可查看相关文档http://www.css88.com/jqapi-1.9/append/

JavaScript中使用

parentNode.appendChild(childNode)

parentNode.appendChild(childNode)是原生JavaScript中最常规的插入子元素的方法。 eg:

// Create a new paragraph element, and append it to the end of the document body
var p = document.createElement("p");
document.body.appendChild(p);

parentNode.append(childNode)

parentNode.append(childNode)在原生JavaScript中仍然属于实验中的插入子元素的方法（当前时间：2018年9月28日） eg:

插入一个元素节点

var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);
 
console.log(parent.childNodes); // NodeList [ <p> ]

插入文本（字符串）

var parent = document.createElement("div");
parent.append("Some text");
 
console.log(parent.textContent); // "Some text"

插入一个节点，同时插入一些文本

var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);
 
console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]

两者的区别和联系

parentNode.append()是还在试用期的方法，有兼容问题。parentNode.append()方法在parentNode的最后一个子节点之后插入一组 Node对象或DOMString对象(被插入的DOMString对象等价为Text节点)。

与parentNode.appendChild()的区别在于：

parentNode.append()可以同时传入多个节点或字符串，没有返回值；
parentNode.appendChild()只能传一个节点，且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement('字符串'))代替)，返回追加的Node节点

参考文档

segmentfault: https://segmentfault.com/q/1010000009331918

MDN web docs: https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/append

在JS中实现将对象转换为字符串,拼接到URL

Thu, 15 Nov 2018 13:20:00 GMT

常规写法

实际开发中，经常会遇到http请求(特别是get请求)或者跳转页面需要拼接URL请求字符串，而经常性的思维就是利用+进行字符串拼接：

var baseUrl = 'www.google.com';
var a = 1, b = 'request', c = true;
var finalUrl = baseUrl + '?a=' + a + '&b=' + b + '&c=' + c;

这种方法看起来丑陋笨拙，最不优雅。

ES6模板写法

高级一点就是使用es6${}进行拼接：

const finalUrl = ${baseUrl}?a=${a}&b=${b}&c=${c}

舒了一口气的感觉，代码量少，比较简洁。

还有一种推荐的写法，也非常适用于实际项目开发，那就是将对象形式转化为URL请求字符串的代码提取成为一个工具函数，需要的时候import就可以了：

/**
 * 拼接对象为请求字符串
 * @param {Object} obj - 待拼接的对象
 * @returns {string} - 拼接成的请求字符串
 */
function encodeSearchParams(obj) {
    var params = []
   
    Object.keys(obj).forEach((key) => {
        var value = obj[key]
        // 如果值为undefined我们将其置空
        if (typeof value === 'undefined') {
            value = ''
        }
        // 对于需要编码的文本（比如说中文）我们要进行编码
        params.push([key, encodeURIComponent(value)].join('='))
    })
   
    return params.join('&')
 
}

然后使用的姿势：

const obj = {
    a: 1,
    b: 'request',
    c: true,
}
 
const finalUrl = `${baseUrl}?${encodeSearchParams(obj)}`

再也不用重复写那些烦人的单双引号和${}占位符了

便捷优雅——爽到无法呼吸~

ES6方法使用体验

若要考虑兼容性问题，最后使用babel等转译插件转为ES5，否则在IOS9及以下，会出现整个js无法加载渲染的问题（笔者遇到的情况是页面js直接无加载，调试工具连接手机后推测出此问题）。

ES5方法简单改写

只是去掉了箭头函数，适配了下IOS9及IOS8,其他机型未测试

/**
 * 拼接对象为请求字符串
 * @param {Object} obj - 待拼接的对象
 * @returns {string} - 拼接成的请求字符串
 */
function encodeSearchParams(obj) {
    var params = []
    Object.keys(obj).forEach(function(key){
        var value = obj[key];
        if (typeof value === 'undefined') {
            value = ''
        }
        // 对于需要编码的文本（比如说中文）我们要进行编码
        params.push([key, encodeURIComponent(value)].join('='))
    });
    return params.join('&')
 
}

写在最后

js拼接字符串 https://blog.csdn.net/sjn0503/article/details/74936613

Node入门

Sun, 25 Feb 2018 23:25:05 GMT

关于

作者： Manuel Kiessling

翻译： goddyzhao & GrayZhang & MondayChen

Github：本书Github代码仓库转载来源：《Node入门》看云阅读：《Node入门》

社区：CNode:Node.js专业中文社区

本书致力于教会你如何用Node.js来开发应用，过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。

状态

你正在阅读的已经是本书的最终版。因此，只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时，才会进行更新。

本书中的代码案例都在Node.js 0.6.11版本中测试过，可以正确工作。

读者对象

本书最适合与我有相似技术背景的读者：至少对一门诸如Ruby、Python、PHP或者Java这样面向对象的语言有一定的经验；对JavaScript处于初学阶段，并且完全是一个Node.js的新手。

这里指的适合对其他编程语言有一定经验的开发者，意思是说，本书不会对诸如数据类型、变量、控制结构等等之类非常基础的概念作介绍。要读懂本书，这些基础的概念我都默认你已经会了。

然而，本书还是会对JavaScript中的函数和对象作详细介绍，因为它们与其他同类编程语言中的函数和对象有很大的不同。

本书结构

读完本书之后，你将完成一个完整的web应用，该应用允许用户浏览页面以及上传文件。

当然了，应用本身并没有什么了不起的，相比为了实现该功能书写的代码本身，我们更关注的是如何创建一个框架来对我们应用的不同模块进行干净地剥离。是不是很玄乎？稍后你就明白了。

本书先从介绍在Node.js环境中进行JavaScript开发和在浏览器环境中进行JavaScript开发的差异开始。

紧接着，会带领大家完成一个最传统的“Hello World”应用，这也是最基础的Node.js应用。

最后，会和大家讨论如何设计一个“真正”完整的应用，剖析要完成该应用需要实现的不同模块，并一步一步介绍如何来实现这些模块。

可以确保的是，在这过程中，大家会学到JavaScript中一些高级的概念、如何使用它们以及为什么使用这些概念就可以实现而其他编程语言中同类的概念就无法实现。

该应用所有的源代码都可以通过本书Github代码仓库.

JavaScript与Node.js

JavaScript与你

抛开技术，我们先来聊聊你以及你和JavaScript的关系。本章的主要目的是想让你看看，对你而言是否有必要继续阅读后续章节的内容。

如果你和我一样，那么你很早就开始利用HTML进行“开发”，正因如此，你接触到了这个叫JavaScript有趣的东西，而对于JavaScript，你只会基本的操作——为web页面添加交互。

而你真正想要的是“干货”，你想要知道如何构建复杂的web站点 —— 于是，你学习了一种诸如PHP、Ruby、Java这样的编程语言，并开始书写“后端”代码。

与此同时，你还始终关注着JavaScript，随着通过一些对jQuery，Prototype之类技术的介绍，你慢慢了解到了很多JavaScript中的进阶技能，同时也感受到了JavaScript绝非仅仅是 _window.open()_ 那么简单。

不过，这些毕竟都是前端技术，尽管当想要增强页面的时候，使用jQuery总让你觉得很爽，但到最后，你顶多是个JavaScript用户，而非JavaScript开发者。

然后，出现了Node.js，服务端的JavaScript，这有多酷啊？

于是，你觉得是时候该重新拾起既熟悉又陌生的JavaScript了。但是别急，写Node.js应用是一件事情；理解为什么它们要以它们书写的这种方式来书写则意味着——你要懂JavaScript。这次是玩真的了。

问题来了：由于JavaScript真正意义上以两种，甚至可以说是三种形态存在（从中世纪90年代的作为对DHTML进行增强的小玩具，到像jQuery那样严格意义上的前端技术，一直到现在的服务端技术），因此，很难找到一个“正确”的方式来学习JavaScript，使得让你书写Node.js应用的时候感觉自己是在真正开发它而不仅仅是使用它。

因为这就是关键：你本身已经是个有经验的开发者，你不想通过到处寻找各种解决方案（其中可能还有不正确的）来学习新的技术，你要确保自己是通过正确的方式来学习这项技术。

当然了，外面不乏很优秀的学习JavaScript的文章。但是，有的时候光靠那些文章是远远不够的。你需要的是指导。

本书的目标就是给你提供指导。

简短申明

业界有非常优秀的JavaScript程序员。而我并非其中一员。

我就是上一节中描述的那个我。我熟悉如何开发后端web应用，但是对“真正”的JavaScript以及Node.js，我都只是新手。我也只是最近学习了一些JavaScript的高级概念，并没有实践经验。

因此，本书并不是一本“从入门到精通”的书，更像是一本“从初级入门到高级入门”的书。

如果成功的话，那么本书就是我当初开始学习Node.js最希望拥有的教程。

服务端JavaScript

JavaScript最早是运行在浏览器中，然而浏览器只是提供了一个上下文，它定义了使用JavaScript可以做什么，但并没有“说”太多关于JavaScript语言本身可以做什么。事实上，JavaScript是一门“完整”的语言：它可以使用在不同的上下文中，其能力与其他同类语言相比有过之而无不及。

Node.js事实上就是另外一种上下文，它允许在后端（脱离浏览器环境）运行JavaScript代码。

要实现在后台运行JavaScript代码，代码需要先被解释然后正确的执行。Node.js的原理正是如此，它使用了Google的V8虚拟机（Google的Chrome浏览器使用的JavaScript执行环境），来解释和执行JavaScript代码。

除此之外，伴随着Node.js的还有许多有用的模块，它们可以简化很多重复的劳作，比如向终端输出字符串。

因此，Node.js事实上既是一个运行时环境，同时又是一个库。

要使用Node.js,首先需要进行安装。关于如何安装Node.js，这里就不赘述了，可以直接参考官方的安装指南。安装完成后，继续回来阅读本书下面的内容。

“Hello World”

好了，“废话”不多说了，马上开始我们第一个Node.js应用：“Hello World”。

打开你最喜欢的编辑器，创建一个helloworld.js 文件。我们要做就是向STDOUT输出“Hello World”，如下是实现该功能的代码：

console.log("Hello World");

保存该文件，并通过Node.js来执行：

node helloworld.js

正常的话，就会在终端输出Hello World 。

好吧，我承认这个应用是有点无趣，那么下面我们就来点“干货”。

一个完整的基于Node.js的web应用

用例

我们来把目标设定得简单点，不过也要够实际才行：

用户可以通过浏览器使用我们的应用。当用户请求 http://domain8/start 时，可以看到一个欢迎页面，页面上有一个文件上传的表单。用户可以选择一个图片并提交表单，随后文件将被上传到http://domain/upload ，该页面完成上传后会把图片显示在页面上。差不多了，你现在也可以去Google一下，找点东西乱搞一下来完成功能。但是我们现在先不做这个。

更进一步地说，在完成这一目标的过程中，我们不仅仅需要基础的代码而不管代码是否优雅。我们还要对此进行抽象，来寻找一种适合构建更为复杂的Node.js应用的方式。

应用不同模块分析

我们来分解一下这个应用，为了实现上文的用例，我们需要实现哪些部分呢？

我们需要提供Web页面，因此需要一个_HTTP服务器_
对于不同的请求，根据请求的URL，我们的服务器需要给予不同的响应，因此我们需要一个_路由_，用于把请求对应到请求处理程序（request handler）
当请求被服务器接收并通过路由传递之后，需要可以对其进行处理，因此我们需要最终的_请求处理程序_
路由还应该能处理POST数据，并且把数据封装成更友好的格式传递给请求处理入程序，因此需要_请求数据处理功能_
我们不仅仅要处理URL对应的请求，还要把内容显示出来，这意味着我们需要一些_视图逻辑_ 供请求处理程序使用，以便将内容发送给用户的浏览器
最后，用户需要上传图片，所以我们需要_上传处理功能_来处理这方面的细节

我们先来想想，使用PHP的话我们会怎么构建这个结构。一般来说我们会用一个Apache HTTP服务器并配上mod_php5模块。从这个角度看，整个“接收HTTP请求并提供Web页面”的需求根本不需要PHP来处理。不过对Node.js来说，概念完全不一样了。使用Node.js时，我们不仅仅在实现一个应用，同时还实现了整个HTTP服务器。事实上，我们的Web应用以及对应的Web服务器基本上是一样的。

听起来好像有一大堆活要做，但随后我们会逐渐意识到，对Node.js来说这并不是什么麻烦的事。

现在我们就来开始实现之路，先从第一个部分—HTTP服务器着手。

构建应用的模块

一个基础的HTTP服务器

当我准备开始写我的第一个“真正的”Node.js应用的时候，我不但不知道怎么写Node.js代码，也不知道怎么组织这些代码。我应该把所有东西都放进一个文件里吗？网上有很多教程都会教你把所有的逻辑都放进一个用Node.js写的基础HTTP服务器里。但是如果我想加入更多的内容，同时还想保持代码的可读性呢？实际上，只要把不同功能的代码放入不同的模块中，保持代码分离还是相当简单的。

这种方法允许你拥有一个干净的主文件（main file），你可以用Node.js执行它；同时你可以拥有干净的模块，它们可以被主文件和其他的模块调用。

那么，现在我们来创建一个用于启动我们的应用的主文件，和一个保存着我们的HTTP服务器代码的模块。

在我的印象里，把主文件叫做_index.js_或多或少是个标准格式。把服务器模块放进叫_server.js_的文件里则很好理解。

让我们先从服务器模块开始。在你的项目的根目录下创建一个叫_server.js_的文件，并写入以下代码：

var http = require("http");
 
http.createServer(function(request, response)  {
  response.writeHead(200,  {"Content-Type":  "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);

搞定！你刚刚完成了一个可以工作的HTTP服务器。为了证明这一点，我们来运行并且测试这段代码。首先，用Node.js执行你的脚本：

node server.js

接下来，打开浏览器访问 http://localhost:8888/，你会看到一个写着“Hello World”的网页。这很有趣，不是吗？让我们先来谈谈HTTP服务器的问题，把如何组织项目的事情先放一边吧，你觉得如何？我保证之后我们会解决那个问题的。

分析HTTP服务器

那么接下来，让我们分析一下这个HTTP服务器的构成。

第一行_请求（require）_ Node.js自带的 http 模块，并且把它赋值给 http 变量。接下来我们调用http模块提供的函数： createServer 。这个函数会返回一个对象，这个对象有一个叫做 listen 的方法，这个方法有一个数值参数，指定这个HTTP服务器监听的端口号。咱们暂时先不管 http.createServer 的括号里的那个函数定义。我们本来可以用这样的代码来启动服务器并侦听8888端口：

var http = require("http");
 
var server = http.createServer();
server.listen(8888);

这段代码只会启动一个侦听8888端口的服务器，它不做任何别的事情，甚至连请求都不会应答。

最有趣（而且，如果你之前习惯使用一个更加保守的语言，比如PHP，它还很奇怪）的部分是 createSever() 的第一个参数，一个函数定义。实际上，这个函数定义是 createServer() 的第一个也是唯一一个参数。因为在JavaScript中，函数和其他变量一样都是可以被传递的。

进行函数传递

举例来说，你可以这样做：

function say(word)  {
  console.log(word);
}
 
function execute(someFunction, value)  {
  someFunction(value);
}
 
execute(say,  "Hello");

请仔细阅读这段代码！在这里，我们把 say 函数作为_execute_函数的第一个变量进行了传递。这里传递的不是 say 的返回值，而是 say 本身！这样一来， say 就变成了_execute_ 中的本地变量 someFunction ，execute可以通过调用 someFunction() （带括号的形式）来使用 say 函数。当然，因为 say 有一个变量， execute 在调用 someFunction 时可以传递这样一个变量。我们可以，就像刚才那样，用它的名字把一个函数作为变量传递。但是我们不一定要绕这个“先定义，再传递”的圈子，我们可以直接在另一个函数的括号中定义和传递这个函数：

function execute(someFunction, value)  {
  someFunction(value);
}
 
execute(function(word){ console.log(word)  },  "Hello");

我们在 execute 接受第一个参数的地方直接定义了我们准备传递给 execute 的函数。用这种方式，我们甚至不用给这个函数起名字，这也是为什么它被叫做匿名函数 。这是我们和我所认为的“进阶”JavaScript的第一次亲密接触，不过我们还是得循序渐进。现在，我们先接受这一点：在JavaScript中，一个函数可以作为另一个函数接收一个参数。我们可以先定义一个函数，然后传递，也可以在传递参数的地方直接定义函数。

函数传递是如何让HTTP服务器工作的

带着这些知识，我们再来看看我们简约而不简单的HTTP服务器：

var http = require("http");
 
http.createServer(function(request, response)  {
  response.writeHead(200,  {"Content-Type":  "text/plain"});
  response.write("Hello World");
  response.end();
}).listen(8888);

现在它看上去应该清晰了很多：我们向 createServer 函数传递了一个匿名函数。用这样的代码也可以达到同样的目的：

var http = require("http");
 
function onRequest(request, response)  {
  response.writeHead(200,  {"Content-Type":  "text/plain"});
  response.write("Hello World");
  response.end();
}
 
http.createServer(onRequest).listen(8888);

也许现在我们该问这个问题了：我们为什么要用这种方式呢？

基于事件驱动的回调

这个问题可不好回答（至少对我来说），不过这是Node.js原生的工作方式。它是事件驱动的，这也是它为什么这么快的原因。

你也许会想花点时间读一下Felix Geisendörfer的大作Understanding node.js，它介绍了一些背景知识。这一切都归结于“Node.js是事件驱动的” 这一事实。好吧，其实我也不是特别确切的了解这句话的意思。不过我会试着解释，为什么它对我们用Node.js写网络应用（Web based application）是有意义的。

当我们使用http.createServer方法的时候，我们当然不只是想要一个侦听某个端口的服务器，我们还想要它在服务器收到一个HTTP请求的时候做点什么。问题是，这是异步的：请求任何时候都可能到达，但是我们的服务器却跑在一个单进程中。

写PHP应用的时候，我们一点也不为此担心：任何时候当有请求进入的时候，网页服务器（通常是Apache）就为这一请求新建一个进程，并且开始从头到尾执行相应的PHP脚本。

那么在我们的Node.js程序中，当一个新的请求到达8888端口的时候，我们怎么控制流程呢？

嗯，这就是Node.js/JavaScript的事件驱动设计能够真正帮上忙的地方了——虽然我们还得学一些新概念才能掌握它。让我们来看看这些概念是怎么应用在我们的服务器代码里的。

我们创建了服务器，并且向创建它的方法传递了一个函数。无论何时我们的服务器收到一个请求，这个函数就会被调用。

我们不知道这件事情什么时候会发生，但是我们现在有了一个处理请求的地方：它就是我们传递过去的那个函数。至于它是被预先定义的函数还是匿名函数，就无关紧要了。

这个就是传说中的回调 。我们给某个方法传递了一个函数，这个方法在有相应事件发生时调用这个函数来进行_回调_。至少对我来说，需要一些功夫才能弄懂它。你如果还是不太确定的话就再去读读Felix的博客文章。

让我们再来琢磨琢磨这个新概念。我们怎么证明，在创建完服务器之后，即使没有HTTP请求进来、我们的回调函数也没有被调用的情况下，我们的代码还继续有效呢？我们试试这个：

var http = require("http");
 
function onRequest(request, response)  {
  console.log("Request received.");
  response.writeHead(200,  {"Content-Type":  "text/plain"});
  response.write("Hello World");
  response.end();
}
 
http.createServer(onRequest).listen(8888);
 
console.log("Server has started.");

注意：在onRequest （我们的回调函数）触发的地方，我用console.log 输出了一段文本。在HTTP服务器开始工作_之后_，也输出一段文本。当我们与往常一样，运行它_node server.js_时，它会马上在命令行上输出“Server has started.”。当我们向服务器发出请求（在浏览器访问http://localhost:8888/），“Request received.”这条消息就会在命令行中出现。这就是事件驱动的异步服务器端JavaScript和它的回调啦！

（请注意，当我们在服务器访问网页时，我们的服务器可能会输出两次“Request received.”。那是因为大部分服务器都会在你访问 http://localhost:8888 /时尝试读取 http://localhost:8888/favicon.ico )

服务器是如何处理请求的

好的，接下来我们简单分析一下我们服务器代码中剩下的部分，也就是我们的回调函数 onRequest() 的主体部分。当回调启动，我们的 onRequest() 函数被触发的时候，有两个参数被传入：request 和 response 。它们是对象，你可以使用它们的方法来处理HTTP请求的细节，并且响应请求（比如向发出请求的浏览器发回一些东西）。

所以我们的代码就是：当收到请求时，使用 response.writeHead() 函数发送一个HTTP状态200和HTTP头的内容类型（content-type），使用 response.write() 函数在HTTP相应主体中发送文本“Hello World”。最后，我们调用 response.end() 完成响应。目前来说，我们对请求的细节并不在意，所以我们没有使用 request 对象。

服务端的模块放在哪里

OK，就像我保证过的那样，我们现在可以回到我们如何组织应用这个问题上了。我们现在在 server.js 文件中有一个非常基础的HTTP服务器代码，而且我提到通常我们会有一个叫 index.js 的文件去调用应用的其他模块（比如 server.js 中的HTTP服务器模块）来引导和启动应用。我们现在就来谈谈怎么把 server.js 变成一个真正的Node.js模块，使它可以被我们（还没动工）的 index.js 主文件使用。也许你已经注意到，我们已经在代码中使用了模块了。像这样：

var http = require("http");
 
http.createServer(...);

Node.js中自带了一个叫做“http”的模块，我们在我们的代码中请求它并把返回值赋给一个本地变量。

这把我们的本地变量变成了一个拥有所有 http 模块所提供的公共方法的对象。给这种本地变量起一个和模块名称一样的名字是一种惯例，但是你也可以按照自己的喜好来：

var foo = require("http");
 
...
 
foo.createServer(...);

很好，怎么使用Node.js内部模块已经很清楚了。我们怎么创建自己的模块，又怎么使用它呢？

等我们把 server.js 变成一个真正的模块，你就能搞明白了。事实上，我们不用做太多的修改。把某段代码变成模块意味着我们需要把我们希望提供其功能的部分导出到请求这个模块的脚本。目前，我们的HTTP服务器需要导出的功能非常简单，因为请求服务器模块的脚本仅仅是需要启动服务器而已。

我们把我们的服务器脚本放到一个叫做 start 的函数里，然后我们会导出这个函数。

var http = require("http");
 
function start()  {  
    function onRequest(request, response)  {
        console.log("Request received.");
        response.writeHead(200,  {"Content-Type":  "text/plain"});
        response.write("Hello World");
        response.end();  
    }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

这样，我们现在就可以创建我们的主文件 index.js 并在其中启动我们的HTTP了，虽然服务器的代码还在 server.js 中。创建 index.js 文件并写入以下内容：

var server = require("./server");
 
server.start();

正如你所看到的，我们可以像使用任何其他的内置模块一样使用server模块：请求这个文件并把它指向一个变量，其中已导出的函数就可以被我们使用了。

好了。我们现在就可以从我们的主要脚本启动我们的的应用了，而它还是老样子：

node index.js

非常好，我们现在可以把我们的应用的不同部分放入不同的文件里，并且通过生成模块的方式把它们连接到一起了。

我们仍然只拥有整个应用的最初部分：我们可以接收HTTP请求。但是我们得做点什么——对于不同的URL请求，服务器应该有不同的反应。

对于一个非常简单的应用来说，你可以直接在回调函数 onRequest() 中做这件事情。不过就像我说过的，我们应该加入一些抽象的元素，让我们的例子变得更有趣一点儿。处理不同的HTTP请求在我们的代码中是一个不同的部分，叫做“路由选择”——那么，我们接下来就创造一个叫做路由 的模块吧。

如何来进行请求的“路由”

我们要为路由提供请求的URL和其他需要的GET及POST参数，随后路由需要根据这些数据来执行相应的代码（这里“代码”对应整个应用的第三部分：一系列在接收到请求时真正工作的处理程序）。

因此，我们需要查看HTTP请求，从中提取出请求的URL以及GET/POST参数。这一功能应当属于路由还是服务器（甚至作为一个模块自身的功能）确实值得探讨，但这里暂定其为我们的HTTP服务器的功能。

我们需要的所有数据都会包含在request对象中，该对象作为_onRequest()_回调函数的第一个参数传递。但是为了解析这些数据，我们需要额外的Node.JS模块，它们分别是_url_和_querystring_模块。

                               url.parse(string).query
                                           |
           url.parse(string).pathname      |
                       |                   |
                       |                   |
                     ------ -------------------
http://localhost:8888/start?foo=bar&hello=world
                                ---       -----
                                 |          |
                                 |          |
              querystring(string)["foo"]    |
                                            |
                         querystring(string)["hello"]

当然我们也可以用_querystring_模块来解析POST请求体中的参数，稍后会有演示。

现在我们来给_onRequest()_函数加上一些逻辑，用来找出浏览器请求的URL路径：

var http = require("http");
var url = require("url");
 
function start()  {  
    function onRequest(request, response)  {    
        var pathname = url.parse(request.url).pathname;
        console.log("Request for "  + pathname +  " received.");
        response.writeHead(200,  {"Content-Type":  "text/plain"});
        response.write("Hello World");
        response.end();  
    }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

好了，我们的应用现在可以通过请求的URL路径来区别不同请求了—这使我们得以使用（还未完成的）路由来将请求以URL路径为基准映射到处理程序上。

在我们所要构建的应用中，这意味着来自_/start_和_/upload_ 的请求可以使用不同的代码来处理。稍后我们将看到这些内容是如何整合到一起的。

现在我们可以来编写路由了，建立一个名为_router.js_的文件，添加以下内容：

function route(pathname)  {
  console.log("About to route a request for "  + pathname);
}
 
exports.route = route;

如你所见，这段代码什么也没干，不过对于现在来说这是应该的。在添加更多的逻辑以前，我们先来看看如何把路由和服务器整合起来。

我们的服务器应当知道路由的存在并加以有效利用。我们当然可以通过硬编码的方式将这一依赖项绑定到服务器上，但是其它语言的编程经验告诉我们这会是一件非常痛苦的事，因此我们将使用依赖注入的方式较松散地添加路由模块（你可以读读Martin Fowlers关于依赖注入的大作来作为背景知识）。首先，我们来扩展一下服务器的_start()_函数，以便将路由函数作为参数传递过去：

var http = require("http");
var url = require("url");
 
function start(route)  {  
    function onRequest(request, response)  {
        var pathname = url.parse(request.url).pathname;
        console.log("Request for "  + pathname +  " received.");
 
        route(pathname);
 
        response.writeHead(200,  {"Content-Type":  "text/plain"});
        response.write("Hello World");
        response.end();
    }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

同时，我们会相应扩展_index.js_，使得路由函数可以被注入到服务器中：

var server = require("./server");
var router = require("./router");
 
server.start(router.route);

在这里，我们传递的函数依旧什么也没做。

如果现在启动应用_（node index.js，始终记得这个命令行）_，随后请求一个URL，你将会看到应用输出相应的信息，这表明我们的HTTP服务器已经在使用路由模块了，并会将请求的路径传递给路由：

bash$ node index.js
Request for /foo received.
About to route a request for /foo

（以上输出已经去掉了比较烦人的/favicon.ico请求相关的部分）。

行为驱动执行

请允许我再次脱离主题，在这里谈一谈函数式编程。

将函数作为参数传递并不仅仅出于技术上的考量。对软件设计来说，这其实是个哲学问题。想想这样的场景：在index文件中，我们可以将_router_对象传递进去，服务器随后可以调用这个对象的_route_函数。

就像这样，我们传递一个东西，然后服务器利用这个东西来完成一些事。嗨那个叫路由的东西，能帮我把这个路由一下吗？

但是服务器其实不需要这样的东西。它只需要把事情做完就行，其实为了把事情做完，你根本不需要东西，你需要的是动作。也就是说，你不需要_名词_，你需要_动词_。

理解了这个概念里最核心、最基本的思想转换后，我自然而然地理解了函数编程。

我是在读了Steve Yegge的大作名词王国中的死刑之后理解函数编程。你也去读一读这本书吧，真的。这是曾给予我阅读的快乐的关于软件的书籍之一。

路由给真正的请求处理程序

回到正题，现在我们的HTTP服务器和请求路由模块已经如我们的期望，可以相互交流了，就像一对亲密无间的兄弟。

当然这还远远不够，路由，顾名思义，是指我们要针对不同的URL有不同的处理方式。例如处理_/start_的“业务逻辑”就应该和处理_/upload_的不同。

在现在的实现下，路由过程会在路由模块中“结束”，并且路由模块并不是真正针对请求“采取行动”的模块，否则当我们的应用程序变得更为复杂时，将无法很好地扩展。

我们暂时把作为路由目标的函数称为请求处理程序。现在我们不要急着来开发路由模块，因为如果请求处理程序没有就绪的话，再怎么完善路由模块也没有多大意义。

应用程序需要新的部件，因此加入新的模块 — 已经无需为此感到新奇了。我们来创建一个叫做_requestHandlers_的模块，并对于每一个请求处理程序，添加一个占位用函数，随后将这些函数作为模块的方法导出：

function start()  {
  console.log("Request handler 'start' was called.");
}
 
function upload()  {
  console.log("Request handler 'upload' was called.");
}
 
exports.start = start;
exports.upload = upload;

这样我们就可以把请求处理程序和路由模块连接起来，让路由“有路可寻”。

在这里我们得做个决定：是将_requestHandlers_模块硬编码到路由里来使用，还是再添加一点依赖注入？虽然和其他模式一样，依赖注入不应该仅仅为使用而使用，但在现在这个情况下，使用依赖注入可以让路由和请求处理程序之间的耦合更加松散，也因此能让路由的重用性更高。

这意味着我们得将请求处理程序从服务器传递到路由中，但感觉上这么做更离谱了，我们得一路把这堆请求处理程序从我们的主文件传递到服务器中，再将之从服务器传递到路由。

那么我们要怎么传递这些请求处理程序呢？别看现在我们只有2个处理程序，在一个真实的应用中，请求处理程序的数量会不断增加，我们当然不想每次有一个新的URL或请求处理程序时，都要为了在路由里完成请求到处理程序的映射而反复折腾。除此之外，在路由里有一大堆_if request == x then call handler y_也使得系统丑陋不堪。

仔细想想，有一大堆东西，每个都要映射到一个字符串（就是请求的URL）上？似乎关联数组（associative array）能完美胜任。

不过结果有点令人失望，JavaScript没提供关联数组 — 也可以说它提供了？事实上，在JavaScript中，真正能提供此类功能的是它的对象。

在这方面，http://msdn.microsoft.com/en-us/magazine/cc163419.aspx有一个不错的介绍，我在此摘录一段：

在C++或C#中，当我们谈到对象，指的是类或者结构体的实例。对象根据他们实例化的模板（就是所谓的类），会拥有不同的属性和方法。但在JavaScript里对象不是这个概念。在JavaScript中，对象就是一个键/值对的集合 — 你可以把JavaScript的对象想象成一个键为字符串类型的字典。

但如果JavaScript的对象仅仅是键/值对 的集合，它又怎么会拥有方法呢？好吧，这里的值可以是字符串、数字或者……函数！

好了，最后再回到代码上来。现在我们已经确定将一系列请求处理程序通过一个对象来传递，并且需要使用松耦合的方式将这个对象注入到_route()_函数中。

我们先将这个对象引入到主文件_index.js_中：

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
 
var handle =  {}
handle["/"]  = requestHandlers.start;
handle["/start"]  = requestHandlers.start;
handle["/upload"]  = requestHandlers.upload;
 
server.start(router.route, handle);

虽然_handle_并不仅仅是一个“东西”（一些请求处理程序的集合），我还是建议以一个动词作为其命名，这样做可以让我们在路由中使用更流畅的表达式，稍后会有说明。

正如所见，将不同的URL映射到相同的请求处理程序上是很容易的：只要在对象中添加一个键为"/" 的属性，对应_requestHandlers.start_即可，这样我们就可以干净简洁地配置/start 和/ 的请求都交由_start_这一处理程序处理。在完成了对象的定义后，我们把它作为额外的参数传递给服务器，为此将_server.js_修改如下：

var http = require("http");
var url = require("url");
 
function start(route, handle)  {  
    function onRequest(request, response)  {    
    var pathname = url.parse(request.url).pathname;
    console.log("Request for "  + pathname +  " received.");
 
    route(handle, pathname);
 
    response.writeHead(200,  {"Content-Type":  "text/plain"});
    response.write("Hello World");
    response.end();  }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

这样我们就在_start()_函数里添加了_handle_参数，并且把handle对象作为第一个参数传递给了_route()_回调函数。

然后我们相应地在_route.js_文件中修改_route()_函数：

function route(handle, pathname)  {
    console.log("About to route a request for "  + pathname);  
    if  (typeof handle[pathname]  ===  'function')  {
        handle[pathname]();  }  
    else  {
        console.log("No request handler found for "  + pathname);  
    }
}
 
exports.route = route;

通过以上代码，我们首先检查给定的路径对应的请求处理程序是否存在，如果存在的话直接调用相应的函数。我们可以用从关联数组中获取元素一样的方式从传递的对象中获取请求处理函数，因此就有了简洁流畅的形如handle[pathname](); 的表达式，这个感觉就像在前方中提到的那样：“嗨，请帮我处理了这个路径”。有了这些，我们就把服务器、路由和请求处理程序在一起了。现在我们启动应用程序并在浏览器中访问http://localhost:8888/start，以下日志可以说明系统调用了正确的请求处理程序：

Server has started.
Request for /start received.
About to route a request for /start
Request handler 'start' was called.

并且在浏览器中打开http://localhost:8888/可以看到这个请求同样被start请求处理程序处理了：

Request for / received.
About to route a request for /
Request handler 'start' was called.

让请求处理程序作出响应

很好。不过现在要是请求处理程序能够向浏览器返回一些有意义的信息而并非全是“Hello World”，那就更好了。

这里要记住的是，浏览器发出请求后获得并显示的“Hello World”信息仍是来自于我们_server.js_文件中的_onRequest_函数。

其实“处理请求”说白了就是“对请求作出响应”，因此，我们需要让请求处理程序能够像_onRequest_函数那样可以和浏览器进行“对话”。

不好的实现方式

对于我们这样拥有PHP或者Ruby技术背景的开发者来说，最直截了当的实现方式事实上并不是非常靠谱：看似有效，实则未必如此。

这里我指的“直截了当的实现方式”意思是：让请求处理程序通过_onRequest_函数直接返回（return()）他们要展示给用户的信息。我们先就这样去实现，然后再来看为什么这不是一种很好的实现方式。

让我们从让请求处理程序返回需要在浏览器中显示的信息开始。我们需要将_requestHandler.js_修改为如下形式：

function start()  {
    console.log("Request handler 'start' was called.");  
    return  "Hello Start";
}
 
function upload()  {
    console.log("Request handler 'upload' was called.");  
    return  "Hello Upload";
}
 
exports.start = start;
exports.upload = upload;

好的。同样的，请求路由需要将请求处理程序返回给它的信息返回给服务器。因此，我们需要将_router.js_修改为如下形式：

function route(handle, pathname)  {
  console.log("About to route a request for "  + pathname);  
    if  (typeof handle[pathname]  ===  'function')  {    
        return handle[pathname]();  }  
    else  {
        console.log("No request handler found for "  + pathname);    
        return  "404 Not found";  
    }
}
 
exports.route = route;

正如上述代码所示，当请求无法路由的时候，我们也返回了一些相关的错误信息。

最后，我们需要对我们的_server.js_进行重构以使得它能够将请求处理程序通过请求路由返回的内容响应给浏览器，如下所示：

var http = require("http");
var url = require("url");
 
function start(route, handle)  {  
    function onRequest(request, response)  {    
        var pathname = url.parse(request.url).pathname;
        console.log("Request for "  + pathname +  " received.");
 
        response.writeHead(200,  {"Content-Type":  "text/plain"});    
        var content = route(handle, pathname)
        response.write(content);
        response.end();  
    }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

如果我们运行重构后的应用，一切都会工作的很好：请求http://localhost:8888/start,浏览器会输出“Hello Start”，请求http://localhost:8888/upload会输出“Hello Upload”,而请求http://localhost:8888/foo 会输出“404 Not found”。好，那么问题在哪里呢？简单的说就是：当未来有请求处理程序需要进行非阻塞的操作的时候，我们的应用就“挂”了。

没理解？没关系，下面就来详细解释下。

阻塞与非阻塞

正如此前所提到的，当在请求处理程序中包括非阻塞操作时就会出问题。但是，在说这之前，我们先来看看什么是阻塞操作。

我不想去解释“阻塞”和“非阻塞”的具体含义，我们直接来看，当在请求处理程序中加入阻塞操作时会发生什么。

这里，我们来修改下_start_请求处理程序，我们让它等待10秒以后再返回“Hello Start”。因为，JavaScript中没有类似_sleep()_这样的操作，所以这里只能够来点小Hack来模拟实现。

让我们将_requestHandlers.js_修改成如下形式：

function start()  {
  console.log("Request handler 'start' was called.");  
    function sleep(milliSeconds)  {    
        var startTime =  new  Date().getTime();    
        while  (new  Date().getTime() < startTime + milliSeconds);  
    }
 
    sleep(10000);  
    return  "Hello Start";
}
 
function upload()  {
    console.log("Request handler 'upload' was called.");  
    return  "Hello Upload";
}
 
exports.start = start;
exports.upload = upload;

上述代码中，当函数_start()_被调用的时候，Node.js会先等待10秒，之后才会返回“Hello Start”。当调用_upload()_的时候，会和此前一样立即返回。

（当然了，这里只是模拟休眠10秒，实际场景中，这样的阻塞操作有很多，比方说一些长时间的计算操作等。）

接下来就让我们来看看，我们的改动带来了哪些变化。

如往常一样，我们先要重启下服务器。为了看到效果，我们要进行一些相对复杂的操作（跟着我一起做）：首先，打开两个浏览器窗口或者标签页。在第一个浏览器窗口的地址栏中输入http://localhost:8888/start，但是先不要打开它！在第二个浏览器窗口的地址栏中输入http://localhost:8888/upload，同样的，先不要打开它！接下来，做如下操作：在第一个窗口中（“/start”） 按下回车，然后快速切换到第二个窗口中（“/upload”） 按下回车。

注意，发生了什么：/start URL加载花了10秒，这和我们预期的一样。但是，/upload URL居然也花了10秒，而它在对应的请求处理程序中并没有类似于_sleep()_这样的操作！

这到底是为什么呢？原因就是_start()_包含了阻塞操作。形象的说就是“它阻塞了所有其他的处理工作”。

这显然是个问题，因为Node一向是这样来标榜自己的：“在node中除了代码，所有一切都是并行执行的”。

这句话的意思是说，Node.js可以在不新增额外线程的情况下，依然可以对任务进行并行处理 —— Node.js是单线程的。它通过事件轮询（event loop）来实现并行操作，对此，我们应该要充分利用这一点 —— 尽可能的避免阻塞操作，取而代之，多使用非阻塞操作。

然而，要用非阻塞操作，我们需要使用回调，通过将函数作为参数传递给其他需要花时间做处理的函数（比方说，休眠10秒，或者查询数据库，又或者是进行大量的计算）。

对于Node.js来说，它是这样处理的：“嘿，probablyExpensiveFunction()（译者注：这里指的就是需要花时间处理的函数），你继续处理你的事情，我（Node.js线程）先不等你了，我继续去处理你后面的代码，请你提供一个callbackFunction()，等你处理完之后我会去调用该回调函数的，谢谢！” 。

（如果想要了解更多关于事件轮询细节，可以阅读Mixu的博文——理解node.js的事件轮询。）接下来，我们会介绍一种错误的使用非阻塞操作的方式。

和上次一样，我们通过修改我们的应用来暴露问题。

这次我们还是拿_start_请求处理程序来“开刀”。将其修改成如下形式：

var exec = require("child_process").exec;
 
function start()  {
  console.log("Request handler 'start' was called.");  
    var content =  "empty";
 
    exec("ls -lah",  
        function  (error, stdout, stderr)  {    
        content = stdout;  });  
        return content;
    }
 
function upload()  {
    console.log("Request handler 'upload' was called.");  
    return  "Hello Upload";
}
 
exports.start = start;
exports.upload = upload;

上述代码中，我们引入了一个新的Node.js模块child_process ，之所以用它，是为了实现一个既简单又实用的非阻塞操作：exec()。

exec() 做了什么呢？它从Node.js来执行一个shell命令。在上述例子中，我们用它来获取当前目录下所有的文件（“ls -lah”）,然后，当/start_URL请求的时候将文件信息输出到浏览器中。上述代码是非常直观的：创建了一个新的变量_content_（初始值为“empty”），执行“ls -lah”命令，将结果赋值给content，最后将content返回。

和往常一样，我们启动服务器，然后访问“http://localhost:8888/start” 。之后会载入一个漂亮的web页面，其内容为“empty”。怎么回事？

这个时候，你可能大致已经猜到了，_exec()_在非阻塞这块发挥了神奇的功效。它其实是个很好的东西，有了它，我们可以执行非常耗时的shell操作而无需迫使我们的应用停下来等待该操作。

（如果想要证明这一点，可以将“ls -lah” 换成比如“find /” 这样更耗时的操作来效果）。

然而，针对浏览器显示的结果来看，我们并不满意我们的非阻塞操作，对吧？

好，接下来，我们来修正这个问题。在这过程中，让我们先来看看为什么当前的这种方式不起作用。

问题就在于，为了进行非阻塞工作，_exec()_使用了回调函数。

在我们的例子中，该回调函数就是作为第二个参数传递给_exec()_的匿名函数：

function  (error, stdout, stderr)  {  
    content = stdout;
}

现在就到了问题根源所在了：我们的代码是同步执行的，这就意味着在调用_exec()_之后，Node.js会立即执行 return content; 在这个时候，_content_仍然是“empty”，因为传递给_exec()_的回调函数还未执行到——因为_exec()_的操作是异步的。我们这里“ls -lah”的操作其实是非常快的（除非当前目录下有上百万个文件）。这也是为什么回调函数也会很快的执行到 —— 不过，不管怎么说它还是异步的。

为了让效果更加明显，我们想象一个更耗时的命令： “find /” ，它在我机器上需要执行1分钟左右的时间，然而，尽管在请求处理程序中，我把“ls -lah”换成“find /”，当打开/start URL的时候，依然能够立即获得HTTP响应 —— 很明显，当_exec()_在后台执行的时候，Node.js自身会继续执行后面的代码。并且我们这里假设传递给_exec()_的回调函数，只会在“find /”命令执行完成之后才会被调用。

那究竟我们要如何才能实现将当前目录下的文件列表显示给用户呢？

好，了解了这种不好的实现方式之后，我们接下来来介绍如何以正确的方式让请求处理程序对浏览器请求作出响应。

以非阻塞操作进行请求响应

我刚刚提到了这样一个短语 —— “正确的方式”。而事实上通常“正确的方式”一般都不简单。

不过，用Node.js就有这样一种实现方案：函数传递。下面就让我们来具体看看如何实现。

到目前为止，我们的应用已经可以通过应用各层之间传递值的方式（请求处理程序 -> 请求路由 -> 服务器）将请求处理程序返回的内容（请求处理程序最终要显示给用户的内容）传递给HTTP服务器。

现在我们采用如下这种新的实现方式：相对采用将内容传递给服务器的方式，我们这次采用将服务器“传递”给内容的方式。从实践角度来说，就是将_response_对象（从服务器的回调函数_onRequest()_获取）通过请求路由传递给请求处理程序。随后，处理程序就可以采用该对象上的函数来对请求作出响应。

原理就是如此，接下来让我们来一步步实现这种方案。

先从_server.js_开始：

var http = require("http");
var url = require("url");
 
function start(route, handle)  {  
    function onRequest(request, response)  {    
        var pathname = url.parse(request.url).pathname;
        console.log("Request for "  + pathname +  " received.");
 
        route(handle, pathname, response);  
    }
 
    http.createServer(onRequest).listen(8888);
    console.log("Server has started.");
}
 
exports.start = start;

相对此前从_route()_函数获取返回值的做法，这次我们将response对象作为第三个参数传递给_route()_函数，并且，我们将_onRequest()_处理程序中所有有关_response_的函数调都移除，因为我们希望这部分工作让_route()_函数来完成。

下面就来看看我们的_router.js_:

function route(handle, pathname, response)  {
      console.log("About to route a request for "  + pathname);  
    if  (typeof handle[pathname]  ===  'function')  {
        handle[pathname](response);  }  
    else  {
        console.log("No request handler found for "  + pathname);
        response.writeHead(404,  {"Content-Type":  "text/plain"});
        response.write("404 Not found");
        response.end();  
    }
}
 
exports.route = route;

同样的模式：相对此前从请求处理程序中获取返回值，这次取而代之的是直接传递_response_对象。

如果没有对应的请求处理器处理，我们就直接返回“404”错误。

最后，我们将_requestHandler.js_修改为如下形式：

var exec = require("child_process").exec;
 
function start(response)  {
  console.log("Request handler 'start' was called.");
 
  exec("ls -lah",  function  (error, stdout, stderr)  {
    response.writeHead(200,  {"Content-Type":  "text/plain"});
    response.write(stdout);
    response.end();  });
}
 
function upload(response)  {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200,  {"Content-Type":  "text/plain"});
  response.write("Hello Upload");
  response.end();
}
 
exports.start = start;
exports.upload = upload;

我们的处理程序函数需要接收response参数，为了对请求作出直接的响应。

_start_处理程序在_exec()_的匿名回调函数中做请求响应的操作，而_upload_处理程序仍然是简单的回复“Hello World”，只是这次是使用_response_对象而已。

这时再次我们启动应用（node index.js），一切都会工作的很好。如果想要证明_/start_处理程序中耗时的操作不会阻塞对_/upload_请求作出立即响应的话，可以将_requestHandlers.js_修改为如下形式：

var exec = require("child_process").exec;
 
function start(response)  {
  console.log("Request handler 'start' was called.");
 
  exec("find /",    { timeout:  10000, maxBuffer:  20000*1024  },    function  (error, stdout, stderr)  {
      response.writeHead(200,  {"Content-Type":  "text/plain"});
      response.write(stdout);
      response.end();    });
}
 
function upload(response)  {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200,  {"Content-Type":  "text/plain"});
  response.write("Hello Upload");
  response.end();
}
 
exports.start = start;
exports.upload = upload;

这样一来，当请求http://localhost:8888/start的时候，会花10秒钟的时间才载入，而当请求http://localhost:8888/upload的时候，会立即响应，纵然这个时候/start 响应还在处理中。

更有用的场景

到目前为止，我们做的已经很好了，但是，我们的应用没有实际用途。

服务器，请求路由以及请求处理程序都已经完成了，下面让我们按照此前的用例给网站添加交互：用户选择一个文件，上传该文件，然后在浏览器中看到上传的文件。为了保持简单，我们假设用户只会上传图片，然后我们应用将该图片显示到浏览器中。

好，下面就一步步来实现，鉴于此前已经对JavaScript原理性技术性的内容做过大量介绍了，这次我们加快点速度。

要实现该功能，分为如下两步：首先，让我们来看看如何处理POST请求（非文件上传），之后，我们使用Node.js的一个用于文件上传的外部模块。之所以采用这种实现方式有两个理由。

第一，尽管在Node.js中处理基础的POST请求相对比较简单，但在这过程中还是能学到很多。第二，用Node.js来处理文件上传（multipart POST请求）是比较复杂的，它_不_在本书的范畴，但，如何使用外部模块却是在本书涉猎内容之内。

处理POST请求

考虑这样一个简单的例子：我们显示一个文本区（textarea）供用户输入内容，然后通过POST请求提交给服务器。最后，服务器接受到请求，通过处理程序将输入的内容展示到浏览器中。

_/start_请求处理程序用于生成带文本区的表单，因此，我们将_requestHandlers.js_修改为如下形式：

function start(response) {
  console.log("Request handler 'start' was called.");
 
  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="20" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';
 
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}
 
function upload(response) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("Hello Upload");
  response.end();
}
 
exports.start = start;
exports.upload = upload;

好了，现在我们的应用已经很完善了，都可以获得威比奖（Webby Awards）了，哈哈。（译者注：威比奖是由国际数字艺术与科学学院主办的评选全球最佳网站的奖项，具体参见详细说明）通过在浏览器中访问http://localhost:8888/start就可以看到简单的表单了，要记得重启服务器哦！

你可能会说：这种直接将视觉元素放在请求处理程序中的方式太丑陋了。说的没错，但是，我并不想在本书中介绍诸如MVC之类的模式，因为这对于你了解JavaScript或者Node.js环境来说没多大关系。

余下的篇幅，我们来探讨一个更有趣的问题：当用户提交表单时，触发_/upload_请求处理程序处理POST请求的问题。

现在，我们已经是新手中的专家了，很自然会想到采用异步回调来实现非阻塞地处理POST请求的数据。

这里采用非阻塞方式处理是明智的，因为POST请求一般都比较“重” —— 用户可能会输入大量的内容。用阻塞的方式处理大数据量的请求必然会导致用户操作的阻塞。

为了使整个过程非阻塞，Node.js会将POST数据拆分成很多小的数据块，然后通过触发特定的事件，将这些小数据块传递给回调函数。这里的特定的事件有_data_事件（表示新的小数据块到达了）以及_end_事件（表示所有的数据都已经接收完毕）。

我们需要告诉Node.js当这些事件触发的时候，回调哪些函数。怎么告诉呢？我们通过在_request_对象上注册__监听器__（listener）来实现。这里的request对象是每次接收到HTTP请求时候，都会把该对象传递给_onRequest_回调函数。

如下所示：

request.addListener("data",  function(chunk)  {  
    // called when a new chunk of data was received
});
 
request.addListener("end",  function()  {  
    // called when all chunks of data have been received
});

问题来了，这部分逻辑写在哪里呢？我们现在只是在服务器中获取到了_request_对象 —— 我们并没有像之前_response_对象那样，把 request 对象传递给请求路由和请求处理程序。

在我看来，获取所有来自请求的数据，然后将这些数据给应用层处理，应该是HTTP服务器要做的事情。因此，我建议，我们直接在服务器中处理POST数据，然后将最终的数据传递给请求路由和请求处理器，让他们来进行进一步的处理。

因此，实现思路就是：将_data_和_end_事件的回调函数直接放在服务器中，在_data_事件回调中收集所有的POST数据，当接收到所有数据，触发_end_事件后，其回调函数调用请求路由，并将数据传递给它，然后，请求路由再将该数据传递给请求处理程序。

还等什么，马上来实现。先从_server.js_开始：

var http = require("http");
var url = require("url");
 
function start(route, handle)  {  
    function onRequest(request, response)  {    
    var postData =  "";    var pathname = url.parse(request.url).pathname;
    console.log("Request for "  + pathname +  " received.");
 
    request.setEncoding("utf8");
 
    request.addListener("data",  function(postDataChunk)  {      postData += postDataChunk;
      console.log("Received POST data chunk '"+      postDataChunk +  "'.");    });
 
    request.addListener("end",  function()  {
      route(handle, pathname, response, postData);    });  }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

上述代码做了三件事情：首先，我们设置了接收数据的编码格式为UTF-8，然后注册了“data”事件的监听器，用于收集每次接收到的新数据块，并将其赋值给_postData_ 变量，最后，我们将请求路由的调用移到_end_事件处理程序中，以确保它只会当所有数据接收完毕后才触发，并且只触发一次。我们同时还把POST数据传递给请求路由，因为这些数据，请求处理程序会用到。

上述代码在每个数据块到达的时候输出了日志，这对于最终生产环境来说，是很不好的（数据量可能会很大，还记得吧？），但是，在开发阶段是很有用的，有助于让我们看到发生了什么。

我建议可以尝试下，尝试着去输入一小段文本，以及大段内容，当大段内容的时候，就会发现_data_事件会触发多次。

再来点酷的。我们接下来在/upload页面，展示用户输入的内容。要实现该功能，我们需要将_postData_传递给请求处理程序，修改_router.js_为如下形式：

function route(handle, pathname, response, postData)  {
    console.log("About to route a request for "  + pathname);  
    if  (typeof handle[pathname]  ===  'function')  {
        handle[pathname](response, postData);  }  
    else  {
        console.log("No request handler found for "  + pathname);
        response.writeHead(404,  {"Content-Type":  "text/plain"});
        response.write("404 Not found");
        response.end();  
    }
}
 
exports.route = route;

然后，在_requestHandlers.js_中，我们将数据包含在对_upload_请求的响应中：

function start(response, postData) {
  console.log("Request handler 'start' was called.");
 
  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="20" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';
 
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}
 
function upload(response, postData) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You've sent: " + postData);
  response.end();
}
 
exports.start = start;
exports.upload = upload;

好了，我们现在可以接收POST数据并在请求处理程序中处理该数据了。

我们最后要做的是：当前我们是把请求的整个消息体传递给了请求路由和请求处理程序。我们应该只把POST数据中，我们感兴趣的部分传递给请求路由和请求处理程序。在我们这个例子中，我们感兴趣的其实只是_text_字段。

我们可以使用此前介绍过的_querystring_模块来实现：

var querystring = require("querystring");
 
function start(response, postData) {
  console.log("Request handler 'start' was called.");
 
  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="20" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';
 
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}
 
function upload(response, postData) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You've sent the text: "+
  querystring.parse(postData).text);
  response.end();
}
 
exports.start = start;
exports.upload = upload;

好了，以上就是关于处理POST数据的全部内容。

处理文件上传

最后，我们来实现我们最终的用例：允许用户上传图片，并将该图片在浏览器中显示出来。

回到90年代，这个用例完全可以满足用于IPO的商业模型了，如今，我们通过它能学到这样两件事情：如何安装外部Node.js模块，以及如何将它们应用到我们的应用中。

这里我们要用到的外部模块是Felix Geisendörfer开发的node-formidable 模块。它对解析上传的文件数据做了很好的抽象。其实说白了，处理文件上传_“就是”_处理POST数据 —— 但是，麻烦的是在具体的处理细节，所以，这里采用现成的方案更合适点。

使用该模块，首先需要安装该模块。Node.js有它自己的包管理器，叫__NPM__。它可以让安装Node.js的外部模块变得非常方便。通过如下一条命令就可以完成该模块的安装：

npm install formidable

如果终端输出如下内容：

npm info build Success: formidable@1.0.9
npm ok

就说明模块已经安装成功了。

现在我们就可以用_formidable_模块了——使用外部模块与内部模块类似，用require语句将其引入即可：

var formidable = require("formidable");

这里该模块做的就是将通过HTTP POST请求提交的表单，在Node.js中可以被解析。我们要做的就是创建一个新的_IncomingForm_，它是对提交表单的抽象表示，之后，就可以用它解析request对象，获取表单中需要的数据字段。

node-formidable官方的例子展示了这两部分是如何融合在一起工作的：

var formidable = require('formidable'),
    http = require('http'),
    util = require('util');
 
http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));
    });
    return;
  }
 
  // show a file upload form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload" multiple="multiple"><br>'+
    '<input type="submit" value="Upload">'+
    '</form>'
  );
}).listen(8888);

如果我们将上述代码，保存到一个文件中，并通过_node_来执行，就可以进行简单的表单提交了，包括文件上传。然后，可以看到通过调用_form.parse_传递给回调函数的_files_对象的内容，如下所示：

received upload:
 
{ fields: { title: 'Hello World' },
  files:
   { upload:
      { size: 1558,
        path: '/tmp/1c747974a27a6292743669e91f29350b',
        name: 'us-flag.png',
        type: 'image/png',
        lastModifiedDate: Tue, 21 Jun 2011 07:02:41 GMT,
        _writeStream: [Object],
        length: [Getter],
        filename: [Getter],
        mime: [Getter] } } }

为了实现我们的功能，我们需要将上述代码应用到我们的应用中，另外，我们还要考虑如何将上传文件的内容（保存在/tmp 目录中）显示到浏览器中。

我们先来解决后面那个问题：对于保存在本地硬盘中的文件，如何才能在浏览器中看到呢？

显然，我们需要将该文件读取到我们的服务器中，使用一个叫fs 的模块。

我们来添加/show_URL 的请求处理程序，该处理程序直接硬编码将文件/tmp/test.png 内容展示到浏览器中。当然了，首先需要将该图片保存到这个位置才行。

将_requestHandlers.js_修改为如下形式：

var querystring = require("querystring"),
    fs = require("fs");
 
function start(response, postData) {
  console.log("Request handler 'start' was called.");
 
  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" '+
    'content="text/html; charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" method="post">'+
    '<textarea name="text" rows="20" cols="60"></textarea>'+
    '<input type="submit" value="Submit text" />'+
    '</form>'+
    '</body>'+
    '</html>';
 
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}
 
function upload(response, postData) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You've sent the text: "+
  querystring.parse(postData).text);
  response.end();
}
 
function show(response, postData) {
  console.log("Request handler 'show' was called.");
  fs.readFile("/tmp/test.png", "binary", function(error, file) {
    if(error) {
      response.writeHead(500, {"Content-Type": "text/plain"});
      response.write(error + "\n");
      response.end();
    } else {
      response.writeHead(200, {"Content-Type": "image/png"});
      response.write(file, "binary");
      response.end();
    }
  });
}
 
exports.start = start;
exports.upload = upload;
exports.show = show;

我们还需要将这新的请求处理程序，添加到_index.js_中的路由映射表中：

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
 
var handle =  {}
handle["/"]  = requestHandlers.start;
handle["/start"]  = requestHandlers.start;
handle["/upload"]  = requestHandlers.upload;
handle["/show"]  = requestHandlers.show;
 
server.start(router.route, handle);

重启服务器之后，通过访问http://localhost:8888/show，就可以看到保存在/tmp/test.png 的图片了。

好，最后我们要的就是：

在/start 表单中添加一个文件上传元素
将node-formidable整合到我们的_upload_请求处理程序中，用于将上传的图片保存到/tmp/test.png
将上传的图片内嵌到/upload_URL 输出的HTML中

第一项很简单。只需要在HTML表单中，添加一multipart/form-data 的编码类型，移除此前的文本区，添加一个文件上传组件，并将提交按钮的文案改为“Upload file”即可。如下_requestHandler.js_所示：

var querystring = require("querystring"),
    fs = require("fs");
 
function start(response, postData) {
  console.log("Request handler 'start' was called.");
 
  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" '+
    'content="text/html; charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="file" name="upload">'+
    '<input type="submit" value="Upload file" />'+
    '</form>'+
    '</body>'+
    '</html>';
 
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}
 
function upload(response, postData) {
  console.log("Request handler 'upload' was called.");
  response.writeHead(200, {"Content-Type": "text/plain"});
  response.write("You've sent the text: "+
  querystring.parse(postData).text);
  response.end();
}
 
function show(response, postData) {
  console.log("Request handler 'show' was called.");
  fs.readFile("/tmp/test.png", "binary", function(error, file) {
    if(error) {
      response.writeHead(500, {"Content-Type": "text/plain"});
      response.write(error + "\n");
      response.end();
    } else {
      response.writeHead(200, {"Content-Type": "image/png"});
      response.write(file, "binary");
      response.end();
    }
  });
}
 
exports.start = start;
exports.upload = upload;
exports.show = show;

很好。下一步相对比较复杂。这里有这样一个问题：我们需要在_upload_处理程序中对上传的文件进行处理，这样的话，我们就需要将_request_对象传递给node-formidable的_form.parse_函数。

但是，我们有的只是_response_对象和_postData_数组。看样子，我们只能不得不将_request_对象从服务器开始一路通过请求路由，再传递给请求处理程序。或许还有更好的方案，但是，不管怎么说，目前这样做可以满足我们的需求。

到这里，我们可以将_postData_从服务器以及请求处理程序中移除了 —— 一方面，对于我们处理文件上传来说已经不需要了，另外一方面，它甚至可能会引发这样一个问题：我们已经“消耗”了_request_对象中的数据，这意味着，对于_form.parse_来说，当它想要获取数据的时候就什么也获取不到了。（因为Node.js不会对数据做缓存）

我们从_server.js_开始 —— 移除对postData的处理以及_request.setEncoding_ （这部分node-formidable自身会处理），转而采用将_request_对象传递给请求路由的方式：

var http = require("http");
var url = require("url");
 
function start(route, handle)  {  function onRequest(request, response)  {    var pathname = url.parse(request.url).pathname;
    console.log("Request for "  + pathname +  " received.");
    route(handle, pathname, response, request);  }
 
  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}
 
exports.start = start;

接下来是router.js —— 我们不再需要传递_postData_了，这次要传递_request_对象：

function route(handle, pathname, response, request)  {
  console.log("About to route a request for "  + pathname);  if  (typeof handle[pathname]  ===  'function')  {
    handle[pathname](response, request);  }  else  {
    console.log("No request handler found for "  + pathname);
    response.writeHead(404,  {"Content-Type":  "text/html"});
    response.write("404 Not found");
    response.end();  }
}
 
exports.route = route;

现在，request_对象就可以在我们的_upload_请求处理程序中使用了。node-formidable会处理将上传的文件保存到本地/tmp 目录中，而我们需要做的是确保该文件保存成/tmp/test.png 。没错，我们保持简单，并假设只允许上传PNG图片。这里采用fs.renameSync(path1,path2) 来实现。要注意的是，正如其名，该方法是同步执行的，也就是说，如果该重命名的操作很耗时的话会阻塞。这块我们先不考虑。

接下来，我们把处理文件上传以及重命名的操作放到一起，如下_requestHandlers.js_所示：

var querystring = require("querystring"),
    fs = require("fs"),
    formidable = require("formidable");
 
function start(response) {
  console.log("Request handler 'start' was called.");
 
  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="file" name="upload" multiple="multiple">'+
    '<input type="submit" value="Upload file" />'+
    '</form>'+
    '</body>'+
    '</html>';
 
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}
 
function upload(response, request) {
  console.log("Request handler 'upload' was called.");
 
  var form = new formidable.IncomingForm();
  console.log("about to parse");
  form.parse(request, function(error, fields, files) {
    console.log("parsing done");
    fs.renameSync(files.upload.path, "/tmp/test.png");
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write("received image:<br/>");
    response.write("<img src='/show' />");
    response.end();
  });
}
 
function show(response) {
  console.log("Request handler 'show' was called.");
  fs.readFile("/tmp/test.png", "binary", function(error, file) {
    if(error) {
      response.writeHead(500, {"Content-Type": "text/plain"});
      response.write(error + "\n");
      response.end();
    } else {
      response.writeHead(200, {"Content-Type": "image/png"});
      response.write(file, "binary");
      response.end();
    }
  });
}
 
exports.start = start;
exports.upload = upload;
exports.show = show;

好了，重启服务器，我们应用所有的功能就可以用了。选择一张本地图片，将其上传到服务器，然后浏览器就会显示该图片。

总结与展望

恭喜，我们的任务已经完成了！我们开发完了一个Node.js的web应用，应用虽小，但却“五脏俱全”。期间，我们介绍了很多技术点：服务端JavaScript、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块等等。

当然了，还有许多本书没有介绍到的：如何操作数据库、如何进行单元测试、如何开发Node.js的外部模块以及一些简单的诸如如何获取GET请求之类的方法。

但本书毕竟只是一本给初学者的教程 —— 不可能覆盖到所有的内容。

幸运的是，Node.js社区非常活跃（作个不恰当的比喻就是犹如一群有多动症小孩子在一起，能不活跃吗？），这意味着，有许多关于Node.js的资源，有什么问题都可以向社区寻求解答。其中Node.js社区的wiki以及 NodeCloud就是最好的资源。

名词王国里的死刑(翻译)

Sun, 25 Feb 2018 23:18:05 GMT

原文地址：Execution in the Kingdom of Nouns

翻译原文：名词王国里的死刑（翻译）

译者注

翻译自Steve Yegge的大作《Execution in the Kingdom of Nouns》

原文在这里

另外第一次翻译，很多地方不准确或根本翻译不出来，见谅~

翻译正文

Hello，world！今天我给大家讲一个关于Java魔鬼国王和他在全国范围内驱逐动词的故事。

注意：这个故事并没有什么圆满结局。如果你心灵脆弱或者吹毛求疵的话，这个故事不适合你。如果你易于动怒或喜欢在别人的博客上妄加评论，那么请立即停止阅读。

在我们开始这个故事之前，先让我们熟悉一下背景：

溢出的垃圾

所有使用Java的人都喜欢“用例”，所以让我们以一个用例开始吧：倒垃圾。就像这样：“Johnny，快去倒垃圾，他都快溢出来了！”

如何表达倒垃圾这一活动呢？如果你是一个正常说英语的人，你可以粗略地用以下几句话来描述它

在水池下取出垃圾袋
带着垃圾袋去车库
把它扔到垃圾桶里
走回来
洗手
坐回沙发上
继续玩你的电视游戏（或者干其他的事）

即使你不用英语思考，你也会想象出一系列类似的动作。不考虑你选择的语言，或者采取的具体步骤，取决于你采取的行动，倒垃圾是一系列终止于垃圾在外面，你回到屋子里的动作。

我们的思想充斥着各种或勇敢的，或暴躁的，或激昂的动作。我们生活，我们呼吸，我们走路，我们谈话，我们笑，我们哭，我们希望，我们害怕，我们吃，我们喝，我们走，我们听，我们倒垃圾。我们能自由地“做”和“行动”。假如我们只是石头，生活没准还算好，但是我们不会自由。因为我们可以“做”事，所以才会自由。

我们的生活也同时充斥着各种“名词”。我们吃“名词”（食物），我们从商店买“名词”（商品），我们坐在“名词”（凳子）上。“名词”（石头）可能会忽然砸到你头上，在你的“名词”（头）上弄一个“名词”（大包）。名词即事物，想想没有了事物我们会怎样？但他们仅仅只是事物，比如：意味着结束或者结束本身，或者一些贵重物品，或者我们周围经常看到的事物的名字。这是一座建筑，那是一个石头。任何一个小孩子都能指出名词，仅此而已。发生在名词身上的 “变化”才是最有趣的事情。

变化需要动作。动作是生活的调料。动作甚至给了调料以调料！毕竟除非你“吃”它，你是不会感到香这种味道的。名词也许无处不在，但是生活一直在变并一直有趣的功劳还是在于动词。

当然，除了名词和动词，我们还有形容词，介词，代词，冠词，连词，语气词，和许许多多其他让我们构造有趣语言的词汇。它们都在语言中扮演着自己的角色，而且每一个都很重要。如果它们哪一个不存在了的话，那是挺遗憾的事情。

那么，如果有一天我们不再用动词了，你是不是感到很奇怪呢？

在下面我要给大家讲的故事里，这件事情真的发生了……

名词王国

在Java王国中，国王Java以铁腕统治着他的国家，而他子民的思考方式也并不和你我一样。在这里，你可以看到，名词是十分重要的并直接服从国王的命令。名词是最重要的居民，它们身穿艳丽的服装显得高贵而优雅，而这些衣服是由形容词提供的。而形容词哪，也很满意它们的生活，当然，他们不可能像名词那么高贵，不过相比于动词来讲却幸运得很多。

因为，动词在Java王国里的日子，相当，相当的糟糕。

奉国王Java的法令，动词是隶属于名词的，但他们不仅仅是宠物而已。或者说连宠物都不是，在整个国家，动词负担起所有的劳力工作。实际上，他们是王国的奴隶，至少是农奴或者契约奴之类的。Java王国的居民对自己的生活还是比较满意的，他们从来没有想到会发生什么变化。

动词负责王国里的所有工作，但是仍然获取不到任何尊重，甚至都不允许单独出来。如果一个动词被发现在公共场合出现，它会立即被名词逮捕。

当然“逮捕”也是一个动词，他也从不被允许单独行动；你必须创造一个“动词逮捕者”来协助逮捕。但是“创造”和“协助”哪？这样的话，“创造者”和“协助者”也各自在这个工作上伴随“创造”和“协助”起到了重要的作用。

国王Java，在他的上帝Sun（现在是Oracle了吧…[译者注]）的指引下，时不时地威胁要将所有动词驱逐出王国。如果那一天到来了，他们当然需要至少一个动词来做各种工作，而从国王残忍的幽默感上猜测，这个动词很可能就是“执行”。

动词“执行”(execute)，和它的亲戚“运行”，“开始”，“走你”，“做”，“就这样做”或者相似的什么词可以通过找到合适的“执行者”来替代任何其他的动词。想等(wait)一下？ Waiter.execute() ；刷(brush)牙(teeth)?ToothBrusher(myTeeth).go() ；扔(take out)垃圾(garbage)? TrashDisposalPlanExecutor.doIt() 。没有任何一个动词是安全的，一切动词都会被执行的名词而取代。

在这种精神更加泛滥的角落，名词已经把动词驱逐干净。不仔细看的话，你会觉得仍然有动词存在，比如耕种或倒茶壶，但是一旦仔细观察，真相便浮出了水面：名词可以随意命名紧跟在它们后面的动词“执行”，而不改变自身的角色。所以，当你看到“耕地者”在“耕地”，“倒茶壶者”在“倒”或者说“注册管理者”在“注册”，你真正看到的是魔鬼国王Java的 “执行者”大军，只不过他们披着所有者的外衣而已。

在其他王国里的动词

在其他编程语言的王国中，倒垃圾是一件很直白的事情，和我们用英语表述的十分相似。在Java王国中，数据实体是名词而函数是动词，而在其他王国中却不然：王国的居民是混在一起的，而且在能顺利完成工作的前提下，只要他们愿意，既可以是名词也可以是动词。

比如在附近的C的领域，JavaScript的地盘，Perl的地盘和Ruby的地盘，他们可能会把倒垃圾这件事分解成一系列的动作（或者叫做动词或者函数）。如果他们将这些动作以适当的顺序应用于适当的事物（拿垃圾，把它带出去，扔到垃圾桶里等等），倒垃圾的任务就圆满成功了。在这个过程中根本不需要执行者或其他的伴随者这出现。

在这些王国里，真的没有必要创造这么多的包裹器来包裹动词。他们没有“垃圾倾倒策略”之类的名词，或者“垃圾倾倒地点定位者”来只是定义你倒垃圾的路径，也没有“倒完垃圾后的回调”来保证你倒垃圾后回到自己的沙发上。他们只是写一些动词来操作名词，并创建一个主要的名词 例如提出垃圾(take_out_garbage()) ，并把一些需要做的子动作放在里面。

在这些王国中，当需求提升的时候，也通常有一种机制来生成比较重要的名词。如果这些精明的创造者创造出了一个全新的名词，比如房子，马车，或者耕起地来比人还快的机器，他们会被给予一个统一的概念：类。而人们会给__类__一个名称，一个描述，一些状态和一些操作建议。

这些王国与Java的不同之处在于，动词是允许单独出现的，你没必要创造新的名词去束缚他们。

Java王国的人以一种轻视的态度看待他们的邻居，而这也是程序诸王国的现状。

如果你挖个足够深的洞…

在世界的另一边，有一片贫瘠的居住地。在那里，动词居民的地位十分之高。这就是函数式王国，包括Haskellia,Ocamlica,Schemeria和一些其它的国家。因为附近的国家很少，他们几乎不与Java王国何其附近的国家有接触。也正因为这样，函数式诸国们相互轻视，并有事没事的时候打一仗以排遣寂寞。

在函数式王国里，名词和动词一般被看做同样等级的居民。但是，名词，对是名词，基本上整天无所事事。他们的出现在做事或者执行任务的时候并没有多大意义，因为活跃的动词们基本把能做的事情都做了。这里也没有什么奇怪的法律说要创造各种“帮助者”来帮助动词做事，因此在这些王国中，名词的数量和实际上存在事物的数量是相同的。

这样做的结果是，动词在这片土地上为所欲为（请原谅我的用词）。如果你是一个外来人，你很容易产生__名词（函数）是这里最重要的居民__的印象。顺便提一句，这也是为什么这里被叫做函数式诸国还不是事物诸国的原因。

在最为遥远的地方，远离函数式诸国，存在着一块传说中的土地，“Lamda the Ultimate”(终极lamda？霸气~[译者注])。传说中在那里，没有名词，只有动词。那里有事物，但事物由动词组成。如果传说不虚，甚至数字，那里最为流行的货币，也是动词！数字0被表示为_lamda()，数字1是_lamda(lamda())，2是_lamda(lamda(lamda()))_,以此类推。

在这片神奇的土地上，一切事物，别管你是名词，动词，还是其他什么，都是由最基本的动词lamda组成的。

老实说，Java王国中幸福生活着的居民并没有意识到另外一个世界的存在。你能想象得知此事之后的文化震动么？他们可能会发明一个新的名词（比如“憎恶”）来表达自己新的感受。

Java王国中的居民真的快乐么？

你可能觉得Java王国中的生活有点奇怪，如果糟糕的话还效率还会变得十分低下。不过，你能从一个地方的童谣中看出他们的幸福程度，而Java王国的童谣，是一群古怪的诗。比如，这里的儿童经常朗诵的寓言：（这就不翻了[译者注]）

For the lack of a nail,
    throw new HorseshoeNailNotFoundException("no nails!");
 
For the lack of a horseshoe,
    EquestrianDoctor.getLocalInstance().getHorseDispatcher().shoot();
 
For the lack of a horse,
    RidersGuild.getRiderNotificationSubscriberList().getBroadcaster().run(
      new BroadcastMessage(StableFactory.getNullHorseInstance()));
 
For the lack of a rider,
    MessageDeliverySubsystem.getLogger().logDeliveryFailure(
      MessageFactory.getAbstractMessageInstance(
        new MessageMedium(MessageType.VERBAL),
        new MessageTransport(MessageTransportType.MOUNTED_RIDER),
        new MessageSessionDestination(BattleManager.getRoutingInfo(
                                        BattleLocation.NEAREST))),
      MessageFailureReasonCode.UNKNOWN_RIDER_FAILURE);
 
For the lack of a message,
    ((BattleNotificationSender)
      BattleResourceMediator.getMediatorInstance().getResource(
        BattleParticipant.PROXY_PARTICIPANT,
        BattleResource.BATTLE_NOTIFICATION_SENDER)).sendNotification(
          ((BattleNotificationBuilder)
            (BattleResourceMediator.getMediatorInstance().getResource(
            BattleOrganizer.getBattleParticipant(Battle.Participant.GOOD_GUYS),
            BattleResource.BATTLE_NOTIFICATION_BUILDER))).buildNotification(
              BattleOrganizer.getBattleState(BattleResult.BATTLE_LOST),
              BattleManager.getChainOfCommand().getCommandChainNotifier()));
 
For the lack of a battle,
    try {
        synchronized(BattleInformationRouterLock.getLockInstance()) {
          BattleInformationRouterLock.getLockInstance().wait();
        }
    } catch (InterruptedException ix) {
      if (BattleSessionManager.getBattleStatus(
           BattleResource.getLocalizedBattleResource(Locale.getDefault()),
           BattleContext.createContext(
             Kingdom.getMasterBattleCoordinatorInstance(
               new TweedleBeetlePuddlePaddleBattle()).populate(
                 RegionManager.getArmpitProvince(Armpit.LEFTMOST)))) ==
          BattleStatus.LOST) {
        if (LOGGER.isLoggable(Level.TOTALLY_SCREWED)) {
          LOGGER.logScrewage(BattleLogger.createBattleLogMessage(
            BattleStatusFormatter.format(BattleStatus.LOST_WAR,
                                         Locale.getDefault())));
        }
      }
    }
 
For the lack of a war,
    new ServiceExecutionJoinPoint(
      DistributedQueryAnalyzer.forwardQueryResult(
        NotificationSchemaManager.getAbstractSchemaMapper(
          new PublishSubscribeNotificationSchema()).getSchemaProxy().
            executePublishSubscribeQueryPlan(
              NotificationSchema.ALERT,
              new NotificationSchemaPriority(SchemaPriority.MAX_PRIORITY),
              new PublisherMessage(MessageFactory.getAbstractMessage(
                MessageType.WRITTEN,
                new MessageTransport(MessageTransportType.WOUNDED_SURVIVOR),
                new MessageSessionDestination(
                  DestinationManager.getNullDestinationForQueryPlan()))),
              DistributedWarMachine.getPartyRoleManager().getRegisteredParties(
                PartyRoleManager.PARTY_KING ||
                PartyRoleManager.PARTY_GENERAL ||
                PartyRoleManager.PARTY_AMBASSADOR)).getQueryResult(),
        PriorityMessageDispatcher.getPriorityDispatchInstance())).
      waitForService();
 
All for the lack of a horseshoe nail.

直到今天，这仍然是美好的建议。

尽管在Java王国的叙述方式和本.富兰克林的原作大有不同，但是这里的居民觉得他们的重新编排还是有一种不同的魅力在里面。

而最大的魅力在于“架构”，是所有人都能看见的。架构被国王Java授予了之高无上的地位，因为，架构全部是由名词构成的。正如我们所知的，在Java王国，名词即事物，事物的荣耀高于一切的动词。架构由无数事物构成：你可以看或触摸的事物，给你留下壮观印象的事物，用棍子刮擦发出美妙声音的事物。国王Java，十分喜欢刮擦的噪音，每当他新换车夫的时候，踢轮子发出的美妙声音让他觉得很满意。不管上面的故事有什么瑕疵，“事物”总是不缺少的。

作为人类，我们的第一本能总是寻找由各宗物体构成的庇护。庇护越坚固，我们感觉越安全。在Java王国，有很过坚固的东西让居民们感到安心。他们感慨如此庞大的架构建造之神奇并认为它是“最为坚固的设计”。而且每当结构变化时，他们就越坚信这点。接着，架构的力量也变得强的令人生畏以至于没有人认为可以摧毁他。

除了坚固的架构之外，在Java王国中的所有东西很有调理地组织着：你会发现任何名词都会呆在适当的地方。这里每个故事都有一个固定的模式：实例构造在故事的表述中占了主要的篇幅，因为每个抽象都会有一个管理者（Manager），而且每个管理者都有一个run()方法。Java居民们觉得他们可以用这种模型表述任何事情。这是一种“名词计算”，只要你愿意，它可以满足任何抽象，任何计算。你需要的仅仅是足够的名词，名词的构造器，获取器方法，和重要的execute()函数来实现你的计划。

Java王国的居民活的不仅仅是幸福，简直是迸发出强烈的自豪感。

StateManager.getConsiderationSetter("Noun Oriented Thinking", State.HARMFUL).run()

或者，正如外面的世界所说，“面向名词的思考是有害的”。

面向对象的编程把名词放到首位，但是我们为什么非得把名词捧上神坛以至于让语句变的如此啰嗦哪？为什么一种语句成分的地位非得高于另外一种？这并不是好像面向对象的编程突然使得动词的低位降低，正如我们认为的那样。这是一种奇怪的认识的扭曲。正如我的朋友 Jacob Gabrielso有一次说到，提倡面向对象的编程好比提倡面向裤子的穿衣方式。

Java的静态类型系统，像其他任何类似的语言一样，有着共同的问题。但是过分强调面向名词的编程思想给人带来很大的困扰。任何类型系统都会要求你重新梳理思路来配合它，但是清除独立的动词看起来十分不合情理。

C并没有这个问题。因为C作为C语言的超集允许你定义单独的函数。此外，C++提供了独立的命名空间的概念。Java的类承载了太多的内容：命名空间，用户自定义类型，句法委托机制，可见性和作用域机制，等等。

不要误解了我的意思。我并没有说C++“好”，我只是赞美它至少相比于Java来讲灵活的类型系统。C出现问题会让听众抓狂并且想杀了你（比如，意想不到的段错误和其他难以发现的隐患）。并且在C你很难找到一个能描述你的想法的咒语。但是它灵活地可表述的思想的范围却远远超出了Java。因为C++提供给你了动词，谁想用一个没有动词的语言说话哪？

类是Java中唯一提供的建模的工具。所以当一个新的想法出现在你脑海的时候，你不得不重塑它，包装它，甚至弄碎它直到它变成一个名词，即使它开始是一个动作，过程，或者任何其他不是“物”的概念。

我似乎回到了8,9年前一帮搞Perl的家伙对我说的：“伙计，并不是所有的东西都是对象的。”

很奇怪，Java似乎是主流面向对象语言中唯一一个完全以名词为中心的语言。在Python或者Ruby中，你不会找到_AbstractProxyMediator_，_NotificationStrategyFactory_或者其他类似的东西。为什么在Java中它们满地都是？我敢打赌原因是出在了动词的身上。然而Python，Ruby，JavaScript，Perl，当然还有所有的函数式编程语言允许你声明并传递函数而不用用类包装它。

很显然，动态类型语言的使用更容易；你可以仅仅传递一个引用给函数，函数可以用名字获取它，而函数的调用者仅仅用合适的参数调用函数并正确地使用返回的值就可以了。

但是很多静态类型的语言同样也有第一类的函数。这包括固定类型的语言比如C和C++，还有类型自动推断的语言比如Haskell和ML。这些语言仅仅需要一些语法来建立，传递和调用函数的内容就可以了。

Java没有理由不简单地添加第一类函数并最终实现一个成熟的、没有扭曲的可以让人自由运用动词来实现他们想法的世界。实际上，有一个基于JVM叫做The Nice programming language 的语言实现了一个非常类似Java的语法，并包含了一个非常具有表现力的实现了使用动词方式：独立函数。而Java强制你用Callback，Ruunable或其他匿名接口来包装它为一个类以便于调用。

Sun公司甚至没有打破他们一切函数都必须被类拥有的信条。任何匿名的函数都会具有一个隐式的this指针指向定义它的类,问题解决了。

我不知道为什么Sun公司坚持Java矗立在名词王国。我怀疑这是低估了他们的民众；他们添加了泛型，一个更加复杂的概念，所以他们不再关心如何保持他们语法的简练。并且添加动词并不是一件坏事，这是因为Java现今所建立的：为一个Java程序员提供工具让他们按自己的想法编程更有意义。

我真心希望Java能修复这个缺陷，以便我可以把垃圾带出去并回来玩游戏或者一切当时在做的事情。

DedeCMS隐藏特定频道栏目

Sat, 20 Jan 2018 21:54:52 GMT

一、通过前台直接隐藏栏目

如果栏目在后台设置显示或者设置隐藏无效,前台怎么隐藏?

CSS样式

定义用来隐藏栏目的CSS样式

.hidden{display:nidden}

HTML调用代码

因为栏目id为6的栏目是【关于我们】等非核心栏目,不想在导航上显示,但在后台又没有设置隐藏,设置隐藏了前台的其它栏目页就没法调用他了。所以,在导航条上要处理一下。

{dede:channel type='top' row='10' currentstyle="<li class='active'><a href='~typelink~' ~rel~>~typename~</a></li>"}
    <li  class="[field:id runphp='yes'] if(@me=='6') @me = 'hidden'; else @me = '';[/field:id]" >
        <a href='[field:typeurl/]'>[field:typename/]</a>
    </li>
{/dede:channel}

二、前台单独显示隐藏栏目

如果ID为666的栏目在后台设置隐藏,而在前台想让他单独显示在导航条的右侧,怎么实现？代码如下所示：

# //调用首页
<li {dede:field name=id runphp='yes'}(@me=='')?@me="class='active'":@me='';{/dede:field} >
    <a href="{dede:global.cfg_basehost/}">首页</a>
</li>
# //调用所有显示的栏目
{dede:channel type='top' row='10' currentstyle="<li class='active'><a href='~typelink~' ~rel~><span>~typename~</span></a></li>"}
<li>
    <a href='[field:typeurl/]' [field:rel/]><span>[field:typename/]</span></a>
</li>
{/dede:channel}
# //在右侧调用隐藏的栏目（ID:666）
 <li class="float-right {dede:field name=id runphp='yes'}(@me=='666')?@me='active':@me='';{/dede:field}">
 {dede:type typeid=666}
    <a href="[field:typeurl /]">[field:typename /]</a>
 {/dede:type}
 </li>

写在最后

原文地址:http://www.dede58.com/a/dedejq/4271.html

Video标签使用-调用视频的当前播放时间值

Sat, 23 Dec 2017 23:37:37 GMT

Video对象

Video 对象是 HTML5 中的新对象。

Video 对象表示 HTML <video> 元素。

currentTime基础使用

在用HTML5技术处理视频时,设置(setting)和获取(getting)时间都是非常重要的知识点，尤其是对于记录播放时间实现续播的功能。在管理视频状态时，最重要的是要了解 currentTime是个什么鬼,简而言之你可以通过这个属性获取当前播放到了哪个时间点（比如当前播放到了2分30秒，当然currentTime 的单位是 秒 (seconds)，所以我们获取到的值是 150）.

// https://www.youtube.com/watch?v=Cwkej79U3ek
console.log(video.currentTime);  // 25.431747

语法

返回(getter) currentTime 属性(数字值，表示当前播放的时间，以秒计)：

videoObject.currentTime

设置 currentTime 属性：

videoObject.currentTime=seconds

currentTime 属性设置或返回视频播放的当前位置（以秒计）,当设置该属性时，播放会跳跃到指定的位置。

浏览器支持

所有主流浏览器都支持 currentTime 属性。

注意：Internet Explorer 8 或更早的浏览器不支持该属性。

currentTime 既是 getter 又是 setter 属性, 所以可以直接设置 currentTime 值来控制播放进度:

video.currentTime = 0; // Restart,初始化设置当前播放到了0秒

补充说明

API 接口很容易理解,而且是自解释的(self-explanatory)。你仍然需要处理“second”来指定时间,包括内在实际的和外在显示的(both inward and outward),但是秒(second)这个单位和你预期的一样公平,所以说这个API设计是非常巧妙的。

使用参考：小米空气净化器 http://www.mi.com/air/ (页面已撤销)

<video id="videoIntro" class="video" data-video-name="intro" poster="http://c1.mifile.cn/f/i/2014/cn/goods/air/overall/video-main-poster.jpg" style="height: 600px; width: 800px; display: none;">
    <source type="video/mp4" src="http://c1.mifile.cn/f/i/2014/cn/goods/air/overall/video-intro.mp4?2014120901">
    <source type="video/webm" src="http://c1.mifile.cn/f/i/2014/cn/goods/air/overall/video-intro.webm?2014120901">
</video>

示例代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body> 
 
<video id="myVideo" width="320" height="240" controls>
    <source src="http://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
    <source src="http://www.runoob.com/try/demo_source/movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>
<br>
<button onclick="getCurTime()" type="button">获取当前时间点</button>
<button onclick="setCurTime()" type="button">设置时间位置为5秒</button>
<script>
var x = document.getElementById("myVideo");
function getCurTime(){ 
    alert(x.currentTime);
} 
function setCurTime(){ 
    x.currentTime = 5;
}
</script> 
 
</body> 
</html>

 

 
" class="rehype-pretty-copy" onclick="navigator.clipboard.writeText(this.attributes.data.value);this.classList.add('rehype-pretty-copied');window.setTimeout(() => this.classList.remove('rehype-pretty-copied'), 2500);">

写在最后

其实关于HTML5-Video视频播放器，还有一款插件可以直接使用：Video.js，使用方法和原生比较类似，不过目前中文文档还不多，大家有兴趣可以去了解下。

整理参考1：译：获取并设置HTML5 Video的当前进度 - 原文地址

整理参考2：Video currentTime 属性

视频播放插件Video.js一些API的使用介绍

Sat, 23 Dec 2017 23:37:17 GMT

插件基本说明

Video.js是一个通用的在网页上嵌入视频播放器的JS库，Video.js自动检测浏览器对HTML5的支持情况，如果不支持HTML5则自动使用Flash 播放器。（要支持ie低版本请下载5.4.3版）

github地址： https://github.com/videojs/video.js ，可以自行选择版本标签点击下载。

V6.6.0版本下载地址：点击下载

V5.4.3旧版本下载地址：下载地址

使用方法

静态调用

引入文件

在页面中引用video-js.css样式文件和video.js脚本文件

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

<script>
    videojs.options.flash.swf = "video-js.swf";
</script>

HTML调用代码

poster="\*\*"设置播放初始图片。 <source src="">可设置使用三种视频格式，根据所需要格式选择对应的。

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
    <source src="http://视频地址格式1.mp4" type='video/mp4' />
    <source src="http://视频地址格式2.webm" type='video/webm' />
    <source src="http://视频地址格式3.ogv" type='video/ogg' />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
</video>

JavaScript设置调用

通过JavaScript标签设置相关属性，比如设置自动播放，是将如下代码加到html中代码后面

<script type="text/javascript">
    var myPlayer = videojs('example_video_1');
    videojs("example_video_1").ready(function(){
        var myPlayer = this;
        myPlayer.play();
    });
</script>

额外样式自定义

默认情况下，大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，你可以给你的 video 标签添加额外的 vjs-big-play-centered 样式，比如：

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
  ...
</video>

如果你还对播放按钮样式不满意可重新定义.video-js .vjs-big-play-button{/继续将这里的样式重写/}。

动态加载使用

如果你的 web 页面或者应用是动态加载video标签的（ajax，appendChild，等等）,这样在页面加载后这个元素是不存在的，那么你会想要手动设置播放器而不是依靠data-setup属性。要做到这一点，首先将data-setup 属性从 video 标签中移除掉，这样在播放器初始化的时候就不会混乱了。接下来，运行下面的 JavaScript ，有时在 Video.js 加载后，有时是在 video 标签被加载进 DOM 后:

videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});

videojs 方法中的第一个参数是你的 video 标签的 ID，用你自己的代替。第二个参数是一个选项对象。它允许你像设置data-setup属性一样设置额外的选项。第三个参数是一个’ready’回调。一旦Video.js初始化完成后，就会触发这个回调。

当然，你也可以传入一个元素本身的引用来代替元素ID：

videojs(document.getElementById('example_video_1'), {}, function() {
  // This is functionally the same as the previous example.
});
 
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
  // You can grab an element by class if you'd like, just make sure
  // if it's an array that you pick one (here we chose the first).
});

如果您无法播放内容，您得确保使用了正确的格式，你的 HTTP 服务器可能无法提供正确的MIME类型的内容

一些常用的API属性

获取video实例：

var videoObj = videojs(“videoId”);

初始化回调ready：

myPlayer.ready(function(){
    //在回调函数中，this代表当前播放器，
    //可以调用方法，也可以绑定事件。
})

播放：

myPlayer.play();

暂停：

myPlayer.pause();

获取播放进度（当前播放时间）：

var whereYouAt = myPlayer.currentTime();

设置播放进度：

myPlayer.currentTime(120);

视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效:

var howLongIsThis = myPlayer.duration();

缓冲，就是返回下载了多少：

var whatHasBeenBuffered = myPlayer.buffered();

百分比的缓冲：

var howMuchIsDownloaded = myPlayer.bufferedPercent();

声音大小（0-1之间）：

var howLoudIsIt = myPlayer.volume();

设置声音大小：

myPlayer.volume(0.5);

获取/设置视频的宽度：

var howWideIsIt = myPlayer.width(); //getter width
myPlayer.width(640); //setter width
var howTallIsIt = myPlayer.height(); //getter height
myPlayer.height(480); //setter height

一步到位，设置视频大小（宽度高度）：

myPlayer.size(640,480);

设置进入全屏/退出全屏(HTML5播放器下有效)：

myPlayer.enterFullScreen();
myPlayer.exitFullScreen();
//http://docs.videojs.com/html5#enterFullScreen

添加事件：

durationchange //提示视频的时长已改变
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play  //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
  
var myFunc = function(){
    // Do something when the event is fired
};

事件绑定：

myPlayer.on("ended", function(){
    console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){
    console.log("pause")
});

事件移除：

myPlayer.removeEvent(“eventName”, myFunc);

同一页面多个视频调用示例：

一个页面中有多个视频，需要点击后触发bootstrap 的模态窗，再弹出视频，实现如下：主要HTML代码部分：

<a videohref="http://xxx.mp4" class="video_link"><img src="../images/xxx.jpg"/></a>

主要JS代码部分：

$(".video_link").click(function() {
    var myPlayer = videojs('my-video');
    var videoUrl = $(this).attr("videohref");
    videojs("my-video", {}, function() {
        window.myPlayer = this;
        $("#mymoda .video-con #my-video source").attr("src", videoUrl);
        myPlayer.src(videoUrl);
        myPlayer.load(videoUrl);
        myPlayer.play();
    });
    $(".click-modal").click();
});
// 模态窗消失时，关闭视频    
$('#mymoda').on('hidden.bs.modal', function() {
    myPlayer.pause();
});

更多API使用可查看官网文档。

写在最后

转载来源：视频播放插件Video.js

插件官网：Video.js

2024-06-25备注: 可惜Flash已经在Web上被丢弃了, 上述内容中有关部分请在官方文档核实后使用

Dedecms织梦会员邮件验证与自定义表单发送邮件-官方类版-支持QQ邮箱163邮箱

Sun, 17 Dec 2017 00:11:03 GMT

早些年的企业站运营联系主要就靠个人邮箱,一是当时的垃圾邮件还没那么侵入式影响,二是成本低廉又相对方便。因此,CMS中的邮件功能都是不可缺少的。

会员邮件验证

设置步骤如下:

1、QQ邮箱或者 163邮箱开启SMTP服务，拿到授权码

登录QQ邮箱或者163邮箱后,进入设置界面,开启SMTP服务。

2、网站后台 - 系统 - 系统基本参数 - 核心设置

网站发信EMAIL：wuruhua@163.com 或者 65602960@qq.com (本文邮箱均为示例，请按需求填写自己的邮箱)

是否启用smtp方式发送邮件：是

smtp服务器：ssl://smtp.163.com 或者 ssl://smtp.qq.com

smtp服务器端口：465

SMTP服务器的用户邮箱：wuruhua@163.com 或者 65602960@qq.com

SMTP服务器的用户帐号：wuruhua 或者 65602960

SMTP服务器的用户密码：填你邮箱授权码，不是邮箱登录密码

至此会员邮件验证配置完成，会员就能收到验证邮件了；自定义表单发送邮件的小伙伴继续往下看。

自定义表单发送邮件服务

1、网站后台 - 系统 - 系统基本参数 - 添加新变量

变量名称：cfg_shoujianren

变量类型：文本

参数说明：收件人

变量值：发送邮件通知者，如12345@qq.com

所属组：站点设置

2、打开`/plus/diy.php`找到

$id = $dsql->GetLastID();

在它的下面加入

$mailtitle = "{$diy->name}--留言通知";
$mailbody = '';
foreach($diy->getFieldList() as $field=>$fieldvalue)
{
    $mailbody .= "{$fieldvalue[0]}:{${$field}}\r\n";
}
$headers = "From: ".$cfg_adminemail."\r\nReply-To: ".$cfg_adminemail;
if($cfg_sendmail_bysmtp == 'Y' && !empty($cfg_smtp_server))
{
    $mailtype = 'TXT';
    require_once(DEDEINC.'/mail.class.php');
    $smtp = new smtp($cfg_smtp_server,$cfg_smtp_port,true,$cfg_smtp_usermail,$cfg_smtp_password);
    $smtp->debug = false;
    $smtp->sendmail($cfg_shoujianren,$cfg_webname ,$cfg_smtp_usermail, $mailtitle, $mailbody, $mailtype);
}
else
{
    @mail($cfg_shoujianren, $mailtitle, $mailbody, $headers);
}

至此自定义表单发送邮件通知管理者设置完成

本文来源www.dedediy.com，仅作为备份参考使用。

DedeCMS列表页内容页栏目高亮及当前栏目调用二级三级栏目的实现

Sat, 16 Dec 2017 12:00:39 GMT

在处理企业站的时候，经常会用到在列表页或内容页调用二三级栏目，且需要跟随栏目切换高亮显示。

具体实现方法如下

1、打开`\include\taglib\channelartlist.lib.php`找到

$tpsql = " reid='$typeid' AND ispart<>2 AND ishidden<>1 ";

改成

if($type=='son')
{
    $typeid = ( !empty($refObj->TypeLink->TypeInfos['id']) ?  GetTopid($refObj->TypeLink->TypeInfos['id']) : 0 );
    $tpsql = " reid='$typeid' AND ishidden<>1 ";
}
else
{
    $tpsql = " reid='$typeid' AND ispart<>2 AND ishidden<>1 ";
}

2、打开`\include\taglib\channel.lib.php`找到

if($type=='son' && $reid!=0 && $totalRow==0)

改成

if($type=='son' && $reid!=0 && $totalRow==0 && $noself=='')

3、去掉模板引擎禁用PHP标签

后台-系统-其它选项模板引擎禁用标签去掉php

前台模板文件中调用代码如下

<ul>
{dede:php}
$GLOBALS['thisid'] = intval($refObj->Fields['typeid']);
$GLOBALS['reid'] = intval($refObj->Fields['reid']);
$GLOBALS['topid'] = intval($refObj->Fields['topid']);
{/dede:php}
{dede:channelartlist type=son}
    <li{dede:field.typeid runphp=yes}(@me==$GLOBALS['thisid']||@me==$GLOBALS['reid']||@me==$GLOBALS['topid'])? @me=' class="current"':@me='';{/dede:field.typeid}><a href='{dede:field.typeurl/}' >{dede:field.typename/}</a></li>
    <ul>
    {dede:channel type=son noself=yes}
    <li[field:id runphp=yes](@me==$GLOBALS['thisid'])? @me=' class="current2"':@me='';[/field:id]><a href='[field:typelink /]' title='[field:typename/]'>[field:typename/]</a></li>
    {/dede:channel}
    </ul>
{/dede:channelartlist}
</ul>

至此，全部完成。

DedeCMS栏目添加自定义字段，增加栏目上传缩略图功能

Sat, 16 Dec 2017 11:28:35 GMT

我们用织梦制作时，点击进入每个栏目时，都会有“关于我们”，“新闻中心”，“产品展示”等提示性的图片，单独调用这些图片比较麻烦，我们可以修改程序，实现每个栏目都有上传栏目缩略图的功能，就方便多了。

修改方法如下

第一步：执行SQL命令为数据库的栏目表结构添加一个字段

alter table `dede_arctype` add `typeimg` char(100) NOT NULL default '';

第二步：修改涉及到文件

dede/catalog_add.php
dede/catalog_edit.php
dede/templets/catalog_add.htm
dede/templets/catalog_edit.htm

1、打开`dede/catalog_add.php`

查找

$queryTemplate = "INSERT INTO `#@__arctype`

定义添加新变量字段typeimg,将

(reid,topid,sortrank,typename,typedir,

修改为

(reid,topid,sortrank,typename,typedir,typeimg,

将

('~reid~','~topid~','~rank~','~typename~','~typedir~',

修改为

('~reid~','~topid~','~rank~','~typename~','~typedir~','~typeimg~',

2、打开`dede/catalog_edit.php`

查找(一般是Ctrl+F快捷键)

$upquery = "Update

在其下面新加一行

typeimg='$typeimg',

3、打开`dede/templets/catalog_add.htm`

修改后台的页面模板，查找

<tr>
   <td height="26" style="padding-left:10px;">列表命名规则：</td>
   <td>
      <input name="namerule2" type="text" id="namerule2" value="{typedir}/list_{tid}_{page}.html"  class="pubinputs"  style="width:250px" />
      <img src="images/help.gif" alt="帮助" width="16" height="16" border="0" style="cursor:pointer" onClick="ShowHide('helpvar3')"/></td>
</tr>

在其下面增加以下内容

<tr>
  <td height="65" style="padding-left:10px;">栏目图片：</td>
  <td>
     <input name="typeimg" type="text" style="width:250px" id="typeimg" class="alltxt" value="" />
 <input type="button" name="set9" value="浏览... "class="coolbg np" style="width:60px" onClick="SelectImage('form1.typeimg','');" />
   </td>
</tr>

并在文件的里面增加以下内容

<script language='javascript' src="js/main.js"></script>

4、打开`dede/templets/catalog_edit.htm`

在第3步文件（同上catalog_add.htm）同样的位置插入修改：

<tr>
   <td height="26" style="padding-left:10px;">列表命名规则：</td>
   <td>
      <input name="namerule2" type="text" id="namerule2" value="{typedir}/list_{tid}_{page}.html"  class="pubinputs"  style="width:250px" />
      <img src="images/help.gif" alt="帮助" width="16" height="16" border="0" style="cursor:pointer" onClick="ShowHide('helpvar3')"/></td>
</tr>

在其下面加入

<tr>
  <td height="65" style="padding-left:10px;">栏目图片：</td>
  <td>
     <input name="typeimg" type="text" style="width:250px" id="typeimg" class="alltxt" value="<?php echo $myrow['typeimg']?>" />
 <input type="button" name="set9" value="浏览... "class="coolbg np" style="width:60px" onClick="SelectImage('form1.typeimg','');" />
   </td>
</tr>

备注说明：下面这句会调用出已添加的路片路径。

和第三步一样，在文件的里面增加以下内容

<script language='javascript' src="js/main.js"></script>

在前台栏目模板中调用自定义缩略图

在模版里用：{dede:field.typeimg /} 是调不出数据的，所以改成SQL调用。

原来是这样的：

{dede:channel type='top' row='13'}
     <li><a href='[field:typeurl/]' [field:rel/]>[field:typeimg/]</a></li>
{/dede:channel}

在这里面加上[field:typeimg]是调不出来的，栏目缩略图就是通过循环出来的，而循环不出来则意义不大，所以改成了如下：

{dede:sql sql="SELECT typename,typedir,typeimg FROM dede_arctype"}
    <li><a href="[field:typedir/]">[field:typeimg/]</a></li>
{/dede:sql}

这样就顺利的调出来了,当然如果你要调用子ID的话，只要加上相应的条件ID调用就可以了。

添加或修改图片时在DedeCMS后台-《栏目管理》-高级选项中操作管理

以下内容个人尚未实例测试

如果想同时在文章内容页调用自定义添加的缩略图打开\include\arc.archives.class.php 查找

if($this->ChannelUnit->ChannelInfos['issystem']!=-1)

将

$query = "Select arc.*,tp.reid,tp.typedir,ch.addtable
                 from `ant_archives` arc
                          left join ant_arctype tp on tp.id=arc.typeid
                           left join ant_channeltype as ch on arc.channel = ch.id
                           where arc.id='$aid' ";
                 $this->Fields = $this->dsql->GetOne($query);

替换为

$query = "Select arc.*,tp.reid,tp.typedir,tp.typeimg,ch.addtable
                 from `ant_archives` arc
                          left join ant_arctype tp on tp.id=arc.typeid
                           left join ant_channeltype as ch on arc.channel = ch.id
                           where arc.id='$aid' ";
                 $this->Fields = $this->dsql->GetOne($query);

即可。如果需要在内容页中使用栏目缩略图的朋友，可以去试一下。

DedeCMS网站批量更新所有目录模板文件

Sat, 16 Dec 2017 00:23:03 GMT

通过MySQL命令来批量修改DedeCMS使用的模板文件，建议使用PHPMyAdmin等数据库管理工具打开操作，建议先备份数据库到本地

修改栏目频道页

update dede_arctype set tempindex = replace(tempindex,"{style}/page.htm","{style}/index_article.htm")

修改栏目列表页

update dede_arctype set templist = replace(templist,"{style}/page.htm","{style}/list_article.htm")

修改栏目内容页

update dede_arctype set temparticle = replace(temparticle,"{style}/page.htm","{style}/article_article.htm")

修改指定ID栏目的列表页

update dede_arctype set templist = replace(templist,"{style}/page.htm","{style}/list_article.htm") where id in(1,2,3,4,5,6)

后记

以上所有命令都通用，在前三种后面加上where id in(ID1,ID2,ID3,ID4,ID5,……)，里面写入你打算修改的频道/栏目/文章ID，可批量修改指定ID的模板文件。

DedeCMS织梦首页调用指定文章的内容

Sat, 16 Dec 2017 00:16:24 GMT

我们常会碰到一些问题，比如DedeCMS网站在首页调用某一篇文档的正文内容，今天实例讲述了dedecms首页调用指定一篇文章body内容的方法。

分享给大家供大家参考。具体实现方法如下：

直接调用（包含样式等代码）

代码如下：

{dede:arclist idlist='要调用文章的id' channelid='1' addfields='body'}
[field:body function='cn_substr(@me,330)'/]
{/dede:arclist}

过滤调用（只调用纯文本内容）

如果是要过滤掉文本中的html，使用如下：

{dede:arclist idlist='要调用文章的id' channelid='1' addfields='body'}
[field:body function='cn_substr(html2text(@me),330)'/]
{/dede:arclist}

后记

idlist是要调用文章的id,channelid是这个内容模型id, addfields是要调用附加表里面的字段.

本文参考地址来源

DedeCMS判断文章是否有缩略图没有就不显示默认图片

Sat, 16 Dec 2017 00:09:24 GMT

调用参考代码

以下代码可直接复制使用

[field:array runphp='yes']  
@me=(strpos(@me['litpic'],'defaultpic')?'':"<a href='{@me['arcurl']}' alt='{@me['title']}'><img src='{@me['litpic']}' alt='{@me['title']}'/></a>");  
[/field:array]

以上代码意思是，如果没有缩略图就显示为空白，有则显示

编译之后的代码如下

<a href='{@me['arcurl']}' alt='{@me['title']}'> <img src='{@me['litpic']}' alt='{@me['title']}'/></a>

后记

如果你想自定义没有缩略图的样式，则修改'defaultpic')?''问号后面的单引号里面的内容。

DedeCMS网站搬家重装后，登陆后台404

Sat, 16 Dec 2017 00:00:34 GMT

主要现象

DedeCMS网站搬家重装完成后，正常登陆后台提示404错误

测试分析

测试重新安装dede目录无效；测试修改目录权限无效；在本地搭建正常打开

解决方法

在本地搭建后，对dede程序升级备份，重新打包上传；测试可以正常安装打开

实测案例

dede程序源码版本由20150522更新到20150618后，404问题解决

后记

个人猜测可能是因为新的主机环境版本和以前不大一样，对PHP等支持的兼容性造成的

保留一个基础的文章模板

Sat, 21 Jun 2014 08:00:00 GMT

头部基础元素

头部包含的基础元素

title: ""
description: ""
pubData: ""
category: ""
banner: ""
ogImage: ""
tags: []

文章内容

文章内容完全采用markdown写法即可.

需要注意的点

为了兼容banner和ogImage图片要求,尺寸限制在1200px-630px以上,建议尺寸 1280px-640px
banner图片显示在文章顶部和列表缩略图,如果banner2存在,banner2为列表缩略图
ogImage图片显示在分享到社交平台时使用,如果不设置,默认使用品牌logo图片@images/brand-logo.png

About Me

Wed, 11 Jun 2014 08:07:21 GMT

Warn, 14年毕业于(坊间戏称,除了那块儿地打死都没人承认的)某不知名皇家学院。

大学是第一届数字与艺术结合的尝试专业,叫作软件工程(数字艺术方向)。别人学C/Java/网络工程时我们也学,别人不学的三大构成/素描色彩/2D/3D我们也学。

自我感觉这么多年一直写不出来好代码,和刚接触编程时候贪多嚼不烂有很大关系。

折腾 & 其他

PDF Tool 一个基于Stirling-PDF的PDF在线压缩工具

关于这个博客

掐指算了一下,大概18年左右就开始搭建博客了,服务器迁移等等原因吧,就断断续续的,还用过GitHub/语雀。

这次又使用Godruoyi大佬的Astro模板继续,能不能写下去的另说,我先搬运历史文章去.

联系我

应该没啥事需要联系我的,按照惯例那就留一个邮箱吧

Email: hi@imwarn.com

爱情的纹理 - Warn的个人代码与故事分享博客

如何在macOS上安装旧版本的Xcode

获取旧版本Xcode安装文件

登录Apple账户

下载安装文件

安装及并行运行

解压安装文件

重命名和移动

使用旧版本Xcode打开项目

指定命令行工具（看需求）

uni-appx启动参数备忘录

整体参数预览

API差异说明

应用初始化时获取参数

应用显示时获取参数

iOS App端使用示例

通过AppLink启动时的参数

更新日志

2025-12-09

在Next.js V15中使用React Scan

React Scan 是什么？

主要特点

在Next.js项目中集成React Scan

项目环境

1. 安装React Scan

创建react-scan组件

在layout布局组件中引入ReactScan组件

使用React Scan分析性能问题

启动开发服务器

查看性能分析结果

实际案例：解决重渲染问题

Welcome to Next.js!

Welcome to Next.js!

高级配置选项

uni-app(Vue2)抖音小程序开发中接入官方小说阅读器插件

能力申请

自定义页面结构

添加到桌面

阅读器页面

页面样式

绑定行业能力

小说插件配置项

注意事项

页面插槽组件的引用

阅读器实现

支付弹窗组件

参数接收

事件传递

自定义支付弹窗

常见问题

1、未解锁章节免费字数

2、小说等级的作用

3、阅读器内目录信息的展示

4、完成内容库接入

写在最后

AI程序员养成指南：零代码使用Trae AI编辑器从零实现一个3D多仓库可视化大屏

第一个场景

简易地面

颜色优化、增加交互

背景和地面优化

多库区隔离带和过道间隔

优化Tooltip展示内容

仓库统计面板

丰富统计面板

多仓库切换和控制面板

多模态

写在最后

抖音小程序跳转到其他小程序的能力接入

写在前面

能力说明

开发实录

配置navigateToMiniProgramAppIdList属性

用户主动点击触发的事件回调中使用navigateToMiniProgram

实践效果

常见问题

uniCloud新建云对象上传部署报错：Trying to get property 'id' of non-object

package.json的解读

name

dependencies

extensions

使用旧版本`Xcode`打开项目

创建`react-scan`组件

在`layout`布局组件中引入`ReactScan`组件

配置`navigateToMiniProgramAppIdList`属性

用户主动点击触发的事件回调中使用`navigateToMiniProgram`

`package.json`的解读

uniapp发行编译自动生成`package.json`文件

`App.vue`初始化接入

3-2 修改配置文件`httpd.conf`