如初的博客🥝

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

BOM的介绍JavaScript的组成JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。 BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。什么是BOMBOM：Browser Object Model，浏览器对象模型。 BOM的结构图：从上图也可以看出： window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。 DOM越是BOM的一部分。 window对象： window对象是JavaScript中的顶级对象。全局变量、自定义函数也是window对象的属性和方法。 window对象下的属性和方法调用时，可以省略window。下面讲一下 BOM 的常见内置方法和内置对象。弹出系统对话框比如说，alert(1)是window.alert(1)的简写，因为它是window的子方法。系统对话框有三种： ...

22-事件对象Event和冒泡

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

绑定事件的两种方式/DOM事件的级别我们在上一篇文章 DOM操作详解中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。 DOM0的写法：onclick123element.onclick = function () {} 举例： 1234567891011121314151617<body><button>点我</button><script> var btn = document.getElementsByTagName("button")[0]; //这种事件绑定的方法容易被层叠。 btn.onclick = function () { console.log("事件1"); } btn.onclick = function () { console.log("事件2"); }</script></bo ...

25-原型链

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

常见概念构造函数构造函数-扩展原型规则和示例原型链 instanceof 构造函数任何一个函数都可以被new，new了之后，就成了构造方法。如下： 123456789function Foo(name, age) { this.name = name; this.age = age; //retrun this; //默认有这一行。new一个构造函数，返回一个对象}var fn1 = new Foo('smyhvae', 26);var fn2 = new Foo('vae',30); //new 多个实例对象与普通函数相比，构造函数有以下明显特点：用new关键字调用。不需要用return显式返回值的，默认会返回this，也就是新的实例对象。建议函数名的首字母大写，与普通函数区分开。参考链接： JavaScript中的普通函数与构造函数当new之后，this会先变成一个空对象，然后通过this.name = name来赋值。构造函数的扩展上图中发现 ...

26-常见代码解读

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

callback && callback()的含义1callback && callback() 含义是：如果callback存在，则执行callback()函数。这个 callback 通常作为函数的参数使用。举例： 123456789function foo(callback) { { // do something } callback && callback() // 不传 callback 参数，则不会执行 callback() 函数 }foo(); // 只执行do something中的代码 foo(callback);//callback是另一个函数，将此函数传入 foo，将会执行callback()

CSS3的常见边框汇总

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

CSS3 常见边框汇总123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199 ...

ES6

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

前言ECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语法标准。发展历史20180303_1633.png 2015年6月，ES6正式发布。 ES6 的其他优势使用 babel 语法转换器，支持低端浏览器流行的库基本都是基于 ES6 构建。 React 默认使用 ES6 新源发开发。 ES6 的常用语法ES6语法概览块级作用域、字符串对象扩展、解构类、模块化等。作用域：let 和 const 用 let定义变量，替代 var 用const 定义常量（定义后，不可修改）作用域和 {} 举例： 123let a1 = 'haha';const name = `smyhvae`; 模板字符串我们以前让字符串进行拼接的时候，是这样做的：（传统写法的字符串拼接） 123var name = 'smyhvae';var age = '26';console.log('name:'+name+',age:'+age); //传统写法 ...

Node.js代码举例

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

在 Node.js 上建一个 http 服务器（1）新建一个文件 server01.js，然后在里面输入如下代码： 1234567891011const http = require('http'); //引入 node.js里面的一个http包。因为引入之后，我们不会去修改它，所以用常量来表示// 创建一台服务器var server = http.createServer(function (){ //当有人来访问这台服务器时，就会执行 function 回调函数 console.log('有人来访问我了');});server.listen(8080); //要让服务器设置为监听状态，端口设置为8080 注意看注释。我们把上面这个 js 文件跑起来，然后在浏览器端输入http://localhost:8080/，每请求一次，服务器的控制台就会打印有人来访问我了。（2）write()函数和 end()函数：将上面的代码修改如下： server02.js： 123456789101112131415c ...

Vue-router路由

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

前言路由：就是SPA（单页应用）的路径管理器。

CommonJS

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

全局对象global类似于客户端 JavaScript 运行环境中的 window。 process用于获取当前的 Node 进程信息，一般用于获取环境变量之类的信息。 consoleNode 中内置的 console 模块，提供操作控制台的输入输出功能，常见使用方式与客户端类似。全局函数 setInterval(callback, millisecond) clearInterval(timer) setTimeout(callback, millisecond) clearTimeout(timer) Buffer：Class 用于操作二进制数据以后介绍 Node 调试最简单的调试最方便也是最简单的调试：console.log() Node 原生的调试网址：https://nodejs.org/api/debugger.html 第三方模块提供的调试工具1234$ npm install node-inspector –g //方式一$ npm install devtool -g //方式二开发工具的调试 Visual Studio C ...

Vue开发积累

发表于 2019-04-26 | 更新于 2024-10-22 | Vue | Vue

动态添加对象的属性 Vue中，动态新增对象的属性时，不能直接添加。正确的做法是：Vue.set(obj,key,value)。参考链接：# 判断一个checkbox是否被选中12345678910<input type="checkbox" v-model="isSelected"><span>{{isSelected}}</span><span v-if="isSelected">haha</span> 多个checkbox的全选和反选现在有多个checkbox的item在一个数组中，另外还有一个“全选”的checkbox按钮。点击全选按钮，让子item全部选中：采用 wat ...

call、apply、bind的区别

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | JavaScript

call()和apply()介绍这两个方法都是函数对象的方法，需要通过函数对象来调用。当函数调用call()和apply()时，函数都会立即执行。都可以用来改变函数的this对象的指向。第一个参数都是this要指向的对象（函数执行时，this将指向这个对象），后续参数用来传实参。显式绑定thisJS提供的绝大多数函数以及我们自己创建的所有函数，都可以使用call 和apply方法。它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象，因此我们称之为显式绑定。例1： 12345678910function foo() { console.log(this.a);}var obj = { a: 2};// 将 this 指向 objfoo.apply(obj); //打印结果：2 第一个参数的传递1、thisObj不传或者为null、undefined时，函数中的this会指向window对象（非严格模式）。 2、传递一个别的函数名时，函数中的this将指向这个函数的引用。 3、传递的值为数字、布尔值、 ...

WebSocket

发表于 2019-04-26 | 更新于 2024-10-22 | Nodejs | Nodejs

WebSocket 的引入背景分析HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。当用户在浏览器上进行操作时，可以请求服务器上的api；但是反过来却不可能：服务器端发生了一个事件，无法将这个事件的信息实时主动地通知客户端。只有在客户端查询服务器当前状态时，所发生事件的信息才会从服务器传递到客户端。那怎么去实时地知道服务器的状态呢？方法有两个：（1）轮询：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。（2）长连接：客户端只请求一次，但是服务器会将连接保持，不会返回结果。当服务器有了新数据时，实时地发给客户端，而一直保持挂起状态。这种做法的也造成了大量的性能浪费。 WebSocket 协议最新的 HTML5协议，制定了 WebSocket 协议标准，允许客户端和服务器端以全双工的方式进行通信。 WebSocket 的原理非常简单：利用HTTP请求产生握手，HTTP头部含有 WebSocket ...