- 博客(144)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 JavaScript数组去重的12种方法
1、利用 ES6 Set 去重（ES6 中最常用）Set 对象是 ES6 中新定义的数据结构，类似于数组，它允许你存储任何类型的唯一值，不管是原始值还是对象引用。Array.from() 方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a
2021-10-13 16:05:14
5241
1
原创 Node.js Express 框架：Express 框架中的请求和响应、Express 中间件、Express 请求处理、express-art-template 模板引擎
8、Node.js Express 框架8.1 Express 简介Express 是一个简洁而灵活的 node.js Web应用框架，提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性：可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。提供了方便简洁的路由定义方式对获取HTTP请求参数进行了
2021-10-12 21:51:34
3145
原创 请求响应原理及HTTP协议：服务器端基础概念、创建web服务器、HTTP协议、HTTP请求与响应处理、Node.js异步编程
1、服务器端基础概念2、创建web服务器3、HTTP协议4、HTTP请求与响应处理5、Node.js异步编程
2021-10-12 16:46:00
208
原创 Ajax 编程扩展：FormData、同源政策、jQuery 中的 Ajax
1、FormData1.1 FormData 对象的作用模拟 HTML 表单，相当于将 HTML 表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。异步上传二进制文件。1.2 FormData 对象的使用（1）准备 HTML 表单 <form id="form"> <input type="text" name="username" /> <input type="password" name="password" />
2021-10-12 11:00:08
138
原创 Ajax 编程基础：Ajax 基础、Ajax 运行原理及实现、Ajax 异步编程
1、Ajax 基础1.1 传统网站中存在的问题网速慢的情况下，页面加载时间长，用户只能等待。表单提交后，如果一项内容不合格，需要重新填写所有表单内容。页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。1.2 Ajax 概述Ajax：标准读音 [ˈeɪˌdʒæks] ，中文音译：阿贾克斯它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。（1）Ajax 的应用场景页面上拉加载更多数据。列表数据无刷新分页。表单项离开焦点数据验证。搜索框提示文字下
2021-10-12 10:20:04
261
原创 模板引擎artTemplate：模板引擎的基础概念、模板引擎的语法
1、模板引擎的基础概念1.1 模板引擎模板引擎是第三方模块。让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。1.2 art-template模板引擎在命令行工具中使用 npm install art-template 命令进行下载。使用const template = require('art-template')引入模板引擎。告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);使用模板语法告诉模板引擎，模板与数据
2021-10-11 16:31:25
260
原创 MongoDB数据库：数据库概述及环境搭建、MongoDB增删改查操作、MongoDB数据库添加账号
1、数据库概述及环境搭建1.1 为什么要使用数据库动态网站中的数据都是存储在数据库中的。数据库可以用来持久存储客户端通过表单收集的用户信息。数据库软件本身可以对数据进行高效的管理。http://www.czxy.com/article?id=1http://www.czxy.com/article?id=21.2 什么是数据库以及MongoDB数据库下载安装数据库即存储数据的仓库，可以将数据进行有序的分门别类的存储。它是独立于语言之外的软件，可以通过API去操作它。常见的数据库软件有
2021-10-11 15:46:06
193
原创 模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制、开发环境与生产环境、cookie与session
1、Node.js模块化开发1.1 JavaScript开发弊端JavaScript 在使用时存在两大问题，文件依赖和命名冲突。1.2 软件中的模块化开发一个功能就是一个模块，多个模块可以组成完整应用，抽离一个模块不会影响其他功能的运行。1.3 Node.js中模块化开发规范Node.js 规定一个 JavaScript 文件就是一个模块，模块内部定义的变量和函数默认情况下在外部无法得到。模块内部可以使用 exports 对象进行成员导出， 使用 require 方法导入其他模块。
2021-10-11 10:56:31
583
原创 Node.js 基础：Node开发概述、Node.js快速入门
1、Node开发概述1.1 为什么要学习服务器端开发基础能够和后端程序员更加紧密的配合。网站业务逻辑前置，学习前端技术需要后端技术支撑（Ajax）。扩宽知识视野，能够站在更高的角度审视整个项目。1.2 服务器端开发要做的事情实现网站的业务逻辑。数据的增删改查。1.3 为什么选择Node可以使用 JavaScript 语法开发后端应用。一些公司要求前端工程师掌握 Node 开发。生态系统活跃，有大量开源库可以使用。前端开发工具大多基于 Node 开发。1.4 Node是什
2021-10-10 23:47:09
413
原创 学习笔记（2）：HTML5 的新特性：新增的语义化标签、新增的多媒体标签、新增的 input 类型、新增的表单属性
1、HTML5 的新特性HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。2、HTML5 新增的语义化标签以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。<div class=“header”> </div><div class=“nav”> </div><d
2021-10-10 23:27:34
380
原创 学习笔记（1）：什么是网页、常用浏览器、Web 标准
１、网页1.1 什么是网页网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。1.２什么是 HTMLHTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页
2021-10-10 17:19:26
940
原创 JavaScript 中的可枚举属性与不可枚举属性、JavaScript 中数组遍历和对象遍历、使用JQuery 的遍历
1、JavaScript 中的可枚举属性与不可枚举属性在 JavaScript 中，对象的属性分为可枚举和不可枚举之分，它们是由属性的 enumerable 值决定的。可枚举性决定了这个属性能否被 for…in 查找遍历到。可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。可枚举的属性可以通过 for...in 循环进行遍历（
2021-10-09 21:53:55
1459
原创 jQuery 常用API： jQuery 选择器、 jQuery 样式操作、 jQuery 效果、 jQuery 属性操作、 文本属性值、 jQuery 元素操作、 jQuery 尺寸、位置操作
1、 jQuery 选择器1.1 jQuery 基础选择器原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号1.21.31.41.51.61.72、 jQuery 样式操作3、 jQuery 效果4、 jQuery 属性操作5、 jQuery 文本属性值6、 jQuery 元素操作7、 jQuery 尺寸、位置操作...
2021-10-09 00:04:50
174
原创 jQuery 事件: jQuery 事件注册、 jQuery 事件处理、jQuery 事件对象、 jQuery 拷贝对象、jQuery 多库共存、 jQuery 插件
1、jQuery 事件注册单个事件注册语法：element.事件(function(){})例如：$("div").click(function(){ 事件处理程序 })其他事件和原生基本一致。比如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等2、jQuery 事件处理2.1 事件处理 on() 绑定事件on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。语法：element.on(e
2021-10-08 10:15:29
322
原创 jQuery 概述、 jQuery 的基本使用
1、jQuery 概述1.1 JavaScript 库仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库： 即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show，比如获取元素等。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuer
2021-10-08 09:56:19
252
原创 Vue 单文件组件、Vue 脚手架、Element-UI 的基本使用
1、Vue 单文件组件1.1 传统组件的问题和解决方案（1） 问题全局定义的组件必须保证组件的名称不重复。字符串模板缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \ 。不支持 CSS 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏。没有构建步骤限制，只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器（如：Babel）。（2）解决方案针对传统组件的问题，Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。1.2 Vue
2021-10-07 11:09:32
255
原创 Vue全家桶：Vuex（Vuex 概述、Vuex 的基本使用、Vuex 的核心概念）
1、Vuex 概述1.1 组件之间共享数据的方式父向子传值：v-bind 属性绑定子向父传值：v-on 事件绑定兄弟组件之间共享数据： EventBus$on 接收数据的那个组件 （监听事件）$emit 发送数据的那个组件（触发事件）1.2 Vuex 是什么Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。1.3 使用 Vuex 统一管理状态的好处① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护。② 能够高效地实现组件之间的数据共享
2021-10-06 22:29:00
166
原创 详解BFC：块级格式化上下文
1、什么是BFC以及如何创建BFC（1）BFC 的概念：BFC（Block formatting context），即块级格式化上下文，它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。在一个 Web 页面的 CSS 渲染中，块级格式化上下文 （Block Fromatting Context）是按照块级盒子布局的。（2）W3C 对 BFC 的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks，table-cells 和
2021-10-06 17:30:49
2910
原创 JavaScript 预解析：变量提升和函数提升
1、预解析JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。预解析：在当前作用域下，JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。代码执行： 从上到下执行JS语句。预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，
2021-10-06 15:34:59
167
原创 div+css常见布局：两列布局、三列布局、圣杯布局和双飞翼布局
1、两列布局：左边固定，右边自适应左右两侧，左侧固定宽度 200px，右侧自适应占满。方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间// html 代码<div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div></div>// C
2021-10-05 19:38:56
21188
3
原创 浏览器渲染原理、DOMContentLoaded 和 load 的区别、页面的加载和渲染过程、defer 和 async 的用法和区别
浏览器渲染原理（当我们输入URL，按下回车发生了什么？）当我们在浏览器地址输入URL时，浏览器会发送请求到服务器，服务器将请求的HTML文档发送回浏览器，浏览器将文档下载下来后，便开始从上到下解析，解析完成之后，会生成DOM。如果页面中有css，会根据css的内容形成CSSOM，然后DOM和CSSOM会生成一个渲染树，最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置，并将其绘制在浏览器上。1、输入url地址后，首先进行DNS解析，将相应的域名解析为IP地址2、查找服务器的IP地址：
2021-09-30 22:06:15
1293
原创 路由的基本概念与原理、vue-router 的基本使用、嵌套路由、动态路由匹配、命名路由、编程式导航
1、路由的基本概念与原理2、vue-router 的基本使用3、vue-router 嵌套路由4、vue-router 动态路由匹配5、vue-router 命名路由6、vue-router 编程式导航
2021-09-27 18:16:29
664
原创 Vue 基础学习（4）：接口调用方式、异步、promise、fetch、axios、async 和 await
Vue 基础学习（4）：接口调用方式、异步、promise、fetch、axios、async 和 await
2021-09-27 10:51:43
1915
原创 基于组件的案例：购物车
基于组件的案例：购物车需求分析： 按照组件化方式实现业务需求。根据业务功能进行组件化划分：① 标题组件（展示文本）。② 列表组件（列表展示、商品数量变更、商品删除）。③ 结算组件（计算商品总额）。功能实现步骤：实现整体布局和样式效果划分独立的功能组件组合所有的子组件形成整体结构逐个实现各个组件功能标题组件列表组件结算组件代码：<!DOCTYPE html><html lang="en"><head> <meta
2021-09-26 23:21:11
640
原创 案例：图书管理（包括图书列表展示，添加、修改、删除图书功能）
案例：图书管理功能如下：（1）图书列表实现静态列表效果基于数据实现模板效果处理每行的操作按钮（2）添加图书实现表单的静态效果添加图书表单域数据绑定添加按钮事件绑定实现添加业务逻辑（3）修改图书修改信息填充到表单修改后重新提交表单重用添加和修改的方法（4） 删除图书删除按钮绑定事件处理方法实现删除业务逻辑（5）常用特性应用场景过滤器（格式化日期）自定义指令（获取表单焦点）计算属性（统计图书数量）侦听器（验证图书存在性）生命周期（图书数据处理）
2021-09-26 22:19:19
5099
原创 Vue 基础学习（2）：Vue 常用特性（表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期）
Vue 基础学习（2）：Vue 常用特性（表单操作、自定义指令、计算属性、侦听器、过滤器、生命周期）
2021-09-26 10:53:03
942
1
原创 Vue案例：Tab 选项卡
Vue案例：Tab选项卡效果： 可以实现切换功能。实现步骤：（1）实现静态 UI 效果用传统的方式实现标签结构和样式。（2）基于数据重构 UI 效果将静态的结构和样式重构为基于 Vue 模板语法的形式。处理事件绑定和 js 控制逻辑。（3）声明式编程模板的结构和最终显示的效果基本一致。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2021-09-26 09:42:24
315
原创 Vue 基础学习（1）：Vue 概述、Vue 基本使用、Vue 模板语法
Vue 基础学习（1）：Vue 概述、Vue 基本使用、Vue 模板语法
2021-09-26 09:41:41
252
原创 ES6 的内置对象扩展：Array 的扩展方法、String 的扩展方法、Set 数据结构
1、Array 的扩展方法1.1 扩展运算符（展开语法）扩展运算符(…)可以将数组或者对象转为用逗号分隔的参数序列。// 1. 扩展运算符(...)可以将数组或者对象转为用逗号分隔的参数序列let ary = ['a', 'b', 'c'];// ...ary; // 'a' , 'b', 'c'console.log(...ary); // a b c扩展运算符可以应用于合并数组。// 2. 扩展运算符应用于合并数组let ary1 = [1, 2, 3];let ar
2021-09-25 19:58:19
246
原创 ES6 的新增语法：解构赋值（包括数组解构和对象解构）、剩余参数、箭头函数
1、解构赋值ES6 中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。1.1 数组解构数组解构允许我们按照一 一对应的关系从数组中提取值，然后将值赋值给变量。如果解构不成功，变量的值为 undefined 。// 数组解构允许我们按照一一对应的关系从数组中提取值 然后将值赋值给变量let ary = [1, 2, 3];let [a, b, c, d, e] = ary;console.log(a); // 1console.log(b); // 2console.lo
2021-09-25 19:41:15
324
原创 正则表达式案例：表单验证
正则表达式案例：表单验证需求：（1）表单失去焦点，进行验证。（2）如果输入内容为空，提醒用户输入内容。（3）输入内容后，开始进行表单验证，成功，提示用户输入正确，失败，提醒用户重新输入。html 代码：<div class="registerarea"> <h3>注册新用户 <div class="login">我有账号，去<a href="#">登陆</a></div> </h3&g
2021-09-25 18:11:22
1582
原创 闭包案例：1. 循环注册点击事件 2. 循环中的 setTimeout() 3. 计算打车价格
1、循环注册点击事件。2、循环中的 setTimeout()。3、计算打车价格。
2021-09-25 17:49:40
155
原创 案例：查询商品案例
案例：查询商品案例把数据渲染到页面中 (forEach)。根据价格显示数据。根据商品名称显示数据(filter)。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>案例：商品查询案例</title> <style> .search { width:
2021-09-25 17:02:25
155
前端网页常见的炫酷特效
2023-04-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人