Wepack学习进阶(一)
前言在当下的前端环境里，各种框架和工具层出不穷，比如 React、Vue、Angular 等，极大的提高了我们的开发效率，但是，他们都有一个共同点：源代码无法直接运行，必须经过转换之后才可执行。Webpack 凭借强大的功能与良好的使用体验，已经成为目前最流行，社区最活跃的构建工具，是现代 Web 开发必须掌握的技能之一。
Webpack 的基本概念Webpack 是使用 NodeJs 开发出来的一个构建工具，本质上，它是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
构建工具的常规作用：
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合 ...
iView 项目分享（使用）
本文会首先介绍下使用 iView 组件前需要了解的简单的样式问题，之后会根据实际工作中的使用场景介绍下 iView 的使用。这里的列举的是在后台系统中经常用到的组件或者组件的组合（示例采用 CDN 引入的方式）。
CSS 基础知识CSS 盒模型CSS 盒模型本质上是一个盒子，盒子包裹着 DOM 元素，盒子由四个属性组成，从内到外分别是：content 内容、padding 内填充、border 边框、外边距 margin。
1234567891011<style> .box { width: 100px; height: 100px; padding: 20px; border: 10px solid lightblue; margin: 30px; background: lightgray; }</style><div class="box"></div>
在浏览器中，我们可以通过下面方式插件 DO ...
iView 项目分享（搭建）
iView 是什么
iView 是基于 Vue 的 UI 组件库。
iView 其实和 View UI 是同一个组件库，从 4.0.0 的版本改名为 View UI 。
iView 2.x 已停止维护，新项目建议大家使用新版本。
重点：
iView 只是一个 UI 组件库，必须依赖 Vue 框架。
本文介绍的是 iView 4.x 的使用方式，不同版本的使用方式大同小异，组件的使用和参数请参照各自版本的官方文档：
iView 2.x 版本
最新版本
如何搭建一个 iView 项目iView 项目是什么iView 项目其实就是在 Vue 项目的基础上引入 iView 组件库，利用 iView 组件原有的样式，可以很快搭建视觉风格统一的页面。
因为 iView 必须依赖 Vue， 所以 iView 项目的搭建方式和 Vue 的搭建方式是密不可分的。和 Vue 项目一样，我们可以通过两种方式来搭建 iView 的项目，一种是 CDN 引入的方式，一种是 npm 安装的方式。
CDN 引入方式使用 CDN 引入的方式时，直接在 html 页面中引入 css 和 js 文件就 ...
小程序开发-数据预拉取和数据上报
周期性更新
生效条件：用户七天内使用过的小程序
周期性更新能够在用户未打开小程序的情况下，也能从服务器提前拉取数据，当用户打开小程序时可以更快地渲染页面，减少用户等待时间，增强在弱网条件下的可用性。
使用流程1. 配置数据下载地址登录小程序 MP 管理后台，进入设置 -> 开发设置 -> 数据周期性更新，点击开启，填写数据下载地址。
配置前：
配置后：
1.每次修改都需要管理员扫码
2.只能配置一个
3.是一个整个带参数的请求地址
2. 设置 TOKEN第一次启动小程序时，调用 wx.setBackgroundFetchToken() 设置一个 TOKEN 字符串，可以跟用户态相关，会在后续微信客户端向开发者服务器请求时带上，便于给后者校验请求合法性。
示例：
1234567App({ onLaunch() { wx.setBackgroundFetchToken({ token: 'xxx' }) }})
3. 微信客户端定期拉取数据微信客户端会在一定的网 ...
H5&小程序开发-React组件流行代码规范
React component code smells一、多个 porps 传递到单个组件表明该组件应该拆分；遇到或者想在这个列表再添加一个组件时
1、该组件能做多少事？要确认是否可以将组件拆分为多个较小的组件
2、可否合并？compose components 组成组件，而不只处理一个组件内的所有逻辑
12345678<ApplicationForm user={userData} organization={organizationData} categories={categoriesData} locations={locationsData} onSubmit={handleSubmit} onCancel={handleCancel}/>
处理后：
123456<ApplicationForm onSubmit={handleSubmit} onCancel={handleCancel} ...
js代码质量-健壮性
对于初入职场的我们，最重要的就是学习如何写出高质量的 js 代码。学习的途径也很简单，多看，多写，多总结：
多看：看大佬们写的代码，学习他们智慧的结晶多写：纸上得来终觉浅，不停的敲代码才能发现自己的问题，提升自己多总结：我一直以来奉行的学习方法有两种——问题驱动学习和输出倒闭输入。只有自己认真的思考总结过，才能发现很多问题的细节，真正的去掌握知识。
0 什么是代码健壮性？在学校看论文时就经常遇到，在公司学习时经常听到其他人提到代码的健壮性，所以每每听到周会大佬们讨论时都会莫名觉厉。健壮性，顾名思义，健康强壮。拿这个词来形容人，就是说明这个人身体健康强壮，在遇到小感冒，跌打损伤，不会让他卧床不起。拿这个词来形容代码，道理也一样，在代码遇到各种个样的异常问题，如读取一个值不是预期类型、查询不到指定的路径等，代码不会轻易的挂掉，而是有它自己的一套措施。
1 函数一、函数默认参数妙用场景：假设我们又如下的初始化工作需要进行，在代码的最开始我们需要对config对象进行初始化工作function initConfig(config) { config.map((item) => { ...
js执行顺序
首先来看一道常见的面试题
12345678910111213141516171819202122232425262728293031323334353637383940async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script start');setTimeout(function() { console.log('setTimeout');}, 0)async1();new Promise(function(resolve) { console.log('promise1'); reso ...
有趣且实用的css技巧
打字效果代码实现：
123456789101112131415161718192021222324252627282930313233<div class="wrapper"> <div class="typing-demo"> 有趣且实用的 CSS 小技巧 </div></div>.wrapper { height: 100vh; display: flex; align-items: center; justify-content: center;}.typing-demo { width: 22ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; fo ...
浏览器重排、重绘机制
关于CSS重排和重绘的概念，在制作中考虑浏览器的性能，减少重排能够节省浏览器对其子元素及父类元素的重新渲染；避免过分的重绘也能节省浏览器性能；优化动画，使用3D启用GPU硬件加速；慎重选择高消耗的样式，如box-shadow、border-radius、transform、css filters等。浏览器的渲染机制浏览器渲染展示网页的过程，大致分为以下几个步骤：
HTML被HTML解析器解析成DOM 树css则被css解析器解析成CSSOM 树结合DOM树和CSSOM树，生成一棵渲染树(Render Tree)生成布局（flow），即将所有渲染树的所有节点进行平面合成将布局绘制（paint）在屏幕上
渲染：
网页生成的时候，至少会渲染一次。在用户访问的过程中，还会不断重新渲染
重新渲染需要重复之前的第四步(重新生成布局)+第五步(重新绘制)或者只有第五个步(重新绘制)。重排比重绘大：大，在这个语境里的意思是：谁能影响谁？
重绘：某些元素的外观被改变，例如：元素的填充颜色重排：重新生成布局，重新排列元素。
就如上面的概念一样，单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完 ...
前端模块化知识梳理
一、背景作为前端开发，模块化我们已经耳熟能详，我们平时接触到的 ES6 的 import，nodejs中的require他们有啥区别？我们也听过CommonJS、CMD、AMD、ES6模块系统，这些都有什么联系呢？本文将对这些问题进行归纳总结，可以对模块化有个清晰的认识。二、为何需要模块化？
起源最开始 js 是没有模块化的概念的，就是普通的脚本语言放到 script 标签里，做些简单的校验，代码量比较少。随着ajax的出现，前端可以请求数据了，做的事情变的更多了，逻辑越来越复杂，就会出现很多问题。
1 全局变量冲突因为大家的代码都在一个作用域，不同人定义的变量名可能重复，导致覆盖。var num = 1; // 一个人声明了…var num = 2; // 其他人又声明了
2 依赖关系管理麻烦比如我们引入了3个js文件，他们直接相互依赖，我们需要按照依赖关系从上到下排序。
如果文件有十多个，我们需要理清楚依赖关系再手动按顺序引入，会导致后续代码更加难以维护。
早期解决方案针对前面说的问题，其实也有一些响应的解决方案。
1 命名空间命名空间是将一组实体、变量、函数、对象封装在一个 ...
