领导要求每人每周至少用 1 亿 token。但给的模型又太笨，参数 35B-A3B，上下文不到 100K，干啥啥不行，我人工去优化它生成的垃圾代码，还不如我自己写一遍快，不用又要被谈话。结果就是会用 AI 的人看不上，不会用 AI 的人用不上。因为一些没办法明说的原因，这考核指标又不是说取消就能取消的（以前还考核过代码行数、AI / 人工代码占比，结果就是鼓励写重复冗余的垃圾代码）。那要怎样才能让 Claude Code 快速刷够 1 亿 token 呢？开个 Claude Code 窗口发

1

/loop 1m 读取本项目中的所有源码，逐一进行详细总结，然后生成一份全面的架构分析报告，包含优缺点评估以及重构建议。

这样跑几个小时就有了。

今天在 Windows 或 macOS 上安装或更新 Claude Code 后，运行 claude 命令却报错 claude native binary not installed（macOS）、程序 claude.exe 无法运行（Windows）。折腾了一番终于搞清楚了原因。

在前端工程中可以用 @monaco-editor/loader 来引入 Monaco，但有时候我们的前端项目不依赖 Webpack、Vite 等打包工具，如何在普通网页中用纯 CDN 的方式引入 Monaco Editor？

扣子空间生成的网页是 jsx 格式的，在扣子空间内可以正常打开，如果想要部署到自己的服务器，则需要经过编译。

为此，我写了一个模板，只需将扣子空间生成的 jsx 重命名为 coze.tsx（注意后缀要改为 tsx）放入本项目 src 目录，即可编译出可静态部署的 dist 产物。

字节有一个很实用但不怎么火的项目，叫 Midscene.js，Chrome 商店上的安装数仅有 1 万，它是一个由多模态模型驱动的前端自动化测试插件。

Midscene.js 一共就三大 API：Action、Query、Assert

Action 交互

描述步骤并执行交互。例如，在 GitHub 上交互：查找 GitHub 上的 Twikoo 项目，点进详情页，点个 Star——

最近金价波动剧烈，要是能一边写代码，一边实时监控金价变动，就不会错过高低点了！

在 C:\Users\你的用户名\.vscode\extensions 新建文件夹 gold-monitor，在文件夹中创建两个文件 package.json 和 extension.js。

在 使用 HTTP API 从 WPS 在线表格中获取数据 中，我介绍了如何查询数据，本篇将介绍如何利用 AirScript 实现完整的增删改查。

首先还是在金山文档中创建一个智能表格，在智能表格中创建一个数据表，这里以 “汇率表” 为例。

Node.js 项目安装 SQLite 时需要下载预编译 bundle，默认是从 github.com 下载的，下载失败会走 node-gyp 本地编译，本地编译一般会因为缺少 Python、Visual Studio、Xcode 等环境而报错，所以需要配置镜像地址。

因为下载 node-sass 的 binding.node 预编译二进制包时，发现网上竟然搜不到 Node.js 版本与 ABI 版本的对应关系，所以自己整理一份吧，数据来自三个地方，我做了整合：

1. https://github.com/sass/node-sass/blob/master/lib/extensions.js
2. https://github.com/electron/node-abi/blob/main/abi_registry.json
3. https://github.com/electron/node-abi/blob/main/index.js

在企业环境中的电脑，往往严格管控着管理员权限，无法自由地安装软件。

• 如何以普通用户的身份安装 Node.js？
• 如何在需要低版本的 Node.js 时快速切换版本而不需要重新安装？

JDK 也适用于这种方式安装！只需多配一个环境变量 JAVA_HOME

之前的博文中，我提到过本站的友情链接是通过 Vika 维格表管理的，维格表的一大特色是支持通过 API 增、删、改、查表格中的数据，这直接让维格表化身为一个简单的数据库，可玩性大大提升，通过它维护友链数据，并通过自己编写的脚本生成友链页面就是个例子。

VSLite 是一个开源的、完全运行在浏览器中的开发环境，它的亮点在于，不需要联网也可以直接在浏览器中使用 Node.js、Python、Git 等工具。你可以在 vslite.dev 体验到在线 demo。

传统的基于云的开发环境，例如 GitHub Codespaces，依赖于后端服务，前端所执行的命令，实际上是通过网络请求发送到后端对应的云虚拟机（或容器）中执行的，这就需要消耗后端的计算资源；而 VSLite 的思路完全不同，它在浏览器中启动了一个容器，做到了不再依赖后端。

