25氪

原创 Webpack学习

一、webpack是什么核心概念webpack是一种前端资源构建工具，一个静态模块打包器。在webpack看来，前端所有资源文件（js/json/css/img/less）等都会作为模块处理他根据模块依赖关系进行静态分析，打包生成对应静态资源webpack 五个核心概念Entry入口指示，webpack以哪个文件为入口起点进行开始打包，分析构建依赖关系图Output输出指示，webpack打包后资源输出到哪里去，以及怎么命名Loader在module文件下，让webpack

原创 为什么绝对定位会重叠在一起

今天工作遇见一个bug，卡了很久，特此总结一下业务需求，需要在图片上，添加div模式按钮点击，切换图片和页面,我思路使用定位子绝父相实现然后：只可以看到一个盒子，其实有4个盒子，重叠起来了再看代码： <div class="tab-show" v-for="(item,index) in tabsCutList" :key="index"> <div class="btn" @click="tabShow=index">{{index}}</div

原创 双向数据绑定响应式原理乞丐版

vue1.0数据双向绑定乞丐版Object.definePropertyObject.defineProperty是js独有api，vue主要依赖他实现的mvvm模式;mvvm模式：m代表模型，v视图，vm就是视图模型；Object.defineProperty(obj, prop,object )obj是需要定义得当前得对象prop是当前需要定义属性名object是属性描述符一般对象赋值也可以删除修改，但是Object.defineProperty可以更加精准得控制对象object

原创 前端面试题

基础面试题DOM和BOMBOM是浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。DOM是文档对象模型，操作文档HTML的JS处理方式虚拟dom遍历真实dom找到指定dom，消耗资源，所以vue建立一个与dom树对应的虚拟dom对象，以对象嵌套方式表示dom树，dom更改，就变成对js对象属性增删改查.这样查找对象属性，要比查找dom树开销小。dom操作会引起浏览器回流重绘使得性能开销巨大。当尺寸、布局、隐藏、等等，改变了，引起重新构建，称为

原创 jQuery快速入门

一、 jQuery 对象和 DOM 对象转换// 1.DOM对象转换成jQuery对象，方法只有一种var box = document.getElementById('box'); // 获取DOM对象var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象// 2.jQuery 对象转换为 DOM 对象有两种方法：// 2.1 jQuery对象[索引值]var domObject1 = $('div')[0]// 2.2 jQuer

原创 正则表达式其实很简单

基础知识创建正则字面量创建使用//包裹的字面量创建方式是推荐的作法，但它不能在其中使用变量let hd = "houdunren.com";console.log(/u/.test(hd));//true使用 eval 转换为js语法来实现将变量解析到正则中let hd = "houdunren.com";let a = "u";console.log(eval(`/${a}/`).test(hd)); //true对象创建当正则需要动态创建时使用对象方式le

原创 git命令大全

原创 小程序笔记

‘一、跟普通开发不同点运行环境不同：网页浏览器，小程序微信环境API：运行环境不同，所以无法调用DOM和BOM得API，但是小程序可以调用微信环境API,如地理位置，扫码，支付开发模式不同：网页：浏览器和代码编辑器小程序：申请小程序账号，安装小程序开发者工具，创建配置小程序项目后台：https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1444414227二、小程序代码构成目录结构小程序页面在pa

原创 js对象学习

对象添加删除检测let Object ={}//添加Object.name=8Object['age']=3//删除delete Object.name//检测本身console.log(Object.hasOwnProperty('name')); //布尔值//数组对象检测本身加原型console.log('constructor' in Object); //布尔值计算属性给对象定义键名const lessons = [ { title:'任1务',

原创 栅格系统布局

