前端
文章平均质量分 63
Zijeak
这个作者很懒,什么都没留下…
展开
-
Webpack学习笔记(二)
1.DevServer当我们使用webpack指令对资源进行打包后,若后续有修改或者新增、删除一些资源或代码,将要重新进行打包才获得最新的代码打包,从而可以在浏览器看到最新的效果。但这样做往往过于麻烦,devServer可以帮助我们解决这个问题,实现在不手动重新打包的情况下,自动打包(构建),实现“热部署”。1.1 安装devServernpm i webpack-dev-server -D1.2 配置webpack配置文件在webpack.config.js中定义一个devServer对象:原创 2021-12-13 15:56:44 · 507 阅读 · 1 评论 -
Webpack学习笔记(一)
1.基础1.1 什么是webpackwebpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。1.2 webpack的五个核心概念1.3 webpack初体验全局安装npm i webpack webpack-cli -g本地安装npm i webpack webp原创 2021-12-13 15:54:47 · 441 阅读 · 1 评论 -
mongodb远程连接出现connect ECONNREFUSED(连接被拒绝)错误的解决方法
情况一:MongoDB IP配置问题mongodb的配置文件中的bind_ip 默认为127.0.0.1,默认只有本机可以连接。 此时,需要将bind_ip配置为0.0.0.0,表示接受任何IP的连接原因:云服务器中安装MongoDB后(默认端口27017),默认绑定IP为 127.0.0.1 ,这就导致外部无法访问;解决方案: 修改mongod.config配置文件,添加 bind_ip=0.0.0.0 绑定公网IP;重启mongodb服务情况二:服务器安全组配置问题Mongodb的默认端口原创 2021-11-02 16:55:36 · 50686 阅读 · 3 评论 -
MVC和MVVM的区别
MVC是后端的分层开发概念(Model——数据的CRUD,View——前端页面,Controller——路由等控制器)。以Nodejs为例:MVVM是前端视图层概念,主要关注于MVC中View视图层的分离,也就是说,MVVM是MVC中V的展开。通俗来说,就是把前端的每个页面分成为M、V、VM三个部分。M:每个页面中单独的数据V:每个页面中的DOMVM:调度者,分割了M和V,每当V层想要获取或保存数据时,都要VM做中间处理。将MVC和MVVM放在一起整体看待:在vue中,我们使用这样的语法原创 2020-10-11 09:58:18 · 243 阅读 · 0 评论 -
ES6 Promise深度理解
1.Promise对象初探Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。promise.then(function(value) { // success}, function(error) { // failure});2.有关Promise、then的执行时机Promise 新建后就会立即执行。then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行。let promise = new Promise(f原创 2020-10-11 09:57:45 · 249 阅读 · 0 评论 -
CSS中的BFC详解:定义、触发方式及应用场景
文章目录1.什么是BFC?2.如何触发BFC?float不为noneposition不为relative和static(position的值为absolute或者fixed)overflow为auto、scroll和hidden(overflow的值不为visible)display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell。3.BFC可以解决什么问题?3.1 解决浮动元素令父元素高度坍塌的问题3.2 解决自适应布局原创 2020-09-29 12:10:22 · 1573 阅读 · 0 评论 -
Javascript函数柯里化及其应用场景
1.什么是柯里化柯里化,英语:Currying,是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。2.柯里化的用途参数复用看下面这个例子:function uri (protocol,hostname,pathname){ return `${protocol}${hostname}${pathname}`;}const uri1 = uri("https://","www.csdn.net","/blo原创 2020-09-29 10:48:38 · 3615 阅读 · 3 评论 -
原生Javascript手写call、apply和bind方法
文章目录1.Call1.1 回顾Call1.2 手写call调用call时不传其他参数调用call时传递其他参数2.Apply2.1 回顾Apply2.2 手写apply3.Bind3.1 回顾Bind3.2 手写bind1.Call1.1 回顾Callfunction person(){ console.log(this.name); if(arguments.length <=1 ) return; for(var i=0;i < arguments.lengt原创 2020-09-27 21:04:16 · 763 阅读 · 0 评论 -
Vue2.5学习笔记(九)使用Vuex
1.什么是Vuex?官方定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex和全局变量的区别Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可原创 2020-09-20 11:15:07 · 504 阅读 · 0 评论 -
2021秋招前端笔试题部分总结
1.下面这段程序输出什么?(function(a){ this.a = a; return b => this.a+b;}(function(a,b){ return a;}(1,2)))console.log(a,b);2.keydown和keyCodekeydown事件的event.keyCode是什么?keydown事件在按下键盘上任意键(文本框发生变化之前)被触发,且按住不放会重复触发,当按下的键是数字字母字符键是,它的keyCode属性值与ASCII原创 2020-09-17 11:37:04 · 1747 阅读 · 0 评论 -
Vue2.5学习笔记(七)使用Axios发起ajax请求获取数据
1.安装Axiosnpm intall axios2.引入import axios from 'axios'3.使用由于页面(页面也是一个组件)是由各个不同的功能组件组成的,例如下面这个页面:各个组件都有自己的数据需要从服务器请求,在请求Home页面时,可以让各个页面分别发起ajax请求,但这样下来一个页面将会发起多个请求,导致页面性能降低。因此,推荐一个页面仅由承载该页面的父组件发送一个ajax请求,再通过父组件给子组件传值的方式将数据传递给子组件。我们在父组件的mounted生命周原创 2020-09-13 22:20:15 · 276 阅读 · 0 评论 -
Vue2.5学习笔记(六)使用vue-awesome-swiper插件实现轮播图
1.安装插件地址:https://github.com/surmon-china/vue-awesome-swiper npm install swiper vue-awesome-swiper@2.6.7 --save2.原创 2020-09-12 14:08:17 · 242 阅读 · 0 评论 -
Vue2.5学习笔记(五)如何进行组件化开发?
第1步:新建组件文件HomeHeader.vue<template> <div class="header"> <div class="header-left"> <span class="iconfont"></span> </div> <div class="header-input"> &原创 2020-09-11 21:37:39 · 216 阅读 · 0 评论 -
Vue2.5学习笔记(四)Vue-cli脚手架入门
使用的脚手架版本为2.0+1.初始化项目vue init webpack projectname启动项目:npm run dev2.项目的目录结构config目录:dev.env.js 开发环境配置信息index.js 基本配置信息prod.js 生产环境配置信息3.Vue中的单文件组件在main.js中,声明了一个根组件并将其挂载在id的app的元素上。以往我们定义组件,会通过Vue.component()或者 var componentName = {}的形式定义原创 2020-09-11 21:15:26 · 358 阅读 · 0 评论 -
Vue2.5学习笔记(三)动画
1.Vue中CSS动画原理现有页面如下:通过按钮可以控制文字的隐藏和显示。现在的需求是:为文字的隐藏和显示添加渐隐渐现动画效果。Vue 提供了 transition 的封装组件,将需要应用过渡效果的组件包裹在transition内: <transition> <h1 v-if="show">Hello,World!</h1> </transition>动画原理: /* 渐显原创 2020-09-09 21:41:32 · 396 阅读 · 0 评论 -
Vue2.5学习笔记(二)深入了解组件
1.组件使用的细节1.2 子标签内使用组件假设想在表格便签内使用一个组件作为行,直接使用组件是不行的,原因在于tbody内只能放tr便签,否则浏览器就会将tbody内的标签解析到外面,从而导致结构的错乱。为了解决这个问题,我们可以使用is特性,将is特性设置为组件名称,这样既保证了tbody和tr之间的层级关系,也使用了组件。1.2 非根组件的data必须是一个函数一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。1.3 在Vue中操作DOM:使用ref原创 2020-09-08 14:57:16 · 4231 阅读 · 0 评论 -
Vue2.5学习笔记(一)基础部分
1.Vue实例我们通过new操作符创建Vue实例:var vm = new Vue({ el:"#app", data:{ }})这样创建出来的Vue实例是一个根组件(只有根组件有el属性),其他组件也都是Vue实例,Vue实例有它的实例属性和方法,均以$字符打头:vm.$elvm.$datavm.$destory()像以这样的方式创建的组件,也是Vue实例: // 全局组件 Vue.component("TodoItem",{原创 2020-09-07 11:17:12 · 544 阅读 · 0 评论 -
移动端Web开发(二)响应式布局
1、什么是响应式布局一个网站兼容多种终端,而不是为多个终端分别开发多个版本。对不同屏幕尺寸(大小)做出响应,并进行相应布局的一种移动Web开发方式。2、响应式布局的原理关键点:如何响应不同的屏幕尺寸——媒体查询在不同的断点下写不同的样式3、栅格系统栅格系统是响应式布局的一种实现方式。...原创 2020-09-03 22:57:48 · 601 阅读 · 0 评论 -
移动端Web开发(一)移动端开发的基本概念
1.物理像素物理像素(physical pixel)也叫设备像素(dp:device pixel),物理像素与设备相关,例如:19801080,10807202.CSS像素CSS像素又称逻辑像素(logical pixel)或设备独立像素(dip:device independent pixel),它与设备无关,是实际开发中使用的像素,例如200px,100px3.设备像素比设备像素比(dpr:device pixel ratio)dpr = 设备像素 / CSS像素(缩放比是1的情况下)原创 2020-09-01 11:18:47 · 1200 阅读 · 0 评论 -
ES6学习笔记
1.什么是ES6ECMAScript是Javascript的标准,js是ES的实现;主流实现只有jsES6的正式名称是ES2015,是ECMA标准的第6版2.变量(常量)var声明的缺点用var声明的变量可以重复声明。var a=1;var a=2;用var声明的变量难以控制修改var GIT_HOST = 'github.com'// 看似声明了一个常量,但实际是一个变量,可以被重新赋值块级作用域ES5 var 的作用域——函数级ES6 let 的作用域——块级(const也原创 2020-08-31 22:14:52 · 232 阅读 · 0 评论 -
Javascript中的事件循环机制(Event Loop)详解(4个步骤彻底搞懂)
步骤一:通过一段2分钟的视频动画进行初步了解:2分钟了解 JavaScript Event Loop(宝藏视频,必推~)步骤二:一篇博文,深入了解事件循环机制:js事件循环机制(浏览器端Event Loop) 以及async/await的理解步骤三:夯实基础,查漏补缺:Js 的事件循环(Event Loop)机制以及实例讲解步骤四:一道面试题,检测所学:console.log('script start')async function async1() { await async2()原创 2020-08-17 10:38:22 · 781 阅读 · 0 评论 -
vue-cli中的slot插槽
在项目根目录/components目录中定义带有插槽的组件插槽部分用slot标签标示<template> <div> <h1>插槽测试</h1> <slot> <!-- 引用此slot的地方,在slot标签内自定义的内容,将会自动被添加到此插槽内 --> <!-- 相当于在这里预留了一个DOM位置 --> </s原创 2020-07-27 11:18:32 · 904 阅读 · 1 评论 -
vue cli中的vue-router详解:四种跳转方式
文章目录Vue-router1.最基本的跳转2.带参数的基本跳转3.通过query来定义地址栏键值对参数4.通过js跳转Vue-router1.最基本的跳转<router-link to="/demo1">demo1:Hello,world</router-link>2.带参数的基本跳转<router-link v-bind:to="{name:'demo1',params:{userId:123}}">跳转到demo1穿参123</router-li原创 2020-07-27 09:36:42 · 3081 阅读 · 0 评论 -
javascript面向对象 学习笔记(五)模块
1.CommonJS(node环境的写法)circle.jsconst _radius = new WeakMap(); // 弱映射实际上就是字典,字典里面的键是对象,而值可以随意 // 之所以被叫做“弱映射”,是它的键很弱,一旦没有引用就会被垃圾回收机制回收。class Circle{ constructor(radius){ _radius.set(this,radius); } draw(){ console.log('circle原创 2020-07-27 08:55:52 · 124 阅读 · 0 评论 -
Sass学习笔记:从安装、基础语法到实现今日头条页面案例(一文到底)
1.什么是Sass“Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言!”Sass是一个CSS预处理工具Sass的工作流程:Sass能帮助我们解决什么问题?嵌套规则通过花括号的方式解决复杂的css父子样式嵌套问题变量规则通过变量将公共样式抽离,减少冗余css代码条件逻辑向高级语言一样编写逻辑性的css代码...原创 2020-07-25 23:45:09 · 567 阅读 · 0 评论 -
Vue学习笔记(二)网络应用
1.axios简介axios是一个功能强大的网络请求库GET请求格式:axios.get(url?key=value&key2=value2).then(function(response){},function(err){})POST请求格式:axios.post(url,参数对象).then(function(response){},function(err){})导入:<script src="https://unpkg.com/axios/dist/axios.min.js"&原创 2020-07-24 14:35:22 · 136 阅读 · 0 评论 -
Vue学习笔记(一)基础、本地应用
1、第一个Vue程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue</title> <script src="https://cdn.jsdeli原创 2020-07-24 10:59:10 · 247 阅读 · 0 评论 -
javascript面向对象 学习笔记(四)ES6中的类(Classes)
文章目录1、基本2、置顶(Hoisting)3、实例方法和静态方法4、深入讨论this关键字5、ES6环境下如何私有化属性5.1 方法一:使用Symbol5.2 使用WeanMap(弱映射)实现对象成员的私有化6、get和set方法7、继承8、方法重写9、练习:实现栈类1、基本之前,我们这样写对象:function Circle(raduis){ this.raduis = raduis; this.draw = function(){ console.log('dra原创 2020-07-23 15:58:34 · 442 阅读 · 0 评论 -
javascript面向对象学习笔记(三)原型继承和多态
1.一个简单的例子function Shape(){}function Circle(radius){ this.radius = radius;}Shape.prototype.duplicate = function(){ console.log('duplicate');}Circle.prototype.draw = function(){ console.log("draw");}const s = new Shape();const c = new原创 2020-07-23 14:06:16 · 190 阅读 · 0 评论 -
javascript面向对象 学习笔记(二)继承
文章目录1.原型链(继承链)2.属性描述3.构造方法的原型4.实例成员和原型对象成员5.枚举对象原型的成员javascript中只有对象而没有类,当我们只有对象的时候如何引入继承?在javascript中的每一个对象,除了一个特殊的,都有原型,它们都从原型继承所有的成员。1.原型链(继承链)当我们调用一个方法或属性,javascript引擎首先在这个对象里找目标,如果它找不到,它就会到对象的原型里找,如果还是找不到,它就会到原型的原型里找,一直往上找,直到找到或报错。2.属性描述let pe原创 2020-07-11 17:48:00 · 276 阅读 · 0 评论 -
javascript面向对象 学习笔记(一)对象
1.对象的创建1.1 对象创建语法const circle = { radius:1, location:{ x:1, y:1 }, draw:function(){ console.log("draw"); }};1.2 使用工厂函数创建对象function createCircle(radius){ return { radius, location:{原创 2020-07-11 15:39:52 · 244 阅读 · 0 评论 -
jQuery中的JSON和Ajax
1.什么是Ajax?Ajax全称Asynchronous JavaScript and XML(异步的JavaScript和XML)2.Ajax的优缺点优点:异步模式,提升用户体验减少不必要的数据传输Ajax引擎在客户端运行,成单率一部分本来有服务器承担的工作。缺点:不支持浏览器back按钮安全问题:Ajax暴露了与服务器交互的细节对搜索引擎的支持比较差3.XMLHt...原创 2020-05-06 19:05:30 · 712 阅读 · 0 评论 -
jQuery动画
1.自定义动画2.串行动画delay()方法可以实现动画暂停3.动画函数jQuery为我们封装了几种比较常见的动画。参数可以为fast、slow,默认为左上角收放元素整体的淡入淡出效果这样实现:4.计时器...原创 2020-05-06 09:32:24 · 146 阅读 · 0 评论 -
jQuery事件绑定
1.鼠标事件单击:click([[data],fn])双击:dblclick([[data],fn])$('.div).click(function(){ console.log("click");});注意:双击事件中必然会有单击事件鼠标按下:mousedown鼠标放开:mouseup...原创 2020-05-05 13:14:38 · 175 阅读 · 0 评论 -
使用jQuery实现密码强度校验实时显示
<!DOCTYPE html><html><head> <title>密码强度校验</title> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascri...原创 2020-03-31 11:29:10 · 485 阅读 · 0 评论 -
jQuery选择器详解
jQuery选择器返回jQuery对象,类似于数组,每个元素都是一个引用了DOM结点的对象。不会返回undefined或者null1.基本选择器1.1 id选择器$('#id')1.2 element标签名选择器$('div')1.3 class选择器$('.className')1.4 通配符选择器选择所有元素$('*')2.多项选择器$('selector1,...原创 2020-03-29 11:44:50 · 1269 阅读 · 0 评论 -
jQuery学习笔记(一)简介、作用、目的、兼容性、引入使用、书写格式、小案例
文章目录1 什么是jQuery?2.jQuery的作用3.jQuery的目的4.jQuery的版本和兼容性5.使用jQuery5.1 jQuery引入5.2 $符号5.3 jQuery的书写格式5.3.1 原始格式5.3.2 缩写格式5.3.3 原生格式6.一个小案例1 什么是jQuery?**jQuery是一个快速、小巧且功能丰富的Javascript库。**它使得HTML文档的遍历和操作、...原创 2020-03-26 16:07:25 · 556 阅读 · 0 评论 -
Javascript中的面向对象
文章目录1.概述2.名词解释**闭包:**3.声明对象3.1 JS字面式声明对象3.2 new操作符3.3 JS中工厂方式声明对象3.4 JS中原型模式声明对象3.5 JS中混合模式声明对象4.遍历对象的属性5.封装1.概述面向对象:对代码的一种抽象,对外统一提供调用接口的编程思想。2.名词解释属性:事物的特性方法:事物的功能对象:事物的一个实例原型:JS函数中有prototype属...原创 2020-03-23 16:47:23 · 189 阅读 · 0 评论 -
Javascript学习笔记:函数的三种定义方式
函数的三种定义方式<script> function add(num1){ //body } var add = function(){ //body }; var add = new Function('num1','num2','return num1+num2');</script>函数的预解析function方式:声明提前,预解析时就会声...原创 2020-02-29 15:36:10 · 179 阅读 · 0 评论 -
Javascript学习笔记:变量、作用域、内存、预解析、垃圾收集
文章目录1.变量2.作用域2.1 全局作用域2.2 局部作用域:函数作用域2.3 作用域链2.4 延长作用域链2.5 JS解析机制:预解析3. JS垃圾收集机制1.变量基本类型:数字、字符串、布尔值、undefined、null引用类型:[数组]、{对象}区别:基本类型的值不能修改(可以通过覆盖的形式进行变更),引用类型的值可以修改(可以改变其本身的值)基本类型为什么可以调用方法?类似于...原创 2020-02-29 11:33:32 · 207 阅读 · 0 评论