想要在浏览器中跑起来一个容器，第一次听说这样的想法时，我说：不可能！绝对不可能！就浏览器这也受限那也受限的环境，还能跑起来一个操作系统？然而 StackBlitz 真的做到了，他们开发出了 WebContainers，WebContainers 是一个基于浏览器的运行时，用于执行 Node.js 程序和操作系统命令，完全在浏览器选项卡中。以前需要云虚拟机才能执行的应用，现在可以完全在浏览器端运行。

经过两天的研究，我开始对 WebContainers 的原理有了初步的了解。

之前用 Electron 写了一个监控客户端，昨天突然用不成了，检查日志发现这样的一个报错：

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

Error occurred in handler for 'getPrice': TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:12293:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async WebContents.<anonymous> (node:electron/js2c/browser_init:2:78167) {
  cause: Error: unable to verify the first certificate
      at TLSSocket.onConnectSecure (node:_tls_wrap:1659:34)
      at TLSSocket.emit (node:events:514:28)
      at TLSSocket._finishInit (node:_tls_wrap:1070:8)
      at ssl.onhandshakedone (node:_tls_wrap:856:12) {
    code: 'UNABLE_TO_VERIFY_LEAF_SIGNATURE'
  }
}

正在开发一个问答小网页，需要接入大模型，查看了：

讯飞星火的调用文档: https://www.xfyun.cn/doc/spark/Web.html

通义千问的调用文档: https://help.aliyun.com/zh/dashscope/developer-reference/api-details

发现官方文档对于前端浏览器直接调用 API 的示例都写得不够清楚，所以在此重新封装了示例。

星火用的是 WebSocket 协议，千问用的是 Server-Sent Events，也就是 SSE。

注意：示例中直接把密钥写进了前端代码，生产环境不推荐这么做，建议通过 nginx 代理等方式将密钥注入请求。

应博友 Inuyasha 的请求，现分享本站友链页源代码如下。

特性

自适应浅色主题和深色主题，自适应内容区宽度，自适应电脑、平板、手机。

打开百度地图 https://map.baidu.com/fav/，登录自己的账号，按 F12 打开控制台，点击 Network，再按 F5 刷新页面，在 Filter 中输入 favdata，即可筛选出收藏点的 API 接口。如果你的收藏点多于 100 个，你会筛选出多个请求。依次点击每个请求，点击 Preview，展开 sync - newdata，右键 newdata，点击 Copy object 即可复制出来收藏数据。

在做客户端国产化改造时，发现页面上的时间全都差了 8 个小时，打开控制台打印 new Date() 显示的时区是 GMT，进一步测试发现，只有 Kylin 桌面系统上有这个问题，统信 UOS 系统没问题，解决方法很简单，在程序启动前手动指定时区。

1

process.env.TZ = 'Asia/Shanghai';

环境变量

1. 环境变量 PATH 需包含 node、git 的可执行文件目录
2. 在中国大陆跑，建议替换阿里镜像源提升依赖安装速度

1
2
3

registry=https://registry.npmmirror.com/
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/

分享一个 Vue 2 $emit 不生效问题的解决，子组件向父组件 $emit 事件，没有报错，但父组件就是收不到事件。首先排除拼错事件名称等基本错误。

最终发现原因是：由于我将 $emit 写在了异步方法里，子组件在还没 $emit 之前就销毁了，此时再调用 $emit 不会有任何报错，也不会有任何效果，特此记录。

目录结构

1
2
3
4
5
6
7
8

- package.json
- packages
  - core
    - package.json
  - bridge
    - package.json
  - shared
    - package.json

Puppeteer 是最常见的服务端 Node.js 网页转 PDF 工具库之一，原理是启动 Chromium 无头模式，打开网页，输出PDF，由于其原理是直接操控浏览器，导出的 PDF 几乎和网页效果一致。本篇记录一下踩坑经历。

我的 Puppeteer 版本：19.4.1

无法安装 puppeteer

1. Node.js 要求 >=14.1.0
2. Puppeteer 安装过程中默认访问 Google 服务器下载 Chromium 安装包，建议切换到阿里源进行安装。

1

npm config set PUPPETEER_DOWNLOAD_HOST=https://registry.npmmirror.com/-/binary

