Pasoul
Pasoul
# 复现问题步骤 1. 首页滑动一段距离之后点击list，进入到详情页 2.由于单页面共享一个浏览器滚动条，并且页面通过keep-alive缓存，导致详情页没有正确回到顶部  3.为了避免上述情况，在detail页面强制滚动到顶部 `window.scrollTo(0, 0) ` 4.从详情页返回到首页，由于每次返回到首页，首页都会重新请求数据更新页面，导致页面出现白屏，如果轻拂一下页面，就可以正常展示了  # 解决方法: 参考vue的[issue](https://github.com/vuejs/vue/issues/5533)，在首页请求数据之后，动态的设置scrollTop ``` this.$nextTick(() => { window.scrollTo(0, 1) window.scrollTo(0, 0) }) ```
# 命令行方式 webpack entry output 1. 创建sum.js，导出一个函数 ``` export default function(a, b) { return a + b } ``` 2.创建app.js引入sum.js,并调用sum导出的函数 ``` // es6 module方式引入 import sum from './sum.js' console.log('sum(1, 2)',...
# webpack概述  官网：https://webpack.js.org/ 中文官网：https://doc.webpack-china.org/ github：https://github.com/webpack/webpack 引用官方的一段话：本质上，webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。当webpack处理应用程序时，它会递归的构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或者多个bundle # webpack版本更迭 webpack v1.0.0 --- 2014.2.20 - 编译、打包 - HMR（模块热更新） - 代码分割 - 文件处理（loader 、plugin） webpack v2.2.0 --- 2017.1.18 - Tree...
# Entry - 代码的入口 - 打包的入口 - 单个或多个 如何定义一个entry： 01：入口是一个文件 ``` module.exports = { entry: 'index.js' } ``` 02：入口是多个文件 ``` module.exports = { entry: ['index.js', 'vendor.js'] } ``` 03：为entry定义一个key，理解成一个独特的chunk（代码块） ```...
# 模块化开发 ## js模块化 - 命名空间 库名.类别名.方法名 ``` var Util = {} Util.type = Util.type || {} Util.type.method = function() {} 比如: Util.cookie.get / Util.storage.save ``` 弊端：需要提前个团队成员约定好各自的命名空间，需要通过命名空间路径的方式才能找到一个方法... - commonJs(服务器端) 一个文件为一个模块，外界无法直接访问，必须通过module.export暴露模块接口，通过require引入模块，同步执行...
# babel 安装babel-core babel-loader转义es6语法 `npm i -D babel-loader babel-core` 创建一个webpack.config.js ``` module.exports = { entry: { app: './app.js' }, output: { filename: '[name].[hash:5].js' }, module: { rules: [ { test:...
## 安卓： 0. 开发微信页面，chrome与安卓真机（安卓4.4及以上）联机调试 1. 手机中打开“设置”->”开发人员选项”->”USB调试” ,注意此时需要手机与电脑通过usb连接 2. 用Android机在微信端访问 http://debugx5.qq.com 3. 在打开的网页中选择 【信息】->【TBS settings】，勾选 【是否打开 TBS 内核 Inspector 调试功能】 ，重启微信 4. 打开pc端chrome, 在地址栏中输入chrome://inspect/#devices 选中discover usb devices，注意首次联机需要翻墙
## Gzip是什么？ gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。在web应用中，通过Nginx开启Gzip，传输压缩过后的静态文件，可以节省网络带宽，提高搜索引擎抓取的速度，提升网站浏览速度等。 ## Gzip工作原理 ### 一张图了解客户端和服务器Gzip通信  1. 浏览器请求url,并在request-header中加入Accept-Encoding：gzip表明浏览器支持Gzip，并告知服务器采用何种压缩方式 2. 服务器收到浏览器的请求后，判断浏览器是否支持Gzip，如果支持，则返回压缩后的内容，并且在response headers中返回Content-Encoding:gzip，如果不支持，则返回未压缩后的内容。 3. 如果浏览器接收到压缩过的文件，需要进行解压缩操作 以[淘宝](https://www.taobao.com/)为例，打开控制台： 请求headers:  响应headers:  可以看到网站支持Gzip，当开启Gzip后，压缩倍率可以用[在线工具](http://tool.chinaz.com/Gzips/)监测  压缩前的文件181k，压缩后的文件75k，压缩率58%，极大的节省了服务器的网络带宽，这对于访问量巨大的淘宝来讲节约的流量非常可观。 ## Nginx开启Gzip ``` ## # Gzip Settings...
https://mp.finogeeks.com/mop/document/introduce/introduction/
