├── Weekly newsletter.md ├── Python日常使用工具列表.md ├── 前端工具.md ├── 移动端开发.md ├── 自动化测试.md ├── Python Web 推荐应用技术栈.md ├── Node 上线部署 checklist.md ├── 开放学习资料.md ├── 机器学习与神经网络.md ├── CV训练微调.md ├── 中小企业技术架构应用软件.md ├── AI工具集.md ├── .gitignore ├── PHP.md ├── jupyter.md ├── 性能优化 check list.md ├── Stable Diffusion.md ├── Webpack.md ├── README.markdown ├── 前端代码质量控制.md ├── Django Web 框架.md ├── Openresty.md └── Javascript Q & A.md /Weekly newsletter.md: -------------------------------------------------------------------------------- 1 | - Javascript https://javascriptweekly.com/ 2 | -------------------------------------------------------------------------------- /Python日常使用工具列表.md: -------------------------------------------------------------------------------- 1 | ### Video 2 | 3 | * yt-dlp https://github.com/yt-dlp/yt-dlp 4 | * XHS-Downloader https://github.com/JoeanAmier/XHS-Downloader 5 | -------------------------------------------------------------------------------- /前端工具.md: -------------------------------------------------------------------------------- 1 | ### 内网穿透 2 | 3 | https://github.com/unjs/untun 4 | 5 | ### 代理 Proxy 6 | 7 | https://github.com/unjs/httpxy 8 | https://github.com/http-party/node-http-proxy 9 | 10 | ### Http Client 11 | 12 | 13 | ### Qr code 14 | https://github.com/unjs/uqr 15 | -------------------------------------------------------------------------------- /移动端开发.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 微信小程序 4 | 5 | * [Vant weapp](https://youzan.github.io/vant-weapp/#/home) 6 | * [TDesign](https://tdesign.tencent.com/miniprogram/getting-started) 7 | 8 | 9 | ## 抓包 Debug 10 | 11 | * [whistle](https://wproxy.org/whistle/) 12 | * [vConsole](https://github.com/Tencent/vConsole) 13 | -------------------------------------------------------------------------------- /自动化测试.md: -------------------------------------------------------------------------------- 1 | ## 工具： 2 | 3 | **功能测试：** 4 | 5 | - https://playwright.dev 6 | - https://www.cypress.io/ 7 | 8 | **API 测试：** 9 | - https://hurl.dev/ 10 | - https://www.postman.com/ 11 | 12 | **单元测试** 13 | - https://jestjs.io/ 14 | - https://github.com/testing-library 15 | 16 | ## 注意事项 17 | 18 | 优先保证验收和功能测试，如果有额外的时间，对核心业务做单元测试，优先选择 `playwright`，`hurl`，`testing-library`，因为在功能方面 19 | 和 CI 的集成等具有优势。 20 | -------------------------------------------------------------------------------- /Python Web 推荐应用技术栈.md: -------------------------------------------------------------------------------- 1 | ## Web framework 2 | 3 | 1. Django 4 | 2. Flask 5 | 3. Fastapi 6 | 7 | ## CMS 8 | 9 | 1. [wagtail] https://wagtail.org/ 10 | 11 | ## ORM 12 | 13 | 1. [Sqlmodel] https://sqlmodel.tiangolo.com/ 14 | 2. [Tortoise ORM] https://tortoise.github.io/ 15 | 16 | ## Package Manager 17 | 18 | 1. Uv 19 | 20 | ## Http 21 | 22 | 1. Httpx 23 | 24 | ## ASGI 25 | 26 | 1. uvicorn 27 | 28 | ## WSGI 29 | 30 | 1. gunicorn 31 | 2. waitress 32 | -------------------------------------------------------------------------------- /Node 上线部署 checklist.md: -------------------------------------------------------------------------------- 1 | ## Node 上线部署 Check List 2 | 3 | - [ ] 通过环境变量区分不同的环境，可使用 `dotenv` 包 4 | - [ ] 捕获未处理的 `promise rejections` ，并记录该日志 5 | - [ ] 至少，编写API（组件）测试，可使用 cypress, postman 或者 IDEA 编辑器自带的 http api 工具 6 | - [ ] 使用 `npm audit` 确保已升级有漏洞的依赖包 7 | - [ ] 使用 `PM2` 进行集群化运行，以合理使用多核 CPU 8 | - [ ] 设置 `NODE_ENV=production`， 确保所有的库包含第三方的执行的都是为生产优化的代码 9 | - [ ] 静态资源都已部署 CDN 10 | - [ ] 头部正确设置了 `transaction-id` 或者 `request-id` 并记录日志，确保后续 11 | 可以根据相关 id 进行日志跟踪 12 | - [ ] 对于可预测的高流量 api 进行限流 13 | - [ ] 调整 HTTP 响应头以加强安全性，可用 `helmet` 包 14 | 15 | -------------------------------------------------------------------------------- /开放学习资料.md: -------------------------------------------------------------------------------- 1 | ## 开放学习资料 2 | 3 | 1. [Julia 数学相关] https://computationalthinking.mit.edu/Spring21/ 4 | 2. [网络协议] https://www.cloudflare.com/zh-cn/learning/ 5 | 3. [Go 语言教程] https://github.com/unknwon/the-way-to-go_ZH_CN/blob/master/eBook/directory.md 6 | 4. [国外大厂 FAANG 案例研究] https://www.quastor.org/ 7 | 5. [Rust 教程] https://kaisery.github.io/trpl-zh-cn/ 8 | 6. [High Performance Browser Networking] https://hpbn.co/ 9 | 7. [谷歌工程实践] https://jimmysong.io/eng-practices/ 10 | 8. [devops] https://github.com/Tikam02/DevOps-Guide 11 | 9. [ts+react] https://github.com/typescript-cheatsheets/react 12 | -------------------------------------------------------------------------------- /机器学习与神经网络.md: -------------------------------------------------------------------------------- 1 | # 机器学习 2 | 3 | - [scikit-learn] https://scikit-learn.org/stable/ 4 | - [statsmodels] https://www.statsmodels.org/stable/index.html 5 | - [autogluon] https://github.com/autogluon/autogluon 6 | 7 | # 神经网络 8 | 9 | ## Python 10 | - [Nixtlaverse] https://nixtlaverse.nixtla.io 11 | - [Keras] https://keras.io 12 | - [Lightning] https://lightning.ai 13 | - [Transformers] https://huggingface.co/docs/transformers/index 14 | - [fastai] https://github.com/fastai/fastai 15 | 16 | ## R 17 | - [mlr3verse] https://mlr3verse.mlr-org.com 18 | - [tidymodels] https://www.tidymodels.org 19 | -------------------------------------------------------------------------------- /CV训练微调.md: -------------------------------------------------------------------------------- 1 | ## 预训练 2 | 3 | - ![lightly-train](https://www.lightly.ai/lightly-train) 4 | - ![lightning](https://lightning.ai/) 5 | 6 | ## 微调 7 | 8 | - ![ultralytics](https://www.ultralytics.com/) Yolo 系列 9 | - ![super-gradients](https://github.com/Deci-AI/super-gradients) Yolo-NAS 系列 10 | - ![transformers trainer](https://huggingface.co/docs/transformers/zh/main_classes/trainer) 11 | - ![timm](https://huggingface.co/docs/timm/training_script) 12 | - ![efficientvit](https://github.com/mit-han-lab/efficientvit) cls, sam, seg 13 | 14 | ## 文本 15 | 16 | - ![fastai](https://docs.fast.ai/) 17 | -------------------------------------------------------------------------------- /中小企业技术架构应用软件.md: -------------------------------------------------------------------------------- 1 | ## 编程语言 2 | 3 | * Nodejs Nestjs 4 | * Go Echo 5 | * FastAPI SQLModel 6 | 7 | ## 移动端开发 8 | 9 | * Flutter 10 | * H5 11 | 12 | ## Web Server 13 | 14 | * Openresty 15 | * Caddy 16 | 17 | ## Task Queue 18 | 19 | * BullMQ 20 | * RabbitMQ 21 | 22 | ## Search 23 | 24 | * RediSearch 支持中文 25 | * MeiliSearch 支持中文 26 | 27 | ## Database 28 | 29 | * Postgresql 30 | * MariaDB 31 | * CockroachDB 32 | * TimescaleDB 33 | 34 | ## 缓存 35 | 36 | * Redis 37 | 38 | ## 日志 39 | 40 | * Seq 41 | * ZincSearch 42 | 43 | ## 系统监控 44 | 45 | * NetData 46 | 47 | ## MQTT Broker 48 | 49 | * Mosquitto 50 | 51 | ## 认证 52 | 53 | * https://cerbos.dev/ 54 | -------------------------------------------------------------------------------- /AI工具集.md: -------------------------------------------------------------------------------- 1 | 2 | ## Diffusion 3 | 4 | ### 画图 5 | 6 | - Stable-diffusion-webui-forge https://github.com/lllyasviel/stable-diffusion-webui-forge 7 | - ComfyUI https://github.com/comfyanonymous/ComfyUI 8 | 9 | ### 训练 10 | 11 | - https://github.com/kohya-ss/sd-scripts/tree/sd3 12 | - https://github.com/bmaltais/kohya_ss 13 | 14 | ## LLM 15 | 16 | ### 聊天 UI 17 | 18 | - https://huggingface.co/chat/ 19 | - https://chat.qwen.ai/ 20 | - https://github.com/lobehub/lobe-chat 21 | 22 | ### 代理 23 | 24 | - https://openrouter.ai/ 25 | - https://developers.cloudflare.com/ai-gateway/ 26 | 27 | ### 训练 28 | 29 | - https://unsloth.ai/ 30 | - https://github.com/hiyouga/LLaMA-Factory 31 | 32 | 33 | ### 开发 34 | 35 | - https://jina.ai/ 36 | - https://python.langchain.com/docs/introduction/ 37 | - https://docs.llamaindex.ai/en/stable/ 38 | - https://microsoft.github.io/autogen/stable/ 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | /build 8 | /.scannerwork 9 | 10 | # Only exists if Bazel was run 11 | /bazel-out 12 | 13 | # dependencies 14 | /node_modules 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | npm-debug.log 38 | yarn-error.log 39 | testem.log 40 | /typings 41 | 42 | # System Files 43 | .DS_Store 44 | Thumbs.db 45 | 46 | # Environment-specific configuration - NEVER commit to Git 47 | .env 48 | *.tgz 49 | .ipynb_checkpoints 50 | .RData 51 | .Rhistory 52 | -------------------------------------------------------------------------------- /PHP.md: -------------------------------------------------------------------------------- 1 | ## PHP 资源 2 | ### 框架 3 | 4 | * Laravel 5 | * Symfony 6 | * Zend framework 7 | * CakePHP 8 | * Slim 9 | * Sliex 10 | * Zend expressive 11 | 12 | ### 组件 13 | 14 | * Twig 15 | * Fastroute 16 | * Flysystem 17 | * Guzzle 18 | * Jieba-php 19 | * Phpdotenv 20 | * doctrine/cache 21 | * RxPHP 22 | * PHPVerbalExpressions 23 | * php-jwt 24 | * php-amqplib 25 | * PHPExcel 26 | * elasticsearch-php 27 | * Pimple 28 | * var-dumper 29 | * PHPMailer 30 | * monolog 31 | * parsedown 32 | * redbean 33 | 34 | ### 组件项目 35 | 36 | * Symfony components 37 | * Zend components 38 | * CakePHP components 39 | * Thephpleague 40 | 41 | ### 代码优化 42 | 43 | * Php-cs-fixer 44 | * SonarQube 45 | * Mondrian 46 | * Psalm 47 | * Phpstan 48 | * Phan 49 | 50 | 51 | ### 测试 52 | 53 | * Phpunit 54 | * Codeception 55 | * Kahlan 56 | * Phpbench 57 | 58 | ### 性能 59 | 60 | * Swoole 61 | * Reactphp 62 | * Php-pm 63 | 64 | -------------------------------------------------------------------------------- /jupyter.md: -------------------------------------------------------------------------------- 1 | ## Jupyter lab install 2 | 3 | ### Install jupyter 4 | 5 | pip install jupyter 6 | 7 | for remote access like gitpod or codespace, generate configure file: 8 | 9 | jupyter notebook --generate-config 10 | 11 | 12 | edit file `jupyter_notebook_config.py`: 13 | 14 | ``` 15 | c.ServerApp.allow_remote_access = True 16 | ``` 17 | 18 | generate login password: 19 | 20 | 21 | jupyter notebook password 22 | 23 | 24 | ### Install deno typescript kernel 25 | 26 | 1. install deno: 27 | 28 | curl -fsSL https://deno.land/install.sh | sh 29 | 30 | 2. install deno jupyter kernel: 31 | 32 | deno jupyter --unstable --install 33 | 34 | 3. restart jupyter lab 35 | 36 | ### Install R kernel 37 | 38 | 1. Install R 39 | 40 | follow the install documents: https://cloud.r-project.org/ 41 | 42 | 2. Install R kernel 43 | 44 | enter R repl: 45 | 46 | R 47 | 48 | install package: 49 | 50 | ``` 51 | install.packages('IRkernel') 52 | IRkernel::installspec() # to register the kernel in the current R installation 53 | ``` 54 | 55 | install jupyter extension: 56 | 57 | jupyter labextension install @techrah/text-shortcuts 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /性能优化 check list.md: -------------------------------------------------------------------------------- 1 | ## Http 2 | 3 | 前端增加 HTTP 加速缓存，通过 http 协议的 Cache-Control，Expired 等缓存字段控制失效时间。 4 | 5 | 软件： 6 | 1. [推荐] Varnish: https://varnish-cache.org/ https://packagecloud.io/varnishcache 7 | 2. Squid: http://www.squid-cache.org/ 8 | 9 | ## 静态资源 CDN 10 | 11 | 对于大量的图片，js 脚本，css 样式文件首选 CDN 网络分发，云计算公司阿里，腾讯，华为都提供 CDN支持 12 | 13 | ## 前端 14 | 15 | 1. 站点使用 http2 协议，开启静态资源 server push（采用 CDN 可忽略） 16 | 2. 请求优先接受 br 压缩，可选 gzip， 减少网络传输数据体积 17 | 3. 使用 service worker 进行资源预加载，并进行本地缓存，对于个别 api 如多语言也可将其保存在本地 18 | 4. 单页应用进行文件代码分割和 tree shaking, 移除注释和空格，减小体积 19 | 5. 图片采用 webp 编码格式，以减少传输的体积 20 | 6. CSS 采用 SASS，LESS 预处理器的时候需要注意避免 class 嵌套太多，过量的嵌套会增大 CSS 文件的体积 21 | 7. 合理使用 session storage 或者 local storage 进行数据缓存 22 | 8. 使用服务端渲染 SSR，优先采用 Nextjs，Nuxtjs，加快首屏渲染，优化 SEO 23 | 9. 使用 chrome 的 Lighthouse 和 Profile 进行针对性优化 24 | 25 | ## 后端 26 | 27 | 1. 对于变更较少或不变的数据设置 http 缓存头进行缓存 28 | 2. 设置响应压缩，gzip，br，zstd，gzip 一般压缩等级设置为 6 29 | 3. 设置 redis 或者 memcached 数据缓存 30 | 4. 尽量构建无状态应用从而易于多点部署，从而提高整体性能 31 | 5. 通过 framegraph，K6 等压测和 profile 工具进行应用调优 32 | 6. 采用 nodejs 或者 go 等性能较好的语言（谨慎） 33 | 34 | ## Nodejs 35 | 36 | 1. 使用性能较好的框架和库 37 | * fastify 38 | * undici 39 | * pino 40 | * ajv 41 | 42 | 2. http client 开启 http agent 的 keep alive 43 | 3. 数据库链接开启连接池 44 | 4. 通过 Clinic js 进行性能分析 45 | 5. 通过 Pm2 进行应用程序管理和集群运行模式，有效利用多核处理器并且在应用崩溃时能自动重启 46 | -------------------------------------------------------------------------------- /Stable Diffusion.md: -------------------------------------------------------------------------------- 1 | ## GUI 2 | 3 | * Stable diffusion webui https://github.com/AUTOMATIC1111/stable-diffusion-webui 4 | * InvokeAI https://github.com/invoke-ai/InvokeAI 5 | 6 | 7 | ## Platform 8 | 9 | * Colab https://github.com/camenduru/stable-diffusion-webui-colab 10 | * https://lightning.ai/ 11 | * https://huggingface.co/ 12 | * https://replicate.com/ 13 | 14 | ## Plugin 15 | 16 | * https://github.com/deforum-art/deforum-for-automatic1111-webui 17 | * https://github.com/AlUlkesh/stable-diffusion-webui-images-browser 18 | * https://github.com/camenduru/stable-diffusion-webui-huggingface 19 | * https://github.com/camenduru/sd-civitai-browser 20 | * https://github.com/kohya-ss/sd-webui-additional-networks 21 | * https://github.com/Mikubill/sd-webui-controlnet 22 | * https://github.com/fkunn1326/openpose-editor 23 | * https://github.com/jexom/sd-webui-depth-lib 24 | * https://github.com/hnmr293/posex 25 | * https://github.com/nonnonstop/sd-webui-3d-open-pose-editor 26 | * https://github.com/camenduru/sd-webui-tunnels 27 | * https://github.com/etherealxx/batchlinks-webui 28 | * https://github.com/catppuccin/stable-diffusion-webui 29 | * https://github.com/KohakuBlueleaf/a1111-sd-webui-locon 30 | * https://github.com/AUTOMATIC1111/stable-diffusion-webui-rembg 31 | * https://github.com/ashen-sensored/stable-diffusion-webui-two-shot 32 | * https://github.com/camenduru/sd_webui_stealth_pnginfo 33 | -------------------------------------------------------------------------------- /Webpack.md: -------------------------------------------------------------------------------- 1 | ### Webpack 2 | 3 | 1. [laravel-mix] https://github.com/laravel-mix/laravel-mix 4 | 2. [Encore] https://symfony.com/doc/current/frontend.html 5 | 6 | 7 | ### Assets server 8 | 9 | 1. [http-server] https://github.com/http-party/http-server 10 | 2. [serve] https://github.com/vercel/serve 11 | 12 | ### Webpack loader 13 | 14 | 1. [postcss-loader] https://github.com/webpack-contrib/postcss-loader 15 | 2. [esbuild-loader] https://github.com/privatenumber/esbuild-loader 16 | 3. [swc-loader] https://github.com/swc-project/swc-loader 17 | 4. [babel-loader] https://github.com/babel/babel-loader 18 | 5. [vue-loader] https://github.com/vuejs/vue-loader 19 | 6. [ts-loader] https://github.com/TypeStrong/ts-loader 20 | 7. [stylus-loader] https://github.com/webpack-contrib/stylus-loader 21 | 8. [sass-loader] https://github.com/webpack-contrib/sass-loader 22 | 9. [svgr] https://react-svgr.com/docs/webpack/ 23 | 24 | ### Webpack plugin 25 | 26 | 1. [error-overlay-webpack-plugin] https://github.com/gregberge/error-overlay-webpack-plugin 27 | 2. [bundle-stats] https://github.com/relative-ci/bundle-stats/tree/master/packages/webpack-plugin 28 | 3. [react-refresh-webpack-plugin] https://github.com/pmmmwh/react-refresh-webpack-plugin 29 | 4. [webpack-manifest-plugin] https://github.com/shellscape/webpack-manifest-plugin 30 | 5. [fork-ts-checker-webpack-plugin] https://github.com/TypeStrong/fork-ts-checker-webpack-plugin 31 | 6. [workbox-webpack-plugin] https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/ 32 | 7. [assets-webpack-plugin] https://github.com/ztoben/assets-webpack-plugin 33 | 8. [stylelint-webpack-plugin] https://github.com/webpack-contrib/stylelint-webpack-plugin 34 | 9. [image-minimizer-webpack-plugin] https://github.com/webpack-contrib/image-minimizer-webpack-plugin 35 | 10. [dotenv-webpack] https://github.com/mrsteele/dotenv-webpack 36 | 11. [nodemon-webpack-plugin] https://github.com/Izhaki/nodemon-webpack-plugin 37 | 12. [webpackbar] https://github.com/unjs/webpackbar 38 | 39 | ### Utility tools 40 | 41 | 1. [eslint] https://github.com/eslint/eslint 42 | 2. [browserslist] https://github.com/browserslist/browserslist 43 | 44 | 45 | -------------------------------------------------------------------------------- /README.markdown: -------------------------------------------------------------------------------- 1 | ## 最佳实践 2 | 3 | ### PHP 4 | 5 | - [Symfony](http://symfony.com) 6 | - [Laravel](https://github.com/illuminate) 7 | - [Doctrine](https://www.doctrine-project.org/index.html) 8 | - [Monolog](https://github.com/Seldaek/monolog) 9 | - [Guzzle](http://docs.guzzlephp.org/en/stable/) 10 | - [Codeception](https://codeception.com/quickstart) 11 | 12 | 13 | ### Python 14 | 15 | - [Httpx](https://www.python-httpx.org/) 16 | - [Numpy](https://www.numpy.org) 17 | - [Scipy](https://scipy.org/) 18 | - [Matplotlib](https://matplotlib.org/) 19 | - [Pandas](https://pandas.pydata.org/) 20 | - [Fastapi](https://fastapi.tiangolo.com/) 21 | - [SQLModel](https://sqlmodel.tiangolo.com/) 22 | - [Scikit-learn](https://scikit-learn.org/stable/) 23 | - [Statsmodels](https://www.statsmodels.org/stable/index.html) 24 | - [Django](https://www.djangoproject.com/) 25 | - [Waitress](https://docs.pylonsproject.org/projects/waitress/en/latest/) 26 | - [Pydantic](https://docs.pydantic.dev/latest/) 27 | 28 | 29 | ### Javascript 30 | 31 | - [React](https://react.dev/) 32 | - [Vue](https://vuejs.org/) 33 | - [Angular](https://angular.dev/) 34 | - [Solid](https://www.solidjs.com/) 35 | - [Emotion](https://emotion.sh/docs/introduction) 36 | - [Popmotion](https://popmotion.io/) 37 | - [Tiptap](https://github.com/ueberdosis/tiptap) 38 | - [Prisma](https://github.com/prisma/prisma) 39 | - [Gsap](https://gsap.com/) 40 | 41 | ### React 42 | 43 | - [Tanstack](https://tanstack.com/) 44 | - [SWR](https://github.com/vercel/swr) 45 | - [Zustand](https://github.com/pmndrs/zustand) 46 | - [Jotai](https://github.com/pmndrs/jotai) 47 | - [React-hook-form](https://github.com/react-hook-form/react-hook-form) 48 | - [Motion](https://motion.dev/) 49 | - [React-spring](https://www.react-spring.dev/) 50 | - [React-flow](https://github.com/wbkd/react-flow) 51 | - [Mobx](https://mobx.js.org) 52 | 53 | 54 | ### R 55 | 56 | - Ggplot2 57 | - Quantmod 58 | 59 | ### 工具 60 | 61 | - [Docusaurus 文档](https://github.com/facebook/Docusaurus) 62 | - Maxima 数学代数 63 | - Gimp 画图 64 | - Octave 数值计算 65 | 66 | ### Design System 67 | 68 | - https://github.com/shadcn/ui 69 | - https://mantine.dev/ 70 | 71 | 72 | ### Node 73 | 74 | - [Fastify](https://www.fastify.io/) 75 | - [Pino](https://getpino.io/#/) 76 | - [Undici](https://github.com/nodejs/undici) 77 | - [Ajv](https://ajv.js.org/) 78 | 79 | 80 | ### 图书 81 | 82 | - [R]: R for Data Science https://r4ds.had.co.nz/index.html 83 | - [Go]: the-way-to-go_ZH_CN https://github.com/unknwon/the-way-to-go_ZH_CN/blob/master/eBook/directory.md 84 | - [Rust]: The Rust Programming Language https://doc.rust-lang.org/book/ 85 | - [Rust]: Rust 程序设计语言 简体中文版 https://kaisery.github.io/trpl-zh-cn/ 86 | - [ML]: 100 Days of ML Code https://github.com/Avik-Jain/100-Days-of-ML-Code-Chinese-Version 87 | 88 | ### 工具 89 | 90 | - [glances]: glance https://github.com/nicolargo/glances 91 | - [netdata]: netdata https://github.com/netdata/netdata 92 | - [seq]: seq https://datalust.co/seq 93 | 94 | ### 性能优化工具 95 | 96 | - [pyroscope]: pyroscope https://github.com/pyroscope-io/pyroscope 97 | - [k6]: k6 https://k6.io/ 98 | -------------------------------------------------------------------------------- /前端代码质量控制.md: -------------------------------------------------------------------------------- 1 | ## Lint 2 | - ESlint 3 | - Prettier 4 | - Stylelint 5 | 6 | ### ESLint 7 | 8 | ESLint 是目前应用较为广泛的 lint 工具，支持 typescript。 9 | 10 | **安装：** 11 | 12 | ```shell 13 | npm install eslint --save-dev 14 | ``` 15 | 16 | **初始化配置：** 17 | 18 | ```shell 19 | npm init @eslint/config 20 | ``` 21 | 22 | 初始化会进入交互式页面，选择对应的功能选项，会自动安装所需的依赖，`.eslintrc.js` 配置文件示例： 23 | 24 | ```js 25 | module.exports = { 26 | "settings": { 27 | "react": { 28 | "pragma": "React", 29 | "fragment": "Fragment", 30 | "version": "detect", 31 | }, 32 | }, 33 | "env": { 34 | "browser": true, 35 | "es2020": true 36 | }, 37 | "extends": [ 38 | "eslint:recommended", 39 | "plugin:react/recommended", 40 | "plugin:@typescript-eslint/recommended" 41 | ], 42 | "parser": "@typescript-eslint/parser", 43 | "parserOptions": { 44 | "ecmaFeatures": { 45 | "jsx": true 46 | }, 47 | "ecmaVersion": "latest", 48 | "sourceType": "module" 49 | }, 50 | "plugins": [ 51 | "react", 52 | "@typescript-eslint" 53 | ], 54 | "rules": { 55 | } 56 | } 57 | ``` 58 | 59 | 在 `package.json` 添加以下两个命令： 60 | 61 | ```json 62 | "scripts": { 63 | "lint": "eslint src/**", 64 | "fix": "eslint --fix src/**" 65 | }, 66 | ``` 67 | 68 | ### Prettier 69 | 70 | Prettier 是代码格式化工具，功能类似 ESLint，两者只需要安装一个即可。 71 | 72 | **安装：** 73 | 74 | ```shell 75 | npm install --save-dev --save-exact prettier 76 | ``` 77 | 78 | **生成配置文件：** 79 | 80 | ```shell 81 | echo {}> .prettierrc.json 82 | ``` 83 | 84 | 在 `package.json` 添加以下两个命令： 85 | 86 | ```json 87 | "scripts": { 88 | "format": "prettier --write src/", 89 | "check": "prettier --check src/" 90 | }, 91 | ``` 92 | 93 | ### Stylelint 94 | 95 | stylelint 是格式化 css，scss 等样式文件的工具。 96 | 97 | **安装：** 98 | 99 | ```shell 100 | npm install --save-dev stylelint stylelint-config-standard 101 | ``` 102 | 103 | **配置文件：** 104 | 105 | 添加一个配置文件 `.stylelintrc.json`: 106 | 107 | ```json 108 | { 109 | "extends": "stylelint-config-standard" 110 | } 111 | ``` 112 | 113 | 在 `package.json` 添加以下两个命令： 114 | 115 | ```json 116 | "scripts": { 117 | "style:lint": "stylelint **/*.css", 118 | }, 119 | ``` 120 | 121 | 122 | ## Packages 123 | - npm audit 124 | 125 | ### npm audit 126 | 127 | `npm audit` 是官方提供的漏洞检测功能，仅限于官方 npm，如果设置了淘宝或者腾讯源，此功能将不可用。 128 | 129 | 示例： 130 | 131 | ``` 132 | PS D:\> npm audit 133 | # npm audit report 134 | 135 | css-what 4.0.0 - 5.0.0 136 | Severity: high 137 | Denial of service in css-what - https://github.com/advisories/GHSA-q8pj-2vqx-8ggc 138 | fix available via `npm audit fix` 139 | node_modules/postcss-inline-svg/node_modules/css-what 140 | css-select 3.1.1 - 3.1.2 141 | Depends on vulnerable versions of css-what 142 | node_modules/postcss-inline-svg/node_modules/css-select 143 | 144 | 2 high severity vulnerabilities 145 | 146 | To address all issues, run: 147 | npm audit fix 148 | ``` 149 | 150 | 通过执行：`npm audit fix` 即可对依赖包进行升级修复。 151 | 152 | ## Code review 153 | - Sonarqube 154 | 155 | ### Sonarqube 156 | 157 | Sonarqube 是代码质量控制的总体解决方案，提供 Web UI 指标查看页面，支持多语言。 158 | 通过 docker 可快速搭建 sonarqube 。 159 | -------------------------------------------------------------------------------- /Django Web 框架.md: -------------------------------------------------------------------------------- 1 | ## Django 资源 2 | 3 | 4 | ### 插件 5 | 6 | - [waitress] https://docs.pylonsproject.org/projects/waitress/en/stable/index.html 7 | - [djangorestframework] https://www.django-rest-framework.org/ 8 | - [django-extra-settings] https://github.com/fabiocaccamo/django-extra-settings 9 | - [whitenoise] http://whitenoise.evans.io/en/latest/ 10 | - [django-treebeard] https://django-treebeard.readthedocs.io/en/latest/ 11 | 12 | ### CMS 13 | - [wagtail] https://wagtail.org/ 14 | 15 | ### 部署 16 | 17 | - whitenoise serve 静态文件 18 | - Windows 下使用 waitress 替代 gunicorn serve django， waitress 支持 linux，mac 和 windows 19 | - 使用 node PM2 管理进程，开启多个进程，并在 nginx 配置 负载均衡，合理利用多核 CPU 资源 20 | - 生产环境需要限流，优先使用 nginx 在网关入口处限流 21 | - 开启头部安全性设置 22 | 23 | 24 | #### Waitress serve django 25 | 26 | waitress 既支持命令行，也支持 api 编程方式集成 django，在 django 项目目录下新建 `server.py` 文件，输入对应代码： 27 | 28 | ```python 29 | from waitress import serve 30 | from appadmin.wsgi import application 31 | import os 32 | 33 | port = os.environ.get('PORT', 8060) 34 | serve(application, listen=f'*:{port}') 35 | ``` 36 | 37 | 执行 `python server.py` 即可运行 django。 38 | 39 | #### PM2 部署 40 | 41 | 采用 nodejs 生态的 `pm2` 进程管理器部署，通常生产环境采用独立的 python 虚拟环境运行，首先 42 | 切换到对应的虚拟环境，获取 python 解释器的路径：`which python`，PM2 配置 `ecosystem.config.js`: 43 | 44 | ```js 45 | module.exports = { 46 | apps : [ 47 | { 48 | name: "appadmin", 49 | cmd: "server.py", 50 | interpreter: "/root/miniconda3/envs/vangogh/bin/python", 51 | max_memory_restart: '256M', 52 | watch: false, 53 | env: { 54 | APP_ENV: "production", 55 | PORT: 8060, 56 | } 57 | }, 58 | { 59 | name: "appadmin01", 60 | cmd: "server.py", 61 | interpreter: "/root/miniconda3/envs/vangogh/bin/python", 62 | max_memory_restart: '256M', 63 | watch: false, 64 | env: { 65 | APP_ENV: "production", 66 | PORT: 8061, 67 | } 68 | }, 69 | { 70 | name: "appadmin02", 71 | cmd: "server.py", 72 | interpreter: "/root/miniconda3/envs/vangogh/bin/python", 73 | max_memory_restart: '256M', 74 | watch: false, 75 | env: { 76 | APP_ENV: "production", 77 | PORT: 8062, 78 | } 79 | } 80 | ], 81 | }; 82 | ``` 83 | 84 | 使用 pm2 启动：`pm2 start ecosystem.config.js`，在 nginx 中配置负载均衡: 85 | 86 | ```nginx configuration 87 | upstream appadmin { 88 | server 127.0.0.1:8060; 89 | server 127.0.0.1:8061; 90 | server 127.0.0.1:8062; 91 | } 92 | 93 | server { 94 | listen 80; 95 | server_name localhost; 96 | 97 | location / { 98 | proxy_pass http://appadmin; 99 | proxy_set_header Host $host; 100 | proxy_set_header X-Forwarded-Proto $scheme; 101 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 102 | proxy_set_header X-Forwarded-Host $host:$server_port; 103 | proxy_set_header X-Forwarded-Port $server_port; 104 | } 105 | } 106 | ``` 107 | 108 | > **注：** 如果 django 使用了 session，cache 并且存储在 redis 或者 memcache 等应用缓存中，可以使用轮询方式，如果使用的是本地 109 | 文件存储，则需要改成 ip hash 的负载均衡方式，避免出现 session 错乱和缓存不命中等问题。 110 | -------------------------------------------------------------------------------- /Openresty.md: -------------------------------------------------------------------------------- 1 | ## Openresty 2 | 3 | ### 基本配置 4 | 5 | ```nginx configuration 6 | user nginx; 7 | worker_processes auto; 8 | 9 | error_log logs/error.log; 10 | 11 | pid logs/nginx.pid; 12 | 13 | events { 14 | worker_connections 1024; 15 | } 16 | 17 | http { 18 | include mime.types; 19 | default_type application/octet-stream; 20 | 21 | log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 22 | '$status $body_bytes_sent "$http_referer" ' 23 | '"$http_user_agent" "$http_x_forwarded_for"'; 24 | 25 | access_log logs/access.log main; 26 | 27 | charset utf-8; 28 | sendfile on; 29 | tcp_nopush on; 30 | tcp_nodelay on; 31 | client_max_body_size 5m; 32 | more_set_headers 'Server: Microsoft-IIS'; 33 | more_clear_headers 'X-Powered-By'; 34 | types_hash_max_size 2048; 35 | types_hash_bucket_size 64; 36 | 37 | keepalive_timeout 65; 38 | 39 | gzip on; 40 | gzip_vary on; 41 | gzip_proxied any; 42 | gzip_comp_level 6; 43 | gzip_buffers 16 8k; 44 | gzip_http_version 1.1; 45 | gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; 46 | 47 | include /usr/local/openresty/nginx/conf/conf.d/*.conf; 48 | } 49 | ``` 50 | 51 | ### https 配置 52 | 53 | ```nginx configuration 54 | upstream lives { 55 | server 127.0.0.1:8020; 56 | } 57 | 58 | server { 59 | listen 80; 60 | 61 | server_name lives.com; 62 | 63 | location / { 64 | return 301 https://lives.com$request_uri; # http 重定向到 https 65 | } 66 | } 67 | 68 | server { 69 | listen 443 ssl http2; 70 | ssl_certificate /etc/letsencrypt/live/lives.com/fullchain.pem; 71 | ssl_certificate_key /etc/letsencrypt/live/lives.com/privkey.pem; 72 | ssl_session_timeout 1d; 73 | ssl_session_cache builtin:1000 shared:SSL:10m; 74 | ssl_protocols TLSv1.2 TLSv1.3; 75 | ssl_ciphers "ECDHE-ECDSA-CHACHA20-POLY1305 ECDHE-RSA-CHACHA20-POLY1305 DHE-RSA-CHACHA20-POLY1305"; 76 | ssl_ocsp off; 77 | ssl_prefer_server_ciphers on; 78 | 79 | server_name lives.com; 80 | proxy_set_header Host $host; 81 | 82 | location / { 83 | proxy_pass http://lives; 84 | proxy_http_version 1.1; 85 | proxy_connect_timeout 60s; 86 | proxy_send_timeout 60s; 87 | proxy_read_timeout 60s; 88 | proxy_set_header Host $host; 89 | proxy_set_header X-Real-IP $remote_addr; 90 | proxy_set_header X-Forwarded-Proto $scheme; 91 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 92 | proxy_set_header X-Forwarded-Host $host:$server_port; 93 | proxy_set_header X-Forwarded-Port $server_port; 94 | } 95 | } 96 | ``` 97 | 98 | ### 限流 99 | 100 | ```nginx configuration 101 | limit_req_zone $binary_remote_addr zone=mylimit:10m rate=10r/s; 102 | 103 | server { 104 | location /login/ { 105 | limit_req zone=mylimit; 106 | 107 | proxy_pass http://my_upstream; 108 | } 109 | } 110 | ``` 111 | 112 | 在上面定义了 rate 为：`10r/s`，burst 相当于一个 queue，当请求超过 `10r/s` 的时候，前 10 个请求会正常返回，后面的 20 个请求会进入 queue ，并且会以 `10r/s` 的出队列，再之后的所有请求都会被拒绝。 113 | 114 | ### 负载均衡 115 | 116 | ```nginx configuration 117 | upstream appadmin { 118 | ip_hash; # 负载均衡策略, least_conn; 119 | server 127.0.0.1:8060 weight=5 max_fails=3 fail_timeout=5; # 权重，健康检查 120 | server 127.0.0.1:8061; 121 | server 127.0.0.1:8062 backup; 122 | } 123 | 124 | server { 125 | listen 80; 126 | server_name localhost; 127 | 128 | location / { 129 | proxy_pass http://appadmin; 130 | proxy_set_header Host $host; 131 | proxy_set_header X-Forwarded-Proto $scheme; 132 | proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 133 | proxy_set_header X-Forwarded-Host $host:$server_port; 134 | proxy_set_header X-Forwarded-Port $server_port; 135 | } 136 | } 137 | ``` 138 | 139 | 负载均衡策略：Round Robin(轮询，默认选项)，Least Connections(最少链接)，IP Hash(IP 地址) 140 | 141 | ### CORS 头部设置 142 | 143 | ``` 144 | Access-Control-Allow-Origin: https://foo.example 145 | Access-Control-Allow-Methods: POST, GET, OPTIONS 146 | Access-Control-Allow-Headers: X-PINGOTHER, Content-Type 147 | Access-Control-Allow-Credentials: true 148 | Access-Control-Max-Age: 86400 149 | Vary: Accept-Encoding, Origin 150 | ``` 151 | 152 | * `Access-Control-Allow-Origin`: 只能设置 `*` 和具体地址，无法使用模式匹配 153 | * `Access-Control-Allow-Headers`: 需要将自定义添加的头部都写上，通常需添加 ajax 的头：`X-REQUEST-WITH` 154 | * `Access-Control-Allow-Credentials`: `XMLHttpRequest` 和 `fetch` 在跨域访问的时候默认不会带上 cookie 155 | * `Access-Control-Max-Age`: 设置预检缓存，减少预检请求 156 | 157 | 文档参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS 158 | 159 | 由于 `Access-Control-Allow-Origin` 的限制，在 openresty 中配置 cors 功能有限，无法实现白名单域名列表，需要借助 lua 160 | 根据 host 动态匹配，然而使用 lua 灵活性不高，因此建议在应用程序端，根据白名单列表匹配 host，动态生成：`Access-Control-Allow-Origin`。 161 | 162 | 还有一种方法是前端增加 BFF，通过 nodejs 反向代理接口，绕过跨域问题，这对于使用 k8s 内部部署了很多的微服务， 163 | 前端需要整合很多微服务才能实现对应功能的情况下非常方便。 164 | 165 | 166 | -------------------------------------------------------------------------------- /Javascript Q & A.md: -------------------------------------------------------------------------------- 1 | ### Q: 何时使用 `===` 和 `==` ？ 2 | 3 | A: 使用 `==` 会发生**隐式类型转换**, 例如 `5 == '5'`, 避免隐式类型转换可使用恒等 `===`。`0 == ''` 为 true，因为 0 和 '' 都是逻辑 4 | false，`0 === ''` 为 false。 5 | 6 | ### Q: null 和 undefinded 的区别 ？ 7 | 8 | A： 作用于变量时 undefined 为变量已声明，但未初始化， null 为变量的值为 null，变量不可用，当变量未声明时，引用该变量将会报错。 9 | 10 | 用 `==` 比较时，两者相等，`null == undeinded` 为 true，因为 null 和 undefined 都是逻辑的 false。 11 | 12 | ``` 13 | > typeof null 14 | > "object" 15 | ``` 16 | 17 | ``` 18 | > typeof undefined 19 | > "undefined" 20 | ``` 21 | 22 | 两者的类型不同，null 的类型为 object，这是一个设计缺陷，但是涉及面太广，这个缺陷在未来不会被修复，如果需要严格区分 undefined 类型，可以使用 23 | `typeof a === 'undefined'` 来判断，如果不需要区分可以使用 `a == null` 来判断一个变量是否是 null 或者 undefined。 24 | 25 | JSON标准支持编码 null 值，不支持 undefined，当 JSON 序列化时，null 值的属性将会包含 null 值，undefined 值的属性将会被过滤掉。 26 | 27 | ### Q：严格模式的作用 ？ 28 | 29 | A: 启用严格模式：`"use strict"`, 作用： 30 | 31 | 1. 严格模式通过抛出错误来消除了一些原有静默错误。 32 | 2. 严格模式修复了一些导致 JavaScript引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。 33 | 3. 严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法。 34 | 35 | > 建议：始终使用严格模式 36 | 37 | ### Q：双精度浮点运算的缺陷,如何避免 ？ 38 | 39 | A: 示例： 40 | 41 | ``` 42 | 0.1 + 0.2 = 0.30000000000000004 43 | 0.7 + 0.1 = 0.7999999999999999 44 | 0.2 + 0.4 = 0.6000000000000001 45 | ``` 46 | 47 | 1. 将浮点数转换为整数计算，例如价格计算，可精确到“分”，计算完成以后对分之后的数值进行圆整，满足精度要求。 48 | 2. 使用 bignumber.js 第三方库进行精确的十进制计算，使用 bignumber 进行大量计算有可能会有性能问题，所以不建议在动画或者 webgl 编程中使用 bignumber。 49 | 50 | ### Q：falsy 的值有哪些？ 51 | 52 | `false`, `""`, `0`, `NaN`, `null`, `undefined`, 其中 NaN 是 Not a Number 的意思，但是它的类型是 `typeof NaN === 'number'`, 当它与 false 相比较时 `NaN == false` 为 false，NaN 与 NaN 比较也为 false， 在条件判断中 NaN 为 falsy： 53 | 54 | 55 | ``` 56 | > let aa = NaN; 57 | > undefined 58 | > if (aa) {console.log("!!!!!")} 59 | > undefined 60 | > if (!aa) {console.log("!!!!!")} 61 | > !!!!! 62 | ``` 63 | 64 | 当需要判断一个变量是否为 NaN 时，使用 `Number.isNaN()` 或 `isNaN()`。空数组和空对象（[],{}）始终是 truthy。 65 | 66 | ### Q: for...in 和 for...of 的区别 ？ 67 | 68 | A: for...in 主要用于遍历对象的属性，也可用于数组，数组遍历的是索引: 69 | 70 | ``` 71 | > var obj = {a:1, b:2, c:3}; 72 | > for(let it in obj) {console.log(it)} 73 | > a 74 | > b 75 | > c 76 | ``` 77 | 78 | for...of 遍历数组或者可迭代对象，包含 Array，Set，String和生成器: 79 | 80 | ``` 81 | > let arr = [12, 4, 4,134, 65] 82 | > for(let it of arr) {console.log(it)} 83 | > 12 84 | > 4 85 | > 4 86 | > 134 87 | > 65 88 | ``` 89 | 90 | ### Q: 什么是作用域 ？ 91 | 92 | A: 作用域就是定义的一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。 93 | 作用域共有两种主要的工作模型：**1. 词法作用域；2. 动态作用域**。 94 | 95 | 词法作用域包含**函数作用域**和**块作用域**，通常由大括号（{}）标识出来。 96 | 97 | **函数作用域** 98 | 99 | ```js 100 | const a = "hello"; 101 | 102 | function foo() { 103 | const a = "world"; 104 | console.log(a); 105 | } 106 | 107 | console.log(a); 108 | foo(); 109 | ``` 110 | 111 | 每个函数的定义都会有自己的作用域，因此在函数 foo 内可重复定义变量 a，并且处在自己的作用域当中。由于函数作用域的存在， 112 | 可以实现对函数内部实现细节的隐藏，只暴露出对外提供的方法。 113 | 114 | **块作用域** 115 | 116 | ```js 117 | const a = "hello"; 118 | 119 | for(let i = 0; i <= 10; i++) { 120 | const a = "world"; 121 | console.log(a); 122 | } 123 | 124 | console.log(a); 125 | ``` 126 | 127 | ```js 128 | const a = "hello"; 129 | if (a) { 130 | const a = "world"; 131 | console.log(a); 132 | } 133 | console.log(a); 134 | ``` 135 | 136 | ```js 137 | const a = "hello"; 138 | try { 139 | const a = "world"; 140 | console.log(a); 141 | throw Error(a); 142 | } catch (err) { 143 | const a = "!!!!"; 144 | console.log(a); 145 | } 146 | console.log(a); 147 | ``` 148 | ### Q: 解释通过 `new` 运算符创建对象的行为和所执行的操作？ 149 | 150 | A: `new` 关键字会进行如下的操作： 151 | 152 | 1. 创建一个空的简单JavaScript对象（即{}）； 153 | 2. 为步骤1新创建的对象添加属性`__proto__`，将该属性链接至构造函数的原型对象 ； 154 | 3. 将步骤1新创建的对象作为`this`的上下文 ； 155 | 4. 如果该函数没有返回对象，则返回`this`。 156 | 157 | 当代码 `new Foo(...)` 执行时，会发生以下事情： 158 | 159 | 1. 一个继承自 `Foo.prototype` 的新对象被创建。 160 | 2. 使用指定的参数调用构造函数 Foo，并将 `this` 绑定到新创建的对象。`new Foo` 等同于 `new Foo()`，也就是没有指定参数列表，Foo 不带任何参数调用的情况。 161 | 3. 由构造函数返回的对象就是 `new` 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤） 162 | 163 | 参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new 164 | 165 | ### Q: `this` 关键字在不同环境下的指向？ 166 | A: *全局上下文* 167 | 168 | 在全局执行环境中（在任何函数体外部）`this` 都指向全局对象。 示例： 169 | 在浏览器中全局对象为 `window` 对象 170 | ```shell 171 | > var a = 123 172 | undefined 173 | > a 174 | 123 175 | > window.a 176 | 123 177 | ``` 178 | 在 `nodejs` 环境中全局对象为 `globalThis` 对象 179 | 180 | ```shell 181 | > var a = 123 182 | undefined 183 | > a 184 | 123 185 | > globalThis.a 186 | 123 187 | ``` 188 | 189 | *函数上下文* 190 | 191 | 在单独的函数定义的时候，`this` 指向全局对象，在严格模式下，`this` 会保持 192 | 为 `undefined`，示例： 193 | 194 | ```js 195 | var a = 1234; 196 | function f1() { 197 | return this.a; // this 指向 window 对象 198 | } 199 | f1() // 输出 1234 200 | ``` 201 | 当函数作为对象里的方法被调用时，`this` 被设置为调用该函数的对象，示例： 202 | 203 | ```js 204 | var obj = { 205 | prop: 37, 206 | f: function() { 207 | return this.prop; 208 | } 209 | }; 210 | obj.f(); // 37 211 | ``` 212 | 这样的行为不会受函数定义方式或位置的影响: 213 | ```js 214 | let obj = {prop: 37}; 215 | 216 | function independent() { 217 | return this.prop; 218 | } 219 | 220 | obj.f = independent; 221 | obj.f(); // 37 222 | ``` 223 | 224 | 函数在复杂对象中定义，`this` 指向最近的调用实例对象，示例： 225 | 226 | ```js 227 | let obj = { 228 | a: 1234, 229 | foo: { 230 | a: 4567, 231 | zoo: function() { 232 | return this.a; 233 | } 234 | } 235 | } 236 | 237 | obj.foo.zoo(); // `this` 指向最近的对象即：foo，输出：4567 238 | ``` 239 | 240 | 通过 `.call`, `.apply` 等函数调用，`this` 指向调用者本身实例，示例： 241 | 242 | ```js 243 | var obj = { 244 | a: 12345, 245 | } 246 | var a = 'abcde'; // 全局变量 247 | function foo() { 248 | return this.a; 249 | } 250 | foo(); // 指向全局，输出：abcde 251 | foo.call(obj); // this 被设置为 obj， 输出：12345 252 | foo.apply(obj); // this 被设置为 obj， 输出：12345 253 | ``` 254 | 255 | ES2015 引入了箭头函数，箭头函数不提供自身的 `this` 绑定（`this` 的值将保持为闭合词法上下文的值），在全局代码中，它将被设置为全局对象。 256 | 257 | ```js 258 | var a = 'abcd' 259 | let obj = { 260 | a: 1234, 261 | foo: { 262 | a: 4567, 263 | zoo: () => { 264 | return this.a; // this 指向全局变量，输出：abcd 265 | } 266 | } 267 | } 268 | let f1 = (() => this); // this 指向全局变量 269 | f1() === window // // 输出： true 270 | 271 | let obj2 = { 272 | a: '123abc', 273 | bar: function() { 274 | var x = (() => this); 275 | return x; 276 | } 277 | }; 278 | let f2 = obj2.bar(); // 返回 x 函数 279 | f2() === obj2 // x 函数中的 this 指向 obj2 280 | f2().a; // 输出：123abc 281 | ``` 282 | 283 | *类上下文* 284 | 285 | 在类中 `this` 指向类实例本身，示例： 286 | 287 | ```js 288 | let a = 'abcde'; 289 | class Foo { 290 | a = 12345; 291 | bar() { 292 | return this.a; 293 | } 294 | } 295 | let foo = new Foo(); 296 | foo.bar() // bar 中的 this 指向 foo, 输出：12345 297 | ``` 298 | 299 | 参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this --------------------------------------------------------------------------------