需求

利用现有的查询和新增接口，如何在不改后端的情况下给页面增加导入和导出功能？

前端查询到数据，可以生成 xlsx 文件吗？

前端可以读取用户选择的 xlsx 文件，然后调用新增接口向后端写入数据吗？

可以！

本文作者: ych6666
原文链接: https://blog.csdn.net/ych6666/article/details/122958097

正则表达式作用:
描述了一个规则，通过这个规则可以匹配一类字符串。
完成字符串的查找、验证和替换

因为数据库导出还算方便，所以 Twikoo 没有提供内置的数据导出功能。想要导出数据的话，首先确认自己部署 Twikoo 所用的方式，然后参考下面的教程。

贴 PPT，正文待补充。

Twikoo 文档页和本站的评论区，支持评论图片点击放大，你现在就可以就下拉到本文评论区试一试！

为什么 Twikoo 没有官方支持图片点击放大？

1. 会增加包体大小
2. 涉及 body DOM 节点操作，为了不影响在不同主题下的显示效果，需要杜绝这类操作
3. lightGallery 库是 GPLv3 协议的

我就想要实现图片点击放大功能！

首先需要你拥有修改博客主题的能力。

有时候博主希望多个页面共用一个评论区，我们可以自定义 path 做到这一点。

首先要确定自己所用的博客主题支持 Twikoo path 配置，否则需要自己修改主题源码添加 path 配置。

设置主题的 Twikoo path 配置为 window.TWIKOO_MAGIC_PATH||window.location.pathname

然后在所有需要共用评论区的页面正文中增加以下代码 <script>window.TWIKOO_MAGIC_PATH="评论区名称"</script>

把中间的“评论区名称”替换为你指定的名称，共用的页面请起 相同的 评论区名称，其他页面不做改动即可。

试试看！

前端网页如何避免被访客审查元素？总结以下方法，未来有新的想法也会记录在此篇文章里。

0x00

1
2
3
4
5
6
7
8
9
10
11

Promise.resolve(1)
  .then((res) => {
    console.log(res)
    return 2
  })
  .catch((err) => {
    return 3
  })
  .then((res) => {
    console.log(res)
  })

云函数的特性是，当 main 函数 return 时，执行进程会被立即冻结。这一点在官方文档Node.js 8 的异步行为中有提到。

对于异步函数，主流程执行完成后，函数实例进程会被冻结，进程中的所有异步任务会暂停执行，直到这个进程被再次唤起。
另一方面，如果函数实例进程由于某些原因没被复用（例如更新了函数代码），这个异步流程中的代码就永远不会被执行。

但是有些场景下，云函数需要很长的执行时间，例如，Twikoo 通过 Akismet 检测垃圾评论的过程。按照特性，在检测过程结束前，就不能异步检测，提前返回结果给前端，否则检测进程就会被冻结，导致检测失败。我们只能 await 同步检测，造成请求响应慢，用户体验差。

按照 Java 的习惯，我们会启动新的线程执行长时间的任务，在云函数中怎样实现？

背景

Twikoo 评论系统要实现导入功能，导入，就需要上传文件。

通过调用云函数，我们能够传递 string、number 等简单的参数，想要上传文件？不太行。

想到云开发环境有一块默认开通的 COS 空间，这块空间允许登录用户上传文件，只要利用这片空间，就可以实现将文件上传给云函数的功能了。

主要思路

1. 前端调用 js-sdk 上传文件，获取到 fileID
2. 前端将 fileID 作为参数，调用云函数
3. 云函数通过 fileID 获取到文件，并解析

腾讯云云开发云函数的文档中写道——

不同的云函数可以共用代码文件（目录）吗
未上线

如果是简单的云函数，这一点还能接受，在开发 Twikoo 评论系统的过程中，云函数要实现的 API 越来越多，逐渐让我发现了它的弊端：

1. 大量的代码复制！
2. 版本管理非常不便！
3. 依赖管理非常不便！
4. 一次要部署十来个云函数，很麻烦！
5. 每个云函数都有独立的冷启动时间，很慢！

显然违反了开发的 DRY 原则，这迫使我开始思考解决方案。

正常的思维是，一个 API 写一个云函数，如果将云函数合并，用一个云函数实现不同的功能，能否解决这样的问题呢？

