- 博客(53)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 函数中的部分内置属性
arguments arguments 本身是一个类数组 类数组 拥有 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
257
原创 Vuex
vuex // npm i vuex -S // store.js 【 通过返回一个实例的形式避免内存溢出 】 export default () =>{ return new Vuex.Store({ // 当然这里我们可以单独将数据对象放到一个模块中，这样便于管理【只要返回的格式跟下面对象格式一致就可以】 state: { count: 0, }, // 这里的通用型数据管理方法也可以单独拆分模块 mutations: {
2020-06-24 00:16:38
246
原创 Vue-Router
Vue-router 针对于我们的单页应用来说，页面跳转是不经过后端服务器的 // npm i vue-router -S new Router({ routes, mode: "history", // 路由模式改成一般形式，不再是 hash 路由形式【 这种形式不利于 SEO 】 base: "/base/", // 作为路由基路径【非强制】 // to 是即将要去的路由 // from 是从哪来的路由 // pos 是你的网页内容定位 scrollBehavior(to
2020-06-24 00:16:08
258
原创 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
429
原创 webpack 基础使用
webpack 模块化打包工具 哈希值 通过一定的哈希算法，将一段较长的数据映射为较短小的数据,这段短小的数据就是大数据的哈希值。一旦原始数据发生变化，其哈希值也会变化。一般可以用于文件校验。 MIME Type 网络资源的媒体类型，告知浏览器当前文件是什么类型，浏览器会根据该类型选择合适的形式展现。 占位符（ placeholders ） 名称 描述 [ext] 资源扩展名 [name] 资源的基本名称 [path] 资源路径 [hash] 哈希值 入口 和 出
2020-06-18 21:48:38
263
原创 less 相关用法
less 基于 nodejs ,先安装 node ，然后 npm 安装 less less 的嵌套语法 .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
245
原创 前端代码模块化
CommonJS 规范 基于文件系统，不适用于浏览器 node 端 模块文件 // m1.js const mod = { a: 1, b: 3, fn() { console.log("hello"); }, }; module.exports = { mod, }; 引入模块 // m2.js const { mod } = require("./m1.js"); mod.fn(); // hello AMD 规范 requireJS 是 AMD 规范的
2020-06-15 00:09:09
308
原创 typescript 接口、泛型、函数
接口 接口提供了一套统一的访问方式，但是具体的访问逻辑和数据需要后面从新定义。只能描述 Object、 class 、 function 的类型。而且同名的 interface 会自动合并。【跟 type 的区别是 type 能够描述所有数据类型，而且变量不能重名】 interface Animal { color?: string; // 可选属性 barking: string; age: number; readonly idCard: string; // 只读属性，只有初始化
2020-06-14 19:58:31
458
原创 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
222
原创 防抖和节流
防抖 用一句话来表述，只要用户没有停止当前行为，就不会处理事件。【比如只要用户鼠标还在滑动，就不会将每一次滑动事件都去执行。】 <html> <head> <style> #test { width: 300px; height: 300px; background: red; } </style> </head> <body>
2020-06-13 02:06:07
266
原创 移动端踩坑
事件点透 原因：元素触碰之后，会立即执行 touch 事件，然后会有一段时间的延迟，延迟过后在点击的位置上寻找对应元素，看看是否有鼠标事件，如果有就会立即执行 <!-- 事件点透案例 --> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; position:
2020-06-13 01:59:07
221
原创 JWT 认证
基于传统的 cookie 、session 认证的一些问题 session 一般存储在应用的内存中，随着用户数量增加，服务端内存开销也比较大【这里也推荐使用 redis】 如果是分布式服务应用，想要共享数据还得有一台中央服务器，这样会限制负载均衡的能力 CSRF【跨站请求伪造】，只要截获 cookie ，用户信息很容易暴露 再一个问题是，cookie 是可以在浏览器端设置的，一旦用户不小心禁用了 cookie ，那他可能再也登录不了系统了。 基于 token 的鉴权 token 的鉴权
2020-06-08 23:07:16
1013
原创 再聊跨域
CORS 【跨域资源共享】 // 当然可以指定域名访问（通配符存在安全问题） // 但是这种跨域方式是不可以携带凭证的（ withCredentials ） res.setHeader("Access-Control-Allow-Origin", "*"); CORS 跨域拿不到 cookie // server const http = require("http"); const fs = require("fs"); http .createServer((req, res) =>
2020-06-08 13:40:13
227
原创 服务端主动推送数据、长连接
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
1034
原创 Buffer 和 Stream
Buffer Buffer 是二进制数据，只不过呈现形式采用了两位的 16 进制 创建 指定 字节的 Buffer let buf = Buffer.alloc(10); 通过字符串创建 Buffer let buf = Buffer.from("hello world"); 通过 16 进制创建 Buffer let buf = Buffer.from([ 0x68, 0x65, 0x6c, 0x6c, 0x6f, 0x20, 0x77, 0x6f,
2020-06-05 23:51:03
491
原创 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
195
原创 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
248
原创 迭代对象 和 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
180
原创 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
193
原创 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
202
原创 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); // false N
2020-05-31 14:47:53
815
原创 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
175
原创 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
207
原创 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
233
原创 探究箭头函数
箭头函数 箭头函数本身 没有自己的 this，arguments，super 或 new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。调用箭头函数的 this ，指向的是其声明时所在作用域的 this document.onclick = function () { function fn() { console.log(this); } fn(); // 这个函数是直接调用的，所以指向的是 window }; 作为对比 docume
2020-05-30 10:01:16
207
原创 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
147
原创 扩展运算符的各种使用场景
扩展运算符 扩展运算符一次只能展开一层数组 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
1463
原创 解构赋值的各种使用情况
解构赋值 解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。 let a, b; [a, b] = [10, 20]; console.log(a); //10 console.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
477
原创 ES6 变量 let、var、const 对比
let let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值 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
312
原创 HTML 常用标签
HTML 注释 养成写注释的习惯是一个优秀程序员的基本素养 <!--这是一段注释。注释不会在浏览器中显示。--> <!DOCTYPE> < !DOCTYPE> 声明必须是 HTML 文档的第一行，位于 < html> 标签之前。< !DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令 在 HTML 4.01 中有三种常用的文档声明 <!-- HTML 4.01 St
2020-05-25 00:56:36
259
原创 flex 、 table 、 float 、position 页面布局
表格布局 这是一种比较老的布局方式，就是采用表格进行网页布局，这种布局方式在一些小型网站中用起来比较方便，如果是大型网站，仅仅采用表格布局肯定有点力不从心。你也可以在网站的某一个部分采用表格布局。 <html> <head> <title> 表格布局 </title> <style> table { width: 800px; } td {
2020-05-17 11:31:23
644
原创 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
227
原创 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
2260
1
原创 通识面试题目
请问 HTTP 有几种请求方式及其各自的用途是什么 常用的有八种请求方式 GET 请求 GET 方法请求一个指定资源 POST 请求 POST 方法用于将实体提交到指定的资源 PUT 请求 替换某些资源 DELETE 请求 删除指定的资源 HEAD 请求 HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体 OPTIONS 请求 允...
2020-04-20 21:19:27
953
原创 跟服务器交互
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
482
原创 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
366
原创 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
327
原创 jQuery 选择器
jQuery 概述 jQuery 是对 js 的封装，让我们能够用更加简单的方式使用脚本代码。学习 jQuery，其实就是学习 jQuery 中封装的一大堆方法 jQuery 的版本 slim 即简化版，比普通版本缺少 Ajax 和特效模块模块 uncompressed 即未压缩版，包含了大量的注释和空行，适用于学习与开发环境，源码清晰 minified 是压缩版，适用于生产环境，...
2020-04-09 11:39:58
678
原创 适配
适配 适配要考虑的是大部分常用使用设备的浏览问题 计量单位 不同的设备适用的计量单位是不一样的，屏幕的显示原理是在一块屏幕上规则的排布多个发光二极管。 物理像素 在屏幕上的每一个发光点就是一个物理像素 逻辑像素 px 逻辑像素的出现就是要尽量抹平不同物理像素设备间的显示差异。 几种常用设备的物理像素和逻辑像素 设备名称 屏幕尺寸 物理像素(宽*高) 逻辑像素(宽...
2020-03-05 11:33:10
486
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
164
jQuery 选择器案例.rar
2020-04-09
jQuery 样式跟动画.rar
2020-04-13
jQuery 节点和事件.rar
2020-04-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人