![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
技术篇
文章平均质量分 93
涵信
关注我,学你所学,一起进步
展开
-
JS基础知识大总结史上最全(已完结~)
1.变量定义:我们向系统申请了一个地方,这个地方门牌号是我们定义好的属性名,然后把属性值赋予属性名。如果重复给同一属性名赋值,最后赋值的一个将成为最终的属性值。命名规则:a. 变量名必须以英文字母,_,或$开头b. 变量名可以为英文字母、_、$或者数字c. 不可以用系统的关键字和保留字作为变量名2.值类型-数据类型不可改变原始值:(有五种,存放在stack / 栈中。first in,last out) (不可改变的含义是每次赋值都会重新开辟一个stack)Number原创 2020-08-31 22:16:42 · 15367 阅读 · 4 评论 -
webpack 史上最完整配置 (保姆级)
1.安装loader 及 其他模块原创 2020-05-28 14:44:04 · 3398 阅读 · 0 评论 -
webpack之jest-webpack测试
1.安装npm i jest jest-webpack -D2. 新增一条配置项(在packjson.js)3.新建一个跟webpack.config.js同级的tests文件夹, 因为jest-webpack测试的时候会去找这个文件4.在src/js/index.js文件夹中写入5.在tests文件下面创建一个index.test.js文件, 这个文件需要require需要测试的文件, 这里不需要import的原因是因为不需要编译, 直接测试即可, node支持require,原创 2020-05-28 11:24:53 · 6219 阅读 · 0 评论 -
webpack配置url-loader及file-loader
1. 安装npm i url-loader file-loader -D2.配置(在webpack.comfig.js文件中)3.url-loader作用是将小于限制文件大小的文件转换为base64的文件存到bundle/imgs文件下(自己输出的文件夹路径),url-loader包含file-loader,但是使用url-loader的时候也需要安装一下file-loader...原创 2020-05-27 16:32:55 · 3138 阅读 · 0 评论 -
webpack配置css-loader以及less-loader
1.安装npm istyle-loader(将解析的css文件转换成页面级style) css-loader(解析css文件) less-loader(将less文件解析成css文件)-D2.配置(在webpack.config.js中)①css-loader配置②less-loader配置原创 2020-05-27 16:07:46 · 310 阅读 · 0 评论 -
webpack 配置babel编译
1. 安装npm i babel-loader @babel/core(babel资源中心库)@babel/preset-env(babel预设) -D2.webpack.config.js中配置babel-loader 和@babel/preset-env的关系类似于 postcss-loader 和 autoprefixer的关系3.在packjson.js 文件的scripts中新增一条配置项4.运行 npm run webpack会编译index.html中引入的..原创 2020-05-27 15:45:37 · 2839 阅读 · 1 评论 -
postcss-loader配合autoprefixer给css加浏览器前缀名
1. 安装npm i postcss-loader autoprefixer -D2. 在webpack.config.js 中配置3.查看index.html 中 引入的 "dest/bundle.js"(webpack 输出地址)中引入的index.css文件(使用的是require("../css/index.css"))4.此时在文件根目录的命令行中输入 webpack此时的transform是没有浏览器前缀的5.增加一个.browserslistrc文件我们还.原创 2020-05-27 10:52:37 · 246 阅读 · 0 评论 -
webpack Eslint 代码规范
1. 安装npm i eslint elint-loader2. 配置webpack.config.js文件module: {rules: [{test: "/\.(js|jsx)/i", loader: "eslint-loader", exclude: "node_modules", options: {}}]}3.配置packjson.js 文件在scripts中写入:"eslint_init": "eslint --init "4. 使用npm run原创 2020-05-26 16:28:08 · 207 阅读 · 0 评论 -
node babel配置
1.npm 安装以下插件npm Install -g @babel/core(核心babel库) @babel/cli(babel常用函数) @babel/preset-env(预设环境)2. 新增跟package.json同级的.babelrc文件里面写入一个JSON对象{ "presets": [''@babel/preset-env]}3.在package.json文件的scripts中写入"build":"babelsrc-ddest"4.运行 npm...原创 2020-05-10 16:03:10 · 251 阅读 · 0 评论 -
ES7,8,9
原创 2020-05-07 09:13:07 · 104 阅读 · 0 评论 -
查看元素的几何尺寸
elem.getBoundingClientRect() 兼容性很好注: 此方法中的height 和 width 在id老版本中尉氏县, 返回的结果是此时此刻这个元素的静态数据原创 2020-04-28 21:39:39 · 2732 阅读 · 0 评论 -
封装窗口尺寸(window)的宽高方法
window.innerHieght/ innerWidth ie9及以上兼容ie8 及以下:标准模式:CSS1Compatx:document.documentElement.clientWidth,y:document.documentElement.clientHeight混杂模式: BackCompatx:document.body.clientW...原创 2020-04-28 21:35:01 · 2816 阅读 · 0 评论 -
封装返回该元素的第几层父级元素方法
document.documentElement没有parentElement但是它有 parentnode 为 #document 最终的文档原创 2020-04-28 21:28:42 · 2671 阅读 · 0 评论 -
react
1.react启动三文件官方提供的 CDN 地址:<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">&l...原创 2020-04-24 17:54:05 · 85 阅读 · 0 评论 -
前面面试题总结
1.关于浏览器性能2. 正则表达式3.数组方法返回值 增返回长度(push unshift) 删返回删除的值(shift pop)4.http2.05.定位position: static,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性,只有margin:20px 10px好使,margin-top为20p...原创 2020-04-24 10:36:12 · 334 阅读 · 0 评论 -
钉钉小程序之视图层介绍
1. data数据展示 {{}}数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于各种场合。2. 列表渲染 a:for="{}"3.条件渲染 a:if="{{}}"4. 模板5.事件注意: 事件不能传参, 需要用data-'自定义名称' 在时间的event.target.dataset.'自定义名称中获取'钉钉开发文档...原创 2020-04-23 10:46:41 · 3909 阅读 · 0 评论 -
钉钉小程序之Page文件介绍
Page代表应用的一个页面,负责页面展示和交互。每个页面对应一个子目录,一般有多少个页面,就有多少个子目录。它也是一个构造函数,用来生成页面实例。1.数据渲染页面初始化时,需要提供数据作为页面的第一次渲染。2.函数调用及data数据修改 函数方法跟data同一级3. 生命周期函数onLoad -->页面加载 onReady-->页面加载完成onSh...原创 2020-04-23 10:35:24 · 7673 阅读 · 1 评论 -
小程序APP文件介绍
小程序分为app和page两层。app用来描述整体程序,page用来描述各个页面。app由三个文件组成,必须放在项目的根目录。1.app.js小程序逻辑,有四个生命周期函数:(1)onLaunch:小程序启动,(2)onShow:小程序切换到前台,(3)onHide:小程序切换到后台,(4)onError: 小程序出错。参数说明前台、后台定义: 用户点...原创 2020-04-23 09:53:22 · 273 阅读 · 0 评论 -
设计模式之六大基本原则
单一职责原则的本质就是要将一个复杂的逻辑拆分成多个简单的逻辑,以此来降低复杂度。里氏代换原则的核心:父亲能做的孩子都能做,孩子能做的父亲不能做,降低耦合度开闭原则的核心:对修改关闭,对扩展开发,依次来减少耦合度。依赖倒置原则的核心:让原来相互依赖的两个核心模块,变为同时依赖于另一个非核心模块。以此来降低核心模块的耦合度。接口分离原则,其实接口分离原则和...原创 2020-04-22 13:36:05 · 103 阅读 · 0 评论 -
选择排序
结果原创 2020-04-22 11:44:58 · 63 阅读 · 0 评论 -
冒泡排序
输出结果原创 2020-04-22 11:30:19 · 63 阅读 · 0 评论 -
状态码
1如果喊完暗号之后,没有人开门,这时候隔壁老王出来了,对思彤说:”铁锤搬家了,搬到了如花大街200号~“这时候思彤就要再去如花大街200号送信,这个过程就叫做永久移动(Moved Permanently),对应的HTTP状态码是301。如果我们的浏览器是将这个URL收藏了,那么当接收到301的状态码之后,浏览器应该会修改链接,修改为新的URL。当然3XX的状态码不只有301。...原创 2020-04-22 10:52:02 · 5194 阅读 · 0 评论 -
Object.freeze()
Object.freeze()是浅冻结, 如果冻结的是一个对象, 该对象第一层子集的增删改都不会发生改变, 如果是对象的第二层属性, 它的值是可以修改的原创 2020-04-22 10:30:25 · 2660 阅读 · 0 评论 -
vue 生命周期
1.在每个钩子函数中写入以下代码, 来测试什么时候可以取到data中的数据以及何时可以取到dom元素结果:结论:在created时,可以拿到data中的数据;在mounted时,可以获取到dom元素2.从该页面跳转到其他页面会调用哪些钩子函数,请看下面测试在created中设置了一个定时器,在beforeDestory中清除定时器,在跳转到其他页面的时候定时器被清除,如...原创 2020-04-21 16:40:37 · 303 阅读 · 0 评论 -
计算每月开头是周几
原创 2020-04-21 15:41:53 · 193 阅读 · 0 评论 -
一个月有多少天
原创 2020-04-21 15:35:12 · 5246 阅读 · 0 评论 -
钉钉小程序与普通vue的区别
1. 动态绑定class:钉钉小程序:class=" {{item.backgroundColor == 'abnormal'? 'bg-abnormal' :( item.backgroundColor ? 'fontColor' : 'c-191F25-60') }}"vue: :class="'red': isActive" :class="[item.backgroundColor...原创 2020-04-21 15:24:18 · 5898 阅读 · 0 评论 -
slot-v-slot-slot-scope混用
具名插槽和默认插槽同时存在时,要把template写完整,即不能把默认插槽的缩写,v-slot:default写在组件行内原创 2020-04-21 14:34:37 · 5285 阅读 · 0 评论 -
webpack-模块
原创 2020-04-21 11:05:28 · 4959 阅读 · 0 评论 -
对象去除引用
原创 2020-04-17 15:27:37 · 5316 阅读 · 0 评论 -
vuex严格模式
原创 2020-04-17 14:50:41 · 5357 阅读 · 0 评论 -
actions
1.Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作2.分发 Action3.Actions 支持同样的载荷方式和对象方式进行分发:4.来看一个更加实际的购物车示例,涉及到调用异步 API和分发多重 mutation:...原创 2020-04-17 14:40:06 · 5377 阅读 · 0 评论 -
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:2.提交载荷(Payload)---公司经常会用到3.对象风格的提交方...原创 2020-04-17 14:27:45 · 5300 阅读 · 0 评论 -
getters
注意事项: getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。原创 2020-04-17 14:15:09 · 5205 阅读 · 0 评论 -
vuex使用教程
1. npm install vuex --save( 默认为--save所以可以不写)2.创建一个store的文件夹,并在里面创建一个index.js中写入以下内容 用于导出store3.在main.js根组件中引入 并且插入到根组件即可以上说明: 引入router的方法跟引入vuex的方法一致...原创 2020-04-17 13:51:52 · 79 阅读 · 1 评论 -
Array.prototype-call
Array.prototype.forEach.call(document.querySelectorAll('*'),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })等价于[].forEach.call($$("*"),function(a){ a.sty...原创 2020-04-17 11:10:39 · 5372 阅读 · 0 评论 -
substr - subString 区别
原创 2020-04-16 16:23:32 · 2654 阅读 · 0 评论 -
search - indexOf区别
字符串中判断是否有某个字符或者是数字的方法 :search()的参数可以是字符串或正则表达式indexOf()的参数只能是字符串 数字,不能是正则表达式。提示:search()传入的正则表达式的参数忽略忽略标志 g,即不执行全局匹配,可以设置i,即可以执行是否忽略大小写。大多是时候用indexOf()不是为了真的想知道子字符串的位置,而是想知道长字符串中有没有包含这个子字符串。若果...原创 2020-04-16 16:14:36 · 7642 阅读 · 0 评论 -
JavaScript - scrollTop-scrollHeight-offsetTop-offsetHeight
1. clientHeightclientHeight不计算border 只计算content、padding、横向滚动条的宽度(这个是需要减去的)2.clientTop/Left --- border-top-weight3.offsetHeight元素的边框、内边距(如果存在且渲染的话),是一个整数。计算:50+60(上下内边距)+2(上下边...原创 2020-04-16 11:55:05 · 196 阅读 · 0 评论 -
Math.round()
原创 2020-04-14 09:52:35 · 5105 阅读 · 0 评论