JS
JS
黄酱!
这个作者很懒,什么都没留下…
展开
-
MVC,MVP,MVVM
1.View 传送指令到 Controller2.Controller 完成业务逻辑后,要求 Model 改变状态3.Model 将新的数据发送到 View,用户得到反馈=MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。各部分之间的通信,都是双向的。View 与 Model 不发生联系,都通过 Presenter 传递。View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presente.原创 2022-03-14 11:36:02 · 1104 阅读 · 0 评论 -
webpack简单实用
[官方文档地址](https://webpack.js.org/guides/getting-started/#basic-setup)[插件下载地址](https://www.npmjs.com/)packge.json >{ "name": "webpack-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack serve原创 2022-03-13 15:51:02 · 1638 阅读 · 0 评论 -
GIT使用
# GIT 和 GITHUB- 在学习之前我们要先要清楚几个东西- `git` 和 `github` 是两个东西,不是一个东西- 就像 `java` 和 `javascript` 一样,是两个东西- 需要搞清楚几个词语的意思 - 本地:我自己的终端 - 远程:在网络那一头的终端 - 仓库:一个被 `git` 管理了的文件夹## 什么是 GIT- `git` 官方名称: **分布式版本管理器**- 私人解释: 就是一个管理我们文件夹的工具 - 只不过可以保留所有的版本信原创 2022-03-03 15:40:20 · 77 阅读 · 0 评论 -
gulp文档
# GULP- `gulp` 是一个项目开发的 **自动化打包构建工具**- 基于 `node` 环境来运行的## 什么是自动化打包构建工具- 比如 - 我们在开发的过程中,会写到 `js` 文件,`css` 文件,等等 - 我们的项目如果想上线,那么一定要体积小一点,文件大小越小越好 - 而我们在写 `js` 文件的时候,会有很多 **换行/空格** 之类的东西 - 这些 **换行/空格** 都是占文件体积的一部分 - 那么我们在上线之前就要吧这些 **换行/空格**原创 2022-02-22 20:55:30 · 256 阅读 · 0 评论 -
requires模块化与es6模块化
# 前端模块化 ##### 前言随着Ajax技术的兴起,前后端分离的开发模式逐渐占领了几乎整个市场,现在的服务器带宽也足够完成大量数据交互,于是很多以前在服务器端的逻辑也可以移植到前端来处理了,从而减轻服务器的压力,当然,这样的话Javascript代码就会越来越复杂。而Javascript作为一门松散的弱类型语言,在一个大型项目面前如果没有合理的拆分与规划,将会变得很难维护,这个时候我们就需要把前端逻辑做一个块化的处理。**所谓模块化就是把需要重复使用的功能封装成模块,一个页面有一个统筹全局的原创 2022-02-22 19:04:36 · 919 阅读 · 0 评论 -
Sass用法
# SASS- [SASS官网](https://www.sass.hk/)- ### 世界上最成熟、最稳定、最强大的专业级CSS扩展语言!- `sass` 是一个 css 的预编译工具- 也就是能够 **更优雅** 的书写 css- `sass` 写出来的东西 **浏览器不认识**- 依旧是要转换成 css 在浏览器中运行- 这个时候就需要一个工具来帮我们做## 安装 sass 环境- 以前的 `sass` 需要依赖一个 `ruby` 的环境- 现在的 `sas原创 2022-02-21 20:43:46 · 76 阅读 · 0 评论 -
node简介
# node- [node官网](https://nodejs.org/en/)- [node中文网](http://nodejs.cn/)- 什么是 node - Node.js is a JavaScript runtime built on [Chrome's V8 JavaScript engine](https://v8.dev/). - Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。- 这个是 node 官网的解释 - 其实 nod原创 2022-02-21 20:42:20 · 1058 阅读 · 0 评论 -
jquery网络请求和插件
# jQuery- 今天我们继续来聊 `jQuery`## 发送 ajax 请求- 发送 get 请求 ```js // 直接使用 $.get 方法来发送一个请求 /* 参数一: 请求地址 参数二: 请求时携带的参数 参数三: 请求成功的回调 参数四: 返回的数据类型 */ $.get('./ajax.php', { id: 10 }, function (res) { console.log(res) }, 'json')发送 post 请原创 2022-02-21 20:41:38 · 488 阅读 · 0 评论 -
jQuery
# jQuery - `jQuery` 是一个前端库,也是一个方法库- 他里面封装着一些列的方法供我们使用- 我们常用的一些方法它里面都有,我们可以直接拿来使用就行了- jQuery之所以好用,很多人愿意使用,是因为他的几个优点太强大了 1. 优质的选择器和筛选器 2. 好用的隐式迭代(之前给元素设置属性或者其他的东西,需要把数组或者集合进行遍历,jquery会默认给咱们遍历,迭代就是遍历) 3. 强大的链式编程- 因为这些东西的出现,很多时候我们要做的事情被 “一行代码解决”-原创 2022-02-17 20:46:16 · 157 阅读 · 0 评论 -
【无标题】
//console.log($('button')[0]) // $(document).ready(function(){ // console.log($('button')[0]) // }) //这个是上面方式的简写形式 $(function(){ console.log($('button')[0]) }) </script></head&g原创 2022-02-16 21:02:13 · 292 阅读 · 0 评论 -
购物车究极
index.html<!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-width, initial-scale=1.0"> <原创 2022-02-16 20:57:40 · 294 阅读 · 0 评论 -
面向对象购物车
<link rel="stylesheet" href="css/index.css"></head><body> <header>网页头部区域</header> <main> <ul></ul> </main> <a href="html/cart.html"> <div class="count">原创 2022-02-15 22:19:48 · 95 阅读 · 0 评论 -
借用构造函数继承与组合继承
//构造函数本质上也是一个函数类型,既然是一个函数类型,可以把它当成普通函数来调用 // function Person(name, age){ // this.name = name // this.age = age // console.log(this.name) // console.log(this.age) // } // Person('冯原创 2022-02-15 20:59:11 · 216 阅读 · 2 评论 -
原型继承。。
<script> //继承:例如,冯建炜有1000万,百年后,他儿子继承10块钱 //注意点:继承是继承相同的属性(共有的东西),一个类之间的继承 function Dog(name, age){ this.name = name this.age = age } Dog.prototype.rg = function(){ console.lo原创 2022-02-14 21:53:21 · 123 阅读 · 0 评论 -
闭包与闭包作用
<script> //闭包:一个函数在外部可以读取另一个函数内部的变量 function fn(){ let a = 10 //有一个 A 函数,再 A 函数内部返回一个 B 函数 return function(){ //B 函数内部访问着 A 函数内部的私有变量 console.log(a) }原创 2022-02-14 21:52:06 · 44 阅读 · 0 评论 -
【无标题】
函数回顾let num = 10 console.log(num) /* let num num = 10 console.log(num) */ //定义(声明)阶段 function fn(a){ console.log('hello') } //调用阶段 fn(10)原创 2022-02-14 21:51:09 · 45 阅读 · 0 评论 -
自执行函数
/* 自执行函数 + 立即执行函数 + 就是函数自己调用,函数声明完成后,会自己立马执行 + 特点: => 当函数执行完毕后,它会在内存空间里面进行销毁,比普通的函数节省空间 => 当咱们使用了自执行函数后,会形成一个私有作用域,只有内部使用,外部其他地方使用不了 + 作用: => 适合做原创 2022-02-14 14:40:52 · 88 阅读 · 0 评论 -
this改向
// 函数调用圆括号时(函数名称+括号),函数的this是window对象 // function fn(){ // console.log(this) // } // window.fn() // 函数作为一个对象的方法,对象打点调用,函数的this就是这个对象 // let obj = { // name: '柯真宏', // say(){原创 2022-02-14 14:40:24 · 123 阅读 · 0 评论 -
jsonp
同源策略+ 同源策略主要是为了安全性 => 协议:http https ftp => 域名:www.baidu.com www.jd.com => 端口:80 8080 40等等 => 只要其中有一个不相同我就不让你访问 => 同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。 同源策略给前端带来原创 2022-02-13 22:05:59 · 123 阅读 · 0 评论 -
回调地狱与promise
<script src="js/ajax.js"></script> <script> // function fn(a){ // a() // } // fn(function(){}) // let arr = ['a', 'b'] // arr.sort(function(){}) // setTimeout(function(){原创 2022-02-10 20:34:20 · 361 阅读 · 0 评论 -
ajax实现快递查询
<!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-width, initial-scale=1.0"> <title>Doc原创 2022-02-10 17:35:03 · 106 阅读 · 0 评论 -
ajax方式
### 同步和异步同步: 指的就是事情要一件一件做。等做完前一件才能做后一件任务异步: 不受当前任务的影响,两件事情同时进行,做一件事情时,不影响另一件事情的进行。编程中:异步程序代码执行时不会阻塞其它程序代码执行,从而提升整体执行效率。### ajax的概念##### 什么是ajax 1 Ajax: asynchronous javascript and xml (异步js和xml) 2 是可以与服务器进行(异步/同步)交互的技术之一。ajax的语言载体是jav原创 2022-02-09 19:41:36 · 258 阅读 · 0 评论 -
sessionStorage存储
<button>设置</button> <button>获取</button> <button>删除</button> <button>清空</button> <script> let aBtn = document.querySelectorAll('button') aBtn[0].addEventListener('click',原创 2022-02-09 19:36:00 · 413 阅读 · 0 评论 -
h5新增存储localstorge
localStorage.setItem('username', '张三') localStorage.setItem('password', 123) console.log(localStorage.getItem('username')) localStorage.removeItem('username') console.log(localStorage.getItem('username'))加入购物车<s原创 2022-02-08 20:59:14 · 243 阅读 · 0 评论 -
cookie
设置cookie<body> <a href="03-获取cookie.html">购物车页面</a> <script> //怎么在浏览器里面存储一个cookie呢? //cookie默认是会话级别的存储,浏览器关闭就自动清除了。说明cookie是存在过期时间 //注意点:存储cookie必须分开单个存储设置 // document.cookie = 'username=张三'原创 2022-02-08 20:58:11 · 60 阅读 · 0 评论 -
php简单学习
/* 网站或者APP开发 + 都是由两部分组成 => 前端,使用html、css、js完成网页相关的一些功能,给用户进行界面的展示 => 后端,和服务器还有数据库相关,网站或者APP都是放在服务器上面的,要不然别人访问不了的。前端的数据不是固定的, 都是后端传递给咱们的 + 前后端交换 => 在实际开发中会.原创 2022-02-07 20:14:36 · 192 阅读 · 0 评论 -
购物车功能
<!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-width, initial-scale=1.0"> <title>Document<原创 2022-01-16 19:11:09 · 106 阅读 · 2 评论 -
淡出淡入轮播
<style> * { margin: 0; padding: 0; } ul { list-style: none; position: relative; width: 590px; margin: 50px auto; } li { position: absolute; display: none; top: 0; left:原创 2022-01-16 19:08:36 · 336 阅读 · 0 评论 -
多属性运动函数
<style> .box, .box2 { width: 100px; height: 100px; position: absolute; background-color: #f00; top: 50px; left: 100px; opacity: 0.5; } .box2 { top: 200px; } </style></head&g原创 2022-01-16 19:08:06 · 105 阅读 · 0 评论 -
单属性运动函数封装
JSfunction $(selector, all) { if (all) { return document.querySelectorAll(selector) } return document.querySelector(selector)}<style> .box, .box2 { width: 100px; height: 100px; position: absolute; background-原创 2022-01-16 19:06:30 · 353 阅读 · 0 评论 -
购物车渲染
<!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-width, initial-scale=1.0"> <title>Document<原创 2022-01-13 23:57:08 · 181 阅读 · 0 评论 -
右键菜单选项 左键取消菜单
<style> * { margin: 0; padding: 0; } ul { border: 1px solid; width: 100px; position: absolute; display: none; } </style></head><body> <ul> <li>全选</li>原创 2022-01-12 18:26:24 · 273 阅读 · 0 评论 -
获取元素计算定位
<div class="outer"> <div class="inner"> asdflj <span>asdfljasl</span> </div> </div> <script src="js/tools.js"></script> <script> // 获取元素的计算定位 console.log($('.inner').o原创 2022-01-12 18:08:58 · 98 阅读 · 0 评论 -
文档中拖拽
<style> .outer { width: 400px; height: 400px; position: relative; background-color: #666; margin: auto; } .inner { width: 100px; height: 100px;原创 2022-01-12 17:54:09 · 68 阅读 · 0 评论 -
小盒子在大盒子里往返运动:计时器与dom
<style> .container { width: 100px; height: 100px; background: #f00; position: absolute; top: 100px; left: 100px; } .box { width: 800px; height: 600px; position: relative; backgr原创 2022-01-10 21:02:46 · 163 阅读 · 0 评论 -
回调函数理解
<script> /*回调函数*/ function callBkFun(params) { console.log(params) } 普通的函数 形参 /** * @param {Function} [callback] * */function runCallback (callback){ 如果实参传递了函数 为true 执行 if (callback) { console.l原创 2021-12-29 16:10:34 · 246 阅读 · 0 评论 -
localStorage学习
定义和使用localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除。localStorage 属性是只读的。提示: 如果你只想将数据保存在当前会话中,可以使用 sessionStorage 属性, 该数据对象临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 <title>持久化存储</title原创 2021-12-14 13:09:40 · 92 阅读 · 0 评论 -
跳转主界面
主界面html<body> <header> <h2>后台管理系统 <span class="user-info">账号:admin</span></h2> </header> <div class="container"> </div></body>css<style> * {原创 2021-12-13 21:37:48 · 66 阅读 · 0 评论 -
JS正则表达式
<!-- 正则表达式 - 用某种模式去匹配一类字符串的公式 let str = 'Dgfhfgh254bhku289fgdhdy675gfh' //创建一个能匹配上述字符串中数值字符的模式 let reg = /\d+/ //匹配 reg.test(str) => true.原创 2021-12-13 20:18:50 · 627 阅读 · 0 评论 -
表单验证正则与非空验证
<style> .form1 { width: 300px; margin: 100px auto; background-color: cadetblue; padding: 50px; } .item { margin-bottom: 20px; } p { colo原创 2021-12-13 20:15:36 · 2199 阅读 · 0 评论