1.7k 字 2 分钟

# 利用 @media screen 实现网页布局的自适应

优点：无需插件和手机主题，对移动设备友好，能够适应各种窗口大小。只需在 CSS 中添加 @media screen 属性，根据浏览器宽度判断并输出不同的长宽值

1280 分辨率以上（大于 1200px）

@media screen and (min-width:1200px){
    #page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
}

1.2k 字 1 分钟

# 一、背景介绍

传统的项目开发中，我们只会用到 px、%、em 这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从 css3 开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了 rem、vh、vw、vm 等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面，随之覆盖多种不同分辨率的终端，包括移动设备等。现在让我们来看下这些长度单位有什么区别。

3.4k 字 3 分钟

location 是 javascript 里边管理地址栏的内置对象，比如 location.href 就管理页面的 url，用 location.href=url 就可以直接将页面重定向 url。而 location.hash 则可以用来获取或设置页面的标签值。比如 http://domain/#admin 的 location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。 window.location.hash 简单应用 一、#...
1.4k 字 1 分钟

# 1、为什么使用 Plop？ 一般项目开发过程中，我们都要编写 (CV) 一大堆重复性的代码，比如一个 views/login/index.vue，比如 store/modules/app.js，这些文件都是重复毫无意义的，找一个自动生成的工具就可以了。 # 2、Plop 是什么？ Plop 主要用于创建项目中特定文件类型的小工具，类似于 Yeoman 中的 sub generator，一般不会独立使用。一般会把 Plop 集成到项目中，用来自动化的创建同类型的项目文件。 Plop 插件地址：https://www.npmjs.com/package/plop # 3、Plop 配置 基于...
2k 字 2 分钟

最近在用 vue 写几个 H5 页面在微信上展示，遇到一个在弹窗上 input 输入完成之后点击键盘的完成，页面底部留出一片空白的问题 # 出现原因分析 当键盘抬起时， window.scrollY 会从 0 变到键盘的高度，所以解决办法就是当 input 失去焦点的时候，将 window.scrollY 重新设置为 0 # 解决 给所有的 input``textarea 组件设置获取焦点和设置焦点事件，失去焦点的时候将 “window.scrollY` 设置为 0 因为的是 vue 所以结合 vue 来写代码 <template> <input...
4.2k 字 4 分钟

功能简单说明：jsconfig.json有了它，可以对文件目录检索做智能提示，宝宝再也不用两眼发酸的丑目录写引入文件的地址了，一路上下键选择回车搞定。# jsconfig.json 是什么？ 如果你的项目中有一个 jsconfig.json 文件的话，这个文件的配置可以对你的文件所在目录下的所有 js 代码做出个性化支持。 jsconfig.json 的配置是 tsconfig.json 的子集。 # webpack aliases 的支持 如果我们在我们的 webpack 里面配置的路径的别名，心细的小朋友就发现了。我们的 vscode 不能根据别名路径导入的包跳转文件了。所以我们还需要...
24k 字 22 分钟

# 一、Jest 基本概念 # npm 安装： 1. npm install jest -D（安装到本地）2. npm install jest -g（安装到全局）# 运行： npx jest （安装到本地的前提下） jest （安装到全局的前提下） 修改 "script" 中的 "test" 为 "jest" 后使用 npm run test 或 npm t # 零配置： 但测试用例文件名格式为 **test.js（默认配置下） # 基本方法： ・分组（Test...
3.6k 字 3 分钟

# 1.Jest 中四个钩子函数 beforeAll() 钩子函数的意思是在所有测试用例之前进行执行。比如： beforeAll(()=>{ console.log('上课铃响了～～～～')})写完后，保存文件，会自动执行测试。这时候可以在控制台看到 上课铃响了～～～～ 。执行之后可以看到这句话最先执行了。然后才走下面的测试用例。 beforeEach() 钩子函数，是在每个测试用例前都会执行一次的钩子函数，比如我们写如下代码 beforeEach(()=>{...
3.4k 字 3 分钟

用 axios 远程的请求数据。要使用 axios 就需要先进行安装，直接使用 npm 或 yarn 进行安装就可以了 npm install axios@0.19.0 --save安装完成后，可以打开 package.json 看一下安装结果和版本，我这里使用的是 0.19.0 (如果你是其它版本，可能这个方法会出错，所以你最好和我使用一样的版本)。 # 异步代码的测试方法 - 1 一个异步请求地址 http://a.jspang.com/jestTest.json 安装好 axios 以后，在项目根目录下面，新建一个文件 fetchData.js 文件，然后编写代码如下： import...
3.7k 字 3 分钟

# 市面上主流的前端测试框架

  1. Jasmine ： JavaScript 测试框架（BDD），这个也算是比较早的测试框架。
  2. MOCHA: 它是一个功能丰富的 JavaScript 测试框架，运行在 Node.js 和浏览器中，使异步测试变得简单有趣。也是非常优秀的框架。
  3. Jest：目前最流行的前端测试框架，几乎国内所有的大型互联网公司都在使用。

# Jest 优点：

比较新，性能好、功能多、简单易用，单独模块测试功能（测试快），API 简单，隔离性好，IDE 整合，多项目并行，快出覆盖率...