-
Vue源码详细解析(一)--数据的响应化
2020-11-21 02:42:13至于shouldConvert和后续的几个判断则是为了防止value不是单纯的对象而是Regexp或者函数之类的,或者是vm实例再或者是不可扩展的,shouldConvert则是某些特殊情况下为false,它的解释参见源码里尤... -
原生js实现深拷贝【原创】
2019-02-02 23:57:26为什么我开始写博客了呢?...因为对象直接复制给另外一个变量时,2个变量的值指向堆栈中同一条数据,改变其中一个变量中某个key的value,都会影响到另外一个变量的值 数据类型 很多博客直接就typeof判断数据类型了...为什么我开始写博客了呢?因为今天有个场景下我需要实现这个功能,没有网络的情况下手写。逻辑写出来了,但是代码冗余量很大,其次呢,我发现好多博客写的确多多少少有点问题,所以我就扯出来这么一篇博客了
为什么需要深拷贝
因为对象直接复制给另外一个变量时,2个变量的值指向堆栈中同一条数据,改变其中一个变量中某个key的value,都会影响到另外一个变量的值
数据类型
很多博客直接就typeof判断数据类型了,时间new Data(),那也是返回的‘object’的,还有些用变量的构造函数初始化需要赋值的变量数据类型,实在是有些大才小用了
曾经看书,javascript高级程序设计中提到判断变量的数据类型,一下给出源码const judgeDataType = function(n,type){ return Object.prototype.toString.call(n)===type; }
使用递归
写这个函数本有点问题一直把result的初始化放在了if中,实在是有点服我自己的,导致我想了会儿为什么返回的数据不对
const deepCopy = function(n){ let result; const flag1 = judgeDataType(n,'[object Array]'); if( flag1 ||judgeDataType(n,'[object Object]')){ result = flag1?[]:{}; for(let key in n){ result[key] = deepCopy(n[key]) } }else{ result = n; } return result; }
测试数据
以下为测试数据,欢迎来提bug
let num = { a:1, arr:[1,2,3,[4,5],{flag:false}], obj:{ objChild:{ n:undefined, d:new Date(), e:'sssss' } }, fn:function(n){ ++n console.log(1) } }
ps:后续我会坚持写博客,一直想分享一个原生js实现的断点续传组件,若有需要可以评论中留言。
转载请注明出处,谢谢! -
Vue.js--笔记一
2020-08-18 19:58:02Vue一,基础1,ES6--语法关于 let 和 var关于闭包关于const对象字面量的增强写法2,事件监听1,v-on2,条件判断3,v-show4,组件的key属性5,检测数据更新--响应式3,双向绑定 v-model1,v-model:radio2,v-model:...一,基础
1,ES6–语法
关于 let 和 var
- 块级作用域
- ES5中的var是没有块级作用域的(if/for)
- ES6中的let是有块级作用的(if/for)
关于闭包
用let 就行了
关于const
对象字面量的增强写法
2,事件监听
1,v-on
- v-on修饰符
2,条件判断
- v-if ,v-else if,v-else
3,v-show
4,组件的key属性
<hr/> <ul> <!--官方推荐要添加 一个 :key 的属性--> <li v-for="go in gogo" :key="go">{{go}}</li> </ul>
5,检测数据更新–响应式
3,双向绑定 v-model
- 原理:
<input type="text" v-model="message"> 相当于 <input type="text" :value="message" @input="message = $event.target.value">
1,v-model:radio
2,v-model:checkbox
3,v-model:select
4,值绑定
5,修饰符
4,组件化
步骤:
- 创建组件构造器
- 注册组件
- 使用组件
父子组件的通讯
- 父传子
props 里面定义属性
- 子传父
1.@click=“btclick(item)” 子模板调用子方法
<template id="cpn"> <div> <button v-for="item in categories" @click="btclick(item)"> {{item.name}} </button> </div> </template>
2.btclick(item) 子方法调用v-on标签的方法
<script> const cpn={ template:'#cpn', data(){ return{ categories:[ {id: '1',name:'小米'}, {id: '2',name:'小高'}, {id: '3',name:'笑笑'}, {id: '4',name:'KIA'}, ] } }, methods:{ btclick(item){ // console.log(item); this.$emit('itemclick',item) } } } </script>
3.itemclick — v-on标签调用父类的方法
<cpn @itemclick="cpnclick"></cpn>
4.const app = new Vue
const app = new Vue({ el: '#app', data: { message: '你好呀!', }, components:{ cpn }, methods: { cpnclick(item){ console.log(item.name); } } })
5,模块化
6,webpack
1,配置文件
- 编写webpack.config.js
const path = require('path'); module.exports={ entry:'./src/main.js', //入口 output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js', }, //出口 }
-在控制台执行 npm init,会生成package.json文件
2,局部安装webpack
npm install webpack@3.6.0 --save-dev
3,依赖css文件
- 在main.js 中
const {add,mul} = require('./js/mathUtils.js'); console.log(add(12, 23)); console.log(mul(12, 2)); //依赖css文件 require('./css/normal.css'); //依赖less文件 require('./css/special.less')
在添加css样式,重新 npm run build时会包如下的错
ERROR in ./src/css/normal.css Module parse failed: E:\WebVue\13-webpack的使用\02-webpack的配置\src\css\normal.css Unexpected token (1:4) You may need an appropriate loader to handle this file type.
- 此时要在webpack.config.js中修改
const path = require('path'); module.exports={ entry:'./src/main.js', //入口 output:{ path:path.resolve(__dirname,'dist'), filename:'bundle.js', }, //出口 module: { rules: [ { test: /\.css$/, //css-loader 只负责加载css文件 不解析 //style-loader 负责将样式添加到DOM中 //从右往左加载,位置换掉后会报错 use: ['style-loader','css-loader' ] } ] } }
- 然后在终端执行以下的命令
npm install --save-dev css-loader npm install style-loader --save-dev
4,依赖less文件
- 终端
npm install --save-dev less-loader less
- webpack.config.js
// webpack.config.js module.exports = { ... module: { rules: [{ test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }] } };
5,依赖图片
- 注意
{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { //当加载的图片,小于limit时,会将图片编译成base64字符串形式 //当加载的图片,大于limit时,需要使用file-loader模块进行加载 limit: 8192, //以这种方式命名 name: 'img/[name].[hash:9].[ext]', } } ] },
6,ES6语法处理
babel-loader
7,导入Vue
-
npm install --save vue
-
在main.js声明(使用)
-
在webpack_config.js配置
- 使用 .vue 文件
添加 loader
npm install vue-loader vue-template-compiler --save-dev
修改配置
8,配置文件的分离
- 安装插件
npm install webpack-merge --save-dev
- 分离文件,dev.confog.js
const WebpackMerge = require('webpack-merge'); const baseConfig = require('./base.config.js'); module.exports = WebpackMerge(baseConfig,{ devServer:{ contentBase:'./dist', inline:true, } })
- base.config.js是一个基础的配置文件
- package.json
7,vue-cli2->vue-cli3
1,vue-cli2初始化项目
2,vue-cli3初始化项目
3,动态路由
- 新建.vue文件
- 在index.js中映射关系
- 在APP.vue中使用路由
<router-link replace :to="'/user/'+userName" tag="button">用户</router-link>
- 在User.vue中获取传过去的值
4,路由懒加载
5,路由嵌套
- index.js
{ path: '/home', component: Home, children:[ { path:'', redirect:'new', }, { path:'new', component:HomeNews, }, { path: 'message', component: HomeMessage, } ] },
-
Home.vue
-
效果
6,参数传递
- App.vue
<router-link replace :to="{path:'/profile',query:{name:'Mr-Jies',age:18,height:1.8}}" tag="button">档案</router-link>
- Profile.vue
8,异步操作
1,Promise
<script> //什么情况下会用到Promise? //一般情况下是有异步操作时,使用Promise对这个异步操作进行封装 // new ->构造函数(1.保存了一些状态信息 2.执行传入的函数) //在执行传入的回调函数时,会传入两个参数,resolve, reject.本身又是函数 new Promise((resolve, reject) => { //耗时操作1 setTimeout(() => { //成功时调用resolve resolve('hello world') //失败时调用 // reject() }, 1000) }).then((data) => { console.log(data); console.log(data); return new Promise((resolve, reject) => { //耗时操作2 setTimeout(() => { resolve('你好呀!!') }, 1000) }) }).then((data)=>{ console.log(data); console.log(data); return new Promise((resolve, reject) => { //耗时操作3 setTimeout(() => { reject('错误!!') }, 1000) }) }).catch((err)=>{ console.log(err); }) </script>
2,Promise三种状态
9,网络请求框架axios
- request.js
export function request(config) { //1.创建axios实例 const instance = axios.create({ baseURL:'********', timeout:5000, }) //2.拦截器 //2.1,请求拦截器 instance.interceptors.request.use(config=>{ //1.比如拦截config中的一些信息不符合服务器的要求 //2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标 //3.某些网络请求,必须携带一些特殊的信息 return config },error => { }); //2.2,响应拦截器 instance.interceptors.response.use(config=>{ return config.data },error => { }) //3.发送真正的网络请求 return instance(config) }
- 使用上面的封装函数
import {request} from "./network/request"; //最后的版本---为什么可以使用.then .catch 因为他的底层是AxiosPromise request({ url: '/api/h8/home/data', //请求参数拼接 params: { type: 'pop', page: 1, } }).then(res => { console.log(res); }).catch(err => { console.log(err); })
-
java源码包---java 源码 大量 实例
2013-04-18 23:15:26关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥... -
导师计划--数据结构和算法系列(上)
2020-12-09 04:46:22涉及的内容是基本的数据结构。在日本,晚上没事安排@…@,时间还是充足的...,于是自己整理下本系列知识点的上章内容。 <p><img alt="moiunt-Fuji" src=... -
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究
2017-02-28 21:22:19SessionStorage 存储的数据只在会话期间有效,关闭浏览器则自动删除 Sqlite 一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中 W3C 万维网联盟,创建于1994年,是Web技术领域最具权威... -
XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解
2008-12-05 08:39:07面向对象的思想方法已经非常流行了,在编程语言(例如java,js)中,都运用面向对象的编程思想。在XML中,就是要将网页也作为一个对象来操作和控制,我们可以建立自己的对象和模板。与对象进行交流,如何命令对象,... -
实体生成规则切换为包装类型,不再采用基本数据类型,为实体类生成添加显示的默认构造方法(感谢@h2so的pull request). 2019.01.06 修复处理number/decimal(x,x)类型的逻辑(感谢@arthaschan的反馈). 修复...
-
Vuex 源码分析
2021-01-09 07:05:57<code>vuex</code> 集中于MVC模式中的Model层, 规定所有的数据操作必须通过 <code>action</code> - <code>mutation</code> - <code>state change</code> 的流程来进行, 再结合 <code>vue</code> 的数据视图双向绑定... -
Java面试宝典2020修订版V1.0.1.doc
2020-05-21 19:24:4829、如何优化大数据量的访问? 51 30、oracle怎么去除去重 51 31、合并查询有哪些? 51 32、SQL语句执行顺序 51 33、null的含义 52 34、mysql分页 52 35、MySQL、SqlServer、oracle写出字符存储、字符串转时间 52 36... -
JAVA上百实例源码以及开源项目源代码
2018-12-11 17:07:42关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥... -
JAVA上百实例源码以及开源项目
2016-01-03 17:37:40关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥... -
前端开发基础-JavaScript
2020-11-20 18:08:12在Js中数组可以存储任意的数据,而且它的大小是可以动态调整的类似于OC中的NSMutableArray。创建数组可以使用构造函数的方式也可以使用字面量的形式,另外可以使用concat从一个数组中复制一个副本出来。... -
可删除指定时间范围内的数据,支持自动清理早期数据,设置最大保存记录数。 支持报警短信转发,支持多个接收手机号码,可设定发送间隔,比如即时发送或者6个小时发送一次所有的报警信息,短信内容过长,自动拆分多条...
-
java源码包2
2013-04-20 11:28:17关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥... -
mall-xiaohongshu-小程序模仿小红书.zip
2019-09-23 18:34:24经过讨论,得出了解决办法:将添加的地址信息push到全局上去,然后再从全局里面获取,这样就不会将之前的数据覆盖。而且这样处理,代码量大大的减少了。 代码如下:// 定义globalData对应的全局变量 app.js ... -
java源码包3
2013-04-20 11:30:13关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥... -
本组件提供了 before-init 钩子,它会在 UEditor 的 scripts 加载完毕之后、编辑器初始化之前触发,你可以在此时机,通过操作 window.UE 对象,来进行诸如添加自定义按钮、弹窗等的二次开发。before-init 的触发函数...
-
成百上千个Java 源码DEMO 4(1-4是独立压缩包)
2017-03-29 17:40:59关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥... -
成百上千个Java 源码DEMO 3(1-4是独立压缩包)
2017-03-29 17:39:54关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥... -
java源码包
2015-12-01 16:29:37关于数字签名:产生RSA密钥对(myKeyPair),得到RSA密钥对,产生Signature对象,对用私钥对信息(info)签名,用指定算法产生签名对象,用私钥初始化签名对象,将待签名的数据传送给签名对象(须在初始化之后),用公钥... -
说明:目前,数据分析是一个非常热门的方向,因为不管是互联网行业还是传统行业都已经积累了大量的数据,现在需要的就是从这些数据中提取有价值的信息,以便打造更好的产品或者为将来的决策提供支持。 给初学者的几...
-
正则表达式
2014-12-03 14:51:39无论是用正则表达式直接量还是用构造函数RegExp(),创建一个RegExp对象都是比较容易的.较为困难的任务是用正则表达式语法来描述字符的模式. JavaScript采用的是Perl语言正则表达式语法的一个相当完整的子集. 正则... -
React & Npm 组件库维护经验
2020-12-29 20:29:42同时对 js 项目也能优雅降级。 由于现在 typescript 已原生支持 npm 生态,如果组件本身使用 typescript 开发,我们只需要使用 <code>tsc -d</code> 命令在目录下生成对应的 <code>d.ts</code> 定义文件... -
、中文缩写数据集、中文任务基准测评 - 代表性的数据集-基准(预训练)模型-语料库-baseline-工具包-排行榜、PySS3:面向可解释AI的SS3文本分类器机器可视化工具 、中文NLP数据集列表、COPE - 格律诗编辑程序、doccano...
-
功能全面、多端支持的汉字拼音笔画 js 库 English | 在线试用/文档 | 备用文档地址 | 更新日志 | 应用:打字游戏 | 反馈错误/缺漏 | Gitee 展开目录 前言 0.快速使用 1.功能 2.概览 3.安装 3.1 使用 npm 安装 ...
-
Javascript模块化编程(三):require.js的用法 http://www.ruanyifeng.com/blog/2012/11/require_js.html RequireJS入门(一) http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html RequireJS入门...
收藏数
28
精华内容
11
-
dp+并查集
-
vue3从0到1-超详细
-
华为1+X——网络系统建设与运维(中级)
-
北京航天航空学校《高等数学》历年期末考试试卷(含答案).pdf
-
数据整理
-
杭电《自动控制原理》历年期末考试试卷(含答案).pdf
-
romantics.rar
-
基恩士.电气设备选型资料大全 (适合刚刚入行的电气工程师对设备进行选型规划)详解 报价
-
JavaSE之命令行传递参数
-
施耐德.rar电气设备选型资料大全 (适合刚刚入行的电气工程师对设备进行选型规划)详解
-
2012年南京大学《数据库技术》期末考试试卷.pdf
-
MySQL 多实例安装 及配置主从复制实验环境
-
def
-
上海大学-数学分析-2000—2010年历年考研试卷.doc.pdf
-
第52天学习打卡(JavaScript 流程控制Map和Set iterator 函数 内部对象)
-
华中师范大学《唐宋专题》AB卷及参考答案.pdf
-
华中师范大学《外国文学史》历年期末试卷及参考答案.pdf
-
皮尔兹.rar电气设备选型资料大全 (适合刚刚入行的电气工程师对设备进行选型规划)详解 报价
-
手写LRU缓存淘汰算法
-
sqlserver2008r2卸载工具包