如初的博客🥝

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

绑定事件的两种方式/DOM事件的级别我们在上一篇文章 DOM操作详解中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。 DOM0的写法：onclick 123element.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></ ...

24-BOM的常见内置方法和内置对象

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

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

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 常见边框汇总 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819 ...

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:'+ ...

CommonJS

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

全局对象 global 类似于客户端 JavaScript 运行环境中的 window。 process 用于获取当前的 Node 进程信息，一般用于获取环境变量之类的信息。 console Node 中内置的 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 //方式二开发工具的调试 ...

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： 123456789101112131415 ...

Vue-router路由

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

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

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全部选中：采用 ...

Vue组件

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

子组件的定义和注册我们在本文的第一段中，通过Vue.component形式定义的是全局组件。这一段中，我们来讲一下子组件。在父组件中定义子组件比如说，一个账号模块是父组件，里面分为登陆模块和注册模块，这两个晓得模块就可以定义为子组件。需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。 1234567891011121314151617181920212223242526272829303132333435363738<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati ...

WebSocket

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

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