- 博客(87)
- 收藏
- 关注
RSS订阅原创 制作自己的ui组件库
制作一个类似antd的ui组件库并发布到npm上1.注册一个npm账号 官网 https://www.npmjs.com/signup2.使用webpack babelrc搭建一个框架Webpack 主要时进行开发时的热加载 配置 css-loader file-loaderbabelrc主要是配置“presets”:[“@babel/preset-env”,“@babel/preset-react”],进行一个预加载 使得js能运行最新的编程语法3.搭好框架后进行代码的编写暂时做了一
2020-11-29 22:55:42
1089
1
原创 对象和数组的解构，rest操作符
1.数组的解构赋值let [a,b,c]=[1,2,3];let [foo,[[bar],baz]]=[1,[[2],3]];foo //1bar //2baz //3let [ , , third]=["foo","bar","baz"];thrid //"baz"let [x, , y]=[1,2,3];x//1y//3let[head, ...tail]=[1,2,3,4];head //1tail //[2,3,4]let[x,y, ...z]=['a'];x//'
2020-09-28 14:59:29
335
原创 块级作用域，模板字符串
1.let(1):let用来声明变量，其用法类似于var,但是其所声明的变量，只在let命令所在的代码块内有效(2):let所声明的变量不存在变量提升现象，即声明的变量一定要在声明后使用，否则报错。(3):暂时性死区只要块级作用域内存在let命令，其所声明的变量就“绑定”在这个区域，不再受外界影响var a=1;if(true){a='qwe';//ReferenceErrorlet a:}在上面代码中，a为全局变量var定义，但是在块级作用域中，将a以局部变量let定义，故而，在le
2020-09-27 16:08:19
227
原创 vue+node.js+moogodb仿王者荣耀移动端项目一
一web端首页页面二，新闻资讯详情页面三，admin后台管理界面四，项目目录admin目录view目录web目录serve目录一，web端创建首先创建vue.app中的内容<template> <div id="app"> <router-view/> </div></template...
2019-09-05 23:16:34
1003
原创 仿bilibili微信小程序3
七，视频播放页面1.app.json引入detail目录 "pages": [ "pages/index/index", "pages/detail/detail", "components/MyTitle/MyTitle" ],2.引入头部 <MyTitle></MyTitle>3.引入video <view class...
2019-09-05 20:22:32
1253
原创 仿bilibili微信小程序2
轮播图wxml<view class="slides"> <swiper autoplay indicator-dots circular> <swiper-item wx:for="{{swiperList}}" wx:key="{{index}}"> <navigator> <!--Widthfix 宽度不...
2019-09-04 00:07:08
640
原创 仿bilibili微信小程序一
一，项目目录一，页面效果1.首页2，视频播放页三，首页头部公众部分的制作在component目录下的myTitle中wxml<!--components/MyTitle/MyTitle.wxml--><view class="mytitle"> <!-- logo --> <navigator class="logo"...
2019-09-04 00:00:55
1915
4
原创 数据双向绑定与虚拟dom原理
一，数据双向绑定view的变化反映到ViewModel,ViewModel变化同步反映到view上原理：vue数据双向绑定是通过数据劫持，结合发布者-订阅者模式方式实现的二，虚拟DOM原理虚拟dom是为了解决DOM操作过多而导致性能低的问题，直接操作dom,改一次渲染一次，而虚拟dom是用js模拟一棵dom树，每次修改dom，先把虚拟dom修改，最后再一次性把虚拟dom更新，提高性能虚...
2019-09-03 23:19:17
1867
原创 MVVM
MVVMModel 指数据部分，jsview 试图部分 domviewmodel :连接视图与数据部分的中间件通讯view与model不能直接通信，通过viewmodel实现双向通信
2019-09-03 23:08:58
166
原创 nextTick用法与vue常用基础指令
一，nextTick用法当操作数据发生改变，并不会立即执行更新dom操作，而是等事件所有数据都改变才执行操作，故更新一个数据后立即对该数据绑定dom操作可能得不到想要的结果 故使用nextTick解决这种问题例//修改数据vm.msg="hello"Vue.nextTick(function(){//dom更新，此时提供dom有效}）二，vue常用基础指令v-if v-else...
2019-09-03 23:05:58
259
原创 实现一个自定义组件，不同组件间如何通信的？
例:全局组件<body><div id="app"><my-comonpent></my-compinent></div><template id="myTemplate"><div><h3>123</h3></div></template><...
2019-09-03 22:52:38
399
原创 web socket
使用js建立与远程服务器连接，从而允许远程服务器将数据推送给浏览器，websocket使用基于TCP的socket链接，使用websocket后，服务器端与浏览器建立一个socket链接，可以进行一个双向数据传输send();向远程服务器发送数据colse()关闭websocket例var websocket=new websocket("www://127.0.0.1:8000/s/s"...
2019-09-03 22:32:49
242
原创 前端CSRF XSS
一，XSS跨站脚本攻击向有xss漏洞的网站中输入恶意的HTML代码当其他用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击目的理论上，所有可输入的地方，没有对输入数据进行处理都有xss漏洞xss方法编码：对用户输入数据进行HTML 编码过滤：移除用户输入和事件相关的属性校正：避免直接对HTML进行解码，使用DOM Parse转换，校正不配对的DOM标签二，CSRF:...
2019-09-03 22:18:13
199
原创 跨域
跨域指从一个域名网页去请求另一个域名的资源限制跨域访问原因1.安全例如：用户访问网站A，cookie放在浏览器中，用户访问网站B,网站B获取网站A的cookie对网站A发起访问。为什么要跨域可以实现同一个团体内，不同子域间相互访问实现跨域方法Nginx代理A与B应用都通过一个统一地址转发例server{listen 80server-name www,123,top;...
2019-09-03 22:08:12
898
原创 Ajax与Axios
ajax是对原生xhr封装，除此之外还增添了对于JSONP支持例；$.ajax({type:"post",url:url路径data:datadataType:dataType;success:function(data){ console.log(data) } error:function(){} });原生xhr请求var xhr=new XMLHTTPRequ...
2019-09-03 21:47:03
676
原创 GET与POST区别
1.get用来从服务端获取数据，POST用于上传或修改数据2.GET大小限制在2kb以内，POST一般没有限制3.get参数在url,post参数在请求主体中，安全性能post高4，使用XMLHTTPReauest是post需要显示请求头5，get不能保证每次都发送到服务器上，post可以保证。...
2019-09-03 19:03:29
154
原创 计算机网络协议层次划分
网络协议是计算机网络中进行数据交换而建立的规则，将所有的层次的协议集合起来就是协议栈TCP/IP:应用层–>传输层–>网络层–>网络接口层TCP/IP5:应用层–>传输层–>网络层–>{数据链路层–>物理层}OSI:{应用层–>表示层–>会话层}–>传输层–>网络层–>{数据链路层–>物理层}...
2019-09-03 18:51:15
1074
原创 CDN
CDN又叫内容分发网络，即让每个地区访问更近一点的网络结点，此节点为CDN节点1.若cdn节点上没有想要的数据，那么该节点就会从dns源站上获取数据，然后在该节点上保存数据缓存。2.若该地区有多个cdn节点，则按负载来判断访问那个cdn节点目前cdn提供商有 阿里云 青牛cdn框架一个智能dns加上若干个cdn节点好处1.访问速度提高2，减轻源站web服务器压力3，使别人无法知道...
2019-09-03 18:44:41
176
原创 DNS解析
DNS层次化，分布式域名系统，提供将域名转化为ip服务加载网页涉及4个DNS服务器，1.DNS recursor:一个服务器，旨在通过web浏览器等应用程序，从客户端计算机接受查询2.根名称服务器，将人类可读的主机名转换为ip地址的第一步3.TLD名称服务器，此名称服务器是搜索特定ip地址下一步，其托管主机名最后一步，（在a,com中，TLD服务器是“com")4.权威名称服务器：查询...
2019-09-03 18:32:37
209
原创 Cookies session SessionStorage与localstorage
一，Cookies session介绍1Cookies让网站服务器把少量数据储存到客户端的硬盘或内存或是从客户端的硬盘读取数据的技术。2Session 会话，指有始有终的一系列消息。用户访问某个域名网站时，若该用户未创键会话，则web服务器自动创建一个session对象，存在服务端，此对象唯一标记在cookie中Sission最常用在登陆注册中二，cookie localstorage ...
2019-09-03 00:15:52
157
原创 防抖与节流
防抖与节流防抖（用于表单提交）某函数在一秒后执行，若在几秒内又有事件被触发了，则重新开始计时function debounce(fn,wait){let timer=null;return function(){If(timer){clearTimeout(timer)}const args=arguments;timer=settimeout(()=>{fn.appl...
2019-09-02 23:57:07
115
原创 重绘与回流
重绘与回流回流：页面中的部分或全部元素，宽高，位置发生变化，删除或增加某个元素时，某个元素隐藏或显示时，页面重新加载重绘：页面中发生可见性变化注：回流必将引起重绘，重绘不一定引起回流。...
2019-09-02 23:55:42
140
原创 从输入url到页面展示发生了什么
1，输入地址2.浏览器查找域名ip地址本地硬盘host文件————有————>使用|无|本地DNS服务器|无|根DNS服务器
2019-09-02 18:32:28
128
原创 map与set
1.Set本身为一个类似于数组构造函数，但set成员值是唯一的没有重复的值例const s=new set();[2,3,5,4,5].forEach(x=>s.add(x));for(let i for s){console.log(i);}//2,3,5,4set函数可以接收一个数组作为参数；例const set=new Set([1,2,3,4,5,5]};[....
2019-09-02 18:31:38
177
原创 箭头函数this的指向问题
普通函数：（谁调用，this指向谁）箭头函数：根据创建时所在的环境（我在那个环境中创建，this就指向那）例Documnet.οnclick=function(){Alert(this);//HTMLDocument}Document.οnclick=()=>{Alert(this);//window}例2：Document.οnclick=function(){Le...
2019-09-02 18:30:40
225
原创 Generator
异步编程有一种叫做”协程“，意为多个线程相互协作完成异步任务协程运行流程一，协程A开始执行二，A执行到一半，进入暂停，执行权交由协程B;三，（一段时间后）协程B交还执行权四，协程A恢复执行例function async(){//其他代码var f=yield readFile(fileA)//..其他代码}yield命令表示执行到此处，执行权交给其他协程，即yield命...
2019-09-01 22:41:34
268
原创 callback回调函数
回调函数：把任务第二段单独写在一个函数里，等到重新执行这个任务时，就直接调用这个函数；例fs.readFile('/etc/passwd',function（err,data){if(err)thow err;console.log(data);});上述代码中readFile函数第二个参数就是回调函数，也是任务第二段，等到操作系统返回了/etc/passwd文件后，回调函数就会执行...
2019-09-01 20:53:52
616
原创 解构赋值
什么是解构赋值语法上就是赋值作用解构是一种结构，右边一种结构，左右一一对应进行赋值分类数组解构赋值，对象解构赋值，字符串解构赋值，布尔值解构赋值，函数解构赋值，数值解构赋值数组解构赋值{let a,b,rest;[a,b]=[1,2];console.log(a,b);}{let a,b,rest;[a,b,....rest]=[1,2,3,4,5,6];}对象解构...
2019-09-01 20:47:57
195
原创 let与const
let1.let声明的变量没有变量提升2.let不允许重复声明3.let声明变量不会给全局对象window增加属性；const1,const声明变量必须赋值2,const声明变量不屑修改3,let的特点const都有...
2019-09-01 20:34:49
182
原创 eventloop
进程与线程一，Javascript为单线程任务队列单线程使得所有任务需要排队，前一个任务结束，才会执行后一个任务，若前一个任务不结束，后一个任务就需等待；任务分为同步任务与异步任务1 同步任务：在单线程上排队执行任务只有前一个任务执行完成，才能执行后一个任务2异步任务：不进入主线程而进入任务队列任务，只有任务队列通知主线程，某些异步任务可以执行了，这些任务才会进入主线程执行。二，...
2019-09-01 20:24:56
234
原创 垃圾回收机制与内存泄漏
1.标记清除2.引用计数1.标记清除标记清除标记出需要清除的，具体原理当变量进入执行环境时，将这个变量标记为进入环境，变量离开环境时，则将其标记为离开环境，标记离开环境时会被收回。工作流程1，垃圾回收器在运行时回给内存中所有变量加上标记。2，去掉环境中的变量，以及被环境中的变量应用的变量的标记。3，再被加上标记的变量会被视为准备删除的变量。4，垃圾回收器完成内存清除，销毁那些...
2019-09-01 20:12:36
244
原创 服务端渲染与前端渲染
服务端渲染1浏览器发送请求给服务器2服务器利用后台引擎渲染直接生成html文件3返回给前端直接插入页面缺点：占用服务器资源前端渲染1浏览器发送请求给服务器，2 服务器返回json数据3前端获得json数据进行读取，拼接字符串，展示页面4 前后端分离...
2019-09-01 19:57:10
315
原创 BOM属性对象方法
1.window(浏览器窗口）属性name:浏览器窗口的名字或框架的名字例：window.name=“new”获取窗口名称document.write(name);top代表最顶层窗口如：window.top;parent:代表父级窗口，主要用于框架self:代表当前窗口，主要用于框架中innerHeight:浏览器窗口内高；innerWidth:浏览器窗口内宽；...
2019-09-01 19:48:39
332
原创 扁平化数组
多维数组===》一维数组法一：递归var arr=[1,[2,3,[4]]];function flatten(arr)var res=[];for(var i=0;i<arr.length,i++){if(Array.isArray[arr[i])){res=res.concat(flatten(arr[i]));}else{res.push(arr[i]);}}r...
2019-09-01 15:49:30
199
原创 数组去重
1.indexof()方法（IE8后）可返回某个指定元素在数组中首次出现的位置，若没有找到，则放回-1；function r(arr){var new=[];for(var i=0;i<arr.length;i++){if(new.indexOf(arr[i]==1){new.push(arr[i]);}}return new;}var arr=[1,2,1,3,4...
2019-09-01 15:39:31
181
原创 设计模式之单例模式
保证一个类仅有一个实例，并提供一个访问他的全局访问点1.实例单例模式用一个变量来标志，当前是否已经为某个类创建过对象，若是，则在下一次获取该类时，直接返回之前的创建对象例var A = { XX: "123", YY: "1234", CC: function() { console.log("hello world"); } }...
2019-09-01 15:13:15
120
原创 立即执行函数
遇到该函数立即执行，只执行一次，执行完后。将函数立即释放。用处：减少缓存，解决闭包问题格式(function(形参){代码处}（实参）};
2019-09-01 14:54:23
158
原创 Promise对象
1.对象状态不受外界影响，Promise对象代表一个异步操作有三种状态pending(进行中）fulfilled(已成功）reject(已失败）then方法是定义在原型对象Promise.prototype上的等待态（pending);promise包装任务正在执行中；完成态（fulfilled),promise包装的异步任务执行了resolve函数拒绝态（rejected);pr...
2019-09-01 14:51:07
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人