声明容器选项说明display: grid;块级容器display: inline-grid;行级容器划分行列栅格有点类似表格，也 行 和 列。使用 grid-template-columns 规则可划分列数，使用 grid-template-rows 划分行数。重复设置使用 repeat 统一设置值，第一个参数为重复数量，第二个参数是重复值[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8Nxk6BA-1643395097830

原创 CSS3定位布局

定位类型利用position设置定位类型选项说明static默认形为，参考文档流relative相对定位，参照之前自己位置，当元素发生位置偏移时，原位置留白。absolute绝对定位，参照第一个有定位属性父元素，否词参照页面，不占用原先位置fixed固定定位，把元素固定到页面一个位置，不受滚动条影响sticky粘性定位，当滚动条元素到达一个位置会固定住，后面定位权重高位置偏移选项说明top距离顶边bottom

原创 CSS3浮动

浮动可以使用float进行定义选项说明left向左浮动right向右浮动none不浮动清除浮动CSS提供了 clear 规则用于清除元素浮动影响。选项说明left左边远离浮动元素right右连远离浮动元素both左右都远离浮动元素使用 ::after 伪类为父元素添加后标签，实现清除浮动影响。.clearfix::after { content: ""; display: block

原创 CSS3文本

字母转换小号大写字母span { /* 小号大写 */ font-variant: small-caps; /* 首字母大写 */ text-transform: capitalize; /* 全部大号大写 */ text-transform: uppercase; /* 全部小写 */ text-transform: lowercase; }...<span>houdunren.com</span>文字阴影

原创 CSS3权重

元素权重相同权重的规则应用最后出现的可以使用 !important 强制提升某个规则的权限权重计算规则粒度ID0100class，类属性值0010标签,伪元素0001*0000行内样式1000

原创 CSS 3选择器

结构选择器h1>h2 //h1的儿子h2h1+h2 //h1的兄弟h2，离他最近下面第一个兄弟 ,平级h1~h2 //h1的兄弟h2,下面所有兄弟，平级属性选择器h1[title]{ h1[title="hodunren"]{ color: yellow; === color: yellow; }

原创 ES6语义化标签

常用语义化标签标签说明标签说明header头部footer尾部nav导航article内容区域section相似组合块aside挂件，小部件，跟主内容无关附加的main主标签，出现一次time时间标签small声明标签，如限购一个sup上标2²sub下标H₄delins现价progress 进度条标签strong强调语义...

原创 弹性布局学习

一、弹性盒子容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。元素排列方向值描述flex-direction:row;从左到右水平排列元素（默认值）flex-direction:row-reverse;从右向左排列元素flex-direction:column;从上到下垂直排列元素flex-direction:column-reverse;从下到上垂直排列元素自适应换行

原创 css基础

1.常用属性line-height 设置行高为容器高度，可以让文本垂直居中 text-align:center; 文本水平居中 !important 权重display:inline 行盒 display:block 块盒 border-style:solid 盒子实线边框padding:bottom 盒子到内容底部距离 margin:bottom 盒子到盒子距离box-sizing:border-box 盒子宽高固定，设置内边距边框盒子不会变大overflow:hidden；腻出隐藏

原创 计算机与网络

1、计算机简介计算机诞生目的取代人力。就是人类奴隶。程序员是就是计算机硬件灵魂，硬件以外是软件。软件可以分为两大类：：操作系统：就是协调、管理、控制计算机硬件资源与高级应用软件资源得一个控制程序应用软件：app、网页操作流程图：2、项目开发流程PM(产品经理伪需求)——UE (页面交互)——UI(画页面)——FE前端(展示页面)——RD后端(数据)——QA(测试人员)——OP(运维人员系统架构)3、计算机分类个人 PC :台式机笔记本：断电有电池续命

原创 VUE中v-for更新检测

口诀：数组变更方法，就会导致 v-for 更新，页面更新数组非变更方法：返回新数组，就不会导致 v-for 更新，更新值检测不到可采用覆盖或者 this.$set()数组变更方法如下：1. arr.push()从后面添加元素 arr.push(5)2. arr.pop()从后面删除元素，只能是一个 arr.pop()3. arr.shift()从前面删除元素，只能删除一个 arr.shift()4. arr.unshift()从前面添加元素，返回值时添加完后数组长度 arr.

原创 数组遍历方法

reduce 求数组和语法： arr.reduce(function(prev,cur,index,arr){ ... }, init);回调里面有4个参数：prev 表示上一次调用回调时的返回值，或者初始值 init;cur 表示当前正在处理的数组元素；index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；arr 表示原数组；init 表示初始值。传入初始值不传初始值jquery 遍历数组只能运用于jq

原创 vue基本指令与脚手架基本配置

脚手架(@vue/cli)创建项目启动服务1、创建项目 vue create 项目名字2、启动项目进入项目根目录，运行以下命令 yarn serve3、脚手架目录代码分析 ├── node_modules # 项目依赖的第三方包 ├── public # 静态文件目录 ├── favicon.ico# 浏览器小图标 └── index.html # 单页面的html文件(网页浏览的是它) ├── src # 业务文件夹 ├── as

原创 导入导出、回调地狱、同异微宏任务

默认导入导出默认导出： export default {xxx}默认导入： import 接收名称 from '模块地址每个模块只允许默认导出一次按需导入导出 按需导出：export 导出的成员（let a = 10) 按需导入： import {多个接收名称} from '模块地址'每个模块可以按需导出多次as 关键字可以改名字（import {a as b} from '模块地址'）按需导入导出可以同时使用，导入方法不同import 默认导..

原创 中间件笔记

1.中间件概念所谓中间件，特指业务流程中间处理环节2.全局生效中间件客户端发起的的任何请求，到达服务器之后，都会触发的的中间件通过调用 app.use(中间件函数)，即可定一个全局中间件// 导入需要的模块 const express = require('express') const app = express() // // 定义一个简单中间件函数 // const kw = (req,res,next)=> { // console.lo

原创 jsonp和cors解决跨域

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧，不是很清楚的朋友可以去json.org上了解下，简单易懂。1.什么是跨域要了解跨域，先说说同源策略。同源策略是 Netscape 公司提出的一个著名的安全策略，所有支持 JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当页面在执行一个脚本时会检查所访问的资源是否同源，如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常。拒绝访问。2.

原创 MySQL数据库

一、数据库基本概念1.什么是数据库数据库是用来组织、存储和管理数据的仓库为了方便管理互联网世界中数据，就有了数据库管理系统的概念。用户可以对数据库进行新增、查询、更新、删除等操作。2.常见数据库及其分类常见数据库分类MySQL 数据库Oracle 数据库（收费）SQL Server 数据库（收费）Mongodb 数据库二、SQL 语句1、什么是SQLSQL 是结构化查询语言，专门用来访问和数据库的编程语言，能够以变成形式，操作数据库里面的数据。三个关键点：SQL

原创 手把手教你写hexo博客

市面上现在有各种博客框架，本博客教大家的是Hexo博客框架，目前比较火。搭建博客中遇到各种各样问题，网上方案也比较成熟。一、搭建环境安装 git安装 node.js安装 Hexonpm install hexo-cli -g // 安装命令hexo -v // 查看安装成功与否二、创建gitHub仓库注册gitHub账号仓库名字特定：账号名接上.github.io三、生成 ssh 密钥创建一个空的文件夹，打开命令栏，切换到文件夹路径，然后生成 ssh :ssh-keyg

原创 手把手教你在npm上发包

在做开发的时候我们都会从npm上下载别人开发好的包，来帮助我们提高工作效率。但你有没有想过自己将自己在工作遇见的一些问题封装成一个包，发布到npm让大家来使用。一. 首先把我们将准备发布的包准备好1. 初始化包的基础结构新建itheima-tools 文件夹，作为包的根目录 在itheima-tools 文件夹中，新建如下三个文件： package.json (包管理配置文件) index.js (包的入口文件) README.md (包的说明文档)2. 初...

原创 vue-基本使用（1）

@vue/cli 自定义配置项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js，在项目根目录手动创建module.exports = { devServer: { // 自定义服务配置 port: 3000, //端口号设置 open: true, // 自动打开浏览器 }, lintOnSave:false //关闭eslint，写代码出错，控制台不报错}插值表达式模板中使用

原创 vue-脚手架安装与安装失败解决方法

安装装包yarn global add @vue/cli创建项目vue create 项目名根据向导配置项目推荐选择默认配置 「Default ([Vue 2] babel, eslint)」以下是手动配置的演示? Please pick a preset: Manually select features # 选择手动? Check the features needed for your project: Choose Vue version, Babel, C

原创 yarn的基本命令

yarn的安装下载node.js，使用npm安装npm i -g yarn查看版本：yarn -Vyarn的常用命令初始化项目yarn init 与 npm init 一样通过交互式会话创建一个 package.json yarn init # yarn npm init # npm # 跳过会话，直接通过默认值生成 package.json yarn init --yes # 简写 -y npm init -y安装包y

原创 VUE-webpack

webpack基础使用1.初始化包环境，自动下载package.json配置文件yarn init2.安装依赖包，vue包yarn add webpack webpack-cli -D3.在package.json里配置4.根目录创建src目录，在src目录创建入口函数main.js文件5.根目录创建配置入口出口webpack.config.js6.填入配置项const path = require("path")module.exports = {

原创 ES模块化和异步编程高级

在node.js中体验es6模块化1.确保安装了node.js2.在package.json的跟节点中添加‘type’:"module"节点基本语法默认导入导出导出语法export default 关键字，每个模块只能使用一次export default 关键字import from 关键字 m1 是变量名 最后跟上路径当前文件模块为./m1.jslet a = 1let b = 2export default { a}------------------------

原创 jQuery基础

jQuery优点对事件、样式、动画支持，大大简化了DOM操作。 jQuery基本使用jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。 引入jQuery文件。 在文档最末尾插入 script 标签，书写体验代码。 jQuery入口函数// 第一种: 简单易用。$(function () { ... // 此处是页面 DOM 加载完成的入口}) ; // 第二种: 繁琐，但是也可以实现$(document).read

原创 Web API介绍

获取元素var nav = document.getElementById('nav'); // 这个获得id 属性var lis = document.getElementsByTagName('li')//这个获得li 元素var nav = document.getElementByClassName('nav'); 这个获得class 属性H5新增获取属性方法var li = document.querySelector('li')获取一个li元素querySelecto...

原创 js基础笔记

引入方式行内式：<input type="button" value="点我试试" onclick="alert('Hello World')" />内嵌式：<script> alert('Hello World~!');</script>外部js文件：<script src="my.js"></script>变量声明var a;变量赋值：var a = 105种简单数据类型1.数字型