梦志博

基本使用Webpack 是一个静态资源打包工具。 它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。 输出的文件就是编译好的文件，就可以在浏览器段运行了。 我们将 Webpack 输出的文件叫做 bundle。 功能介绍Webpack 本身功能是有限的: 开发模式：仅能编译 JS 中的 ES Module 语法 生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码 开始使用资源目录123456webpack_code # 项目根目录（所有指令必须在这个目录运行） └── src # 项目源码目录 ├── js # js文件目录 │ ├── count.js │ └── sum.js └── main.js # 项目主文件 创建文件 count.js 123export default function count(x, y) { return x - y;} sum.js 123export default funct ...

网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 123.box{display: flex;} 行内元素也可以使用 Flex 布局。 123.box{display: inline-flex;} Webkit 内核的浏览器，必须加上-webkit前缀。 1234.box{display: -webkit-flex; /* Safari */display: flex;} 注意，设为 Flex 布局以后，子元素的f ...

简介Grid布局是css布局当中一种非常强大的布局方式，他是一个二维系统，通过处理行和列来实现布局方式。主要涉及的概念有网格容器、网格项、网格线、网格单元、网格轨迹、网格区域等。 用法网格容器只需要将display属性定义成grid或者inline-grid就可以了，然后通过grid-template-columns: ...| ...;和grid-template-row: ...| ...;来定义网格的列和行，他们的取值就是网格轨迹的大小。 1.1.0 display 属性123// 开启 grid 网格布局display: grid;display: inline-grid; 注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align 和 column-*等设置都将失效。 1.2.0 grid-template-columns 属性，grid-template-rows 属性容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定 ...

什么是响应式数据？先说一下什么是响应式数据，简单来说就是就是可以监测的数据，在读取和设置的时候可以通过劫持他来做一些其他 的事情，数据响应式和视图的更新其实是没有关系的，响应式数据是一种机制，在机制执行的时候，视图更新只是一种操作表现，想要实现数据的响应式方法也是不是唯一的，vue2和vue3使用的方法都有所不同。 vue2的响应式原理vue2实现响应式的原理是通过Object.defineProperty，通过劫持对象的属性，遍历data中的所有数据，这种方法对于数组来说不是特别友善，而且在之后添加的数据就不是响应式的啦，当然可以通过set()方法来添加实现响应式。 12345678910111213141516171819202122// 模拟Vue中的data选项let data = { msg: 'hello world'}// 模拟Vue的实例let vm = {}// 数据劫持：当访问或者设置vm中的成员时，做一些劫持后操作Object.defineProperty(vm, 'msg', &# ...

arr.join() - 连接元素转字符串 原数组不变 回调函数参数：separator元素之间连接符号，默认为逗号 将数组内的所有元素连接在一起转化为字符串，并返回这个字符串。 1234const originalArr = [1, 2, 3, 4, 5]originalArr.join() // 返回“1,2,3,4,5”originalArr.join('-') // 返回“1-2-3-4-5” arr.sort() - 数组排序 会改变原数组 回调函数参数：sortfunction规定排序顺序。必须是函数。 将数组中的每个元素按一定条件排序后并返回排序后的新数组，排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。 123456const originalArr =["Banana","Orange","Apple","Mango"]originalArr.sort() // 返回[Apple,Banana,Mango,Orange]const points ...

在实际开发当中，ES6能在开发当中可以让代码可读性变强，让代码量也减少很多，ECMAScript 6（简称 ES6）是 JavaScript 语言的下一代标准，在 2015 年 6 月正式发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 取值1234567const obj = { a:1, b:2, c:3, d:4, e:5,} 需求：将obj的值分别取出 以前的取值方式： 12345const a = obj.a;const b = obj.b;const c = obj.c;const d = obj.d;const e = obj.e; es6之后的取值： 12const {a,b,c,d,e} = obj; 如果想创建的变量名和对象的属性名不一致，可以这么写： 1const {a:a1} = obj; 数据合并123456789const a = [1,2,3];const b = [1,5,6];const obj1 =  ...

javaScript的函数劫持基本概念函数劫持就是在函数运行之前将函数劫持下来，然后添一些自己的功能。他主要的步骤如下： 使用一个新的变量保存原始函数 在新函数里边添加我们自己的功能 在新函数里边调用原始函数(保存在变量里边的函数) 劫持的概念其实很广泛的，我们也能经常看到网络劫持的例子，经常可以看到网站被运营商劫持，浏览器上边就会显示出运营商所要展示的内容，而不是我们自己的内容。 举例分析123456789101112131415161718// 原始函数var saveLog = function (log) { console.log(`我保存了日志：${log}`);}// 1-保存原有函数var originSaveLog = saveLog;// 2-改写原有函数saveLog = function () { const args = Array.prototype.slice.call(arguments); // 3-在改写后的函数中执行原有函数的逻辑 originSaveLog.apply(null, ar ...

一、介绍Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库，有助于更好地组织管理样式文件，以及更高效地开发项目。下面是对sass学习的记录笔记，篇幅有点长，请耐心阅读。 特色功能： 完全兼容 CSS3 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能 通过函数进行颜色值与属性值的运算 提供控制指令 (control directives)等高级功能 自定义输出格式 二、安装NPM安装12PLAINTEXTnpm i -g sass windows安装我们可以使用 Windows 的包管理器 Chocolatey 来安装： 12PLAINTEXTchoco install sass Mac OS X (Homebrew)安装Mac OS 可以使用 Homebrew 包管理器来安装： 12PLAINTEXTbre ...

git的团队协作是真的不错，通过远程仓库可以实现团队共用一套代码，实现资源的节约。git的团队协作也非常的简单，下面教程是通过github平台演示，其他平台也都差不多。 创建远程仓库登录github账号，创建一个仓库 填写仓库信息 创建远程仓库别名123456// 创建别名git remote add 别名 仓库地址// 查看别名git remote -v// 删除别名git remote rm 别名 远程仓库地址 推送本地分支到远程仓库1git push 别名 分支 克隆远程仓库到本地1git clone 远程地址 邀请加入团队选择团队成员按照图中步骤操作 输入成员的名称 找到成员，点击邀请复制地址通过其他通讯方式将链接发给团队成员 复制内容如下:https://github.com/仓库创建者名称/仓库名称/invitations 成员进入地址，选择接受邀请 成功之后就会在成员的仓库中出现该仓库，成员就可以修改并提交到该仓库 拉取远程仓库1git pull 远程仓库地址或别名 仓库分支 做完这些内容之后，团队协作就基本上可以了，在每次提交代码之前尽量先拉取一下最新的代 ...

git使用教程git不仅仅是前端使用的工具，后端也经常使用，很多公司都是团队开发，团队开发当然肯定选择git，关于git的使用也非常的简单，这篇文章讲述git的基本使用，针对git的团队开发以及跨团队开发将会在后面的文章仔细的讲解。 git安装 git下载 官网地址： https://git-scm.com 阅读协议，直接点下一步 选择安装路径，要求安装路径非中文，并且尽量不要有中文 git选项设置，没有特殊要求直接选择默认就好 git的环境变量推荐选择第一个，不选择修改环境变量，只在git bush里使用 其他选择默认配置即可。 设置用户签名1git config --global user.name 用户名git config --global user.email 邮箱 说明：签名的作用是区分不同操作者身份。用户的签名信息在每一个版本的提交信息中能够看到，以此确认本次提交是谁做的。Git 首次安装必须设置一下用户签名，否则无法提交代码。 注意：这里设置用户签名和将来登录 GitHub（或其他代码托管中心）的账号没有任何关系。 基本操作1.初始化本地仓库1git i ...