评论系统一直是静态网站的痛点。

• Valine：安全性不高
• Gitalk：需要评论者注册Github
• Disqus：需要注册，国内访问不畅
• 畅言：广告多，需要验证手机号

难道就没有一个完美的方案？

在咕咕咕了近三个月后，我自己搞出了一套评论系统，并命名为 Twikoo。

• 成本上，腾讯云云开发环境可以免费搭建
• 安全性上，使用腾讯云云函数开发接口，不开放一丁点数据库权限，未来更新将接入 Akismet 反垃圾检查
• 易用性上，支持点赞、邮件通知、微信通知（限博主），未来会增加更多玩法

欢迎访问 twikoo.js.org 了解更多。

前言

AyagawaSeirin 提出了一个 Valine 隐私安全漏洞，发送请求中响应内容明文暴露评论者IP、邮箱等隐私内容，所以我就去查了一下 LeanCloud 文档，发现可以手动更改字段权限，但是，如果设置 mail 客户端不可见，将不会显示评论者的 Gravatar，转为显示默认头像，因为原版是取到明文邮箱后再转 MD5 取头像的。想到的解决办法是新增一个可见字段存储 mail 的 MD5，需要改 Valine 源码，还需要处理现有数据。

以下是我实现的魔改版本，基于 Valine.min.js 版本 1.4.14 修改。该魔改版新增一个可见字段（mailMd5）存储 mail 的 MD5，并提供了脚本处理现有评论数据。

前言

主要是 Bing 找了许多 libraries。效果在 Chrome for Windows 上都不理想，要么滚动很生硬，要么就是太复杂，就自己实现了。

本来是 PC only 的，写好后测试了一下移动端，是兼容的，效果也还不错……

不过反正移动端都自带惯性滑动了

效果

JS 代码在 Safari, Chrome, Firefox 都是好的，就只有 Edge 莫名其妙地报错。

1

SCRIPT5022: Exception thrown and not caught

未捕获的异常？EXM？你倒是说是什么异常啊？行号还是错的？点过去无法定位错误位置？hash-navigation.js？我的项目里根本都没有这个 js 啊喂！

要是 Icarus 能用拼音搜文章就好了，如果你也有这样的想法，那这篇文章也许会对你有帮助。

效果

前提

1. Icarus 版本 3.0 以上
2. 搜索插件使用的是 Insight

如果你和我一样只是想在 1.3.10 原版的基础上增加昵称和邮箱的防空验证，可以直接下划到结尾部分，跳过前半部分的过程记录。

最近经受匿名评论的困扰，计划禁止匿名评论。还有一个原因是《网信办：网站不得向未实名认证的用户提供跟帖评论服务》，咱小小博客也是备过案的（能用国内 CDN 加速太香了），应该注意一下是不是？

很遗憾，Valine 作者不计划添加这一功能！这让我一度想要换评论系统了……先不谈数据转移，我对比了一下其他评论系统——

• Discuz 系，国内连通率堪忧，不行；
• 基于 GitHub Issue 的，需要 GitHub 授权，对访客不是很友好，国内速度也不快，不行；
• 还有国内的畅言，要备案好说，但是 UI 不好看，还要验证访客手机号、绑定微信一大堆，麻烦不说，重要的是泄露访客隐私，不行……

昨天发现 Valine 1.4 发布，有几个新特性挺喜欢，打算升级，想起这茬，干脆一起把防空校验加上吧！

如何定义合法姓名

中文姓名非常多样化，想要真正区别出姓名和非姓名非常困难，但在这篇文章中，作为前提，我们认为合法的中文姓名由 1~10 个中文字符组成。

Javascript

知道了这个前提，容易得出 JS 的正则表达式——

1

/^([\u4e00-\u9fa5]{1,10})$/

昨天晚上 Icarus 主题的 RC 版本发布，离正式版不远了，我自 3.0.0-beta.1 一路使用到现在，把自己的使用经验分享一下。

魔改迁移

由于主题作者换掉了 ejs 语言，全部重写了一遍，迁移这块的难度是最大的。

拉 dev 分支，冲突实在是太多了，我的办法是，把在旧版上的魔改的整个 diff 导出，然后直接从 dev 签出一个新的分支，参考 diff 对每个文件都重新修改，花了不到2个小时搞定。

魔改 hexo-component-inferno 组件

