DF11G_0001的博客

原创 salesforce入门

salesforce入门

原创 在Node.js selenium自动化测试中引入Chrome插件

插件存储位置一般在~/Library/Application Support/Google/Chrome/Default/Extensions，在插件管理肿选择打包扩展程序，然后输入插件的具体路径打包即可。无需输入秘钥。打包成功后，会生成对应的打包文件和秘钥。

原创 使用JS监控图片的加载

使用Image对象，并为其设置回调函数。 this.myImg = new Image() this.myImg.onload = (() => { // 图片加载成功后的回调 }) this.myImg.src = // 图片地址篇幅过短是什么鬼？laji CSDN

转载 js对url进行编码和解码

Javascript语言用于编码的函数，一共有三个，最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了，但是由于历史原因，很多地方还在使用它，所以有必要先从它讲起。escape 和 unescape实际上，escape()不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282，也就是说在Unicode字符集中，"春"是第6625个（十六进制）字符，"节"是第8282个（十六进制）字符。它的具体规则是，除了ASCI

原创 js修改url后缀

window.history.replaceState({ foo: "/" }, "", "/");

原创 JS获取时间并格式化

// get time Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(), "m+": this.getMinutes(), "s+": this.getSeconds(), "q+": Math.f.

原创 NUXT项目重构踩坑记录

前段时间重构了公司的H5主站，最近开始重构PC，发现很多踩过的坑都忘记了。好记性不如烂笔头，在这里记录一下。创建NUXT：按照官网的命令行构建即可。静态本地渲染的配置要选对，创建的时候建议直接引入element，避免后续引入。Git：git init，然后Gitlab建新项目，按照指示将本地的项目推送到Gitlab。创建页面：在page路径下创建文件夹并添加.vue文件，nuxt会自动创建相应的路由。自定义路由：一般来说，主页的路由文件直接暴露在page目录下。这样看着不是很舒服。自定义..

原创 Mac安装npm时候的权限问题

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/font-spider/node_modules/fsevents/.node-gyp'Error: EACCES: permission denied, access '/usr/local/lib/node_modules'解决方案：在npm命令前加sudo 执行sudo chown -R $USER /usr/local/lib/node_module

原创 Vue引入自定义字体

创建wen jia

原创 Flex布局

一直对flex布局一知半解。不能这样。今天总结一下。指定flex：设置display：flex | inline-flex 此操作会将float、clear等属性屏蔽。flex一共有六种属性：flex-direction：决定主轴的方向 row 左→右（默认） row-reverse 右→左 column 上→下 column-reverse 下→上 flex-wrap：决定是否可换行 nowrap 不换行（默认） wrap 主轴总尺寸超过容器时换行，第一行在上方 .

原创 手写Promise

简单版（无法链式调用）const PENDING = 'pending'const FULFILLED = 'fulfilled'const REJECTED = 'rejected'function Promise(executor) { var _this = this this.onFulfilled = [] //事件订阅数组 this.onRejected = [] //事件订阅数组 this.state = PENDING this.valu

原创 手写new函数

new函数的本质有以下过程：创建一个空对象 为空对象进行prototype绑定 执行构造函数的方法，并将this绑定到新创建的对象 返回构造函数返回的对象。如果构造函数没有显式返回，则返回第一步创建的对象。以上过程来自于MDN官方文档所以我们进行代码实现function father(name) { this.name = name this.sayName = function () { console.log(this.name) }}

原创 节流和防抖

防抖和节流：性能优化的方案之一。防止单一行为短时间被重复调用多次。防抖：单次频发中只调用一次以窗口滑动为例function debounce(fn, sec) { // 防抖函数 let time = null return () => { // 返回一个函数 用闭包保存time 防止全局变量污染 if (time) { clearTimeout(time) time = setTimeout(fn, sec

原创 前端的MVC、MVP、MVVN

什么是MVCMVC的基本思想View告诉controller要更新数据 Controller操纵Model更新数据 Model数据更新后将View现实的东西更新MVC的一些问题如果View想更新，那就必须先通知controller，在更新model，然后再更新自己；开发者需要同时维护View和Model层。 View与Model层高度耦合，复用性差。（比如原本View中的是list，model上传中数据突然要以table来展示，这时就要重新写一遍View中的代码） 数据流.

原创 小程序基础语法

数据绑定在.js的data里，用{{变量}}进行绑定普通标签：<view>图片标签：<image src=" ">循环：wx:for判断：wx:if是否渲染可以使用wx:if和hidden。区别：hidden不会将wxml内的元素删去，wx:if会。所以需要频繁切换的场景适合hidden，一次性渲染的场景适合wx:if。添加事件：bind事件的冒泡：当子元素发生事件时，事件会逐层向父元素进行传播。阻止事件冒泡！使用catch代替bind进行事件绑定

原创 小程序基本架构组成

原创 浏览器的渲染流程

一、浏览器构建对象模型(JavaScript,HTML,Style)：构建DOM对象：下载HTML文档，读取文本，将文本转换为单个的字符。 通过标签识别出节点对象，将节点对象构建为DOM树。构建CSSOM对象：CSS同理，通过识别CSS文本形成CSSOM构建渲染树：浏览器根据DOM树和CSS树构建渲染树二、布局和绘制(Layout,Paint,开销最高）布局的特性：渲染树只包含网页需要的节点，而布局计算每个节点精确的大爱小和位置（盒子模型）。布局只关心 位置 和 ...

原创 性能优化的相关指标

性能优化-响应：交互响应：用户与页面的交互足够快画面流畅（帧率FPS）：画面的帧数达到足够平滑流畅异步请求速度：异步请求的加载足够快，最好小于1s。如果时间过长需要补充加载动画。性能优化-加载：Speed Index：页面内容渲染所消耗的时间（速度指数）TTFB：请求发送到响应传回所需的时间页面加载时间：所有资源加载完所需时间（瀑布图红线）首次渲染：页面第一次出现内容所需的时间RAIL测量模型Response：响应Animation：动画Idol：空闲Lo

原创 Node.js的种种

一、为什么使用Node？Node大多作为中间层出现在网络中。性能：Node的性能优于传统后端 异步IO：适合处理高并发请求，将请求平滑地输出到后端 减轻后端压力：可以处理简单数据 安全性：避免用户直面后端，防止后端被攻击...

原创 水平居中和垂直居中

水平居中：inline元素：text-align:center block元素：margin:auto absolute：left:50% + margin-left负值垂直居中：inline元素：line-height高度等于行高height absolute：top:50% + margin-top负值（需考虑子元素宽高） absolute：transform(-50%,-50%) （兼容性一般，CSS3） absolute：top，left，bottom，right=0 + mar

原创 CSS flex的一些属性

关于media的媒体查询，详见https://github.com/DF11G/CSS_Practice.gitFlex的属性：Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}一、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（...

原创 CSS属性总结

系统总结一下CSS，解决没认真学过CSS的历史遗留问题。CSS盒状模型三大主属性：display属性 +position属性 +float属性一、display：display: none; 与 visibility: hidden; 的区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见 display: none;是非继承属性，子孙节点消失由于...

原创 HTTP总结

客户端和服务器发送请求获取服务器资源的成为客户端TCP/IP互联网关联协议的集合TCP/IP分层优点：易于维护，维护时只需将对应层级换掉即可。效率更高，层级之间分工明确。应用层：HTTP客户端、DNS传输层：TCP网络层：IP链路层：网络TCP/IP原理应用层发出HTTP请求传输层将请求报文进行分割网络层添加目的地的MAC地址后转发给链路层（此时请求齐全）链路层传输数据——每一层添加一个首部，称为封装。...

原创 Error: Element type is invalid: expected a string (for built-in components) or a class/function (fo

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.今天遇到了一个恶心的BUG。在Stak和各类网站上，类似的BUG都是和引入格式相关。经过一顿定位，发现是ReactDOM.render()函数的问题。当使用react-redux的Provider这个API时，函数中使用预定义

原创 React 无状态组件

当一个组件作为UI组件时，他只有Render函数。这时我们就可以把它写成无状态组件，以一个函数的形式作为一个组件，而非一个对象。这样可以提升性能。原UI组件：class TodoListUI extends Component { render() { return ( <Fragment> <Input value={this.props.inputVal

原创 Redux

React中的数据传递十分复杂低效。为了高效对数据进行处理，我们引入Redux对数据进行统一管理。将所有数据都保存在一个store中进行处理。使用Redux时也需要一点优化。比如使用 actionCreator 统一创建 actionActionTypes 的拆分。具体参考Github练习项目React-Redux.git...

原创 React的生命周期函数，以及Ajax

指在某一时刻组件会自动执行的函数

原创 组件的拆分与组件之间的传值

组件的拆分：创建新组件，然后export分享出去，在父组件中进行引用即可。父组件往子组件进行传值：使用属性方法。通过在父组件中的子组件添加属性值，然后用props再子组件中进行接收。子组件使用父组件中的方法：同样适用属性方法对父组件中方法加以引用，但不要忘了绑定父组件方法中的this指向。...

转载 浏览器的渲染过程

假设游览器已经获取到了html文件。一、基本流程解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树所以，浏览器会解析三个东西：（1） HTML/SVG/XHTML，解析这三种文件会产生一个 DOM Tree。（2） CSS，解析 CSS 会产生 CSS 规则树。（3） js脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.二、渲染过程当浏览器获得一个.

原创 CSS杂记

Position值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的

原创 React 有关样式，有关JSX的一些细节

注释JSX中的注释要写成JS代码段的形式。大括号。有关样式编写样式的时候，JSX中标签的class属性会和React原有的class属性造成冲突。虽然不影响运行，但改为className的形式更好。dangerouslySetInnerHTML我们接受一些后端发来的数据进行DOM操作的时候，会用到dangerouslySetInnerHTML取消对指令的转义。在显示时，将内容写入__html对象中即可。具体用法如下： {

原创 ES5面向对象汇总

理解对象ECMAScript中没有“类”的概念。ECMA-262将对象定义为：无序属性的集合，其属性可包含基本值，对象或者函数。使用创建Object实例的方法创建一个对象：let person = new Object()person.name = 'Faker'person.age = 25person.job = 'T1 MID'person.sayName = function () { console.log(person.name)}当然也可以使用对象字面量

原创 ES6学习笔记（十六）异步与Promise

最简单的Promise示例let p = new Promise((resolve, reject) => { setTimeout(() => { console.log('Faker') //传递参数 resolve('Good') }, 1000)}).then((res) => { // 成功时调用 console.log(res)}, (err) => { // 失败时调用 conso

原创 ES6学习笔记（十五）Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。、Ajax三三步骤：创建请求，发送请求，服务器响应fun

原创 CSS面试笔记（二）

CSS解析方式：从右往左，提高性能和查找速度使用font-face自定义字体，如果跨域使用字体时候记得对方服务器允许跨域

原创 CSS实战笔记（一）

块级元素可以包含行内元素块级元素不一定能包含块级元素行内元素一般不能包含块级元素面试题：doctype的意义是什么？让浏览器以标准模式渲染。让浏览器知道元素的合法性。HTML，XHTML和HTML5的关系HTML是SGML的一个应用。XHTML属于XML，是HTML进行HML严格化的结果。HTML5不属于SGML和XML，因为规范比较宽松。HTML5有哪些新东西？新的语义化元素（Section Article...等等）表单增强（新的元素，表单验证等等）新

原创 ES6学习笔记（十四）数值扩展

进制的转换ES5方法十进制转换其他进制 Number.toString()let a = 5console.log(a.toString(2)) // 101其他进制转换为十进制 parseInt(原数字,原数字进制)let a = 101console.log(parseInt(a, 2)) // 5

原创 ES6学习笔记（十三）字符串扩展

模板字符串使用反引号调用。可以直接换行来换行，可以使用${ }的形式添加变量嵌套模板时，可以使用模板字符串。带标签的模板字符串：标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。...

原创 ES6学习笔记（十二）新的数据结构 Map

MapMap以键值对的形式储存数据，Key值可以是对象。let a = new Map()let obj = { name: 'Faker'}// set()a.set(obj, 'SKT T1')console.log(a) // Map(1){{…} => "SKT T1"}// get()console.log(a.get(obj)) // SKT T1// has()console.log(a.has(obj)) // true// delete()a.

原创 ES6学习笔记（十一）新的数据结构 Set

Set简介Set类似数组。Set方法可以使用add添加元素，支持链式操作。let a = new Set([1, 2, 3])a.add('Faker').add('Bang')console.log(a) // Set(5){1, 2, 3, "Faker", "Bang"}可以使用 delete() 方法删除元素let a = new Set(['Faker', 'Bengi', 'Wolf'])a.delete('Bengi')console.log(a) // .