sunxinfei.github.io
sunxinfei.github.io copied to clipboard
SunXinFei
前后端技术相关笔记，已迁移到 Issues 中
比较水的一些问题总结
## 获取url中的?号后的参数 ```js export const getQueryString = (name) => { let regData = location.href.match(`(${name}=)(\\d+)`); let queryId = regData && regData[2] || ''; return queryId; } ``` ********************* ## 防抖与截流 ```js...
### 好处 单元测试的好处就不用多说了，对于敏捷开发的迭代需求或者业务逻辑的重构，有了单元测试之后非常方便的担保业务逻辑平滑过渡，而且单元测试的case的存在，可以有效的说明逻辑，比代码注释更为清晰。在MVVM框架流行的今天，数据驱动DOM使得单元测试更加重要而且可行性更高。 ### 痛点 前端单元测试推动是一直有痛点的，包括一些大厂对前端单元测试这个态度不是很统一。原因主要概括为两点： 1. 相较于后端单元测试的断言非常清晰，期望的数据通过接口参数不同的调用，而前端除了数据的变化的业务逻辑外，还主要涉及到DOM的操作、变换、展示，随着业务线发展，页面一旦重新变化，case工作白做。 2. 很多业务部门的业务线生命周期很短，还没写完单元case就已经死掉，转战了业务线，前期更多关注的是业务线的0-1的过程。 从而导致业务线前期稳定性靠开发者把控，后面项目逐渐庞大，测试用例又没有时间补贴，或者开发者转了战场。 ### 折中 比较好的处理方式是折中方案，Utils工具类中的方法必须进行单元测试，业务基础组件和项目的基础业务逻辑必须进行单元测试，这样可以很好的避免后期基础的逻辑，手动痛苦地回归case。而目前看来，前端很多项目也确实是这么做的。其他的case则视重要性与时间代价视情况而定了。
npm包二三事
**在此之前先说下[nrm](https://github.com/SunXinFei/sunxinfei.github.io/issues/4)，因为国内的开发者一般为了速度，是将自己的npm镜像设为taobao的那个，在这里如果使用该网址，会出现一些错误`no_perms Private mode enable, only admin can publish this module:xxx`，所以我们需要nrm这个工具来切换我们的NPM源，这点一定要注意。** 1. 首先在[npm官网](https://www.npmjs.com)注册 2. 在本地输入命令`npm adduser`，然后输入用户名，密码，邮箱即可登入成功，登陆成功后，输入`npm whoami`如果出现了你的用户名，说明你已经成功登陆了。 3. 选择一个文件夹，执行`npm init`命令， 4. 接下来就是一长串表单： - name：填写你这个包的名字，默认是你这个文件夹的名字。不过最好先去npm官网上找一下有没有同名的包。不然还得改名字 - version：包的版本，默认是1.0.0 - description：一句话描述你的包是干嘛用的 - entry point：入口文件，默认是Index.js...
前端引导二三事
引导在项目中属于增加用户体验类，通过下一步、下一步的方式来使用户能够很快的对产品上手，或对产品的一些交互逻辑进行了解。前端增加用户体验类的东西比如有：骨架屏、动画、引导。网上实现的引导方式有很多，现在将实现的方式进行总结。 ## 整体流程 * 通过cookie校验主动打开引导 || 用户点击触发进入引导； * 开启引导之后，mock出数据； * step展示； * 引导完成 || 退出引导； * 恢复正常数据  ## 引导组成部分 如图所示，引导一般分为如下几部分构成： 1. 阴影遮罩层 2. 高亮区域 3. 引导内容悬浮框（展示、操作、or自定义html） 
因为国内的开发者一般为了速度，是将自己的npm镜像设为taobao的镜像源，nrm 是一个 NPM 源管理器，相比每次切换时都手动指定相应参数，使用nrm 要方便的多，允许你快速地在NPM 源间切换： **安装** npm install -g nrm **列出可选的源** 带 * 的是当前使用的源，上面的输出表明当前源是官方源。 ``` nrm ls npm ---- https://registry.npmjs.org/ cnpm --- http://r.cnpmjs.org/ * taobao - https://registry.npm.taobao.org/ nj -----...
前端基础
# 异步与同步 ## 单线程与多线程 js为什么是单线程？js语言在设计之初就是单线程的，原因其实也比较简单，js主要是针对浏览器使用，浏览器中单线程能够保证页面中DOM的渲染不出现异常，也正是这个原因，所以在现在新标准允许JavaScript脚本多线程中有一个严格的要求，子线程不能够进行DOM操作，来严格把控住，所以所谓js多线程，也就只能做一些业务上面的运算，比如数量非常大的数据清洗等等。 ## 任务队列 [Philip Roberts的PPT视频《Help, I'm stuck in an event-loop》](http://vimeo.com/96425312)中已经非常清晰地说明了关于任务队列的讲解： 1. 所有任务在主线程执行，形成一个执行栈（execution context stack） 2. 一旦执行栈（execution context stack）中没有了任务，便会去"任务队列"（task queue）中读取任务放置到执行栈（execution context stack）中去执行 3. 不断重复 ## 宏任务&微任务 ...
## 两数求和 > 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那**两个**整数，并返回他们的数组下标。 > 你可以假设每种输入只会对应一个答案。但是，你不能重复利用这个数组中同样的元素。 > > 示例: > > 给定 nums = [2, 7, 11, 15], target = 9 > > 因为 nums[0] + nums[1]...
Vue与React
## 关于JSX JSX到JS对象的映射： ```html Hello Click ``` ```php { tag: 'div', attrs: { className: 'box', id: 'content'}, children: [ { tag: 'div', arrts: { className: 'title' }, children: ['Hello'] },...
## webpack error about 'optionsSchema.definitions.output.properties.path.description' ```cmd /home/uli/project/node_modules/webpack-cli/bin/config-yargs.js:89 describe: optionsSchema.definitions.output.properties.path.description, ^ TypeError: Cannot read property 'properties' of undefined at module.exports (/home/uli/project/node_modules/webpack-cli/bin/config-yargs.js:89:48) at /home/uli/project/node_modules/webpack-cli/bin/webpack.js:60:27 at Object. (/home/uli/project/node_modules/webpack-cli/bin/webpack.js:515:3) at Module._compile (internal/modules/cjs/loader.js:723:30) at Object.Module._extensions..js...