- 博客(21)
- 收藏
- 关注
原创 前端工程化--webpack配置和脚手架的简单应用
前端工程化也可以叫做前端模块化。首先先了解对比一下传统开发的主要问题:命名冲突问题:多个js文件之间如果有重名的变量,则会发生覆盖问题文件依赖问题:js文件之间无法实现相互的引用为了解决传统开发的问题,所有出现了模块化的方案:模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块模块化开发的好处:方便代码的重用,从而提升开发效率,并且方便后期的维护webpackwebpack是一个流行的前端项目构建工具(打包工具)
2020-11-12 16:27:25
307
原创 Vue基础
Vue基础Vue:渐进式JavaScript框架声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建Vue的基本使用 vue的基本使用步骤:1.需要提供标签用于填充数据2.引入vue.js库文件3.可以使用vue的语法完成功能4.把vue提供的数据填充到标签里面效果如下:<body> <div id="msg"></div> <div id="msg2"></div>
2020-11-04 08:08:26
714
原创 ES6课程笔记
ECMA6是什么它可以理解为是JavaScript的一个标准,实际上JavaScript是ECMA标准的实现和扩展。ES6即代表ES5.1后的6.0版本,也是泛指5.1之后下一代标准,涵盖了ES2015,ES2016,ES2017等等,而ES2015则是正式名称。开发语言的整体流程块级作用域在ES5版本中只存在全局作用域和函数作用域例如:var A = 100;//在全局作用域中function fn(){ //在函数作用域中 var B = 10; conso
2020-10-28 09:14:00
179
原创 nodejs博客系列课之第二章nodejs介绍
nodejs和js的区别ECMAScriptJavaScriptnodejsECMAScript不能操作DOM,不能监听click事件,不能发送Ajax请求等等即,只有ECMAScript,几乎操作不了任何实际的项目它可以理解为是JavaScript的一个标准,但实际上后者是ECMA-262标准的实现和扩展定义了语法,写JavaScript和nodejs都必须遵守JavaScript使用了ECMAScript语法规范,外加Web API,缺一不可例如,DOM操作,BOM操
2020-09-29 16:06:31
155
原创 jQuery操作CSS类名之添加和删除(2)
删除上次说的删除元素是.remove([selector ]),还有另外一个函数和它很像的函数,不过这个函数只能删除函数的样式removeClass([class|fn])参数:class:将要被删除的元素名的样式名回调函数fn(index,class)index:表示在所有匹配元素的集合中当前元素的索引class:表示原有的样式名当参数什么都不写时:效果如下,此时只是删除类的类名<body> <p class="PP">我是P1</p&
2020-09-22 23:12:47
1048
原创 jQuery操作CSS类名之添加和删除(1)
jQuery操作CSS类名添加.addClass( className ,func(index,currentClass))谁调用就为谁添加一个类型,就是相当于标签里的class名className:为元素将要条件的类型(这个可以选择不写)回调函数(这个可以选择不写,想要给多个元素添加的话才用)index:多个元素中每个元素的索引currentClass:为这个对象原先的class属性值效果如下:<body> <p>我是1</p>
2020-09-21 22:34:52
587
原创 jQuery的each之间的区别
jQuery的each之间的区别$().each(callback)$.each(object,[callback])$().each(callback)遍历方法,不过被遍历的需要是被jQuery封装过之后jQuery对象,为每个遍历过的元素执行回调函数其中callback的参数为callback(index,domEle)index:为每个遍历的元素的索引值domEle:为每个遍历的dom对象<body> <p>我是1</p> &
2020-09-20 19:47:31
148
原创 canvas
canvascanvas标签用于在JavaScript中绘制图像,这个标签本身没有绘画能力,只能作为一个容器,真正执行画图操作的还是JavaScript<canvas id="myCan" width="500" height="800"></canvas>canvas标签只有两个属性,长和宽,canvas初始化时会默认宽300px,长150px注:该元素可以使用CSS来定义大小,但在绘制时图像会伸缩以适应它的框架尺寸:如果CSS的尺寸与初始画布的比例不一致,它会出现扭曲。
2020-09-17 20:07:48
527
原创 fetch简单示例笔记
Fetch基本语句fetch是原生js的一个api,是一种http数据请求的方式,是XMLHTTPRequest的一中替代方法,跟Ajax没关系。fetch是增的api,所以兼容性不是很好<script> //使用fetch发送请求 fetch('https://v1.hitokoto.cn/', { method: "GET" }).then(result => { console.log(result) }).catc
2020-09-09 11:24:54
442
原创 粗略学习axios笔记
什么是axios是一个类库,基于promise管理的Ajax库提供了对应的请求方法,例如:get、post、head、delete、put。options等等axios简单请求示例支持的参数配置:axios.get(url,options)url:请求的地址options:配置项目get请求中会把params键值对拼接成urlencoded格式的字符串,然后以问好传递参数的方式传递给服务器,类似于jQuery的Ajax中的data,或者自己在url后面拼接也行axios.post
2020-09-09 11:20:20
118
原创 跨域相关问题
同源策略同源策略的目的是为了保护用户的隐私数据,防止恶意网站窃取数据。所谓同源策略必须协议相同,域名相同,端口号相同。如果非同源,共会受到行为限制:Cookie、LocalStorage和ndexDB无法读取DOM无法获得AJAX请求不能发送跨域是什么当一个资源从与该资源本身所在 的服务器不同的域或端口请求一个资源时,资源会发起一个跨域HTTP请求。出于安全原因,浏览器限制从脚本内发起的跨院HTTP请求。例如XMLHTTPRequest和FetchAPI遵循同源策略。这意味着使用这些API的
2020-09-06 16:54:19
135
原创 JQuery中的Ajax
JQuery中的AjaxJQuery不仅对JavaScript语言进行了封装,也对Ajax异步交互进行了封装。JQuery提供了6个Ajax操作的方法:load()方法$.get()方法$.post()方法$.ajax()方法$.getScript()方法$.getJSON(方法还提供了以下几种事件:ajaxStart()事件ajaxStop()事件ajaxComplete()事件ajaxSend()事件ajaxError()事件ajaxSuccess()事件load(
2020-09-05 13:38:16
147
原创 Ajax之JSON数据格式
JSON是什么JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)。 这些特性
2020-09-03 20:23:00
654
原创 Ajax第一部分笔记
同步交互与异步交互同步交互是什么所谓同步交互,就是指客户端向服务器发送请求,必须等待返回结果,才能发送下一个请求。同步交互相当于排队,轮到下一个轻快会因为前一个有所不同。异步交互是什么所谓异步交互,就是指客户端发送一个请求,不需要等待返回结果,随时可以发送下一个请求。同步交互与异步交互的区别在于同步交互需要等待结果,而异步交互不需要等待。异步交互的优势用户操作无须像同步交互必须等待结果异步交互只需要与服务端交换必要的数据内容,而不是将所有的数据全部更新异步交互对带宽造成的压力比同步交互
2020-09-02 16:22:06
148
原创 HTTP第二阶段笔记
HTTP经典五层模型低三层物理层:主要作用是定义物理设备如何传输数据数据链路层:在通信的实体间建立数据链路连接网络层:为数据在结点之间传输创建逻辑链路传输层向用户提供可靠的端到端(End-to-End)服务传输层向高层屏蔽了下层数据通信的细节应用层为应用软件提供了很多服务构建于TCP协议之上屏蔽网络传输相关细节HTTP三次握手TCP提供一种面向连接的、可靠的字节流服务。面向连接意味着两个使用TCP的应用(通常是一个客户和一个服务器)在彼此交换数据包之前必须先建立一个T
2020-08-25 21:48:09
165
原创 HTTP第一阶段笔记
HTTP是什么HTTP(超文本传输协议),是互联网上应用嘴广泛的一中网络协议。HTTP协议是在Web上进行数据交换的基础,是一种“客户端–服务器端”的协议。也就是说,请求通常是由像浏览器这样的接收方发起的。一个完整的Web文档通常是由不同的子文档拼接而成的,像是文本,布局描述,图片,视频,脚本等等。设计HTTP最初的目的是为了提供一种发布和接受HTML页面的方法。HTTP请求与响应消息客户端和服务端通过交换各自的消息(与数据流正好相反)进行交互。由像浏览器这样的客户端发出的消息叫请求(requ
2020-08-20 22:36:17
350
原创 nodejs入门学习第三天
1-了解端口一台电脑可以部署多个服务器,例如:Apache软件部署的服务器我们自己用http模块搭建的服务器mysql数据库服务器之后我们就能通过ip地址来找到这个电脑(localhost或者127.0.0.1)通过端口来找到不同的服务器注意:默认的http端口号是80端口,所有Apache配置这个web服务器同的就是80端口默认的80端口可以不写服务器端口不能乱写,很多端口已经被其他的服务器给占用了2-web服务器读取网页返回给用户//1.导入模块const fs
2020-07-03 22:37:06
143
原创 nodejs入门学习第二天
NodeJS模块化1-内置模块fs的基本使用//导包const fs = require("fs")//调用unlink的删除方法//第一个参数:要删除的文件路径//第二个参数:回调函数fs.unlink("hello.txt", (err) => { if (err) throw err; console.log("已成功删除")})2-内置模块fs的读文件//导包const fs = require("fs")//调用方法//第一个参数:文件的路径//第
2020-07-02 22:06:20
149
原创 nodejs入门学习第一天
nodejs入门1.1-什么是nodejsNode是一个构建于Chrome V8引擎上的一个JavaScript运行环境Node是一个运行环境,作用是让js拥有开发服务端的功能Node使用事件驱动,非阻塞IO模型(异步读写)使得它非常轻量级和高效Node中绝大多数API都是异步(类似于Ajax),目的是提高性能Node中的NPM是世界上最大的开源库生态系统(类似于gitHub)1.2-Node.js环境安装1.2.1-如何判断自己当前电脑是否已经安装了Node环境打开终
2020-07-01 20:09:31
724
原创 jQuery学习笔记第三天
jQuery属性操作jQuery的attr方法和removeAttr方法attr() 方法设置或返回被选元素的属性值。根据该方法不同的参数,其工作方式也有所差异。$(selector).attr(attribute)$(selector).attr(attribute,value)可以传一个值,代表获取被选元素的属性值也可以传两个值,代表设置被选元素的属性和值注:如果传一个值,无论找到多少个元素,只返回找到的第一个元素如果传两个值,就是设置值,那么找到多少个就设置多少个remov
2020-06-17 22:35:09
232
1
原创 JQuery学习笔记第二天
jQuery核心函数jQuery()或$()函数是jQuery库中的核心函数,jQuery的一切都是基于此函数的。该函数主要用于获取HTML DOM元素并将其封装为jQuery对象,以便于使用jQuery对象提供的其他属性和方法对DOM元素进行操作。以下为可以接收的参数类型:可以接收一个核心函数$(function(){ // 本文档页面载入完成后自动执行 alert("文档加载完毕!");});//jQuery的入口函数可以接收一个字符串可以接收一个字符串选择器v
2020-06-16 21:30:14
305
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人