作者: gzzhiyi

  • 【NPM】使用指南

    查看本机镜像地址

    npm config get registry

    如果是默认源或者淘宝镜像切换成私服地址

    • 默认镜像:https://registry.npmjs.org
    • 淘宝镜像:http://registry.npm.taobao.org
    • 私服地址:http://xxxx

    修改镜像地址

    npm config set registry http://xxxx

    (npm 私服下 有hosted(私有仓库,登录上传都是使用此仓库) proxy(代理仓库去下载第三方依赖) group(对外暴露的仓库地址,配置镜像地址) 登录都是登录hosted,镜像地址都是group的) package.json文件内配置镜像地址

    {
        "publishConfig": {
            "registry": "http://xxxx"
        }
    }

    到项目目录下登录镜像

    npm login

    输入账号密码(如果指定全局镜像为私服可以不加 –registry)或

    npm login  --registry=http://xxxx(指定要登录镜像地址)

    查看登录用户

    npm whoami

    推送镜像(注意:上传的包名 package.json 中name不能有大写空格和下划线)

    npm publish

    (如果指定全局镜像为私服可以不加 –registry)或

    npm publish  --registry=http://xxxx
    更新包
    • 需要将package.json的version版本号进行更新(1.0.0->1.0.1)
    • 忽略上传文件,可在gitignore文件中添加忽略文件
    • 使用下载依赖包,在新的项目中添加依赖名称和版本号 进行npm install 如下载失败请查看镜像地址是否正确
    • 异常情况
    Code 描述
    400 可能登录地址不对,可能私服已经存在此版本
    403 可能未登录,或者账户没有权限
    401 私服仓库可能权限不够npm Bearer Token Realm 可能未激活
  • 【JS】判断登录设备是移动端还是PC端

    基于 navigator.userAgent 的 User Agent 检测

    function isMobileDevice () {
      const ua = navigator.userAgent || navigator.vendor || window.opera;
      const mobileRegex = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini|mobile|windows phone|phone|webos|kindle|tablet/i;
      return mobileRegex.test(ua.toLowerCase());
    }

    通过 navigator.userAgent 获取浏览器标识字符串‌。正则表达式匹配移动端关键词(如 android、iphone、mobile 等)‌。返回 true 表示移动端,false 表示 PC 端。

    ‌基于 navigator.userAgent 的插件方案‌

    插件:mobile-detect.js

    插件通过解析 navigator.userAgent 中的设备标识符(如 Android、iPhone、Windows 等)实现设备判断‌。 支持更细分的设备类型检测(如平板、手机、PC)‌。

    import MobileDetect from 'mobile-detect';
    
    const md = new MobileDetect(navigator.userAgent);
    
    if (md.mobile()) {
      console.log("移动端登录设备(手机/平板)");
    } else if (md.tablet()) {
      console.log("平板设备");
    } else {
      console.log("PC 端设备");
    }
  • 【Nginx】学习笔记

    常用命令

    • 检查配置文件正确性

      nginx -t
    • 重启服务

      sudo nginx -s reload
    • 停止服务

      sudo nginx -s quit|stop
    • 启动服务

      sudo nginx
    • 查看进程

      ps aux | grep nginx

    其它

    • 查找 nginx.conf 的位置

      find / -name nginx.conf
    • 指定启动配置文件

      sudo nginx -c /usr/local/nginx/conf/nginx.conf
    user root owner; # 运行时的用户名
    worker_processes 1; # 运行时的进程数
    error_log /var/log/nginx/error.log; # 错误日志存放位置
    pid /run/nginx.pid; # 设置 nginx 的 master 进程 ID 写入的位置
    events {
        worker_connections 1024; # 设置每个 woker 进程同时能为多少个连接提供服务
    }
    http {
        include mime.types; # 把 mime.types 这个文件的内容加载进来
        access_log /var/log/nginx/access.log  main; # 指令设置了访问的日志存储的位置
        index index.html index.htm; # 设置了当请求的地址里不包含特定的文件的时候,默认打开的文件
        server {
            server_name hezhiyi.com; # 创建基于主机名的虚拟主机
            root "/Users/GZZHIYI/Documents/web"; # 配置虚拟主机的根目录 
            location / { ... }; # 配置 nginx 怎么样响应请求的资源
        }
    }
  • 【微信小程序】学习笔记

    微信小程序的框架主要包括以下几个核心部分:

    1. WXML(WeiXin Markup Language)

    • 作用:用于描述小程序的结构,类似于HTML。
    • 特点:支持数据绑定、条件渲染、列表渲染等功能。

    2. WXSS(WeiXin Style Sheets)

    • 作用:用于描述小程序的样式,类似于CSS。
    • 特点:支持大部分CSS特性,并扩展了尺寸单位(如rpx)以适应不同屏幕。

    3. JavaScript

    • 作用:用于处理小程序的逻辑。
    • 特点:支持ES6语法,提供丰富的API,如网络请求、数据存储、设备信息等。

    4. WXS(WeiXin Script)

    • 作用:一种脚本语言,可以在WXML中直接使用。
    • 特点:类似于JavaScript,但运行在视图层,适合处理一些简单的逻辑。

    5. JSON

    • 作用:用于配置小程序的页面、窗口表现、网络超时时间等。
    • 特点:简洁易读,支持注释(但在实际使用中需去除注释)。

    6. 小程序框架API

    • 作用:提供丰富的API,帮助开发者实现各种功能。
    • 分类:
      • 网络API:如wx.request、wx.uploadFile等。
      • 媒体API:如wx.chooseImage、wx.playVoice等。
      • 数据缓存API:如wx.setStorage、wx.getStorage等。
      • 位置API:如wx.getLocation、wx.openLocation等。
      • 设备API:如wx.getSystemInfo、wx.getNetworkType等。
      • 界面API:如wx.showToast、wx.showModal等。

    7. 小程序生命周期

    • 作用:管理小程序的启动、运行、销毁等过程。
    • 主要生命周期函数:
      • onLaunch:小程序初始化时触发。
      • onShow:小程序启动或从后台进入前台时触发。
      • onHide:小程序从前台进入后台时触发。
      • onError:小程序发生脚本错误时触发。

    8. 页面生命周期

    • 作用:管理页面的加载、显示、隐藏、卸载等过程。
    • 主要生命周期函数:
      • onLoad:页面加载时触发。
      • onShow:页面显示时触发。
      • onReady:页面初次渲染完成时触发。
      • onHide:页面隐藏时触发。
      • onUnload:页面卸载时触发。

    9. 组件

    • 作用:提供丰富的UI组件,帮助开发者快速构建界面。
    • 常见组件:
      • 基础组件:如view、text、image、button等。
      • 表单组件:如input、picker、slider等。
      • 导航组件:如navigator。
      • 媒体组件:如video、audio等。
      • 地图组件:如map。
      • 画布组件:如canvas。

    10. 自定义组件

    • 作用:允许开发者封装可复用的UI组件。
    • 特点:支持组件间的通信、生命周期管理、样式隔离等。

    11. 事件系统

    • 作用:用于处理用户交互事件。
    • 常见事件:
      • 触摸事件:如bindtap、bindlongpress等。
      • 表单事件:如bindinput、bindchange等。
      • 滚动事件:如bindscroll等。

    12. 路由

    • 作用:管理页面之间的跳转。
    • 常见API:
      • wx.navigateTo:保留当前页面,跳转到新页面。
      • wx.redirectTo:关闭当前页面,跳转到新页面。
      • wx.navigateBack:返回上一个页面。
      • wx.switchTab:跳转到tabBar页面。

    13. 数据绑定

    • 作用:将数据与视图进行绑定,实现数据的动态更新。
    • 特点:支持单向数据流,数据变化会自动更新视图。

    14. 模块化

    • 作用:支持将代码拆分为多个模块,便于管理和复用。
    • 特点:支持CommonJS模块化规范,使用require引入模块。

    15. 云开发

    • 作用:提供云端一体化的开发能力,包括数据库、存储、云函数等。
    • 特点:无需搭建服务器,开发者可以直接使用云端资源。

    16. 插件

    • 作用:允许开发者使用第三方插件,扩展小程序的功能。
    • 特点:插件可以独立开发、发布,供其他小程序使用。

    17. 分包加载

    • 作用:将小程序代码拆分为多个包,按需加载,减少首次启动时间。
    • 特点:支持主包和多个分包,分包可以独立加载。

    18. 性能优化

    • 作用:提升小程序的运行效率和用户体验。
    • 常见优化手段:
      • 减少setData调用:避免频繁更新视图。
      • 使用自定义组件:提高代码复用性和维护性。
      • 图片优化:压缩图片,使用合适的图片格式。
      • 分包加载:减少首次启动时的代码量。

    19. 安全

    • 作用:保障小程序的安全运行。
    • 常见安全措施:
      • 数据加密:对敏感数据进行加密存储。
      • 权限控制:限制API的调用权限。
      • 代码混淆:防止代码被反编译。

    20. 调试工具

    • 作用:帮助开发者调试小程序。
    • 特点:提供实时预览、代码调试、性能分析等功能。
  • Arsenal 女足一线队名单(1998~至今)

    门将(24人)

    中文名 英文名 国籍 效力年份
    艾玛·伯恩 Emma Byrne 爱尔兰 2000–2017
    乔安娜·普莱斯 Joanna Price 威尔士 2002–2003
    艾玛·托马斯 Emma Thomas 英格兰 2004–2007
    劳伦·威尔斯 Lauren Wells 威尔士 2004–2006
    贝基·斯宾塞 Becky Spencer 英格兰 2006–2009、2012–2013
    索菲·哈里斯 Sophie Harris 英格兰 2012–2014
    多丽丝·巴契奇 Doris Bacic Croatia 2013–2014
    克洛伊·摩根 Chloe Morgan England 2014–2015
    蕾切尔·布朗 Rachel Brown England 2014–2015
    西沃恩·张伯伦 Siobhan Chamberlain England 2014–2015
    萨里·范韦嫩达尔 Sari van Veenendaal Netherlands 2015–2019
    希安·罗杰斯 Sian Rogers England 2015–2017
    安娜·摩尔豪斯 Anna Moorhouse England 2017–2018
    保利娜·佩罗-马尼昂 Pauline Peyraud-Magnin France 2018–2020
    曼努埃拉·辛斯贝格 Manuela Zinsberger Austria 2019–2026
    弗兰·斯滕森 Fran Stenson England 2020–2021
    莉迪亚·威廉姆斯 Lydia Williams Australia 2020–2022
    凯兰·马基斯 Kaylan Marckese United States 2022–2023
    娜奥米·威廉姆斯 Naomi Williams England 2022–2025
    萨布丽娜·丹杰洛 Sabrina D’Angelo Canada 2023–2024
    达芙妮·范多姆塞拉尔 Daphne van Domselaar Netherlands 2024–至今
    萨拉·布哈迪 Sarah Bouhaddi France 2024
    安妮克·博贝 Anneke Borbe Germany 2025–至今
    芭博拉·沃蒂科娃 Barbora Votíková Czech Republic 2026

    后卫(45人)

    中文名 英文名 国籍 效力年份
    柯尔斯蒂·皮林 Kirsty Pealling 英格兰 1987–2006
    费伊·怀特 Faye White 英格兰 1996–2013
    蒂娜·梅普斯 Tina Mapes 英格兰 1997–1999
    凯西·斯托尼 Casey Stoney 英格兰 1999–2002、2014–2017
    伊冯娜·特雷西 Yvonne Tracy 爱尔兰 2000–2014
    琳妮·尚普 Leanne Champ 英格兰 2001–2008
    玛丽·菲利普 Mary Phillip 英格兰 2004–2008
    亚历克斯·斯科特 Alex Scott 英格兰 2005–2009、2012–2018
    吉利·弗莱厄蒂 Gilly Flaherty 英格兰 2006–2014
    西娜·库克 Seana Cooke 爱尔兰 2006–2009
    劳拉·巴塞特 Laura Bassett 英格兰 2008–2009
    妮娅姆·法伊 Niamh Fahey 爱尔兰 2008–2014
    科琳·约斯顿 Corinne Yorston 英格兰 2009–2010
    珍妮弗·比蒂 Jennifer Beattie 苏格兰 2009–2013、2019–2024
    斯蒂芬妮·霍顿 Stephanie Houghton 英格兰 2010–2014
    艾玛·穆坎迪 Emma Mukandi Scotland 2013–2020
    阿努克·霍亨戴克 Anouk Hoogendijk Netherlands 2014
    杰玛·罗斯 Jemma Rose England 2014–2018
    莉亚·威廉森 Leah Williamson England 2014–至今
    维安·桑普森 Vyan Sampson Jamaica 2014–2018
    凯蒂·麦凯布 Katie McCabe Republic of Ireland 2015–2026
    洛特·伍本-莫伊 Lotte Wubben-Moy England 2015–2017、2020–至今
    玛尔塔·科雷德拉 Marta Corredera Spain 2015–2016
    约瑟芬·亨宁 Josephine Henning Germany 2016–2018
    泰勒·海因兹 Taylor Hinds England 2016–2018、2025–至今
    安娜·帕滕 Anna Patten Republic of Ireland 2017–2018、2021–2022
    杰西卡·维克 Jessica Wik Sweden 2017–2019
    丽莎·埃文斯 Lisa Evans Scotland 2017–2021
    路易丝·奎因 Louise Quinn Republic of Ireland 2017–2020
    塔贝娅·凯梅 Tabea Kemme Germany 2018–2020
    维多利亚·施纳德尔贝克 Viktoria Schnaderbeck Austria 2018–2022
    卡特琳·韦耶 Katrine Veje Denmark 2019–2020
    莱奥妮·迈尔 Leonie Maier Germany 2019–2021
    诺埃尔·马里茨 Noëlle Maritz Switzerland 2020–2024
    斯蒂芬·卡特利 Steph Catley Australia 2020–至今
    西蒙娜·博耶-索伦森 Simone Boye-Sørensen Denmark 2021–2022
    泰娅·戈尔迪 Teyah Goldie England 2021–2025
    劳拉·维恩罗伊特 Laura Wienroither Austria 2022–2025
    拉斐尔·索萨 Rafaelle Souza Brazil 2022–2023
    阿曼达·伊莱斯泰特 Amanda Ilestedt Sweden 2023–2025
    拉娅·科迪纳 Laia Codina Spain 2023–2026
    艾米丽·福克斯 Emily Fox United States 2024–至今
    凯蒂·里德 Katie Reid England 2024–至今
    尼芙·皮科克 Niamh Peacock England 2024–2025
    斯米拉·霍尔姆贝里 Smilla Holmberg Sweden 2026–至今

    中场(52人)

    中文名 英文名 国籍 效力年份
    西安·威廉姆斯 Sian Williams 英格兰 1990–2004
    玛丽安妮·斯佩西 Marieanne Spacey 英格兰 1993–2002
    西亚拉·格兰特 Ciara Grant 爱尔兰 1998–2014
    贾斯汀·洛顿 Justine Lorton 英格兰 1998–2000、2004–2005
    塔琳·罗考尔 Taryn Rockall 澳大利亚 1998–1999
    杰恩·勒德洛 Jayne Ludlow 威尔士 2000–2013
    波琳·麦克唐纳 Pauline MacDonald 苏格兰 2000–2004
    埃勒里·恩肖 Eleri Earnshaw 威尔士 2001–2004
    阿妮塔·阿桑特 Anita Asante 英格兰 2003–2008
    乔·波特 Jo Potter 英格兰 2003–2004
    夏洛特·古尔 Charlotte Gurr 英格兰 2005–2008
    丹妮尔·布埃 Danielle Buet 英格兰 2005–2007
    凯蒂·查普曼 Katie Chapman 英格兰 2006–2009、2010–2014
    勒内·斯莱赫尔斯 Renée Slegers 荷兰 2006–2007
    比安卡·布拉格 Bianca Bragg 英格兰 2007–2014
    劳拉·库姆斯 Laura Coombs 英格兰 2007–2011
    莱妮·翁齐亚 Lenie Onzia 比利时 2007–2008
    艾比·普罗瑟 Abbie Prosser 英格兰 2008–2010
    金·利特尔 Kim Little 苏格兰 2008–2013、2017–至今
    娜塔莉·罗斯 Natalie Ross 苏格兰 2008–2011
    海莉·拉德 Hayley Ladd 威尔士 2009–2012
    安加拉德·詹姆斯 Angharad James 威尔士 2010–2012
    乔丹·诺布斯 Jordan Nobbs 英格兰 2010–2023
    卡罗琳·韦尔 Caroline Weir Scotland 2013–2015
    杰德·贝利 Jade Bailey Jamaica 2013–2016
    卡拉·汉弗莱 Carla Humphrey England 2014–2016
    克里斯蒂·哈里森-默里 Christie Harrison-Murray Scotland 2014–2015
    图丽德·克纳克 Turid Knaak Germany 2014
    夏洛特·德夫林 Charlotte Devlin England 2015–2017
    基奥玛·乌博加古 Chioma Ubogagu England 2015
    丹妮尔·范德东克 Daniëlle van de Donk Netherlands 2015–2021
    多米妮克·扬森 Dominique Janssen Netherlands 2015–2019
    维姬·洛萨达 Vicky Losada Spain 2015–2016
    法拉·威廉姆斯 Fara Williams England 2016–2017
    安娜·菲尔比 Anna Filbey Wales 2017–2018
    劳伦·詹姆斯 Lauren James England 2017–2018
    莉娅·韦尔蒂 Lia Wälti Switzerland 2018–2025
    吉尔·鲁尔德 Jill Roord Netherlands 2019–2021
    梅丽莎·菲利斯 Melisa Filis Republic of Ireland 2019–2020
    鲁比·梅斯 Ruby Mace England 2019–2021
    马林·古特 Malin Gut Switzerland 2020–2022
    弗雷娅·戈弗雷 Freya Godfrey England 2021–2025
    弗里达·马努姆 Frida Maanum Norway 2021–至今
    哈莉·侯赛因 Halle Houssein Turkey 2021–2022
    麦迪逊·厄尔 Madison Earl England 2021–2025
    托宾·希思 Tobin Heath United States 2021–2022
    卡特琳·莫勒·屈尔 Kathrine Møller Kühl Denmark 2023–2025
    凯拉·库尼-克罗斯 Kyra Cooney-Cross Australia 2023–至今
    维多利亚·佩洛娃 Victoria Pelova Netherlands 2023–2026
    乔治娅·斯坦韦 Georgia Stanway England 2025–至今
    热拉尔迪娜·罗伊特勒 Géraldine Reuteler Switzerland 2025–至今
    珍娜·尼格斯旺格 Jenna Nighswonger United States 2025–2026

    前锋(40人)

    中文名 英文名 国籍 效力年份
    雷切尔·扬基 Rachel Yankey 英格兰 1996–2000、2005–2016
    凯莉·史密斯 Kelly Smith 英格兰 1998–2001、2005–2009、2012–2017
    安吉拉·班克斯 Angela Banks 英格兰 1999–2005
    杜妮亚·苏西 Dunia Susi 英格兰 2000–2009
    琳妮·桑德森 Lianne Sanderson 英格兰 2003–2008、2015
    朱莉·弗莱廷 Julie Fleeting 苏格兰 2004–2012
    吉玛·戴维森 Gemma Davison 英格兰 2005–2010、2012–2013
    凯伦·卡尼 Karen Carney 英格兰 2006–2009
    丹妮·伯德 Dannii Bird 英格兰 2008–2009
    劳伦·布鲁顿 Lauren Bruton 英格兰 2008–2013
    丹妮尔·卡特 Danielle Carter 英格兰 2009–2020
    海伦·兰德 Helen Lander 威尔士 2009–2010
    埃伦·怀特 Ellen White 英格兰 2010–2014
    弗蕾达·阿伊西 Freda Ayisi England 2013–2015
    大野忍 Shinobu Ohno Japan 2014
    克洛伊·凯利 Chloe Kelly England 2015–2017、2025–至今
    娜塔莉亚·帕夫洛斯 Natalia Pablos Spain 2015–2017
    丽安娜·迪恩 Rianna Dean England 2015–2017
    阿西萨特·奥肖拉 Asisat Oshoala Nigeria 2016–2017
    朱迪·泰勒 Jodie Taylor England 2016–2017、2023
    贝丝·米德 Beth Mead England 2017–2026
    希瑟·奥赖利 Heather O’Reilly United States 2017–2018
    薇薇安·米德玛 Vivianne Miedema Netherlands 2017–2024
    米卡埃拉·豪厄尔 Mikaela Howell England 2018–2020
    佩奇·贝利-盖尔 Paige Bailey-Gayle Jamaica 2018–2019
    凯特琳·福德 Caitlin Foord Australia 2020–至今
    亚历克斯·亨尼西 Alex Hennessy England 2021–2022
    岩渊真奈 Mana Iwabuchi Japan 2021–2023
    尼基塔·帕里斯 Nikita Parris England 2021–2022
    莉娜·胡蒂格 Lina Hurtig Sweden 2022–2025
    米歇尔·阿杰芒 Michelle Agyemang England 2022–至今
    斯蒂娜·布拉克斯特纽斯 Stina Blackstenius Sweden 2022–至今
    阿莱西亚·鲁索 Alessia Russo England 2023–至今
    克洛伊·拉卡斯 Cloé Lacasse Canada 2023–2024
    吉奥·凯罗斯 Gio Queiroz Brazil 2023–2024
    维维安·利亚 Vivienne Lia England 2023–2026
    玛丽奥娜·卡尔登泰 Mariona Caldentey Spain 2024–至今
    罗莎·卡法吉 Rosa Kafaji Sweden 2024–2026
    奥利维娅·史密斯 Olivia Smith Canada 2025–至今
    塞莉娜·切尔奇 Selina Cerci Germany 2025–至今
  • Arsenal 一线队全名单(1998~至今)

    门将(26人)

    中文名 英文名 国籍 效力年份
    大卫·西曼 David Seaman 英格兰 1990–2003
    约翰·卢基奇 John Lukic 英格兰 1996–2001
    亚历山大·曼宁格 Alex Manninger 奥地利 1997–2002
    斯图尔特·泰勒 Stuart Taylor 英格兰 1999–2005
    格雷厄姆·斯塔克 Graham Stack 爱尔兰 2000–2006
    理查德·赖特 Richard Wright 英格兰 2001–2002
    拉米·沙班 Rami Shaaban 瑞典 2002–2004
    延斯·莱曼 Jens Lehmann Germany 2003–2008、2011
    曼努埃尔·阿穆尼亚 Manuel Almunia Spain 2004–2012
    马特·普姆 Mart Poom Estonia 2006–2007
    维托·曼诺内 Vito Mannone Italy 2006–2013
    沃伊切赫·什琴斯尼 Wojciech Szczęsny Poland 2006–2015
    武卡什·法比安斯基 Łukasz Fabiański Poland 2007–2014
    埃米利亚诺·马丁内斯 Emiliano Martínez Argentina 2012–2020
    奥斯皮纳 David Ospina Colombia 2014–2018
    切赫 Petr Čech Czech Republic 2015–2019
    莱诺 Bernd Leno Germany 2018–2022
    卡尔·海因 Karl Hein Estonia 2020–至今
    鲁纳尔松 Rúnar Alex Rúnarsson Iceland 2020–2022
    拉姆斯代尔 Aaron Ramsdale England 2021–2025
    马修·瑞安 Mathew Ryan Australia 2021
    马特·特纳 Matt Turner United States 2022–2023
    大卫·拉亚 David Raya Spain 2023–至今
    内托 Neto Brazil 2024–2025
    汤米·塞特福德 Tommy Setford England 2024–至今
    凯帕 Kepa Arrizabalaga Spain 2025–至今

    后卫(82人)

    中文名 英文名 国籍 效力年份
    托尼·亚当斯 Tony Adams 英格兰 1983–2002
    奈杰尔·温特伯恩 Nigel Winterburn 英格兰 1987–2000
    李·迪克逊 Lee Dixon 英格兰 1988–2002
    史蒂夫·博尔德 Steve Bould 英格兰 1988–1999
    加文·麦高恩 Gavin McGowan 英格兰 1993–1999
    马丁·基翁 Martin Keown 英格兰 1993–2004
    斯科特·马歇尔 Scott Marshall 苏格兰 1993–1999
    杰森·克劳 Jason Crowe 英格兰 1996–1999
    雷米·加尔德 Rémi Garde 法国 1996–1998
    马修·厄普森 Matthew Upson 英格兰 1997–2003
    大卫·格朗丹 David Grondin 法国 1998–1999
    内尔松·维瓦斯 Nelson Vivas 阿根廷 1998–2001
    阿什利·科尔 Ashley Cole 英格兰 1999–2006
    布莱恩·麦戈文 Brian McGovern 爱尔兰 1999–2000
    奥列赫·卢日尼 Oleh Luzhny 乌克兰 1999–2003
    里斯·韦斯顿 Rhys Weston 威尔士 1999–2000
    西尔维尼奥 Sylvinho 巴西 1999–2001
    伊戈尔斯·斯特帕诺夫斯 Igors Stepanovs 拉脱维亚 2000–2004
    劳伦 Lauren Cameroon 2000–2007
    莫里茨·沃尔茨 Moritz Volz 德国 2000–2004
    乔瓦尼·范布隆克霍斯特 Giovanni van Bronckhorst 荷兰 2001–2003
    约翰·霍尔斯 John Halls 英格兰 2001–2003
    索尔·坎贝尔 Sol Campbell 英格兰 2001–2006、2010
    斯塔西·塔夫拉里迪斯 Stathis Tavlaridis 希腊 2001–2003
    贾斯汀·霍伊特 Justin Hoyte England 2002–2008
    科洛·图雷 Kolo Touré Ivory Coast 2002–2009
    帕斯卡·西甘 Pascal Cygan 法国 2002–2006
    瑞安·加里 Ryan Garry 英格兰 2002–2007
    加埃尔·克利希 Gaël Clichy France 2003–2011
    菲利普·森德罗斯 Philippe Senderos Switzerland 2003–2010
    丹尼尔·卡巴西安 Daniel Karbassiyoon 美国 2004–2005
    约翰·朱鲁 Johan Djourou Switzerland 2004–2014
    阿尔芒·特劳雷 Armand Traoré Senegal 2005–2011
    埃马纽埃尔·埃布埃 Emmanuel Eboué Ivory Coast 2005–2011
    科里亚·吉尔伯特 Kerrea Gilbert 英格兰 2005–2009
    马修·康诺利 Matthew Connolly England 2006–2008
    威廉·加拉斯 William Gallas France 2006–2010
    巴卡里·萨尼亚 Bacary Sagna France 2007–2014
    基兰·吉布斯 Kieran Gibbs England 2007–2017
    加文·霍伊特 Gavin Hoyte Trinidad and Tobago 2008–2009
    米卡埃尔·西尔韦斯特 Mikaël Silvestre France 2008–2010
    保罗·罗杰斯 Paul Rodgers England 2008–2009
    克雷格·伊斯特蒙德 Craig Eastmond England 2009–2013
    凯尔·巴特利 Kyle Bartley England 2009–2012
    托马斯·维尔马伦 Thomas Vermaelen Belgium 2009–2014
    伊格纳西·米克尔 Ignasi Miquel Spain 2010–2013
    科斯切尔尼 Laurent Koscielny France 2010–2019
    塞巴斯蒂安·斯奎拉奇 Sébastien Squillaci France 2010–2013
    汤姆·克鲁伊斯 Tom Cruise England 2010–2011
    安德烈·桑托斯 André Santos Brazil 2011–2013
    卡尔·詹金森 Carl Jenkinson England 2011–2019
    尼科·耶纳里斯 Nico Yennaris England 2011–2014
    默特萨克 Per Mertesacker Germany 2011–2018
    杰内德·米德 Jernade Meade England 2012–2013
    马丁·安加 Martin Angha Switzerland 2012–2013
    贝莱林 Héctor Bellerín Spain 2013–2021
    蒙雷亚尔 Nacho Monreal Spain 2013–2019
    卡勒姆·钱伯斯 Calum Chambers England 2014–2022
    马蒂厄·德比希 Mathieu Debuchy France 2014–2018
    加布里埃尔·保利斯塔 Gabriel Paulista Brazil 2015–2017
    克日什托夫·别利克 Krystian Bielik Poland 2015–2019
    罗布·霍尔丁 Rob Holding England 2016–2023
    穆斯塔菲 Shkodran Mustafi Germany 2016–2021
    科拉希纳茨 Sead Kolašinac Bosnia and Herzegovina 2017–2023
    马夫罗帕诺斯 Konstantinos Mavropanos Greece 2018–2022
    索克拉蒂斯 Sokratis Papastathopoulos Greece 2018–2020
    利希施泰纳 Stephan Lichtsteiner Switzerland 2018–2019
    大卫·路易斯 David Luiz Brazil 2019–2021
    蒂尔尼 Kieran Tierney Scotland 2019–2025
    萨利巴 William Saliba France 2019–至今
    塞德里克 Cédric Soares Portugal 2020–2024
    加布里埃尔 Gabriel Magalhães Brazil 2020–至今
    巴勃罗·马里 Pablo Marí Spain 2020–2022
    本·怀特 Ben White England 2021–至今
    努诺·塔瓦雷斯 Nuno Tavares Portugal 2021–2024
    富安健洋 Takehiro Tomiyasu Japan 2021–至今
    亚历山大·津琴科 Oleksandr Zinchenko Ukraine 2022–至今
    基维奥尔 Jakub Kiwior Poland 2023–至今
    廷贝尔 Jurriën Timber Netherlands 2023–至今
    卡拉菲奥里 Riccardo Calafiori Italy 2024–至今
    克里斯蒂安·莫斯克拉 Cristhian Mosquera Spain 2025–至今
    因卡皮耶 Piero Hincapié Ecuador 2025–至今

    中场(89人)

    中文名 英文名 国籍 效力年份
    雷·帕洛尔 Ray Parlour 英格兰 1992–2004
    大卫·普拉特 David Platt 英格兰 1995–1998
    帕特里克·维埃拉 Patrick Vieira 法国 1996–2005
    大卫·本特利 David Bentley 英格兰 1997–2008
    埃曼纽埃尔·佩蒂特 Emmanuel Petit 法国 1997–2000
    吉尔·格里曼迪 Gilles Grimandi 法国 1997–2002
    杰赫德·蒙塔塞尔 Jehad Muntasser 利比亚 1997–1998
    马克·奥维马斯 Marc Overmars 荷兰 1997–2000
    斯蒂芬·休斯 Stephen Hughes 英格兰 1997–2000
    阿尔贝托·门德斯 Alberto Méndez 德国 1998–1999
    弗雷迪·永贝里 Freddie Ljungberg Sweden 1998–2007
    保罗·韦尔纳扎 Paolo Vernazza 英格兰 1998–2003
    杰梅因·彭南特 Jermaine Pennant 英格兰 1999–2005
    朱利安·格雷 Julian Gray 英格兰 1999–2000
    路易斯·博阿·莫特 Luís Boa Morte 葡萄牙 1999–2001
    斯特凡·马尔茨 Stefan Malz 德国 1999–2001
    汤米·布莱克 Tommy Black 英格兰 1999–2000
    李·卡诺维尔 Lee Canoville 英格兰 2000–2001
    罗贝尔·皮雷 Robert Pires 法国 2000–2006
    埃杜 Edu 巴西 2001–2005
    稻本润一 Junichi Inamoto 日本 2001–2004
    罗翰·里基茨 Rohan Ricketts 英格兰 2001–2002
    塞巴斯蒂安·斯瓦德 Sebastian Svard 丹麦 2001–2003
    吉尔伯托·席尔瓦 Gilberto Silva Brazil 2002–2008
    杰罗姆·托马斯 Jerome Thomas 英格兰 2002–2005
    塞斯克·法布雷加斯 Cesc Fàbregas Spain 2003–2011
    马蒂厄·弗拉米尼 Mathieu Flamini France 2004–2008、2013–2016
    帕特里克·克雷格 Patrick Cregg 爱尔兰 2004–2006
    瑞安·史密斯 Ryan Smith 英格兰 2004–2006
    塞巴斯蒂安·拉尔松 Sebastian Larsson 瑞典 2004–2007
    亚历山大·宋 Alex Song Cameroon 2005–2012
    亚历山大·赫莱布 Alexander Hleb Belarus 2005–2008
    法布里斯·姆安巴 Fabrice Muamba 民主刚果 2005–2008
    阿布·迪亚比 Abou Diaby France 2006–2015
    德尼尔森 Denílson Brazil 2006–2011
    儒利奥·巴普蒂斯塔 Júlio Baptista Brazil 2006–2007
    托马斯·罗西基 Tomáš Rosický Czech Republic 2006–2016
    亨利·兰斯伯里 Henri Lansbury England 2007–2012
    拉萨纳·迪亚拉 Lassana Diarra France 2007–2008
    马克·兰德尔 Mark Randall England 2007–2011
    拉姆塞 Aaron Ramsey Wales 2008–2019
    弗朗·梅里达 Fran Mérida Spain 2008–2010
    科克兰 Francis Coquelin France 2008–2018
    杰克·威尔希尔 Jack Wilshere England 2008–2018
    杰伊·埃曼纽尔-托马斯 Jay Emmanuel-Thomas England 2008–2011
    萨米尔·纳斯里 Samir Nasri France 2008–2011
    安德烈·阿尔沙文 Andrey Arshavin Russia 2009–2013
    埃马纽埃尔·弗林蓬 Emmanuel Frimpong Ghana 2009–2014
    桑切斯·瓦特 Sanchez Watt England 2009–2013
    张伯伦 Alex Oxlade-Chamberlain England 2011–2018
    康纳·亨德森 Conor Henderson Ireland 2011–2013
    米克尔·阿尔特塔 Mikel Arteta Spain 2011–2016
    宫市亮 Ryo Miyaichi Japan 2011–2015
    优西·贝纳永 Yossi Benayoun Israel 2011–2012
    卡索拉 Santi Cazorla Spain 2012–2018
    托马斯·艾斯费尔德 Thomas Eisfeld Germany 2012–2014
    格迪翁·泽拉勒姆 Gedion Zelalem United States 2013–2019
    艾萨克·海登 Isaac Hayden Jamaica 2013–2016
    厄齐尔 Mesut Özil Germany 2013–2021
    吉姆·谢尔斯特伦 Kim Källström Sweden 2014
    伊沃比 Alex Iwobi Nigeria 2015–2019
    格伦·卡马拉 Glen Kamara Finland 2015–2017
    伊斯梅拉·本纳塞尔 Ismaël Bennacer Algeria 2015–2017
    梅特兰-奈尔斯 Ainsley Maitland-Niles England 2016–2023
    扎卡 Granit Xhaka Switzerland 2016–2023
    雷纳-阿德莱德 Jeff Reine-Adélaïde France 2016–2018
    埃尔内尼 Mohamed Elneny Egypt 2016–2024
    乔·威洛克 Joe Willock England 2017–2021
    埃米尔·史密斯·罗 Emile Smith Rowe England 2018–2024
    亨里希·姆希塔良 Henrikh Mkhitaryan Armenia 2018–2020
    卢卡斯·托雷拉 Lucas Torreira Uruguay 2018–2022
    贡多齐 Mattéo Guendouzi France 2018–2022
    达尼·塞瓦略斯 Dani Ceballos Spain 2019–2021
    丹尼斯·苏亚雷斯 Denis Suárez Spain 2019
    马丁·厄德高 Martin Ødegaard Norway 2020–至今
    米格尔·阿齐兹 Miguel Azeez England 2020–2023
    托马斯·帕尔泰伊 Thomas Partey Ghana 2020–2025
    桑比·洛孔加 Albert Sambi Lokonga Belgium 2021–至今
    查理·帕蒂诺 Charlie Patino England 2021–2023
    伊森·恩瓦内里 Ethan Nwaneri England 2022–至今
    法比奥·维埃拉 Fábio Vieira Portugal 2022–至今
    德克兰·赖斯 Declan Rice England 2023–至今
    若日尼奥 Jorginho Italy 2023–2025
    哈弗茨 Kai Havertz Germany 2023–至今
    米克尔·梅里诺 Mikel Merino Spain 2024–至今
    迈尔斯·刘易斯-斯凯利 Myles Lewis-Skelly England 2024–至今
    克里斯蒂安·诺尔高 Christian Nørgaard Denmark 2025–至今
    埃贝雷奇·埃泽 Eberechi Eze England 2025–至今
    马丁·苏比门迪 Martin Zubimendi Spain 2025–至今

    前锋(54人)

    中文名 英文名 国籍 效力年份
    伊恩·赖特 Ian Wright 英格兰 1991–1998
    丹尼斯·博格坎普 Dennis Bergkamp 荷兰 1995–2006
    克里斯托弗·雷 Christopher Wreh 利比里亚 1997–1999
    以赛亚·兰金 Isaiah Rankin 英格兰 1997–1998
    尼古拉·阿内尔卡 Nicolas Anelka 法国 1997–1999
    法比安·卡巴列罗 Fabian Caballero 阿根廷 1998–1999
    奥梅尔·里扎 Ömer Riza 英格兰 1998–1999
    达沃·苏克 Davor Šuker 克罗地亚 1999–2000
    卡巴·迪亚瓦拉 Kaba Diawara 几内亚 1999
    恩万科沃·卡努 Nwankwo Kanu 尼日利亚 1999–2004
    蒂埃里·亨利 Thierry Henry France 1999–2007、2012
    西尔万·维尔托德 Sylvain Wiltord 法国 2000–2004
    卡林·伊通加 Carlin Itonga 刚果民主共和国 2001–2002
    弗朗西斯·杰弗斯 Francis Jeffers 英格兰 2001–2004
    热雷米·阿利亚迭雷 Jérémie Aliadière France 2001–2007
    昆西·奥乌苏-阿比耶 Quincy Owusu-Abeyie 加纳 2003–2006
    阿图罗·卢波利 Arturo Lupoli 意大利 2004–2007
    何塞·安东尼奥·雷耶斯 José Antonio Reyes 西班牙 2004–2006
    罗宾·范佩西 Robin van Persie Netherlands 2004–2012
    安东尼·斯托克斯 Anthony Stokes 爱尔兰 2005–2007
    卡洛斯·贝拉 Carlos Vela Mexico 2005–2012
    尼克拉斯·本特纳 Nicklas Bendtner Denmark 2005–2014
    埃马纽埃尔·阿德巴约 Emmanuel Adebayor Togo 2006–2009
    西奥·沃尔科特 Theo Walcott England 2006–2018
    爱德华多 Eduardo Croatia 2007–2010
    马鲁万·沙马赫 Marouane Chamakh Morocco 2010–2013
    热尔维尼奥 Gervinho Ivory Coast 2011–2013
    乔尔·坎贝尔 Joel Campbell Costa Rica 2011–2017
    朴周永 Park Chu-young South Korea 2011–2014
    卢卡斯·波多尔斯基 Lukas Podolski Germany 2012–2015
    吉鲁 Olivier Giroud France 2012–2018
    塞尔日·格纳布里 Serge Gnabry Germany 2012–2016
    丘巴·阿克波姆 Chuba Akpom England 2013–2018
    亚亚·萨诺戈 Yaya Sanogo France 2013–2017
    桑切斯 Alexis Sánchez Chile 2014–2018
    丹尼·维尔贝克 Danny Welbeck England 2014–2019
    克里斯·威洛克 Chris Willock England 2016–2020
    卢卡斯·佩雷斯 Lucas Pérez Spain 2016–2017
    拉卡泽特 Alexandre Lacazette France 2017–2022
    恩凯蒂亚 Eddie Nketiah England 2017–2024
    赖斯·内尔森 Reiss Nelson England 2017–至今
    布卡约·萨卡 Bukayo Saka England 2018–至今
    奥巴梅扬 Pierre-Emerick Aubameyang Gabon 2018–2022
    马丁内利 Gabriel Martinelli Brazil 2019–至今
    尼古拉·佩佩 Nicolas Pépé Ivory Coast 2019–2023
    泰里斯·约翰-朱尔斯 Tyreece John-Jules England 2019–2024
    巴洛贡 Folarin Balogun United States 2020–2023
    威廉 Willian Brazil 2020–2021
    加布里埃尔·热苏斯 Gabriel Jesus Brazil 2022–至今
    马基尼奥斯 Marquinhos Brazil 2022–2024
    莱安德罗·特罗萨德 Leandro Trossard Belgium 2023–至今
    拉希姆·斯特林 Raheem Sterling England 2024–2025
    诺尼·马杜埃凯 Noni Madueke England 2025–至今
    维克托·约克雷斯 Viktor Gyökeres Sweden 2025–至今
  • 【Webpack】学习笔记

    构建作用

    构建工具就是将源代码转换成可执行的 JavaScript、CSS、HTML 代码,包括以下内容:

    • 代码转换:将 TypeScript 编译成 JavaScript、将 SCSS 编译成 CSS 等;
    • 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等;
    • 代码分割:提取多个页面的公共代码,提取首屏不需要执行部分的代码,让其异步加载;
    • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要通过构建功能将模块分类合并成一个文件;
    • 自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器;
    • 代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过;
    • 自动发布:更新代码后,自动构建出线上发布代码并传输给发布系统。

    基本概念

    • Entry:入口,Webpack 执行构建的第一步将从 Entry 开始,可抽象成输入。

    • Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

    • Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割。

    • Loader:模块转换器,用于把模块原内容按照需求转换成新内容。

    • Plugin:扩展插件,在 Webpack 构建流程中的特定时机会广播出对应的事件,插件可以监听这些事件的发生,在特定时机做对应的事情。

    • module,chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字:我们直接写出来的是 module,webpack 处理时是 chunk,最后生成浏览器可以直接运行的 bundle。

    • filename 指列在 entry 中,打包后输出的文件的名称;

    • chunkFilename 指未列在 entry 中,却又需要被打包出来的文件的名称。

    • webpackChunkName 是为预加载的文件取别名,

    • webpackPrefetch 会在浏览器闲置下载文件,

    • webpackPreload 会在父 chunk 加载时并行下载文件。

    • hash 计算与整个项目的构建相关;

    • chunkhash 计算与同一 chunk 内容相关;

    • contenthash 计算与文件内容本身相关。(注:chunkhash, contenthash不能同时和HMR使用)

    • source-map 大而全,啥都有,就因为啥都有可能会让 webpack 构建时间变长,看情况使用;

    • cheap-module-eval-source-map 这个一般是开发环境(dev)推荐使用,在构建速度报错提醒上做了比较好的均衡;

    • cheap-module-source-map 一般来说,生产环境是不配 source-map 的,如果想捕捉线上的代码报错,我们可以用这个。

    流程概括

    Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:

    1. 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
    2. 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
    3. 确定入口:根据配置中的 entry 找出所有的入口文件;
    4. 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
    5. 完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
    6. 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
    7. 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

    在以上过程中,Webpack 会在特定的时间点广播特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

    流程细节

    Webpack 的构建流程可以分为以下三大阶段:

    1. 初始化:启动构建,读取与合并配置参数,加载 Plugin,实例化 Compiler。
    2. 编译:从 Entry 发出,针对每个 Module 串行调用对应的 Loader 去翻译文件内容,再找到该 Module 依赖的 Module,递归地进行编译处理。
    3. 输出:对编译后的 Module 组合成 Chunk,把 Chunk 转换成文件,输出到文件系统。

    关键的配置

    • context:上下文。
    • entry:入口文件,是所有依赖关系的入口,webpack 从这个入口开始静态解析,分析模块之间的依赖关系。
    • output:打包输出的配置。
    • devtools:SourceMap 选项,便于开发模式下调试。
    • watch:监听模式,增量更新,开发必备!
    • profile:优化。
    • cache:webpack构建的过程中会生成很多临时的文件,打开 cache 可以让这些临时的文件缓存起来,从而更快的构建。
    • module.loaders:如前文介绍,loaders 用来对文件做预处理。这样 webpack 就可以打包任何静态文件。
    • resolve.alias:模块别名,这样可以更方便的引用模块。
    • plugins:如前文介绍,webpack 的一些内置功能均是以插件的形式提供。
  • 前端知识点汇总(持续更新)

    HTML5:

    新增标签元素

    header, footer, aside, nav, section, canvas, video, audio…

    新增 Input 类型

    date, datetime, email, number, range, tel, color…

    本地存储

    生命周期

    • cookie:可设置过期时间
    • localStorage:永久存储
    • sessionStorage:关闭标签页自动清除

    存储大小

    • cookie:4KB
    • sessionStorage:5MB – 10MB
    • localStorage:5MB – 10MB

    作用域

    • cookie:可设置 Domain 和 Path,控制哪些域名和路径可以访问
    • localStorage:同源策略下的所有窗口和标签页共享
    • sessionStorage:仅当前标签页有效,即使同源的其他标签页也无法访问

    <script> 加载方式

    • 默认同步阻塞 HTML 解析
    • defer 延迟执行直至DOM解析完后
    • async 异步引入,下载完成后立即执行

    CSS3:

    新增属性

    • 边框:border-radius, box-shadow, border-image
    • 背景:background-size, background-origin
    • 文字:text-shadow
    • transfrom:translate, rotate, scale, skew, matrix

    自定义字体:@font-face

    动画

    rgba 颜色 / 线性渐变
    .test {
      background-color: rgba(0, 0, 0, 0.5);
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    }

    flex 布局

    媒体查询

    命名规范

    BEM

    JS:

    小数精度处理

    • 使用 toFixed 取后几位小数
    • 把小数转为整数再进行运算
    • 使用精度运算库,如:big.js

    for…in 和 for…of 的区别

    • for-in 历遍对象,通常获取 key(类似 Object.keys)
    • for-of 历遍可迭代对象,如 Array、Map、Set 等

    任务队列(Task Queue)

    • 先执行同步再执行异步
    • 核心作用:处理异步代码的调度和执行
    • 宏任务:setTimeout、setInterval、I/O 等
    • 微任务:Promise 回调(.then / .catch/ .finally)、MutationObserver 回调等
    • 微任务优先级高于宏任务
    • 调用 fetch 会同步执行并立即返回一个 promise

    call | apply | bind

    均用于改变函数内部 this 的指向

    const obj = { name: "Alice" };
    
    function greet() {
      console.log(`Hello, ${this.name}!`);
    }
    
    greet.call(obj);      // Hello, Alice!
    greet.apply(obj);     // Hello, Alice!
    const boundGreet = greet.bind(obj);
    boundGreet();         // Hello, Alice!

    ES:

    有哪些新特性?

    变量声明

    let 和 const

    箭头函数

    简化函数语法,自动绑定 this

    模板字符串

    `Hello ${name}`

    解构赋值

    const { age, name } = user;
    const [first, second] = [1, 2];

    默认参数

    扩展运算符

    const arr1 = [1, 2];
    const arr2 = [...arr1, 3]; // [1, 2, 3]; // 合并数组
    const objCopy = { ...originalObj }; // 合并对象

    Promise 和 异步处理

    Promise.all – 等待所有 Promise 对象都执行完成 Promise.race – 返回第一个完成的 Promise(无论成功失败) Promise.any – 返回第一个成功的 Promise

    模块化:import 和 export

    Set, Map

    let s = new Set(); s.add(‘a’).add(‘b’)
    let m = new Map(); m.set(’age’, 16)

    数组的 includes,检查是否包含某元素

    async / await

    Generator 函数的语法糖,省去手动 next() 的步骤

    Object.values() 和 Object.entries()

    Object.values({ a: 1, b: 2 }); // [1, 2]
    Object.entries({ a: 1, b: 2 }); // [["a", 1], ["b", 2]]

    字符串填充:padStart() 和 padEnd()

    "5".padStart(2, "0"); // "05"

    空值合并运算符

    const value = input ?? "default";

    动态导入模块

    const module = await import('./module.js')

    replaceAll 替换所有匹配的子串

    "a.b.c".replaceAll(".", "-"); // "a-b-c"

    require 和 import

    • 分别属于 CommonJS 和 ES 两种不同模块系统
    • require 动态加载,运行时解析
    • import 静态加载,编译时解析
    • Proxy
      • 数据绑定与响应式系统:通过 set 拦截属性赋值,触发副作用(如重新渲染)
      • 属性访问控制和校验:限制对象属性的访问或赋值

    微信小程序:

    OpenID & UnionID

    OpenID

    • 用户在当前小程序中的唯一标识
    • 用途:用于识别用户在当前小程序内的身份(如用户数据存储、业务逻辑处理)
    • 获取:通过 wx.login() 获取 code,后端用 code 调用微信接口换取 OpenID

    UnionID

    • 用户在微信的唯一标识
    • 用途:实现跨小程序、公众号用户身份统一
    • 获取:通过 wx.getUserInfo() 获取 encryptedData, iv,发送到后端解密,或者通过按钮触发授权

    性能优化:

    • 文本压缩(css, js, html)
    • 图片压缩
    • 合并资源(合并文本、雪碧图)
    • 图片懒加载
    • 合并请求
    • 缓存资源(设置浏览器头、设置 html head)
    • 使用 CDN
    • gzip 压缩
    • 减少 DOM 操作
    • CSS 样式置顶、JS 脚本置底
    • 防抖和节流
      • 防抖:保证N秒内执行一次,如果N秒内触发将再执行并重新计算时间
      • 节流:保证N秒内只能触发一次
  • 2016 唯品会七周年年会

    我们唯品会7周年年会,也太热闹啦!

    2016年,咱们唯品会7周年年会在广州体育馆举办,现场人挤人、超热闹,比去年在天河体育中心办的还要有氛围,一眼望过去全是咱们同事,特别有归属感。

    说真的,公司这几年是真的越变越好,作为基层职员,我们每天上班都能实实在在感受到这份变化。这次年会也办得特别用心,场馆布置得亮亮堂堂的,灯光一打开,简直跟演唱会一样气派,看得出来公司是真的想陪我们好好庆生。

    现场超有看头,不光有我们同事自编自演的节目,居然还请到了杨宗纬!他一开口唱歌,全场瞬间就嗨了,我们跟着一起大合唱,气氛直接拉满,那种热闹劲儿,现在想起来还很激动。

    最让人期待的就是抽奖环节了!这次公司是真大方,奖品多到数不过来,中奖率也超高,iPhone 6s、唯品卡、马尔代夫双人游全都有,最厉害的是居然还有6台豪车当大奖,简直太惊喜了!

    不知不觉,我在公司已经工作三年了,看着公司走过7个年头,心里还挺感慨的。真心希望公司业务越来越好,我们也能跟着公司一起,越来越好、越来越有奔头!

  • 【JS】事件循环(Event Loop)

    核心概念

    事件循环是 JavaScript 处理异步操作的机制,它使得单线程的 JS 能够实现非阻塞 I/O 操作。

    三大关键组成部分

    1. 调用栈(Call Stack):

      • 执行同步代码的地方
      • 后进先出(LIFO)结构
    2. 任务队列(Task Queues):

      • 宏任务队列:setTimeout、setInterval、I/O 等
      • 微任务队列:Promise.then、MutationObserver 等
    3. 事件循环机制:

      • 不断检查调用栈和任务队列
      • 决定何时执行哪个任务

    执行流程

    1. 从宏任务队列取出一个任务执行(如 script 整体代码)
    2. 执行过程中:
      • 同步代码立即执行
      • 遇到异步操作,注册相应回调
    3. 当前宏任务执行完毕:
    • 立即执行所有微任务
    • 如果微任务产生新微任务,继续执行直到队列清空
    1. 必要时进行UI 渲染
    2. 从宏任务队列取下一个任务,开始新循环

    执行顺序示例

    console.log('1. 同步代码'); // 同步
    
    setTimeout(() => console.log('4. 宏任务'), 0); // 宏任务
    
    Promise.resolve().then(() => console.log('3. 微任务')); // 微任务
    
    console.log('2. 同步代码'); // 同步
    
    /* 输出顺序:
    1. 同步代码
    2. 同步代码
    3. 微任务
    4. 宏任务
    */

    重要特点

    • 微任务优先级高于宏任务:每执行完一个宏任务,就会清空微任务队列
    • 避免阻塞:长时间同步代码会阻塞事件循环
    • 不同环境差异:Node.js 与浏览器实现有细微差别

    理解事件循环是掌握 JavaScript 异步编程的基础,有助于编写高效、无阻塞的代码。