- 博客(66)
- 收藏
- 关注
RSS订阅转载 近似计算一个对象在js占用内存
内存在很久之前，我就想查看一个对象在JS里占用多少内存了，直到最近由于线上使用了需要计算从服务端传输数据的大小，让这个需求尤为强烈。预备知识我们现在使用的js是高级语言，它在内存细节之上建立一个抽象层，目前我们接触到的，就是变量，变量的占用内存是固定了，语言规范声明的，但是由于实现解释器，可能一个类型的变量占用内存，会稍规范多一些，这里我们可以先忽略，这样，我们就可以按照规范定义的...
2019-09-14 11:07:00
2088
转载 SVG开发注意事项
SVGScalable Vector Graphics 可缩放的矢量图形起源在 2003 年一月，SVG 1.1 被确立为 W3C 标准，在过去很长一段时间，网页注重文字和图片的展示，SVG就被遗忘了，随着网页对图形的要求越来越高，SVG又出现在人们的视野中。关注点可以从SVG这个名字就能瞄到我们第一个关注点在哪里，没错，就是可缩放的矢量图形，这个还是得从位图和矢量图说起，可...
2019-09-14 08:51:00
293
转载 从代码的可维护性、可读性学习模板字符串
string字符串的概念早就深入我们的思维，因为日常我们接触的最多的就是文本，所以对字符串特别熟悉，一看到需要的是字符串，我们就能联想到字符串这个类型去存储它。字符串用途暂时想到就是，用于存储字符，这个太常见了，等以后有了新的理解再展开。字符串的理解字符串通常提供了索引访问方式，比如charAt(i),但是其内部是不是数组不好说，但是字符串本身是不可变的，每次修改都会返回新的字...
2019-09-14 08:48:00
181
转载 从项目中理解let和const为什么如此重要
变量声明变量声明方式伴随js诞生的var// 语法 var varName = valuevar a = 1 // 这样子你就得到了一个变量var缺陷场景分析var specialUser = "cj"; // 在A文件定义 var specialUser = "fk"; // A文件很大，你没去寻找是否定义此变量，直接定义getImportantInformat...
2019-09-14 08:45:00
202
转载 认识一下transition
transition以前的CSS属性切换时，由于只有开始和截止两个状态，切换时略显生硬jquery.animate传说中的jquery在保证兼容性之后，又为开发者提供了简洁的过渡(动画其中之一效果)的语法，只需要简单使用以下代码即可实现一个复杂的过渡效果$(selector).animate({ cssProp: cssValue})在很长一段时间，这种实现动画的方式风靡...
2019-09-01 16:43:00
115
转载 icon发展史速览
icon发展史img多张图片占用多个请求，想办法减少请求，合并图片，image spritebackground-position/* 使用background-position来定位图标 */缺点1.新增图片就要改动雪碧图，不小心会影响到其他图片，导致已经写好的定位显示出错字体库本质是引入了一个字体文件，然后在对应位置使用unicode就可以显示该图表unicode...
2019-09-01 16:41:00
262
转载 CSS换行知识
换行规则CSS可以指定文字多行时换行的规则，说白了就是指定哪些地方可以换行相关属性word-breakThe word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.word-break属性决定了文本溢出时...
2019-09-01 16:39:00
131
转载 链接前的//语法
A标签相关知识协议最近在做一个logo需要跳转到指定页面，域名已经从后台拿到相对的了，后面的地址写死没问题，那么问题就来了，现在有了http和https，我怎么知道到时候跳转的网址是哪个协议呢思考以前听说过http进入，可以配置，如果有https就从http跳转到https的，然后就想直接http,然后就想到，从https访问不了http的东西，所以必须保持访问的网址和现在所在的...
2019-09-01 16:35:00
141
转载 JavaScript正则表达式入门
正则表达式正则表达式本身是一种匹配模式，用计算机语言来描述我们需要匹配到的结构正则表达式语法正则表达式从匹配形式来说，要么匹配字符，要么匹配位置，以下从分别这两点展开学习匹配字符横向模糊匹配正则匹配到的字符串是不固定的 可以使用量词来指定片段出现的次数，次数会影响到字符串的长度，因为称之为横向模糊匹配示例var regex = /ab{2,5}c/g ; //g 含有...
2019-08-18 21:42:00
291
转载 谷歌开发者工具技巧小整理
开发者工具DOM技巧1.元素对应的DOMctrl + shift + c 然后鼠标移到对应的元素上即可，这种方法可以用来找到一些事件触发才出现的DOM，比如mouseover这种，使用面板上的那个按钮很难操作，使用快捷键就可以很方便的选中了2.将视图滚动到元素所在位置3.在Elements面板使用选择器选取DOM看到工具的tips了吗，可以使用选择器来获取DOM，至于支持...
2019-08-11 19:00:00
142
转载 浏览器存储
浏览器存储cookie优点:请求自动带上可以设置过期时间，默认浏览器关闭失效缺点：数据存储很少 4KB左右每次自动带上导致性能浪费数据类型只能为字符串安全问题 http明文传递没有原生接口localStorage优点：提供了原生接口更安全存储数据量更大缺点：对象类型需要序列化和反序列化操作需要手动清除sessionStorage特点...
2019-06-13 22:31:00
84
转载 如何输出1-5题详解
如何输出1-5for (var i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i) }, i * 1000)}// 6 6 6 6 6 分析i的作用域链：timer scope -> global scopei变量会循着以上的作用域链来查找，当然此时是在global...
2019-06-13 15:37:00
198
转载 js数组检测
数组检测检测constructorv.constructor === Array缺点：let arr = []console.log(arr.constructor === Array); // true在子类中定义constructor属性，屏蔽原型上的constructor导致检测出错arr.constructor = Objectconsole.log(arr.c...
2019-05-15 16:00:00
117
转载 ES5.1下的作用域链
作用域链(ES5.1规格视角)javascript作用域类型javascript采用的是词法作用域(静态作用域) 与之相对的是动态作用域，以下的例子可以很好地说明let a = 3function foo() { console.log(a); }function foowrapper() { let a = 4 foo()}foowrapper() // 3...
2019-04-23 14:46:00
90
转载 js中VO解析
执行环境(环境)执行环境的用处执行环境定义了变量或函数有权访问的其他数据，每一个执行环境都存在一个关联的变量对象(VO),代码无法访问，内部解析器会使用它，如果环境为函数，则将函数的AO作为VO,函数执行时，会创建一个以当前函数VO为前端的作用域链，以保证执行环境有权访问的所有变量和函数的有序访问。顶级AO对象 全局全局对象(Global object) 是在进入任何执行上下文之...
2019-04-22 21:16:00
579
转载 类数组转换
类数组什么是类数组属性键为数字字符串有长度属性 length常见的类数组场景argumentsfunction test() { console.log(arguments)}let arr = [1, 2, 3, 4]test(...arr)如何把类数组转换为数组为了得到数组的特性转化的实质把类数组中的属性迭代到真实数组中去，核心如下图let r...
2019-04-22 14:52:00
80
转载 三栏布局常见方案
三栏布局(两边固定，中间自适应) 常用方案及演变过程1. 浮动方式:实现关键点: 要把中间放在左右块的后面，然后左右设置左右浮动即可。优点: 简单缺点: 中间 main 不能清除浮动，宽度较小布局混乱代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> ...
2019-04-12 15:49:00
101
转载 深入js系列-语法
语法语句和表达式我们用英语的术语来说明它们的区别“句子”（sentence）是完整表达某个意思的一组词，由一个或多个“短语”（phrase）组成，它们之间由标点符号或连接词（and 和or 等）连接起来。短语可以由更小的短语组成。有些短语是不完整的，不能独立表达意思；有些短语则相对完整，并且能够独立表达某个意思。这些规则就是英语的语法。JavaScript 的语法也是如此。语句相...
2019-03-21 20:31:00
107
转载 深入js系列-环境
javascript运行环境js如果只在引擎中运行，它会严格遵循并且可以预测的，但是js几乎都在宿主环境中运行，浏览器或者Node环境ECMAScript中的Annex B介绍了浏览器兼容性问题导致与官方规范的差异• 在非严格模式中允许八进制数值常量存在，如0123（即十进制的83）。• window.escape(..) 和window.unescape(..) 让你能够转义...
2019-03-21 20:30:00
83
转载 深入js系列-类型(隐式强制转换)
隐式强制转换在其可控的情况下，减少冗余，让代码更简洁，很多地方都进行了隐式转换，比如常见的三目表达式、if()、for()、while、逻辑运算符 || &&，适当通过语言机制，抽象和隐藏一些细枝末节，有助于提高代码可读性，以三目表示式为例a? trueAction : falseAction!!a ? trueAction : falseAction1.字符串...
2019-03-21 20:28:00
113
转载 深入js系列-类型(显式强制转换)
什么是显式这里的显式和隐式是以普遍的标准来进行讨论的，你能看出来是怎么回事，那么它对你是“显式”，相反你不知道的话，对你就是“隐式”抽象操作字符串、数字、布尔值之间类型转换的基本规则 ES5定义了一些操作，诸如ToString、ToNumber、ToBoolean、ToPrimitive抽象操作1.ToString 负责处理非字符到字符串的强制类型转换undefined =&g...
2019-03-21 20:26:00
117
转载 深入js系列-类型(对象)
开篇值的传递方式1.值传递 表示传递过程中复制了值2.引用传递 表示传递过程中传递的是值的引用js的传递方式 值传递看下面的例子// 这里值传递很容易理解 var a = 1var b = a // a = 1 b = 1b = 3 // a = 1 b = 3// 引用也是值传递var a = [1,2,3];var b = a;a; // [1,2,3]...
2019-03-21 20:23:00
88
转载 深入js系列-类型(数字)
开头js数字没有明确区分浮点数和整数类型，统一用number类型表示。number 基于IEEE 754标准实现 js采用的是双精度(64位二进制)我们看一个基于IEEE 754标准实现都有会有的经典问题0.1 + 0.2 === 0.3 //false// 原因是 0.1 0.2 不精确，相加不等于0.3 而是一个类似0.30000000004 的值，所以条件判断结果为fal...
2019-03-21 11:21:00
162
转载 深入js系列-类型(null)
首先null是表示什么状态呢这个是需要和上篇的undefined做一个区分undefined 从未赋值 非关键词(也就是可以定义为变量名或者赋值给它)null 曾经赋值、目前没值 关键词typeof “失灵了”var a = nulltypeof a // "object"而不是"null"这个bug是第一版Javascript留下来的。在这个版本，数值是以32字节存储的...
2019-03-21 11:20:00
181
转载 深入js系列-类型(开篇)
思考作为一个编程人员，你可能从来没仔细思考过，为什么这么多高级语言会有类型这东西。实际上，类型有点类似生活中的类别，我们日常生活，早已经把这个概念理解到了，切肉和切水果会用不同的刀。语言级别的类型给我们带来了什么类似分类，我们会用合适的类别去做它擅长的事，编程语言的类型给我们带来的就是它们自身的特性，比如我们在条件判断一个开关状态的时候，通常用布尔值更方便，另外一方面，编程语言提...
2019-03-21 11:11:00
100
转载 first-child、last-child误解
MDN解释兄弟元素中的第一个元素然后今天写的时候这样想出现了问题并没有加上边框W3C解释尝试去掉h3,发现span加上了边框E:first-child含义父元素中第一个元素且第一个元素是E才是所谓的first-child,last-child也类似转载于:https://www.cnblogs.com/sefaultment/p/10440579.html...
2019-02-26 22:13:00
110
转载 VueCli3如何传递scss全局变量
当我们尝试在一个scss文件中定义全局变量然后在.vue文件中使用的时候哦豁，找不到变量，意料之外我发现犯了一个错误，没导入，@import 'path/to/file.scss'，不过这样的话，每个.vue文件导入起来很麻烦，我们需要一种导入然后默认在.vue导入使用，比较方便暂时没研究原理，在官方配置手册找到了解决方案根目录下新建vue.config.jsmodule.e...
2019-02-26 20:00:00
631
转载 vue生命周期
现在很容易见到生命周期这个概念，简单点来理解就是就是某个时间点，就会运行对应的程序，生动来说就是如果按照人的一生的各个阶段来做事情，那我们会更清晰，更优效率，更重要的是，每个阶段都有一些可以做的不可以做的，我们学习代码的生命周期就是找出每个阶段，它允许我们做什么。官方生命周期视图：beforeCreatecreated 数据响应构建完毕 数据请求beforeMountmoun...
2019-02-23 17:23:00
73
转载 VueCli3新特性
升级VueCli3的理由:1.构建速度大大加快,之前看到一个升级的例子是2的3倍速度，具体可以在自己迁移一个项目测试下，这里的优化有默认开启了多核构建、缓存并行和缓存2.webpack被内置到@vue/cli-service，可以升级，其他服务基于插件注入，比如babel、TypeScript插件vue add @vue/eslint 安装@vue/cli-plugin-e...
2019-02-23 17:09:00
597
转载 迭代器Iterator
遍历器（Iterator)设计目的:一是为各种数据结构，提供一个统一的、简便的访问接口二是使得数据结构的成员能够按某种次序排列三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费实例Map下的Symbol(Symbol.iterator)属性迭代协议(规范)[Symbol.iterator]: function()...
2019-02-21 17:45:00
61
转载 数组遍历小结
普通函数优点:支持流程控制(break、continue、return)forconst arr = ["A", "B", "C"] for(let i = 0; i<arr.length; i++){ console.log(arr[i]) }优点：能够对索引精确控制缺点：语法较为繁琐for inconst arr = ["A","B","C"]arr[...
2019-02-21 16:54:00
69
转载 Vue自动化注册全局组件脚本
今天有一个idea，vue一些组件，可能会全局都用到，我觉得在main.js写Vue.component(name, instance)然后很命令式，写着也不好看，想着能够有一个函数可以指定加载比如components下的文件，自动完成全局化注册，想起来就很帅放代码：export function autoLoadingGlobalComponent() { const re...
2019-02-06 20:28:00
128
转载 CSS居中方案
1.行内元素或者内联元素1.垂直居中设置行高和高度一致，如果没必要设置高度的话，可以直接利用line-height垂直性，直接设置需要的高度为line-height的高度亦可居中 .center-single-text { height: 100px; line-height: 100px; }利用内联元素的vertical-align基线参考这一行的其他元...
2019-02-02 20:33:00
93
转载 以V8中js源码为例了解GitHub查看代码功能
GitHub作为开源仓库，许多开源项目仓库这里，当然不乏十分优秀的，比如Node、V8，我一直比较好奇js源码，像java的话，因为环境是JDK，我们结合IDE很容易就能跳转到其源码内部去查看实现，但是js目前的的解释器和原生代码被放在V8引擎中去，无论是谷歌浏览器、Node，其V8引擎早已经被编译到程序中去了，我们无法直接查看其源码，所以我们得去看V8源码来理解其JS原生实现1.首先...
2019-01-28 15:36:00
123
转载 js中的自动包装机制
有一行语句：1.toString() //error那么问题来了，为什么报错？我的第一想法就是1是一个基本类型，所以它没有toString方法嗯，理直气壮接下来有大佬show me codelet n = 1 n.toString() //1这有点小尴尬我突然想起来之前Java中基本类型与之对应包装类的自动包装和自动拆包1 //自动装箱2 Integer total...
2019-01-26 21:49:00
163
转载 js中的new操作符解析
new 操作符做了以下事情：1.创建一个对象，将对象赋值给thisfunction Person(name, age) { console.log(this) //Person {}}let p = new Person('cj', 24) 2.执行构造函数的代码，将构造器中的this.prop属性添加到this上function Person(name, age) {...
2019-01-18 22:50:00
119
转载 关于三层架构和MVC模式的思考
MVC模式核心：1.解耦Model和View，即使得Model可以被不同的展示，比如一批统计数据可以分别用柱状图、饼图表示2.Controller用来保证Model和View的同步Model 模型层 负责业务逻辑和数据库交互View 视图层 展示数据Controller 控制器 三层架构1.核心Entity层在三层中作为数据传递实体UI 界面层 展示数据BLL ...
2019-01-17 22:11:00
148
转载 JS获取对象属性名小结
最近面试遇到问如何获取对象全部属性名的方法，总结一下：对象属性类型分类：1.ESMAScript分类数据类型 又分为可枚举和不可枚举类型访问器类型 2.上下文分类原型属性实例属性 1.列举自身但不包括原型的可枚举属性名 Object.keys(obj) // 遍历对象function Person(name, age) { this.name = name; ...
2019-01-17 13:43:00
99
转载 Vue实践TS中的一些常见错误解决方案
mixin报错import { Component, Prop, Vue ,Mixins} from 'vue-property-decorator'import httpminix from '../mixin/httpMixin'@Component({ mixins:[httpminix]})export default class HelloWorld extend...
2019-01-09 15:34:00
1960
转载 NodeJS模块和ES6模块系统语法及注意点
社区模块规范:1.CommonJS规范规范实现者：NodeJS 服务端Browserify 浏览器2.AMD规范 全称 异步模块定义规范实现者：RequireJS 浏览器3.CMD规范 通用模块定义规范实现者：seaJS 服务端和浏览器通用官方模块规范1.ESM规范 就是ES6 Module各浏览器和服务端目前常用的就是浏览器端的RequireJS、NodeJ...
2019-01-03 17:59:00
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人