文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

为什么我坚持使用 JavaScript 函数声明

时光溯回到上世纪 90 年代晚期，在初次接触 JavaScript 时，老师教我们使用函数声明写下Hello World，它看上去是这样的······ function helloWorld() {...即使是免费的 Babel（JavaScript编译器），也无法阻挡我对函数声明的喜爱。...——那么简单的函数竟然要 3 行！那些多余的字符怎么看都扎眼！ 如今你们内心戏大概是： ? 我对箭头函数绝对是真爱，但要声明一个顶级函数时，我仍用“土气”的函数声明。 为什么呢？...所以不论何时进行函数声明，代码开始执行时，语法都是符合其作用域的。 ? Professor JavaScript，out！ 刚说的问题让代码不得不从低级开始，一步一步往上走。...使用箭头函数时，还会使用地图、过滤器等，它们都是我的好朋友。 举个例子： const goodSingers = singers.filter((singer) => singer.name !

1.4K80

封装与隔离：自执行函数在 JavaScript 开发中的重要意义

很多人会疑惑为什么要把业务逻辑写进 (() => { ... })(); 这样的结构，而不直接把那段逻辑写在脚本文件里并且直接执行。...在最初阶段，需要先明确一点：在 JavaScript 环境中，变量、函数以及其他声明很可能会与全局或其他脚本中的声明产生冲突。...这样既能在全局环境中留下尽量少的痕迹，也能让使用者通过指定的接口来访问需要的功能。在进一步讨论中，匿名自执行函数还能避免命名冲突给项目带来难以追踪的错误。...当一个项目需要在脚本执行之前执行某些检查或初始化操作，诸如检测浏览器环境版本、判断是否能使用某些最新特性或 polyfill，完全可以将这些操作写在自执行函数里，这样就能在更早阶段保证外部逻辑只在满足条件时才被调用...有些人也会好奇，为什么不直接写一个普通的函数，然后在需要时调用就行。答案在于匿名自执行函数可以在文件被加载时自动执行，而且不会在全局留下多余的函数名。

17200
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【TypeScript 4.5】002-第 2 章 TypeScript 入门

    function fn(x) { return x.flip(); } // 可知，要成功执行上面函数内容代码是要满足一定条件的，那就是 x 必须能够调用 flip() 方法； 3、JavaScript...局限 JavaScript 只能在运行时发现错误！...message() 类型检查提示 三、非异常故障 1、JavaScript 示例 代码示例 const user = { name: "大哥", age: 25 } console.log...; } say("訾博", 25); 发现的问题 修改 ts 代码之后每次都需要使用 tsc 手动编译； 提示错误：函数实现重复（TS 与 JS 冲突）； 五、优化编译，解决问题 1、解决...一般不这么做！ 问题 关闭严格模式，类型隐式推断为 any 类型，也就回到了普通的 js 代码的效果了，与是否使用 ts 无区别！

    20410

    前端必知之：前端模块化的CommonJS规范和ES Module规范详解

    为什么要有模块化？在早期JavaScript的开发当中，在没有模块化的情况下。写法是这样的： 冲突在没有模块化的情况下，所有的函数和变量都定义在全局作用域中。这意味着如果不小心命名冲突，不同部分的代码可能会意外地互相影响，导致难以察觉的 bug或不可预见的行为。...此外，ES模块是静态的，需要构建工具转换后才能在不支持ES模块的环境中运行，而CommonJS模块可以直接在Node.js等环境中运行。...**模块加载的同步性：**CommonJS 加载模块是同步进行的，即 require() 函数会阻塞代码执行直到模块加载完成。这种同步加载模式在服务器端常用，但在浏览器端可能会影响性能。...**适用于服务器端：** 在服务器端 JavaScript 开发中得到广泛应用，因其简单性和实用性。缺点：**同步加载：** 阻塞式加载模块可能在大型应用中导致性能问题，特别是在需要异步加载的场景下。

    45910

    如何制定企业级代码规范与检查

    除了上面的规范与检查实现，了解一些原理，比如 rules 原理？为什么 Prettier 和 ESLint 冲突？Prettier 原理？...我们都知道 ESLint 本身就带有格式化检查的，我们为什么要是使用它？它有什么优点？使用它要注意那些问题？...所以还是知道下原理，extends 中为什么那么写，格式冲突和顺序有什么关系没？...前面的内容，通过这个插件对前面 ESLint 的配置进行重置。如果想使用一些 Prettier 中不支持的格式化配置，我们把eslint中的格式化加在他们后面写了，也不会有冲突。...总结 本文主要对开篇那张图片中的本地代码检查部分进行了详细讲解，从实践到原理，另外小伙伴们也可以想下我开篇提到的如何做出亮点，希望有所帮助，最后快去制定一个属于自己项目的规范与检查吧！

    2.2K20

    使用 TypeScript 开发你的项目

    JavaScript 是动态类型的，只能在 runtime 时进行类型检查；同时它也给重构大型项目带来了的困扰，在一定程度上，它是不「易读」的。而 TypeScript 能够很好的解决上述问题。...当然，向 JavaScript 提供一个可选的静态类型是一个最重要的变化点了。 在接下来，我将简单的阐述为什么静态类型对大型项目是友好的，以及对 Function type 的一次实践写法。...静态类型对大型项目是友好的 尽早检查错误 如前文所提及的，JavaScript 是动态类型的语言，它没有 Type System，只能在 runtime 时进行类型检查，如果你不是足够的小心，难免会出现下列情况...现在来使用它： const func: (arg: number) => string = String // 在这里 String 是一个方法 在实际应用中，并不会这么用，因为 TypeScript...type OthemMethod = ( obj: T, key: P ) => T[P] 实际上 TypeScript 2.4 版本以后，可以对函数调用的返回值进行判断

    22010

    使用 TypeScript 开发你的项目

    JavaScript 是动态类型的，只能在 runtime 时进行类型检查；同时它也给重构大型项目带来了的困扰，在一定程度上，它是不「易读」的。而 TypeScript 能够很好的解决上述问题。 ?...当然，向 JavaScript 提供一个可选的静态类型是一个最重要的变化点了。 在接下来，我将简单的阐述为什么静态类型对大型项目是友好的，以及对 Function type 的一次实践写法。...静态类型对大型项目是友好的 尽早检查错误 如前文所提及的，JavaScript 是动态类型的语言，它没有 Type System，只能在 runtime 时进行类型检查，如果你不是足够的小心，难免会出现下列情况...现在来使用它： const func: (arg: number) => string = String // 在这里 String 是一个方法 复制代码 在实际应用中，并不会这么用，因为 TypeScript...OthemMethod = ( obj: T, key: P ) => T[P] 复制代码 实际上 TypeScript 2.4 版本以后，可以对函数调用的返回值进行判断

    1.5K20

    WordPress开发人员犯的12个最严重的错误

    1.将WordPress主题的JavaScript代码放入一个主文件中 有一次，在为客户的网站做页面速度优化时，我注意到他们使用了一个高级主题，这个主题包含了所有他们正在使用的库，包括定制代码，在一个名为...2.它使得管理文件中的代码更加困难，因为您不能使用wp_dequeue_script()等功能来卸载某些页面中的某些代码，以提高页面速度或防止与其他活动插件中的JavaScript代码冲突。...2.使用那些在变量、函数、常量或类中太常见的名称 在开发插件时，最好使用一种命名约定来防止代码冲突，以防有其他插件使用相同的名称。...这就是为什么许多开发人员在他们的变量和函数名前面加上了一些与插件本身相关的独特的东西。除了消除代码冲突之外，在启用了大量插件时，还可以更容易地发现问题。...另一方面，开发人员更喜欢使用PHP名称空间来封装项目，并解决在创建可重用的代码元素时遇到的两个问题:类或函数： 1.它们创建的代码的命名与内部PHP或第三方、类、函数或常量之间的名称冲突。

    3.4K10

    小心这个陷阱： 为什么JS中的 every()对空数组总返回 true

    在我的理解中，我认为回调函数必须被调用并返回true ， every() 才会返回 true ，但实际上并非如此。...在数学和JavaScript中的“对所有”的量词 MDN页面 提供了为什么 every() 会对空数组返回 true 的答案： every 的行为就像数学中的“全称量词”。...考虑到JavaScript数组在进行数学计算方面的重要性，尤其是在使用类型数组（typed arrays）的情况下，内置支持这样的操作是合理的。而every()方法并不是唯一的例子。...简而言之，如果你使用 every() 方法或可能为空的数组，你应该事先进行明确的检查。...结论 当我第一次看到 every() 在空数组上的行为时，我感到很惊讶，但一旦你理解了这个操作的更大背景和这个功能在各种语言中的广泛应用，就会觉得它是有道理的。

    64620

    《JavaScript 模式》读书笔记（5）— 对象创建模式4

    作为一种变通方案，JavaScript中常见的一种方法是使用命名约定，使那些不应该被修改的变量全部用大写字母以突出显示。实际上这个命名约定已经用于内置JavaScript对象中了。...此外，一些额外的注意事项是要确保声明的常量与内置属性名不会冲突，比如toString或hasOwnProperty等，可以通过使用hasOwnProperty()检测名称，并且在所有的常量名前面添加随机生成的前缀...九、method()方法 JavaScript可能会使用那些以类的方式思考的程序员感到困惑。这就是为什么一些开发人员倾向于选择使JavaScript更加类似类。...现在回想起来，他承认使JavaScript类似类的思想并不是值得推荐的方案，但是它仍然是一种令人关注的模式，有可能在一些应用程序中遇到这种模式。 　　使用构造函数看起来就像是在使用Java中的类。...这也就是为什么可服用方法应该添加到构造函数的prototype属性中的原因。 　　向编程语言中添加便利的功能通常也称之为语法糖。

    35440

    jQuery.noConflict() 深度剖析与应用指南

    在 Web 前端开发当中, jQuery 作为一个深受欢迎的 JavaScript 库, 曾经在许多项目里被广泛使用。...函数调用: .noConflict() 作为一个函数, 可以在执行后根据内部逻辑修改当前 JavaScript 运行环境中的一些变量引用关系。...这些年份久远的系统往往很难快速替换掉所有旧代码, 或者管理层不希望花大力气在重构上, 那么就需要兼容旧库与新库共存。当团队想要引入 jQuery 来提高开发效率时, 就会面临 $ 命名冲突的问题。...这样做既能保证旧系统的平稳运行, 又能让团队在新功能中灵活运用 jQuery 进行开发。有些人会疑惑, 在现代前端项目里, 是否还有这种命名冲突的麻烦。...它所使用的语法相对直观, 即对象属性访问加上函数调用, 但是背后蕴含的设计思路与兼容性考量却折射出 Web 前端发展演进过程中的一些重要理念。

    14900

    盘点那些前端项目上的规范工具

    本文主要聊聊这些工具的作用和基本使用方式，不会有细致的使用步骤和教程，这些内容我希望你能从官方指引中查看。 1....因为插件始终使用工作目录中的 ESLint 程序和配置，当使用本地安装时，每个项目都是独立的，不会冲突。 1.4....所以，在实际运用中，我们需要保证这些文件只会采用其中一种进行格式化，避免不必要的格式化。更遭的情况是启用了两个，而且两个工具的风格配置互相冲突。...我就曾在项目中遇到这种情况，ESLint 格式化之后，Prettier 也执行格式化，结果 ESLint 检查还是不通过。 我推荐在 JavaScript 中也使用 Prettier。...如果你只想在 JavaScript 中使用 ESLint，可以在 .prettierignore 中忽略所以的 JavaScript 文件即可。 3.

    1.2K40

    深入理解Javacript从作用域作用域链开始

    globleVariable和globalFunc在任何地方都可以访问到, 反之不具有全局作用域特性的变量只能在其作用域内使用。..., 使之成为全局变量, 但是不建议这么做,因为这可能会和其他的变量名冲突,一方面如果我们再使用const或者let声明变量, 当命名发生冲突时会报错。...console.log("test外部:"+num); 注意点： 如果在函数中定义变量时,如果不添加var关键字,造成变量提升，这个变量成为一个全局变量。...JavaScript代码执行分为两个阶段： 3.1.1 分析阶段 javascript编译器编译完成，生成代码后进行分析 分析函数参数 分析变量声明 分析函数声明 分析阶段的核心，在分析完成后（也就是接下来函数执行阶段的瞬间...在《你不知道的Javascript(上)》也有很清楚的描述。在这里，我想引用freecodecamp上面的回答来解释： LHS = 变量赋值或写入内存。想象为将文本文件保存到硬盘中。

    60620

    你了解 Typescript 吗

    JavaScript版本 强大的智能感知 Typescript特性 可选静态类型 类型可被添加到变量，函数，属性等。...给JavaScript加上可选的类型系统，很多事情是只有静态类型才能做的，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。...undefined赋值给各种类型的变量 let u: undefined = undefined; let n: null = null; 接口 TypeScript的核心原则之一是对值所具有的结构进行类型检查...，每行代码我都能记得，每个变量我都知道是什么。...我们开始愉快的合作节奏，分工进行与后台接口的对接，除了约定一些接口规范，我们通常只有一个初始版本的接口说明，联调中持续的更新并不能及时更新到文档或注释中。

    5.9K10

    前端入门25-福音 TypeScript声明正文-TypeScript

    正文-TypeScript 今天来讲讲有 Java 基础转 JavaScript 的福音：TypeScript 为什么学习 TypeScript 如果学习 JavaScript 之前已经有了 Java...中 ES6 自定义某个类的用法，与 Java 的写法有如下区别： 类的属性只能在构造函数内声明和初始化，无法像 Java 一样在构造函数外面先声明成员变量的存在； 无法定义静态变量或静态方法，即没有...接口 鸭式辩型其实严格点来讲就是对具有结构的值进行类型检查，而具有结构的值也就是对象了，所以对对象的类型检查，其实也就是在对对象进行类别划分。...，而是使用 constructor 如果有继承关系，则构造函数中必须要调用super 不手动使用权限修饰符，默认是 public 权限 其余方面，不管是权限的控制、继承的写法、成员变量的定义或初始化、抽象类的定义.../m2.d.ts"/> 这部分内容我还没理解清楚，后续碰到实际使用掌握后再来说说。

    3.4K21

    Vue.js 组件编码规范

    尽量只使用 JavaScript 原始类型（字符串、数字、布尔值）和函数。尽量避免复杂的对象。 为什么？ 使得组件 API 清晰直观。...（译者注：箭头函数没有它自己的 this 值，箭头函数内的 this 值继承自外围作用域。） 如果你没有使用 ES6，当然也就不会使用 箭头函数 啦，那你必须将 “this” 保存到到某个变量中。...在使用的的时候你需要注意避免调用了不恰当的组件 API，所以应该尽量避免使用 this.$refs。 为什么？...为了便于其他开发者使用该组件，对于这些自定义属性即组件API应该在 README.md 文件中进行说明。 为什么？...$set(this, 'language', 'DE') } } } export default MenuMixin 要使用 mixin，只需将其导入到两个组件中（我只展示移动组件）。

    6.8K20

    《JavaScript 模式》读书笔记（5）— 对象创建模式4

    作为一种变通方案，JavaScript中常见的一种方法是使用命名约定，使那些不应该被修改的变量全部用大写字母以突出显示。实际上这个命名约定已经用于内置JavaScript对象中了。...此外，一些额外的注意事项是要确保声明的常量与内置属性名不会冲突，比如toString或hasOwnProperty等，可以通过使用hasOwnProperty()检测名称，并且在所有的常量名前面添加随机生成的前缀...九、method()方法 JavaScript可能会使用那些以类的方式思考的程序员感到困惑。这就是为什么一些开发人员倾向于选择使JavaScript更加类似类。...现在回想起来，他承认使JavaScript类似类的思想并不是值得推荐的方案，但是它仍然是一种令人关注的模式，有可能在一些应用程序中遇到这种模式。 　　使用构造函数看起来就像是在使用Java中的类。...这也就是为什么可服用方法应该添加到构造函数的prototype属性中的原因。 　　向编程语言中添加便利的功能通常也称之为语法糖。

    47610

    基于vite工程规范化

    Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源...）ESLinteslint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具代码质量问题：使用方式有可能有问题代码风格问题：风格不符合一定规则因为 ESlint 是默认支持解析...2.解决 Prettier 跟 ESlint 冲突为了解决两者的冲突，我们要使用另一个 ESlint 插件 eslint-plugin-prettier。...比如它会把跟 prettier 冲突的 ESlint 规则给 off 掉，并使用自己的规则，也就是说，二选一，让你选 prettier。...顾名思义，这个工具专门用于检查 git暂存区的文件，也就是说，它只会对你通过 gitadd 命令添加到暂存区的文件进行 lint 检查。

    20510
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券