- 博客(53)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 函数中的部分内置属性
argumentsarguments 本身是一个类数组类数组拥有 length 属性拥有数字下标索引(function () { // 类数组 let objArr = { 0: "a", 1: "b", 2: "c", length: 3, }; // 数组 console.log(Array.from(objArr));})();衍生的知识点【迭代器】一个数据结构只要部署了 Symbol.iterator 属性就能使
2020-07-10 11:53:59
181
原创 Vuex
vuex// npm i vuex -S// store.js 【 通过返回一个实例的形式避免内存溢出 】export default () =>{ return new Vuex.Store({ // 当然这里我们可以单独将数据对象放到一个模块中，这样便于管理【只要返回的格式跟下面对象格式一致就可以】 state: { count: 0, }, // 这里的通用型数据管理方法也可以单独拆分模块 mutations: {
2020-06-24 00:16:38
185
原创 Vue-Router
Vue-router针对于我们的单页应用来说，页面跳转是不经过后端服务器的// npm i vue-router -Snew Router({ routes, mode: "history", // 路由模式改成一般形式，不再是 hash 路由形式【 这种形式不利于 SEO 】 base: "/base/", // 作为路由基路径【非强制】 // to 是即将要去的路由 // from 是从哪来的路由 // pos 是你的网页内容定位 scrollBehavior(to
2020-06-24 00:16:08
161
原创 Vue 基础应用
VUE 实例在我们使用 vue 之前我们需要事先得到 一个 vue 实例对象，我们需要传递一个对象用于描述你的 vue 实例。const app = new Vue({});DOM 相关el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例const app = new Vue({ el: "#app", // el: document.getElementById("app"),});
2020-06-23 08:27:55
353
原创 webpack 基础使用
webpack模块化打包工具哈希值通过一定的哈希算法，将一段较长的数据映射为较短小的数据,这段短小的数据就是大数据的哈希值。一旦原始数据发生变化，其哈希值也会变化。一般可以用于文件校验。MIME Type网络资源的媒体类型，告知浏览器当前文件是什么类型，浏览器会根据该类型选择合适的形式展现。占位符（ placeholders ）名称描述[ext]资源扩展名[name]资源的基本名称[path]资源路径[hash]哈希值入口 和 出
2020-06-18 21:48:38
181
原创 less 相关用法
less基于 nodejs ,先安装 node ，然后 npm 安装 lessless 的嵌套语法.content { width: 200px; height: 200px; background-color: red; .nav { color: blue; &:hover { color: white; } }}/*等价于【进行编译输出 lessc xx.less>xx.css 】.content {
2020-06-16 16:28:35
184
原创 前端代码模块化
CommonJS 规范基于文件系统，不适用于浏览器node 端模块文件// m1.jsconst mod = { a: 1, b: 3, fn() { console.log("hello"); },};module.exports = { mod,};引入模块// m2.jsconst { mod } = require("./m1.js");mod.fn(); // helloAMD 规范requireJS 是 AMD 规范的
2020-06-15 00:09:09
197
原创 typescript 接口、泛型、函数
接口接口提供了一套统一的访问方式，但是具体的访问逻辑和数据需要后面从新定义。只能描述 Object、 class 、 function 的类型。而且同名的 interface 会自动合并。【跟 type 的区别是 type 能够描述所有数据类型，而且变量不能重名】interface Animal { color?: string; // 可选属性 barking: string; age: number; readonly idCard: string; // 只读属性，只有初始化
2020-06-14 19:58:31
368
原创 typescript 类的相关用法
类class User { id: number; username: string; constructor(id: number, username: string) { // 通过 this 关联实例对象 this.id = id; this.username = username; }}let t = new User(1, "a");console.log(t.id);如果在构造函数中 提供了 public 修饰符，会自动帮我们完成上述的关联
2020-06-14 19:52:32
135
原创 防抖和节流
防抖用一句话来表述，只要用户没有停止当前行为，就不会处理事件。【比如只要用户鼠标还在滑动，就不会将每一次滑动事件都去执行。】<html> <head> <style> #test { width: 300px; height: 300px; background: red; } </style> </head> <body>
2020-06-13 02:06:07
194
原创 移动端踩坑
事件点透原因：元素触碰之后，会立即执行 touch 事件，然后会有一段时间的延迟，延迟过后在点击的位置上寻找对应元素，看看是否有鼠标事件，如果有就会立即执行<!-- 事件点透案例 --><html> <head> <style> div { width: 100px; height: 100px; background-color: red; position:
2020-06-13 01:59:07
160
原创 JWT 认证
基于传统的 cookie 、session 认证的一些问题session 一般存储在应用的内存中，随着用户数量增加，服务端内存开销也比较大【这里也推荐使用 redis】如果是分布式服务应用，想要共享数据还得有一台中央服务器，这样会限制负载均衡的能力CSRF【跨站请求伪造】，只要截获 cookie ，用户信息很容易暴露再一个问题是，cookie 是可以在浏览器端设置的，一旦用户不小心禁用了 cookie ，那他可能再也登录不了系统了。基于 token 的鉴权token 的鉴权
2020-06-08 23:07:16
777
原创 再聊跨域
CORS 【跨域资源共享】// 当然可以指定域名访问（通配符存在安全问题）// 但是这种跨域方式是不可以携带凭证的（ withCredentials ）res.setHeader("Access-Control-Allow-Origin", "*");CORS 跨域拿不到 cookie// serverconst http = require("http");const fs = require("fs");http .createServer((req, res) =>
2020-06-08 13:40:13
153
原创 服务端主动推送数据、长连接
EventSource服务端主动推动数据EventSource 是服务器主动向客户端推送数据的一个网络事件接口。一个 EventSource 实例会对 HTTP 服务开启一个持久化的连接，以 text/event-stream 格式发送事件, 会一直保持开启直到被要求关闭。服务端// node 的实现// 单边通讯，服务器主动推送客户端const fs = require("fs");const http = require("http");let server = http.cr
2020-06-07 00:27:21
823
原创 Buffer 和 Stream
BufferBuffer 是二进制数据，只不过呈现形式采用了两位的 16 进制创建 指定 字节的 Bufferlet buf = Buffer.alloc(10);通过字符串创建 Bufferlet buf = Buffer.from("hello world");通过 16 进制创建 Bufferlet buf = Buffer.from([ 0x68, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x77, 0x6f,
2020-06-05 23:51:03
377
原创 fs 模块
文件相关针对文件的所有操作而言，没有加 Sync 的都是异步操作引入模块const fs = require("fs");如果没有该写入的文件，会自动创建该文件flag a : 追加写入 w : 覆盖写入// 将 hello world 这个字符串写入文件fs.writeFile("001.txt", "hello world", { flag: "a" }, function (err) { if (err) throw err; console.log("写入成功
2020-06-05 21:36:33
145
原创 js 正则表达式
字面量创建正则// 匹配到所有数字let str = "abc123def456***789";/* \d 代表数字 \D 代表非数字 + 匹配一次至多次 g 全部匹配（不加g只会匹配一次） i 忽略大小写 s 可以让 . 点可以匹配换行 */let reg = /\d+/g;let arr = str.match(reg);console.log(arr);构造函数创建正则let str = "abc123def456***789".
2020-06-05 13:15:42
178
原创 迭代对象 和 Generator
迭代协议其实就是一个迭代逻辑，完全可定制，规定了迭代什么，返回什么，如果迭代等等信息迭代对象表示可被迭代的对象，具体来说就是实现了 [Symbol.iterator] 方法的对象// 一般可以在一个数组的原型中找到 [Symbol.iterator] 方法使用// 数组本身是实现了迭代器的（拥有 [Symbol.iterator] 方法）let arr = [1, 2, 3, 4];for (let val of arr) { console.log(val);}给对象
2020-06-04 23:35:01
121
原创 js 针对异步的处理
异步promise 的三种状态问题（pending、resolve、reject）在没有明确执行状态之前都是 pending（等待中）let p1 = new Promise((resolve, reject) => { // 这里还没有明确执行 已解决 resolve（成功） 还是 已拒绝 reject（失败） console.log("pending...");});console.log(p1);p1.then( () => { console.lo
2020-06-04 00:20:22
129
原创 js 面向对象
面向对象通过函数模拟对象的继承// 定义一个基类函数function Person(name, age) { this.name = name; this.age = age;}// 一般将方法写在原型中可以降低内存的占用率Person.prototype.info = function () { console.log("姓名：" + this.name + "年龄：" + this.age);};// 定义一个学生类函数function Student(name,
2020-06-03 14:51:46
147
原创 new 运算符
工厂函数function factory() { let obj = {}; obj.name = "小明"; obj.age = function () { return 13; }; return obj;}let t1 = factory();let t2 = factory();// 这其实说明了每一个创建出来的对象都有自己独有的空间，但是实际上公共函数模块没有必要复制多份console.log(t1.age == t2.age); // falseN
2020-05-31 14:47:53
711
原创 js 字符串常用方法
String全局对象是一个用于字符串或一个字符序列的构造函数返回特定位置的字符。var s = "abcdefg";var c = s.charAt(1);console.log(c); // b返回字符串长度。var s = "abcdefg";var c = s.length;console.log(c); // 7连接两个字符串文本，并返回一个新的字符串var s1 = "abc ";var s2 = "def";var c = s1.concat(s2,
2020-05-30 19:55:41
114
原创 js数组常用方法
数组常用方法数组转字符串var arr = [1, 3, 5];var str1 = arr.join(); // "1,3,5"var str2 = arr.join("~"); // "1~3~5"数组逆序var arr = [1, 3, 5];var arr1 = arr.reverse(); // [5,3,1]数组排序var arr = ["a", "c", "d", "b"];arr.sort(); // ["a","b","c","d"];// sort
2020-05-30 19:55:07
139
原创 js 数组操作
数组简单的数组创建// 纯数字数组var arr1 = [1, 2, 3, 4, 5];// 获取数组长度arr1.length;// 包含不同类型的数组var arr2 = [1, "a", 3, 4, "5"];// 数组的嵌套var arr3 = [1, 2, 3, [4, 5, 6], 7, { x: 1, y: 2 }, arr2];// 包含 undefined 的数组var arr4 = [1, , 3];// 数组中最后是可以包含一个 逗号 的var
2020-05-30 19:54:33
166
原创 探究箭头函数
箭头函数箭头函数本身 没有自己的 this，arguments，super 或 new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。调用箭头函数的 this ，指向的是其声明时所在作用域的 thisdocument.onclick = function () { function fn() { console.log(this); } fn(); // 这个函数是直接调用的，所以指向的是 window};作为对比docume
2020-05-30 10:01:16
158
原创 Map 跟 Set 常规操作
Set对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。存储的是类数组数据。不是键值对。var mySet = new Set();mySet.add(1); // Set [ 1 ]mySet.add(5); // Set [ 1, 5 ]mySet.add(5); // Set [ 1, 5 ]mySet.add({ a: 1, b: 2 }); // Set [ 1, 5, {a: 1, b: 2}]mySet.add({ a: 1, b: 2 }); // Set
2020-05-30 00:07:35
94
原创 扩展运算符的各种使用场景
扩展运算符扩展运算符一次只能展开一层数组const numbers = [2, 3, [1, 2], 4];console.log(...numbers); // 2 3 [1, 2] 4跟函数参数结合function sum(x, y, z) { return x + y + z;}const numbers = [1, 2, 3];// 等价于 console.log(sum(1,2,3))console.log(sum(...numbers));functio
2020-05-29 22:53:26
1319
原创 解构赋值的各种使用情况
解构赋值解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。let a, b;[a, b] = [10, 20];console.log(a); //10console.log(b); //20交换两个变量的值let a = 10, b = 20;[a, b] = [20, 10];console.log(a, b); // 20 10对象解构// 需要注意按照对象格式进行解构let obj =
2020-05-29 22:52:49
383
原创 ES6 变量 let、var、const 对比
letlet 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值let a = 1;var b = 1;console.log(a);// 再看块级作用域if (true) { let a = 1;}console.log(a); // 报错// 对比看看 var 的定义if (true) { var a = 1;}console.log(a); // 1与 var 关键字不同的是， var 声明的变量只能是全局或者整个函数块的。 var 和 let
2020-05-29 14:33:36
249
原创 HTML 常用标签
HTML 注释养成写注释的习惯是一个优秀程序员的基本素养<!--这是一段注释。注释不会在浏览器中显示。--><!DOCTYPE>< !DOCTYPE> 声明必须是 HTML 文档的第一行，位于 < html> 标签之前。< !DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令在 HTML 4.01 中有三种常用的文档声明<!-- HTML 4.01 St
2020-05-25 00:56:36
204
原创 flex 、 table 、 float 、position 页面布局
表格布局这是一种比较老的布局方式，就是采用表格进行网页布局，这种布局方式在一些小型网站中用起来比较方便，如果是大型网站，仅仅采用表格布局肯定有点力不从心。你也可以在网站的某一个部分采用表格布局。<html> <head> <title> 表格布局 </title> <style> table { width: 800px; } td {
2020-05-17 11:31:23
531
原创 css字体相关
字体的相关样式* { /*字重*/ font-weight: 600; /*斜体*/ font-style: italic; /*下划线*/ text-decoration: underline; /*鼠标形状*/ cursor: pointer; /*字体颜色*/ color: red; /*字体系列*/ font-family: "serif", "sans-serif", "cursive", "fantasy", "monospace";}.
2020-05-14 19:25:45
151
原创 Head 配置项
< head> 标签用于定义文档的头部下面这些标签可用在 head 部分< base>该标签为页面上的所有链接规定默认地址或默认目标，使用指定的基本 URL 来解析所有的相对 URL。这其中包括 < a>、< img>、< link>、< form> 标签中的 URL<!DOCTYPE html><html> <head> <base href="https://w
2020-05-11 11:29:49
2113
1
原创 通识面试题目
请问 HTTP 有几种请求方式及其各自的用途是什么常用的有八种请求方式GET 请求GET 方法请求一个指定资源POST 请求POST 方法用于将实体提交到指定的资源PUT 请求替换某些资源DELETE 请求删除指定的资源HEAD 请求HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体OPTIONS 请求允...
2020-04-20 21:19:27
824
原创 跟服务器交互
XMLHttpRequest在讲解 jQuery ajax 之前我们先来回顾一下之前 原生 js 跟服务器进行交互的方式var xhr = new XMLHttpRequest();xhr.onreadystatechange = function () { if (xhr.status == 200 && xhr.readyState == 4) { con...
2020-04-19 21:57:11
407
原创 jQuery 节点和事件
节点操作创建节点// 直接创建var d1 = $("<div>这是一个div元素</div>");// 克隆节点var s0 = $("span:eq(1)").clone();添加节点// 追加到最后（添加子元素）var d1 = $("<div>这是一个div元素</div>");$("#test").append...
2020-04-14 16:51:47
272
原创 jQuery 样式跟动画
jQuery 样式跟动画CSS 操作基础样式设置$("li").css("color", "red");// or$("li").css({ color: "red" });多样式设置$("li").css("color", "red").css("font-size", "2em");// or$("li").css({ color: "red", "font-siz...
2020-04-10 15:23:21
264
原创 jQuery 选择器
jQuery 概述jQuery 是对 js 的封装，让我们能够用更加简单的方式使用脚本代码。学习 jQuery，其实就是学习 jQuery 中封装的一大堆方法jQuery 的版本slim 即简化版，比普通版本缺少 Ajax 和特效模块模块uncompressed 即未压缩版，包含了大量的注释和空行，适用于学习与开发环境，源码清晰minified 是压缩版，适用于生产环境，...
2020-04-09 11:39:58
527
原创 适配
适配适配要考虑的是大部分常用使用设备的浏览问题计量单位不同的设备适用的计量单位是不一样的，屏幕的显示原理是在一块屏幕上规则的排布多个发光二极管。物理像素在屏幕上的每一个发光点就是一个物理像素逻辑像素 px逻辑像素的出现就是要尽量抹平不同物理像素设备间的显示差异。几种常用设备的物理像素和逻辑像素设备名称屏幕尺寸物理像素(宽*高)逻辑像素(宽...
2020-03-05 11:33:10
358
3
原创 CSS 选择器-2
后代选择器.page p { font-size: 18px;}子元素选择器.page > p { color: grey;}兄弟选择器/* 第一种，从该元素以下的相邻兄弟选择器 */h1 + p { color: red;}/* 第二种，从该元素以下的通用兄弟选择器 */h1 ~ p { color: red;}交集选择器/* &...
2020-02-27 23:39:11
101
jQuery 节点和事件.rar
2020-04-14
jQuery 样式跟动画.rar
2020-04-13
jQuery 选择器案例.rar
2020-04-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人