- 博客(64)
- 收藏
- 关注
RSS订阅原创 AJAX原理
aysnchronous JavaScript and xml创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个页面的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新xml：可扩展标记语言，标准通用标记语言的子集用于标记电子文件使其具有结构性的标记语言结构：第一句是声明语句<?xml version="1.0" encoding="utf-8"?>和html不同，他的标签名大小写敏感AJAX的实现使用js向服务器提出请
2020-10-10 09:35:29
394
原创 Vue-router原理
vue-router和vuex有一点是一样的都是需要先下载再import导入然后使用vue.use（Router）vue-router一共是两种方式，hash和history之前整理过两个的区别hash有#，锚点，改变url的时候只能修改#后面的内容，hash不会重新加载页面，而history则很自由，不过如果没有路由全覆盖，history更容易报错**hash** “#”的符号本来作用是加在URL中指示网页中的位置；http://www.example.com/index.html#p
2020-10-07 15:51:09
167
原创 Vuex的原理
vuex五个最重要的组成：state 存放数据getters 简单返回属性值mutations 同步方法actions 异步module 模块，每个模块可以再包括上述的内容使用的时候是先import然后Vue.use(vuex) vue执行这代码会自动下载安装vuex这个插件，源码中包含的这部分内容加载后会通过vue的混合机制，把这部分内容添加到vue的生命周期函数beforeCreate之前核心流程：1.Vue
2020-10-07 13:17:57
318
原创 老三样的一些考点
一、new 一个新对象的过程当我们new一个构造函数的时候，得到的实例继承了构造器的构造属性（this.name等）以及原型上的属性大体上是4步走1.创建一个空对象 var obj = {}2.设置新对象的constructor属性为构造函数的名称，继承函数的原型3. 使用新对象调用函数，函数中的this被指向新的实例对象4.将初始化完毕的新对象地址保存到等号左边的变量中二、css页面的优化方案1.减少css样式嵌套2.多使用公共样式类3.减少通配符的使用4.
2020-10-07 10:10:12
317
原创 history和hash的区别
1.hash带#，history没有2.history相对比较新，只能兼容ie10，hash能兼容ie83.跳转的时候hash只能修改#后面的内容，而history只要是同源的就可以原理：hash：通过监听浏览器的onhashchange（）事件变化，查找对应的路由规则history：利用H5的history中新增的两个API pushState（）和replaceState（）和一个事件onpopstate监听URL变化pushState（）和replaceState（）可以用于浏览器的历史记
2020-09-30 13:41:14
9948
1
原创 解决跨域
100 成功收到，请发出下一步指令101 切换协议200 请求成功201 成功创建202 成功接受203 非授权信息。请求成功，但返回的meta信息不再原始的服务器，而是一个副本204 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档300 多种选择301 永久移动重定向302 临时移动重定向303 查看其他地址304 未修改，不会返回任何资源。客户端会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回指定日期之后修改的资源305 需要代
2020-09-30 11:47:29
746
1
原创 vue2.0和vue3.0的区别
双向绑定的实现方式不同vue2.x主要依赖Object.definePoperty来劫持对象属性的getter和setter操作，但数据发生变化的时候发出通知而vue3.x是通过Proxy来劫持数据，当数据发生变化的时候发出通知vue2.0element.addEventListener(event, function, useCapture)keyup是键盘按下松开2.0的劫持过程就是通过.defineProperty（）给obj添加了一个prop属性，随后再给这个属性添加事件监听vue
2020-09-29 13:02:11
1220
原创 js的继承
JavaScript的继承方式function animal(name = "animal"){ this.name = name; this.sleep = function(){ console.log(this.name + '睡觉了' ); } } //父类animal.prototype.eat = function(food){ console.log(this.name + '正在吃' + food);}一、原型链继
2020-09-29 10:12:23
123
原创 JavaScript的数组函数和字符串函数整理
这是菜鸟上的全部数组方法1.concat 用于连接两个或者更多的数组用法 a.concat(b)array1.concat(array2,array3,…,arrayX)函数会返回一个新的数组2.copyWithin( ) 改变原数组从数组的指定位置拷贝元素到数组的另一个指定位置中array.copyWithin(target, start, end)第一个参数是拷贝的位置索引3.entries（）返回数组的可迭代对象var fruits = [“Bana..
2020-09-24 15:08:03
267
原创 八个排序算法
稳定性和不稳定性总结：不稳定的有：快速排序、希尔排序、堆排序、选择排序稳定的有：冒泡排序、插入排序、归并排序基数排序冒泡排序它重复地走访 需要排序的元素列，一次比较两个相邻的元素，遇到顺序错的，就进行交换操作，直到没有相邻的元素需要交换最好和最差情况都是O（n2），是稳定的选择排序第一次从待排序的数据元素中选择出最小的一个元素，存放在序列的其实位置，然后再从剩余的未排序的元素中继续寻找属于不稳定排序，因为他可能会破坏两个相同大小的数字的先后顺序最好和最坏情况的复杂度都是O(n2)插入
2020-09-17 10:50:31
551
原创 复习html（浏览器）
一、doctype的作用声明一般位于文档的第一行，他的作用只要告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就一兼容模式解析。在标准模式下，都是最新标准。兼容模式下都是向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问二、http和https的区别多了一层SSL加密。http是超文本传输协议,是一个网络协议三、三次握手，四次挥手四、TCP和UDP20 8五、WebSocketwebsocket是持久连续中的协议，支持六、状态码1
2020-09-16 13:24:55
191
原创 CSS的复习
一、css的盒子模型新旧对比W3C标准盒子模型是宽度=内容宽度（content）+border+padding+marginIE盒子模型是宽度=内容宽度（content+border+padding）+marginpadding：填充二、box-sizing属性就是决定采用前面的哪种模型，默认是content-box即W3C，而border-box是指IE三、css选择器的种类id选择器 #类选择器 .标签选择器 div子选择器通配符选择器 *属性选择器 a[rel="
2020-09-15 13:03:16
347
原创 VueJs（十五）
今天开始学习webpack这是当前比较热门的js应用程序的模块打包工具它依赖于node.js和NPM前端自动化工程主要解决以下问题：js、css代码的和平和压缩css预处理：less、sass、Stylus的编译生成雪碧图（css sprite）ES 6转ES 5模块划webpack打包后的代码已经不是你的代码，其中夹杂了更多webpack自身的模块处理代码这部分内容最重要的是编译这个概念各种格式的文件通过特定加载器编译后最终统一称为js，css，png等静态资源文件在webpack
2020-08-12 16:28:08
98
原创 VueJs（十四）
vue 2.x和1.x的最大不同在于使用了Virtual Dom（虚拟DOM）来更新DOM节点，提升了渲染性能Virtual DOM不是真正意义上的DOM对象，而是一个轻量级Js对象，状态发生变化的时候，会进行Diff运算，来更新只需要被替换的DOM，而不是全部重载下面是一个普通的DOM节点<div id="main"> <p>文本内容</p> <p>文本内容</p></div>下面是使用Virtual D
2020-08-10 15:54:12
124
原创 VueJS（十三）
今天继续时间显示组件的实战目标是把时间转换成相对时间确定转换逻辑1分钟以前，显示“刚刚“”1分钟~1个小时内，显示“xx分钟前”1个小时~1天之间，显示“xx小时前”1天~1个月之间，显示“”xx天“”大于一个月，显示“xx年xx月xx日”...
2020-08-07 16:32:56
123
原创 VueJS（十二）
今天是自定义指令的实战开发一个可从外部关闭的下拉菜单弹出菜单后，点击其他的空白区域，菜单实现自动关闭<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="菜单.css" /> </head> <body&g
2020-07-22 17:40:54
106
原创 VueJS（十一）
今天继续学习自定义指令自定义指令的选项是由几个钩子函数组成的，每个都是可选的bind：只调用一次，指令第一次绑定到元素的时候调用，这个钩子函数可以定义一个在绑定时执行一次的初始化的动作inserted：被绑定元素插入父节点时调用update：被绑定元素所在的模板更新的时候调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新componentUpdated：被绑定元素所在的模板完成一次更新周期时调用unbind：只调用一次，指令与元素解绑的时候调用<div id=
2020-07-22 08:39:51
101
原创 VueJS（十）
今天继续第二个组件的学习标签页组件一个标签按钮对应一个slot<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body
2020-07-16 16:39:03
88
原创 VueJS（九）
今天，终于再次说出这句话，我接着来学习vue了常用组件的开发，虽然过了十天了，还是记得组件的知识点的吧，就是预先写好的样例，可以复用减少耦合。开发一个数字输入框组件数字输入框是对普通的输入框的扩展，普通的输入框就是input这种数字输入框的要求如下：1.只能输入数字2.两个快捷按钮加一和减一3.能够设置初始值、最大值、最小值，数值改变的时候会触发一个自定义事件来通知父组件function isValueNumber(value){ return([0-9]).test(value+'');
2020-07-15 18:02:39
95
原创 VueJS（八）
上次学到作用域首先需要明确slot分发的内容是在父组件上的所谓内容在父组件和子组件的内容之分，就是看在哪里编译在子组件上绑定的话写在组件注册内容内部，父组件绑定是写在注册vue实例内容中slot的用法slot的意思是插槽，用于内容分发，就是混合父组件的内容和子组件的模板单个slot在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽）在父组件模板里面插入在子组件标签内的所有内容将代替子组件的<slot>标签及它的内容 <body>
2020-07-04 17:07:02
114
原创 VueJS（七）
今天继续学习组件通信昨天学到父组件在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件<body> <div id="app"> <p>总数：{{total}}</p> <my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component> </div> <sc
2020-07-02 17:35:12
91
原创 VueJS（六）
今天继续学组件先回顾一下昨天学的组件内容组件和vue实例一样需要注册，注册完后使用方式和一般的元素标签类似，通过注册里面的内容对标签进行渲染，方法有template等注册又分为全局注册component和局部注册components，局部注册可以嵌套局部注册，无限套娃下面是一个局部注册的代码： <body> <div id="app"> <my-qian></my-qian> </div> <script>
2020-07-01 17:35:26
86
原创 VueJS（四）
今天继续学习Vue表单和v-model表单类的控件主要功能就是承载一个网页数据的录入和交互包括单选、多选、下拉选择、输入框，使用他们完成数据的录入、校验、提交。使用v-model进行双向绑定，额，和ng-model好像一模一样 <body> <div id="app"> <input type="text" v-model="message" placeholder="输入...." /> <p>内容为：{{message}}&
2020-06-29 17:30:30
94
原创 VueJS（三）
今天接着学指令v-if 、v-else-if v-else这个就是判断，和普通的类似v-if和 v-show的区别是前者如果为false，是直接消失的，不存在，后者即便不显示，也是渲染完成的所以要说真正的条件渲染，if才是列表渲染指令v-for<li v-for="book in books">{{book.name}}</li>...............data:{ book:[ { name: 'xxx'}, { name: 'yyy
2020-06-29 08:07:32
90
原创 VueJS（二）
今天将继续学习vue的基础知识插值与表达式使用{{ }}来显示绑定的数据，这一点和我之前学的AngularJS类似，不过ng首先你要创建ng-app对象 <body> <div id="app"> <span v-html="link"></span> </div> <script> var app= new Vue({ el:'#app', data:{ link:'<a
2020-06-27 08:51:51
166
原创 CSP（四）
#include<stdio.h> int a[1000][1000]={}; int b[1000]={};int main(){ int N,M,i,j; int T=0,k,P=0; int flag=0; scanf("%d%d",&N,&M); for(i=0;i<N;i++){ for(j=0;j<=M;j++){ scanf("%d",&a[i][j]); T=T+a[i][j]; b[i]=b[i.
2020-06-26 08:15:33
106
原创 VueJS（一）
MVVM模式模型—视图----视图模型vue的作用：通过MVVM拆分为视图、数据两部分，并分离if(showBtn){ var btn = $('<button>Click me</button>'); btn.on('click',function(){ console.log('click'); }); $('#app').append(btn);如果使用vue的方式来写的话，可以改成：<body>
2020-06-24 17:22:51
87
原创 Git管理系统（一）
Git是一个流行的并且被广泛使用的源管理系统，他极大地简化了开发周期。他让用户可以为内容开发创建分支、使用分支并且在分支之间进行切换，就像在日常工作流程中创建文件并且在文件之间进行切换一样容易。git是使用一种快速、有效的架构来实现的，这种架构使得实验能够便利进行并且允许在本地修改共享给其他人之前在隔离环境中改进这些本地修改.git托管站点同时为个人和共享项目提供Git仓库托管服务的网站，比如github重写历史的能力git不同率其他大多数源管理系统的一个方面就是重写或回复仓库中所储存的前一个内容版
2020-06-23 18:06:19
463
原创 NodeJS（一）
安装node.js的几种方法1.一键安装2.通过HomeBrew或MacPorts安装（Max用户）3.通过tar文件安装：使用归档文件手动解压安装4.无需sudo授权进行安装5.通过Git Repo安装：适合高级开发者，以便后续获取最新版本或为项目提交代码6.通过Nave进行多版本安装：可以用它同时安装多版本的Node.js7.通过Node版本管理器（NVM）进行多版本安装，类似Nave我由于是初学，也没有多版本的需求，所以选择第一种有一个中文网站：http://nodejs.cn/d
2020-06-22 20:27:30
174
原创 AngularJS（十一）
昨天学到$http的快捷方式<body ng-app="app"> <div ng-controller="ctrl"> <h3>请输入你的信息：</h3> <form id="userForm"> 用户名：<input type="text" name="user" ng-model="params.user" /><br /> 喜欢的图书:<select multiple="mul
2020-06-20 15:01:35
134
原创 AngularJS（十）
今天继续昨天的依赖注入的学习昨天学到行内数组式依赖注入两点注意事项，声明的依赖参数名称要和容器组件的名字对应，依赖参数的顺序要和接受依赖注入的函数的参数顺序一致，做到这两点后，接受依赖注入的函数的形参名就无关紧要了，即使发布的时候压缩了代码也不会影响代码运行。 <body ng-app="app" ng-strict-di> <div ng-controller="ctrl"></div> <script> var app = angula
2020-06-19 17:41:11
164
原创 AngularJS（九）
今天继续学自定义服务使用provider（）方法创建自定义服务这个方式相较其他方法的优点在于开发者可以在创建angular.Module的配置选项中对服务对象进行配置注意：创建自定义服务的时候必须为该注册函数的this定义一个$get函数，该函数的返回值就是自定义服务的对象。<body ng-app="app"> <div ng-controller="ctrl"> 用户名：<input type="text" name="user.name" ng-mode
2020-06-18 18:55:59
144
原创 AngularJS（八）
今天…今天还是继续学习服务，害，惭愧，这几天进度很慢，就这么几个服务知识点还没捣腾明白呢$log服务这个服务的功能是对console进行封装，好像很多服务的功能都是封装某个特定的对象$log服务一共提供了5个方法，分别是：log、warn、info、error、debug <body ng-app="app"> <div ng-controller="ctrl"> <label> 请输入内容 <input type="tex
2020-06-17 17:13:48
135
原创 AngularJS（七）
今天继续学习服务$compile服务他的作用是编译一段html字符串或DOM，并把他们转换成模板和模板函数，这些模板之后可以被link到scope模板中一个示例，注意要导入jQuery库<body ng-app="app" ng-controller="ctrl"> <div id="container"> </div> <script> angular.module('app',[]) .controller('ctr
2020-06-16 19:27:09
134
原创 AngularJS（六）
今天开始学习AngularJS的调用内置服务的相关知识ng有一种分层结构思想在里面可以大致分为3层：控制器层：这个就是加载controller（）方法时候的控制器，一般代码量较少，轻薄服务层：也被叫做service层，服务层负责完成前端的业务逻辑DAO层：即数据访问层，根据不同位置的DAO有不同的工作，如果是在服务端编程中的，负责对数据库执行CRUD操作；如果是在前端编程中的话，就是负责和服务端通信，调用服务端API对服务端数据进行CRUD操作(CRUD指的是增加(Create)、读取查询(Ret
2020-06-15 20:25:11
128
原创 AngularJS（五）
今天接着学习指令ng-style和ng-class一样也可用于动态设置CSS样式ng-style属性通常被解析为一个js对象（实际上就该算是css中定义的一个类），而昨天学的ng-class是可以根据不同情况解析为字符串和js对象的解析为字符串的用法就是这样：<p ng-class="style" >使用字符串</p><input type="text" ng-model="style" placeholder="输入:xxxxx"><hr>而
2020-06-13 17:23:01
154
原创 AngularJS（四）
今天继续学习各种指令除了一系列的表单、检验表单指令，AngularJS还提供了了大量的事件指令ngBlur --------------------------------- html元素失去焦点时触发ngChange-----------------------------html元素的内容发生改变时触发ng-Click--------------------------------html元素被点击时触发ngChecked----------------------------html元素
2020-06-12 18:29:37
184
原创 AngularJS（三）
终于完成了一部分琐事，今天继续学习AngularJS的扩张型函数angular.identity和angular.noop，他们两个都是用来防止报错的镂空函数，唯一的区别是前者用来随便返回一个自身的值，而后者就是纯空函数，不作为了<body> <script> function transformer(transformationFn,value){ return (transformationFn || angular.identity)(value);
2020-06-11 17:27:34
181
原创 AngularJS（二）
除了使用预设的过滤器，实际操作的时候还可以使用自定义的过滤器 <body ng-app="fkApp" ng-controller="fkCtrl"> 请输入字符串：<input type="text" ng-model="test"/><p></p> {{test|fkdelete:2:5}} <script> var app=angular.module("fkApp",[]); app.controller(
2020-06-09 17:32:40
95
原创 AngularJS（一）
AngularJS是一个基于MVC（模型-视图-控制）的JS框架。这次我选择直接在线导入，不再尝试下载到本地了，反正效果对于我来说差不多<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>这是在线导入的语句先是一个简单的案例<!DOCTYPE html><html> <head> <meta charset="u
2020-06-08 20:40:42
118
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人