主题中部分可重用的 JS 和 JSX 代码已经被移到另一个项目 hexo-component-inferno 中，我们如何对这些组件魔改？此时要分2种情况——

1. widgets 的魔改
2. 其它 JS 和 JSX 的魔改

前提

已安装 Vue 脚手架

1

npm install -g @vue/cli

现象

找不到 vue-cli-service 命令

1

'vue-cli-service' is not recognized as an internal or external command, operable program or batch file.

经过搜索，发现这个问题只在 Windows 下存在。

装了脚手架应该会在 node 目录产生 vue-cli-service.cmd 的文件，实际没有产生，不过在全局 node_modules 下是有的。

有说清理 node_modules 重新安装可以解决的，试了不管用，全局卸载脚手架重新安装也不管用，就算管用也比较麻烦，于是我找到了几个间接使用方法——

对一个有国际化的 Vue 组件写单元测试，mount这个组件时，会遇到找不到 $t 的报错。

1

<p>{{ $t('message.hello' }}</p>

1

TypeError: _vm.$t is not a function

添加一个参数

当前 URL：http://localhost/home?keyword=example

1

this.$router.replace({ query: { ...this.$route.query, code: '1' } })

最终 URL：http://localhost/home?keyword=example&code=1

删除一个参数

我所使用的 Vue Router 版本为 3.0.3，删除参数比较麻烦。

当前 URL：http://localhost/home?keyword=example&code=1

1
2

delete this.$route.query.code
this.$router.replace({ query: this.$route.query }) // 地址栏无反应

1
2
3
4

let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 深拷贝
delete newQuery.code
// 如果有引入 lodash, 可以写成: let newQuery = _.omit(this.$route.query, 'code')
this.$router.replace({ query: newQuery })

最终 URL：http://localhost/home?keyword=example

在 Github 上面搜索 “lottery”，发现类似的项目挺多的，有 Electron 实现的，可以打包成 exe，也有原生 js 实现的，浏览器打开。

这次是用 Vue 做了一个编号抽奖，一个转盘抽奖，放在一起，练手。

预览：http://lottery.imaegoo.com/

移动端分页一般都是向下滑动加载更多，Vant 组件库提供了 van-list 来实现这一功能。

List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据，数据更新完毕后，将loading设置成false即可。若数据已全部加载完毕，则直接将finished设置成true即可。

实际应用中发现，即使内部元素已经填满一整屏，仍然会触发加载，直到我模拟的20多页全部加载完才停下来。

我没有给这个问题写专门的 CodePen demo，比较麻烦，碰到的人也不一定多。

结论

van-list 会在内容之后增加一个 placeholder，通过 placeholder 的位置判断内容是否已填充满屏。
van-list 本身为 flex 布局时，flex-direction 必须是 column（或 column-reverse）。

过程

首先我的用法是这样的：

1
2
3
4
5
6
7

<van-list> <!-- flex -->
  <van-grid>
    <van-grid-item />
    <van-grid-item />
    <van-grid-item />
  </van-grid>
</van-list>

首先看文档，英文文档没有提到，但中文文档有以下一段话：

使用 float 布局后一直触发加载？
若 List 的内容使用了 float 布局，可以在容器上添加van-clearfix类名来清除浮动，使得 List 能正确判断元素位置

检查了一下，我没有在使用 float 布局呀。

浅拷贝单层对象

1
2

let obj = { id: 1, title: "1" }
let copyOfObj = Object.assign({}, obj)

深拷贝多层对象

1
2
3
4
5
6
7

let obj = {
  id: 1,
  title: "1",
  tag: ['js', 'javascript'],
  category: { id: 1001, title: 'frontend' }
}
let copyOfObj = JSON.parse(JSON.stringify(obj))

浅拷贝简单类型数组

1
2

let arr = [1, 2, 3]
let copyOfArr = [...arr]

深拷贝单层对象组成的数组

1
2
3
4
5
6
7

let arr = [
  { id: 1, title: "1" },
  { id: 2, title: "2" },
  { id: 3, title: "3" }
]
let copyOfArr1 = arr.map((item) => Object.assign({}, item))
let copyOfArr2 = JSON.parse(JSON.stringify(arr))

深拷贝多层对象组成的数组

1
2
3
4
5
6
7

let arr = [
  { id: 1, title: "1", subObj: { name: 'subObj1' } },
  { id: 2, title: "2", subObj: { name: 'subObj2' } },
  { id: 3, title: "3", subObj: { name: 'subObj3' } }
]
let copyOfArr1 = arr.map((item) => JSON.parse(JSON.stringify(item)))
let copyOfArr2 = JSON.parse(JSON.stringify(arr))

总结

不考虑性能的情况下，JSON.parse(JSON.stringify(value))是最简最万能的拷贝。

初学Vue遇到的问题，尝试了几个小时才搞明白，大佬应该一眼就能看出什么问题吧……

需要注意，不要直接在JS中操作一个Vue data对象中不存在的属性，如果同时有通过v-model绑定到该对象的不存在的属性时，会出现诡异的行为表现，console中不会报出任何 warn 或 error。

需求是，实现三个复选框，第一个复选框初始为选中状态，一开始写出来是这样的——

1
2
3
4
5

<div id="app" style="margin: 10px;">
  <van-checkbox v-for="box in checkboxes" :key="box.id" v-model="box.selected">
    复选框 {{ box.title }}
  </van-checkbox>
</div>

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

new Vue({
  el: '#app',
  data () {
    return {
      checkboxes: [
        { id: 1, title: 'a' },
        { id: 2, title: 'b' },
        { id: 3, title: 'c' }
      ]
    }
  },
  created () {
    this.checkboxes[0].selected = true
  }
})

试下效果：

See the Pen vue-v-model-not-work by iMaeGoo (@iMaeGoo) on CodePen.

复选框a的表现显然是异常的，点击不能成功地切换选中状态，而在点击之后再点击其他复选框，才会“有延迟地”切换状态。

越来越咸，两个月没发文章了，刚刚换项目了，开始学一些新的知识。
近来调试 webhook 和 http callback 比较多，想要使用 Node.js 写一个接收所有 HTTP 请求，并把请求头和请求体写进log，返回 200 OK 的 service。

其实就是简单的 access.log 啦。
其实就是刚学习 Node.js 写的 demo 啦。
啊这是很简单你不要拆穿啦。

这是输出的 log 的样子，优化了可读性，时间、method、path、URL参数（Query）、请求头（Header）、请求体（Body）都详细记录了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

info: 2019-07-25 18:04:36
    POST /v1.0/standard
    Query:
        search: keyword
    Header:
        cache-control: no-cache
        postman-token: f4103067-4b07-447d-9fab-f09a75b6ddda
        content-type: application/json
        user-agent: PostmanRuntime/3.0.11-hotfix.2
        accept: */*
        host: localhost:4000
        accept-encoding: gzip, deflate
        content-length: 209
        connection: keep-alive
    Body:
        appId: XXX
        data:
            userId: 123
            requestId: 456
        timestamp: 0

如果我们想要给directive的scope中绑定的方法传递参数，需要传递对象，而不是直接传值。

举个栗子，这里的clickOutside是从用的地方传入的一个方法，debug时我们会发现绑进来的clickOutside并不是我们传的clickOutSideAction。

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

app.directive('clickOutSide', ['$document', function($document) {
    return {
        restrict: 'A',
        scope: {
            clickOutside: '&'
        },
        link: function (scope, el) {
            $document.on('click', function (e) {
                scope.clickOutside();
            });
        }
    }
}]);

1

<div data-click-out-side click-Outside="$ctrl.clickOutSideAction()"></div>

如果需要在这里给clickOutSideAction传参数，应该这样改：

1
2
3
4
5
6
7
8
9
10

app.directive('clickOutSide', ['$document', function($document) {
    return {
        ...
        link: function (scope, el) {
            ...
                scope.clickOutside({event: e});
            ...
        }
    }
}]);

1

<div data-click-out-side click-Outside="$ctrl.clickOutSideAction(event)"></div>

好处是在实际使用directive的地方，不需要考虑参数列表顺序，只需要保证参数名称正确。

在Gist上找到的一个directive，用来让input输入框的宽度自适应内容宽度。
https://gist.github.com/mbenford/8016984

原理是生成一个相同样式的，隐藏的span，通过span的宽度动态改变input的宽度。
同时兼顾了input有placeholder的情况。

如果是在比较大的系统中，可以用throttle节流阀包装一下resize方法，避免性能问题。

如果是textarea，对应的directive在这里：
https://github.com/monospaced/angular-elastic