- 博客(44)
- 收藏
- 关注
RSS订阅原创 MVC和MVVM的区别
MVC(model、view、controller)——后端的分层开发概念MVVM——是前端视图层的概念，主要关注与视图层分离，分为三部分（Model、View、ViewModel），其中VM是此思想的核心。...
2019-11-15 18:45:24
213
原创 关于修复bug的思考
前言程序员最讨厌康熙的哪个儿子？答：八阿哥。日常开发中我们总会遇到一些莫名其妙的bug，不同的岗位对待bug的态度也是不同的。那如何减少和调试bug?前期避免：1.开发之前，就要先设计，理清好思路；哪些组件或者页面可以抽离出来作为一个通用组件，或者通用模块，便于后期的修改和维护；2.开发完成一个功能就要进行自测，多点击测试几遍；3.开发时需要考虑多种情况，编码过程中不能只考虑到...
2019-11-10 21:27:52
685
原创 前端菜鸟踩坑之路
vue项目中使用elementUI所出现的问题1.el-button里慎用其他标签如下图所示，在el-button里嵌套了a标签：<el-button><a href=“http://www.baidu.com">继续下载加固包</a></el-button>bug:红色框为按钮大小，灰色框为a标签所在区域。这是如果点击蓝色区域所在位...
2019-11-01 11:48:38
462
原创 React-Hooks规则及用法
使用规则1.只在顶层调用Hook不要在循环，条件或者嵌套函数中调用Hook。要在React函数的顶层使用Hooks。只要遵循这个规则，就可以确保每次组件渲染时都已相同的顺序调用Hook。这就是允许React在多个useState和ussEffect调用之间能正确保留Hook的原因。**解释：**我们可以在单个组件中使用多个State或Effect Hook，...
2019-08-13 18:18:53
646
原创 工作中遇到的问题
React项目中1.启动项目时出现错误，原来是webpack版本的问题；解决办法：删除之前的webpack版本npm uninstall webpack -g;同时删除项目总的node_modules；下载与错误提示中版本符合的webpack：npm install [email protected] -g；最后重新npm install;2.项目启动后取不到图片资源和其他数据...
2019-07-16 09:31:40
149
原创 2019最新前端面试题合集（理论篇）
1.如何理解闭包——定义：当一个函数的返回值是另一个函数，并且这个函数调用了其父函数内部的其他变量并在外部执行，就产生了闭包。——表现形式：使函数外部能够调用函数内部的变量。——使用闭包的注意点：（1）滥用闭包会造成内存泄漏：由于闭包会使得函数中的变量都保存在内存中，内存消耗很大，不能滥用，否则会造成网页性能问题。解决方法是在退出函数之前，将不使用的局部变量全部删除。（2）会改变父函数内...
2019-06-19 21:09:50
1064
原创 跨域问题及其解决方案
什么是跨域？——浏览器从一个域名的网页请求另一个域名下的东西，域名、端口、协议其一不同就是不同的域，请求资源就需要跨域。为什么要跨域？——因为浏览器有限制，即浏览器的同源策略限制，是一种约定，是浏览器最基本最核心的安全功能。同源即域名、端口、协议都相同，是为了保护用户的上网安全来设置的。——如果浏览器没有同源策略，会存在什么样的安全问题呢。下面从 DOM 同源策略和 XMLHttpRequ...
2019-06-17 15:56:15
157
原创 JS中的排序算法题
冒泡排序var arr1 = [3,1,6,2,9,1,20,34]; function sort(arr){ for(var i = 0 ; i < arr.length; i++){//循环几趟 for(var j = 0 ; j < arr.length-i ; j++){//每趟循环几次 ...
2019-06-17 10:10:06
280
原创 TCP协议/IP协议共有几层？分别有什么作用？
TCP/IP协议组包含了很多功能各异的子协议。为此我们也利用上文所述的分层的方式来剖析它的结构。TCP/IP层次模型共分为四层：应用层、传输层、网络层、数据链路层。TCP/IP网络协议——TCP/IP(Transmission Control Protocol/Internet Protocol，传输控制协议/网间网协议)是目前世界上应用最为广泛的协议，它的流行与Internet的迅猛发展密切...
2019-06-16 16:08:09
40892
原创 Redux
1.Redux概念——Redux把所有数据存储在store里进行管理，一个组件改变了store数据里的内容，其他的组件感知到store的变化，再来取数据，这样就实现了一个组件之间数据传递的功能2.使用Antd实现ToList布局import React,{Component,Fragment} from 'react';import 'antd/dist/antd.css';import...
2019-05-22 22:21:30
125
原创 React实现CSS过渡动画
1.简单的过渡动画效果import React,{Component,Fragment} from 'react';import './App.css';class App extends Component{ constructor(){ super() this.state={ show:true } this.handleClick = ...
2019-05-22 17:37:12
1135
原创 React语法及使用
1.使用React渲染一个最基本的页面//1.导入import React from "react";//创建组件、虚拟DOM元素，生命周期import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上去展示的//2.创建虚拟DOM元素//参数1：创建的元素的类型//参数2：是一个对象或null,表示当前这个DOM元素的属性//参数3：子...
2019-05-17 20:10:07
264
原创 创建一个webpcack4.x项目
1.新建一个文件夹2.运行npm init -y 快速初始化项目（package.json）3.在项目根目录创建src源代码目录和dist产品目录4.在src目录下创建index.html5.使用cnpm 安装webpack,运行cnpm i webpack-cli -D6.建立如下目录（在webpack4.x中，有一个特性，约定大于配置，即默认的打包入口路径是Index.js,打包的...
2019-05-17 18:41:29
155
原创 React中的虚拟DOM和DIff算法
虚拟DOM——是框架中的概念，是程序员用JS对象来模拟页面上的DOM和DOM嵌套，是为了实现DOM元素的高效更新——实现页面的按需更新（获取到页面中新旧两个DOM树，进行对比，获取需要更新的DOM元素）——获取新旧新旧DOM树（需要程序员手动模拟）——DOM是浏览器上提供的概念，用JS对象表示页面上的元素，并提供了操作元素的APIDiff算法——**tree diff:**将新旧两棵D...
2019-05-17 16:22:01
175
原创 React基本概念
1.React简介——起源于Facebook的内部项目，在2013年5月开源了，性能出众，代码逻辑简单；——清楚两个概念library（库）:小而巧，只提供了特定的API，可以很方便的从一个库切换到另外的库，但是代码几乎不会改变Framework（框架）：大而全，提供了一整套的解决方案，所以如果在项目中间想切换到另外的框架是比较困难的2.React和Vue的对比组件化方面——什么是模...
2019-05-16 09:56:39
127
原创 Github使用
基本概念仓库（repository）：即你的项目，你想在GitHub 上开源一个项目，那就必须新建一个respository.收藏（star）：收藏项目复制克隆项目（fork）:如果你想在别人项目的基础上进行改动，就可以fork他的项目，然后进行改动，且不会影响原有项目的代码和结构发起请求（Pull Request）：如果别人在你的基础上进行了改进，他觉得改的还不错，就会发起请求，你查看后...
2019-05-16 09:12:18
139
原创 Sass
如何将sass编译成css?在命令提示符输入如下命令：C:\Users\Administrator\Desktop\hellonode\ninghao-sass> sass sass/first.scss:css/first.css自动编译Sass//正在监视变化C:\Users\Administrator\Desktop\hellonode\ninghao-sass>...
2019-05-05 21:54:16
238
原创 Cookie
cookie客户端的会话跟踪技术作用：将网页中的数据保存到浏览器中注意点:（1）默认不会保存任何数据（2）cookie不能一次性设置多条数据，只能一条一条设置（3）cookie有大小（4kb左右）和个数（20到50个）的限制（4）cookie作用范围：只能在同一浏览器的同一个路径下访问，如果在同一浏览器中，默认情况下下一级路径也可以访问如果想要上一级也能访问，可以添加path:/（保...
2019-05-04 20:36:45
160
原创 Ajax练习
前端代码必须在服务器环境下运行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
2019-05-04 19:18:32
513
原创 Ajax-GET和POST使用
什么是Ajax?AJAX是在不需要重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术如何使用Ajax？<body> <button>提交</button> <script> window.onload = function(){ var oBtn = document.querySe...
2019-05-03 18:12:55
319
原创 Ajax中GET和POST
get请求处理表单提交数据 <form action="http://www.baidu.com" method="GET"> <input type="text" name="userName"><br> <input type="password" name="userPwd"><br> ...
2019-05-03 15:43:07
401
原创 PHP基础语法
PHP基础语法<?php//1.定义变量$num = 10;//2.打印内容echo $num;//注意点：后端编写的代码不能直接运行，只能放到服务器对应的文件夹下，通过服务器运行，即通过ip地址找到服务器对应的文件夹，然后再找到对应的文件运行。//3.定义数组$arr = array(1,3,5);//打印数组print_r($arr);//取出数组中的元素ec...
2019-05-03 13:51:57
120
原创 Node中的Buffer缓冲区和fs文件系统
Buffer（缓冲区）:在数据传输过程中缓冲数据的结构和操作的方法和数组类似，但是数组中不能存储二进制的文件，而buffer就是用来存储二进制的数据的。使用buffer不需要引入模块，直接使用即可。在buffer中存储的都是二进制数据，但是显示时都是以16进制的形式显示的，每一个元素的范围是00 – ff。只要是在页面或者控制台输出，一定是十进制。 var str = 'Hello xi...
2019-05-01 21:01:37
1066
原创 Node基础知识
CMD命令dir:列出当前目录下所有文件cd后跟目录名，进入到指定的目录md后跟目录名，创建一个文件夹rd后跟目录名，删除一个文件夹目录**.**表示当前目录**…**表示上一级目录环境当我们在命令行窗口打开一个文件，或者调用一个程序时，系统会首先在当前目录下寻找文件程序，如果找到了则直接打开如果没有找到则会依次到环境变量path的路径中寻找，直到找到为止，如果没找到，则报错...
2019-04-29 19:37:47
183
原创 ES6中Proxy的使用
Proxy：代理作用：预警、上报、扩展功能、统计、增强对象等等是设计模式的一种，代理模式语法： new Proxy(target,handler) //target:被代理的对象 //handler:对代理的对象做什么操作handler:{set(){};//设置的时候干的事情get(){};//获取的时候干的事情deleteProp...
2019-04-28 18:54:34
515
原创 Number新增的方法和Math新增方法
NumberNumber.isNaN():是不是非数字Number.isFinite():判断是不是数字**Number.isinteger()**判断数字是不是整数Number.isSafeInteger():判断数字是不是安全整数安全整数：-（2的53次方-1）到（2的53次方）；MathMath.trunc() 截取，只会保留整数部分Math.sign() 判断一个数是正数（...
2019-04-27 18:56:31
217
原创 ES6中Set和Map
Set(数据结构):类似于数组，但里面不能有重复值存储数组用法：let setArr = new Set(['a','b','c'])setArr.add(‘d’):向setArr里面添加d;setArr.delete(‘d’):删除d;setArr.has(‘a’):怕短setArr里面有没有此值，返回true或false;setArr.size:判断个数setArr.clear(...
2019-04-27 17:31:20
130
原创 ES6中的async、await
语法async function fn(){//表示异步，这个函数里面有异步任务 let result = await xxx;//表示后面的结果需要等待，await只能放在async函数中 }注意：（1）await后面可以是promise对象，也可以是数字，字符串，布尔（2）async函数返回是一个promise对象（3）只要await语句后面Pr...
2019-04-27 16:52:50
184
原创 ES6中的symbol和geerator
symbol是一种数据类型语法：let sym = Symbol('aaa');注意：1.不能使用new2.Symbol()返回一个唯一值3.symbol是一种单独的基本数据类型4.如果symbol作为key,用for in 循环无法打印出这个key值（因为它可以用来定义一些唯一或私有的东西）generator函数作用： 解决异步问题和深度嵌套语法： //定义 fun...
2019-04-27 15:56:27
148
原创 ES6中的类（class）和继承
类（class）语法形式 class Person{ constructor(name,age){//构造方法（函数），调用new之后会自动执行 this.name = name; this.age = age; } showName(){ return `名字为：${this.name}`;...
2019-04-27 12:24:00
199
原创 ES6模块化
import作用：引入模块例如：import './plugin/1.js'这么用相当于引入一个文件import{a}from '/plugin/1.js'//意思是从此模块中导入a变量注意：1.import可以是相对路径，也可以是绝对路径2.import模块只会导入一次，无论引入多少次3.import有提升效果，会自动提升到顶部，首先执行4.导出去的模块，如果里面有定时器更改，外...
2019-04-26 18:02:45
126
原创 Promise
Promise作用：解决异步回调问题传统方式：大部分用回调函数，事件语法： let a = 10; let promise = new Promise(function(resolve,reject){ //resolve 成功时调用 //reject 失败时调用 if(a == 10){ resolve...
2019-04-26 12:37:24
129
原创 对象简洁语法及对象新增
对象简洁语法 let name = 'yang'; let age = 18; let json = { name,//name:name age,//age：age /* showA: function(){ return this....
2019-04-26 10:49:04
136
原创 数组新增东西
Array.from()作用：把类数组转为数组function demo(){ console.log(arguments);//Arguments(5) [3, 6, 7, 4, 8] console.log(Array.from(arguments));//Array(5) [3, 6, 7, 4, 8] ...
2019-04-25 19:09:08
280
原创 数组的循环
arr.forEach()代替普通的for循环可接收两个参数，（循环回调函数，this指向谁） let arr = ['apple','orange','bananer','tomato']; arr.forEach(function(val,index,arr){ console.log(val,index,arr);//值，索引，原数组 ...
2019-04-25 18:15:58
192
原创 函数默认参数、箭头函数
函数可以给默认参数 function show(a = '默认', b = '系统'){ //不传参数时显示的值 console.log(a,b); } show('hello'); // hello 系统函数参数默认已经定义了，不能再用let,const声明了 //以下程序报错 ...
2019-04-25 11:49:51
505
原创 字符串模板及字符串新增
字符串模板 let name = 'yanglan'; let age = 18; let str = `这个人名字叫做${name},今年${age}岁了`; console.log(str);//这个人名字叫做yanglan,今年18岁了优点：可以随意换行字符串查找let str = 'apple banana pear'...
2019-04-24 19:49:19
132
原创 原型继承（圣杯模式）
原型继承（圣杯模式）function inherit(Target,Origin){function F(){};//中间层 F.prototype = Origin.prototype; Target.prototype = new F(); Target.prototype.constuctor = Target; T...
2019-04-24 17:44:09
267
原创 事件封装
事件绑定封装function addEvent(elem,type,handle){ if(elem.addEventListener){ elem.addEventListener(type,handle,false); }else if(elem.attachEvent){ ele...
2019-04-24 17:43:44
343
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人