blog
blog copied to clipboard
wuxianqiang
博客系列
这篇文章主要介绍如何发布一个npm包，这个过程并不复杂，学完之后你可以发布任何你喜欢的代码到npm网站上，之后你可以使用npm命令安装在其他项目中。 发布到npm网站之前，你必须在npm网站上创建一个你自己的账号，这是网站的网址：https://www.npmjs.com/。 然后本地登陆，在命令行中输入命令：·`npm adduser` ，会通过提问的方式依次输入用户名密码和邮箱。 ```js Username: 用户名 Password: 密码 Email: (this IS public) 邮箱 ``` 现在你已经登陆了，我们可以开始创建一些文件发布到npm上。选择一个空的文件夹，通过 `npm init` 进行初始化，这里也会通过提问的方式进行配置仓库的信息。 1、name 。包名。 2、description 。包简介。 3、version 。版本号。 4、keywords 。关键词数组，NPM中主要用来做分类搜索。一个好的关键词数组有利于用户快速找到你编写的包。 5、maintainers 。包维护者列表。...
## 单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。 Props 的只读性 决不能修改自身的 props。所有组件都必须保护它们的 props 不被更改。 State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。state 允许组件随用户操作、网络响应或者其他变化而动态更改输出内容。 ## 让组件在 props 变化时更新...
```js (function(modules) { // webpackBootstrap // The module cache var installedModules = {}; // The require function function __webpack_require__(moduleId) { // Check if module is in cache if(installedModules[moduleId]) { return...
面试官在问了一些常见的技术后 总会问各种原理，比如 ajax 原理 http原理 mvvm原理等。 像这些原理，范围很广，知识面很多，回答这些问题真的不好回答。 但是我们可以把原理拆分成个个小的知识点，然后分别作答。回答流程如下： 1、如果是英文词汇就先翻译成中文 2、一句话描述该技术的用途 3、描述该技术的核心概念或运作流程 4、口述该技术的代码书写思路 5、该技术的优点 6、该技术的缺点 7、如何弥补缺点 比如问 ajax 的原理是什么？我们可以这样回答。 1、Ajax，是对 Asynchronous JavaScript + XML的简写。 2、这一技术能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验 3、Ajax技术的核心是 XMLHttpRequest 对象（简称XHR），XHR为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说，可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。 4、具体用法如下： （1）创建XHR对象要使用 XMLHttpRequest...
原理题怎么答？我带你们答。 回答流程如下： 1. 如果是英文词汇就先翻译成中文 2. 一句话描述该技术的用途 3. 描述该技术的核心概念或运作流程 4. 口述该技术的代码书写思路 5. 该技术的优点 6. 该技术的缺点 7. 如何弥补缺点 教完了，接下来实战： > 请问 AJAX 的原理是什么？ AJAX 就是异步的 JS 和 XML 的缩写，目前我们一般用 JSON 代替 XML。AJAX...
减少文件大小有两个明显的好处，一是可以减少存储空间，二是通过网络传输文件时，可以减少传输的时间。gzip 是在 Linux 系统中经常使用的一个对文件进行压缩和解压缩的命令，既方便又好用。今天具体讲解以下知识点： 1、与压缩有关的HTTP首部字段 2、压缩的几种方式 3、nginx中如何配置 我们需要关注下面两个值 1、response headers中的content-encoding 2、request headers 中的accept-encoding content-encoding是指网页使用了哪种压缩方式传输数据给你，accept-encoding表示你发送请求时告诉服务器，我可以解压这些格式的数据。 二者的关系是，对方网页会根据你发送的accept-encoding来决定用什么格式content-encoding传给你。 ### 语法 ``` Accept-Encoding: gzip Accept-Encoding: compress Accept-Encoding: deflate Accept-Encoding: br Accept-Encoding: identity Accept-Encoding: *...
您是否想过快速排序为什么快？ 因为它是目前最快的排序算法之一。 但是，它仍然比冒泡，插入和选择排序要快，并且在所有情况下都可以快速运行。 在平均情况下，快速排序的复杂度为Θ（n log（n）），最差的是Θ（n2）。 当问题被分为几个小块时，这些块递归地分为更多的块和越来越多的块。 这可以看作是Θ（n log（n））复杂度。 快速排序的基本思想：通过一趟排序将待排记录分隔成独立的两部分，其中一部分记录的关键字均比另一部分的关键字小，则可分别对这两部分记录继续进行排序，以达到整个序列有序。 快速排序使用分治法来把一个串（list）分为两个子串（sub-lists）。具体算法描述如下： ```js [1, 3, 2] [1], [3, 2] [1, 2], [3] [1,2,3] ``` 1、从数列中挑出一个元素，称为 "基准"（pivot）； 2、重新排序数列，所有元素比基准值小的摆放在基准前面，所有元素比基准值大的摆在基准的后面（相同的数可以到任一边）。在这个分区退出之后，该基准就处于数列的中间位置。这个称为分区（partition）操作； 3、递归地（recursive）把小于基准值元素的子数列和大于基准值元素的子数列排序。 ```js function quickSort(arr) {...
先写一个事件代理的方法，这个delegate方法可以给子元素添加和移除绑定事件处理函数。 ```js 11 11 let parentElement = document.getElementById('app') function callback (e) { console.log('ok', e) } delegate(parentElement).on('childClassname', 'click', callback); delegate(parentElement).off('childClassname', 'click', callback); function delegate (parentElement) { function on (childClassname, eventType, listener)...
## 实现createElement 源码地址：[链接](https://github.com/facebook/react/blob/v16.6.0/packages/react/src/ReactElement.js) createElement代码在react/src/ReactElement.js这个目录里面，下面附上代码，然后依次分析内部结构 1. createElement里面会调用ReactElement，在ReactElement里面只是通过函数封装创建对象的具体过程，这是设计模式里面的工厂模式，这样写的好处就是一眼看上去就知道这个对象有哪些属性。 2. 具体的逻辑都在createElement里面 3. `REACT_ELEMENT_TYPE` 是什么，它来自`import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';` ```js const hasSymbol = typeof Symbol === 'function' && Symbol.for; export const REACT_ELEMENT_TYPE = hasSymbol ?...
```js function checkListener(listener) { if (typeof listener !== 'function') { throw new Error('listener', 'Function', listener); } } function spliceOne(list, index) { for (; index + 1 < list.length; index++) list[index]...