- 博客(32)
- 收藏
- 关注
RSS订阅原创 组件通信的5种方法
组件通信的6种方法一、使用 props 和 emit，进行父子组件的通信父传子 props<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi
2021-11-15 22:49:38
5019
2
原创 Web组件API
Web组件API最近学完 Vue 后发现它封装的 DOM 实在是太强大了。使用 Es6 Moudule 或 CommonJs Module 实现封装 Js 模块化比较简单。但是想要封装 DOM 真没那么简单。看了红宝书 JavaScript API 中的 Web组件 API，发现里面的内容跟 Vue 用到的方法很像，所以我就先看一下做一些基础知识储备，等哪天有能力了再模仿Vue自己封装一个 DOM，（感觉有点天真，哈哈哈 ~~）知识库template模板影子 DOM自定义标签一、templa
2021-11-13 23:57:32
869
原创 计算属性与侦听属性区别
计算属性与侦听属性区别计算属性 compute设计初衷为了解决模板内的复杂表达式书写引起的代码混乱问题<div id="example"> {{ message.split('').reverse().join('') }}</div>上述是一个输出 message 反转后的结果，如果直接写在 HTML 模板上，一两个这样的复杂表达式还可以接受，有很多的话代码看上去就会变得非常乱。<div id="example"> <p>Origin
2021-11-13 00:27:55
1523
1
原创 计算机网络运输层
运输层概述运输层为它上面的应用层提供通信服务，位于网络的边缘部分，当位于网路边缘的两台主机使用网络的核心部分进行端到端通信时，只有主机的协议栈才有运输层，而网路核心部分中的路由器在转发分组时只用到下三层的功能。在 IP 层中，因为 IP 首部标记的是主机，所以说通信是 “两台主机之间的通信” ，但是我们都知道一台主机可以干很多事情的，比如说可以一边聊微信，一边用浏览器看网页，不同的工作之间是不会相互干扰的，这些互不干扰的工作就是进程，而我们在聊微信时，应该是微信的进程想另一台主机的微信进程进程了通信，
2021-11-12 20:52:23
2692
原创 计算机网络应用层
计网应用层概念存在位置：网络边缘主机上工作任务：负责两个端的主机上的应用进程之间的通信应用层协议：负责规范不同类型应用进程的通信规则，对于不同类型应用就有不同应用层协议域名DNS系统**作用：**将域名解析成IP地址，网络层封住数据报首部需要用到目的IP地址域名结构： xxx.四级域名.三级域名.二级域名.顶级域名**解析过程：**主机查询ip地址，首先会去本地域名服务器的缓存区中查找之前解析过的ip地址，如果击中目标则直接返回对应的ip地址，否则就会向外边服务器发送DNS解析请求，分为
2021-11-02 12:18:09
226
原创 V8 快属性与慢属性
快属性与慢属性js对象是由一组组属性和值组成的集合，而js语言的角度来讲，js对象像一个字典，属性为键名，属性值为键值，通键名读取键值。而 V8 实现对象存储时，并没有采用字典的存储方式，原因是字典的数据结构是非线性的，存取速度会比线性数据结构慢很多。常规属性和排序属性// 常规属性和排序属性function Foo(){ this[100] = '100'; this[1] = '1'; this['b'] = 'b'; this[10] = '10';
2021-11-02 11:16:19
354
原创 js 中的继承
js 中的继承（一）原型链继承原理: 通过修改构造函数的原型指针指向一个类的实例不足：不能给父类构造函数传递参数，父类中的引用类型属性共享function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function () { return this.property;};function SubType() { this.subproperty = false
2021-11-02 09:27:44
95
原创 原型与原型链
原型与原型链原型无论何时，只要创建一个函数，就会按照特定的规则为这个函数创建一个 prototype 属性(指向原型对象)。默认情况下，所有原型对象自动获得一个名为 constructor的属性，指回与之关联的构造函数。function Person(name, age){ this.name = name; this.age = age; } const p = new Person('小明',21); console.log(p); // co
2021-10-30 23:24:39
103
原创 js对象的数据属性、访问器属性和属性枚举
对象属性属性的类型js对象的分两种：**数据属性 **和 访问器属性(一) 数据属性顾名思义，数据属性就是用来直接保存数据的属性，一般情况下，我们都只会定义和操作数据属性1. configurable 定义属性是否可以为 delete 重新定义或修改为访问器属性，默认 true2. enumerable 定义属性是否可以被枚举，默认 true3. writable 定义属性是否可以被修改，默认 true4. value 属性的值显性设置属性的参数 1. writable 测试
2021-10-30 22:09:18
350
原创 对象标识和相等判断
对象标识和相等判断判断 对象是否的相等的方法，对于不同的情况，需要用到不同的方法，比较常用的有 三等号 “===”, isNaN(number)函数, Object.is(obj1, obj2)方法三等号 ===对象实例相等判断 function Person(name){ this.name = name; }const p1 = new Person('小明');const p2 = new Person("小明");console.log(p1 === p2); //
2021-10-30 19:33:33
143
原创 对象合并混入
对象合并混入在 MVVM 框架中有 mixin 混入功能，它的作用就是把 每个对象 功能的特性都抽出来整合成一个 或多个 源对象，再把这些源对象混入（合并）到需要这些共有功能的目标对象中，比如 VUE 的 mixinES6 新增了 Object.assign 功能来合并对象个人觉得混入（合并）功能跟 继承的目的有点相同， 合并对象是一种**面向切面编程(AOP)的开发模式，而继承是面向对象(OOP)**的开发模式 const dogTarget = { name: 'jack',
2021-10-30 17:21:42
164
原创 :first-child 和 :first-of-type的区别
:first-child 和 :first-of-type 的区别xxx:first-child 指 css 选择器匹配到 xxx 的元素中位于其父元素第一位的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi
2021-10-12 23:31:04
534
1
原创 Git生成SSH公钥关联远程仓库账户
Git关联远程仓库基础配置我们都知道git是本地的代码仓库，而远程仓库有很多如github，coding, gitte，码云等等，其实他们使用原理都是一样。要使用他们，都首先下载本地的git，而远程仓库可以视团队需要而定。废话不多说，进入主题。关联远程仓库只需1、设置本地用户信息（必须要与远程仓库的保持一致）Git config --global user.name 'your_name'Git config --global user.email 'your_email@.
2021-04-21 14:07:28
660
3
原创 原生js使用模块化思想解决多人合作中全局变量污染冲突问题
原生js使用模块化思想解决多人合作中全局变量冲突问题问题引入我们在参加软件设计大赛做多人合作项目时，负责前端部分有两个人，我们使用的是原生js+JQuery来编写代码（当时只学了这些），由于当时没有学习ES6的模块化，再加上都是一多人合作写项目，在整个项目完成下来踩了不少坑，其中最大的坑就是代码冲突，主要是全局变量污染的锅，每次合并代码都会有莫名其妙的问题。案列小明和小红两个各自写自己的js代码，最终合并到同一个index.html中<!-- index.html -->&l
2021-03-13 21:46:47
703
原创 DOM扩展——自定义属性
DOM扩展——自定义属性引言我们有时候在看别人的html代码的时候，会发现别人的标签中的自定义属性都会以data作为前缀，不同的单词都会用’-'相连，这是为啥呢？一种规范 or 一种语法？自定义属性看了DOM扩展后，发现原来是有一种专门的方法来操纵自定义属性的！基本用法了解 dataset属性 <div id = 'myDiv' data-app-id = 'id01' data-myName = 'anan' active = 'true'>你好，李焕英！</div
2021-03-06 17:31:09
586
1
原创 js不同方式创建对象的优缺点
对象创建Object构造函数字面量创建特点：创建具有同样接口的多个对象需要重复编写很多代码。工厂模式创建特点：没有解决对象标识问题（即不知道新创建的对象是什么类型） function createPerson(name, age, job) { let o = new Object(); o.name = name; o.age = age; o.job = jo
2021-03-01 21:42:58
185
原创 ES6异步发送AJAX
ES6异步发送AJAX异步与同步的区别同步：在上一个操作没有执行完前，下一个操作必须排队等待异步：CPU先把当前操作耽搁不执行，等主线任务执行完后再执行ES6前的异步操作在ES6发布之前，要操作异步，只能使用递归或者回调函数来操作，但是这样会使得代码可读性差，难维护。js的运行机制是单线程的，它首先会执行同步的操作，再按照代码的位置先后顺序执行异步操作。js 中的核心异步执行函数是定时器和ajax setTimeout(console.log, 0, 1);
2021-02-20 00:49:54
476
原创 async函数 -- 异步函数
async函数 – 异步函数作用ES2017推出的一种新的处理异步请求方法，是generator的语法糖（generator的优化），可以用来轻松定义异步函数对比generatorasync 取代 *await 取代 yieldasync不需要自己手动移动指针，它会自动执行，如果在某个阶段执行失败则会终止执行后面的任务，而generator需要手动调用next()一步步执行await右边是表达式或语句，如果它返回不是Promise对象会调用Promise.resolve()
2021-02-19 23:33:09
794
原创 Promise对象--个人理解
Promise对象作用有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易定义Promise对象是一个期约，定义着未来发生的事件，它有3种状态，表示着一个任务的状态，它们分别是pending(进行中), fulfilled(成功),rejected(失败);Promise对象可以比喻成一个容器，里面装着外来才会结束的事件（通常是异步操作）的结果。特点Promise的状态只能有内部的决定
2021-02-19 22:13:37
295
原创 一个例子让你理解Generator语法
Generator 生成器一个例子让你理解Generator语法理解：从语法上讲，generator是一个状态机，它封装着其内部很多的状态执行一个generator函数，会返回一个迭代器对象（有next()方法，可以手动单步访问内部代码）例子 function* foo(){ consloe.log('hi!'); // hi! let a = yield 'hello'; yield console.log(a); // aaaa
2021-02-19 18:09:27
338
原创 ES6模块和Commonjs的差异
ES6模块和Commonjs的差异CommonJS 是 nodejs 中的模块化工具，只能使用在服务器端，而ES6模块是 客户端开发的模块化工具，只能使用在客户端CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。CommonJS// module.js let count = 3;const doCount = function(){ count ++;}module.exports = {count, doCount};// main.js
2021-02-18 20:54:02
147
原创 ES6模块
ES6模块一般的script脚本导入是把所有的要使用的js文件按照所有js的依赖关系，先后导入到html页面上 <script src="../js/jquery-3.5.1.js"></script> <script src="../js/jquery.cookie.js"></script> <script src="../js/logOn.js"></script> <script src
2021-02-18 18:59:54
204
1
原创 supervisor -- nodejs 自启动工具
supervisor – nodejs 自启动工具原生启动了服务器后，如果代码有更新，需要使用 ctrl + c 关闭后，重新 node js 文件名重启如果有了supervisor就可以自动的更新服务器npm – node packages manager node 包管理工具， node 有自带，如果不行就下载 cnpm （中国版的npm, c – chinese, 由乐于分享的淘宝团队开发，服务器在中国）安装 supervisor在终端输入 npm install -g s
2021-02-18 18:46:27
357
2
原创 node模块
node模块在node中，模块被分成两种:核心模块(http模块、URL模块、FS模块)和自定义模块，也叫文件模块node 模块是 CommonJS的实现自定义模块需要按照CommonJS的规范来定义一个js文件就是一个模块一个模块里面的变量、方法等默认是只能在本文件中被访问，只有导出后才能被其他模块访问导出方法：如果是把所有数据都写在了一个对象里面，那么就用module.exports=对象名，这样都出后就是把整个对象导出，不会产生新对象如果是以多个方法、变量导出就使用exports
2021-02-18 18:43:45
643
5
原创 对象属性的动态与静态
对象属性的动态与静态我们想要把a设置为obj的属性，当a变化时，obj.a也跟着改变 let a = 1; const obj = { a } a++; console.log(a, obj.a); // a = 2, obj.a = 1;为什么会这样？ 其实是源于 js 值的赋值，对于基本的数据类型是拷贝值的，会赋值一份与当前值相同的数据到一个新的值上，两者是没有任何联系的。如果a是
2021-02-18 17:46:30
1310
2
原创 解决css盒子的height:100%失效问题
解决css盒子的height:100%失效问题一 问题描述、我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因。今天我在做模态框背景覆盖时就遇到了这样的问题。二 解决方案、1、网上搜了很多答案，基本上都是只要把html 和 body 也设置成height : 100% 就行了，然并卵。。。2、然后我看了框架的f12样式，发现只需要盒子中加入css position属性（abslou
2020-10-02 23:58:23
1465
原创 利用js+css定位实现滑动盒子模型
利用js+css定位实现滑动盒子模型今天要跟大家分享是利用js+css定位实现滑动盒子模型，其实这种滑动盒子模型是非常常见的，在很多网页中的banner或者是需要翻页的容器中经常会被用到。如下是最终的效果图：如果你还没接触过这种有翻页动画的盒子，你也许会觉得很神奇，不知道该怎么实现。下面再给你看一下真正的原理。没错，其实就是这么简单！其实它就是先把所有的选项排成一排，然后放入一个容器中，接着就是利用css的相对定位，改变left的值，这样就实现了左右移动的效果，最后再把外层容器的overflo
2020-08-31 19:13:08
1196
1
原创 css3动画实现二级菜单下拉动画
二级菜单下拉动画：css动画实现之前一直都在学习新的知识，一直没想写博客，由于学的东西要上一个台阶，所以就先把之前做过的一个小东西好好总结一下，也可以分享给其他初次接触前端的小白。今天我要介绍一种利用css3动画实现有过渡效果的二级下拉菜单。效果如下：其实这个动画的制作很简单，只要注意一些细节，其实很容易做出来。基本技术：①把二级菜单放在一次菜单的里面，让他们成为父子原因：接下来我为要用到hover伪类来触发动画，而hover伪类要想触发成功，触发器和触发对象必须含有父子或祖孙关系。<
2020-08-30 23:21:19
4712
1
原创 爪哇部落前端第一次考核作业
第一次前端考核，师长门要求我们模范一个百度搜索的首页面，昨天已经发布了第二次的考核作业了，今天我把按照第一次考核的师长给的建议，做了些代码规范的修改。我做的修改有，一、把原来写在html内部的js代码用<script src=""></srript>引用给分离到独立的js文件了；二、给html\css\js的相应标签都加上 了注释，方便以后自己和别人查看；三、在html中...
2020-03-22 21:26:37
621
1
原创 洛谷P1308统计单词数
题目描述：一般的文本编辑器都有查找单词的功能，该功能可以快速定位特定单词在文章中的位置，有的还能统计出特定单词在文章中出现的次数。现在，请你编程实现这一功能，具体要求是：给定一个单词，请你输出它在给定的文章中出现的次数和第一次出现的位置。注意：匹配单词时，不区分大小写，但要求完全匹配，即给定单词必须与文章中的某一独立单词在不区分大小写的情况下完全相同（参见样例1 ），如果给定单词仅是文章中某一单...
2020-02-27 12:49:20
543
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人