blog
blog copied to clipboard
sisterAn
瓶博：每日更新，前端前进
## 一、出发点 主要是为了弥补当前JS没有标准的缺陷，以达到像Python、Ruby和Java具备开发大型应用的基础能力。CommonJS API是以在浏览器环境之外构建 JS 生态系统为目标而产生的项目，比如服务器端JS应用程序、命令行工具、桌面图形界面应用程序等。如今，规范涵盖了模块、二进制、Buffer、字符集编码、I/O流、进程环境、文件系统、套接字，单元测试、Web服务器网管接口、包管理等。 ## 二、CommonJS的模块规范 CommonJS对模块的定义主要分为模块引用、模块定义和模块标识3个部分 ### 1. 模块引用 ```js var math = require('math') ``` 在CommonJS规范中，存在一个`require()`方法，这个方法接收模块标识，一次引入一个模块的API到当前上下文中。 ### 2. 模块定义 在模块中，上下文提供`require()`方法引入外部模块。对应引入的功能，上下文提供一个`exports`对象导出当前模块的方法或变量，并且它是唯一的导出出口，同时模块中还存在一个`module`对象，它代表的是当前模块，`exports`是`module`的属性。所以，在Node中，一个文件就是一个模块，将方法或属性挂载在`exports`对象上作为属性即可定义导出的方式。 ```js // math.js exports.add = function ()...
 ### 前言 之前好友希望能介绍一下 webapck 相关的内容，所以最近花费了两个多月的准备，终于完成了 webapck 系列，它包括一下几部分： - webapck 系列一：手写一个 JavaScript 打包器 - webpack 系列二：所有配置项 - webpack 系列三：优化 90% 打包速度 - webpack 系列四：优化包体积 - webapck 系列五：优化首屏加载时间与页面流畅度 - webapck 系列六：构建包分析...
React 是通过管理状态来实现对组件的管理，即使用 this.state 获取 state，通过 this.setState() 来更新 state，当使用 this.setState() 时，React 会调用 render 方法来重新渲染 UI。 首先看一个例子： ```js class Example extends React.Component { constructor() { super(); this.state = { val: 0 };...
都2020年了，你还在用 webpack3 吗？😱😱😱！webapck5 都要出了，webapck3 已经过时了！！！ 👇，让我们开始走进 webapck4 吧！ 相对于 webpack3，webapck4 调整了什么喃？ ### 一、Web 性能 #### 1. optimization.splitChunks webapck4 新增了 `optimization.splitChunks` 特性，它是对老版本 `optimization.CommonsChunkPlugin` 的一种优化改进。 ##### 1.1 splitChunks 与 CommonsChunkPlugin 老版本的块图： -...
浅谈节流与防抖
节流和防抖在开发项目过程中很常见，例如 input 输入实时搜索、scrollview 滚动更新了，等等，大量的场景需要我们对其进行处理。我们由 Lodash 来介绍，直接进入主题吧。 ### Lodash #### API - 防抖 （**debounce**） ：多次触发，只在最后**一次触发**时，执行目标函数。 ```js lodash.debounce(func, [wait=0], [options={}]) ``` - 节流（**throttle**）：限制目标函数调用的**频率**，比如：1s内不能调用2次。 ```js lodash.throttle(func, [wait=0], [options={}]) ``` lodash 在 opitons 参数中定义了一些选项，主要是以下三个：...
来源：[Kinjal Dhamat](https://medium.com/flutter-community/flutter-best-practices-and-tips-7c2782c9ebb5) > 遵循最佳实践来提高代码质量和工作效率 最佳实践是一个领域可以接受的专业标准，对于任何编程语言来说，提高代码质量、可读性、可维护性和健壮性都非常重要。 让我们探索一些设计和开发Flutter应用程序的最佳实践。 ### 1. 命名规则 `class` 、 `enum` 、 `typedef` 和 `extension` 应采用驼峰命名 `UpperCamelCase` 规则。 ```js class MainScreen { ... } enum MainItem { .. }...
 > 编写代码从来没有这么轻松过 将优秀的开发人员与优秀的开发人员区分开来的是所使用的工具。 拥有正确的工作工具可以使你变得更加轻松。 这与你使用的IDE是什么没什么关系，许多开发人员将 VS Code 用作他们的首选 IDE ，它可以安装扩展， 并且扩展的种类是没有限制的。 VS Code 上有太多的扩展，本文我们将讨论7个扩展，使你编写代码看起来毫不费力。 > Even the simplest tools can empower people to do great things — Biz Stone...
Set 和 Map 主要的应用场景在于 **数据重组** 和 **数据储存** Set 是一种叫做**集合**的数据结构，Map 是一种叫做**字典**的数据结构 ### 1. 集合（Set） ES6 新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。 **Set 本身是一种构造函数，用来生成 Set 数据结构。** ```js new Set([iterable]) ``` 举个例子： ```js const s = new Set()...
 NPM，Node Package Manager，是 `JavaScript` 编程语言的软件包管理器。 任何使用 ` Javascript` 的开发人员都使用过这个出色的 `CLI` 工具来为他们的项目安装依赖项。 在这篇文章中，我将分享 NPM 的技巧和诀窍，它们可以提高你的工作效率，让你更明智、更高效地使用NPM。 ### 1. 初始化包 我们可以运行 `npm init`命令来初始化包，但是它会询问关于包、作者等信息。还有另一种方法可以使用 `npm init -y` 命令自动生成我们的 `package.json` 。 ```shell npm init...