搜索文章
类目归类
搜索到45篇与小白的结果
小白
2020-11-11
/
0 评论
/
0 阅读
2020-11-11
CSS之栅格化布局
栅格化布局帮助你更容易构建复杂的网页设计。它会将HTML元素转换为网格的容器（有行有列）。你可以在网格里面添加你想要的子元素。grid 初始化元素为栅格化将一个HTML元素转换为网格的容器，只需要对其设置display: grid即可。display: grid告诉我们，可以使用CSS Grid的相关属性了。<dl class="container"> <dd class="item1">item1</dd> <dd class="item2">item2</dd> <dd class="item3">item3</dd> <dd class="item4">item4</dd> <dd class="item5">item5</dd> <dd class="item6">it...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
javaScript几个例子理解不同数据类型的堆栈内存处理
js代码的运行环境简介浏览器 内核（引擎）nodewebview（hybrid，嵌入到手机app里面，在app里面运行）...下面通过几个例子理解不同数据类型的堆栈内存处理js如何运行（示例1）var a = 12; var b = a; b = 13; console.log(a);浏览器能够运行js代码，是因为浏览器会在计算机内存中分配出一块内存，用来供代码执行，这块内存叫栈内存，也叫Stack，或者ECStack（Execution Context Stack）执行环境栈。为了区分是哪个区域（全局或者函数等）下的代码执行，会产生一个执行上下文（EC ： Execution Context）。所谓执行上下文，其实是一个抽象的概念，简单来理解就是代码执行区域的划分。在全局环境下会产生 EC（G） ：Execution Context （golbal） 全局执行上下文，其中VO（G）全局变量对象（Varibale Object）存储全局执行上下文声明的变量，然后进入栈内存执行。声明变量的步骤接着开始执行，先声明变量，声明变量有三步var [变量] = [值]先创建值（执行等号右边...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
解析call、apply、bind三者区别及实现原理
前言不管在写插件，还是写框架，又或者其它业务开发中。我们都会遇到在执行函数的时候，如果需要保证函数内部this不被污染或者说需要使函数内部this指向到指定对象的时候，都会按情况分别使用到call、apply、bind方法来实现需求。那么，你知道它们三者之间的区别吗？又分别如何实现的呢？接下来，请准我一一道来并分别实现它们吧~call、apply、bind的区别bindbind与call或apply最大的区别就是bind不会被立即调用，而是返回一个函数，函数内部的this指向与bind执行时的第一个参数，而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。用一个例子来理解一下吧let obj = { name: 'wujia', fn: function (a, b, c) { console.log(this.name, a, b, c) } } window.name = '吴佳' let nFn = obj.fn.bind(window, '第一个参数') nFn('第二个参数', '第三个参数') // 最后输出：吴佳，第一个参数，第二个...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
Vue项目接口代理需要注意的几点
在做项目中，我们可能会遇到接口地址跨域的问题，有时候不想找后端去处理这个时候我们要怎么做呢，其实有个叫代理的东西可以帮我们快速的解决这个问题，第一步项目中创建一个vue.config.js的文件，在里面添加如下代码：module.exports = { publicPath: "./", devServer: { proxy: { '/api': { target: 'https://aijiumai.cn/api/', //对应服务器地址 changeOrigin: true, //允许跨域 ws: true, pathRewrite: { '^/api': '' } } } } };我们添加了之后就可以使用/api直接代替接口地址，只要axios请求地址有...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
transform 导致字体模糊的解决方案
很多人在日常开发中会使用transform: translate(-50%, 50%)来居中弹出层，那么相信大家也会碰到与我相同的情况：有时候弹出层的内容变得模糊不清晰。原因很简单，是因为css动画在渲染非整数的px时会出现字体模糊。上面transform内的50%是相对于自身的宽高的，所以我们就需要确保自身的宽高都为偶数。解决办法：设置元素宽高皆为偶数（需要知道元素高度）使用margin代替transform（需要知道元素宽高）增加一个父级元素，将定位给父级，并使用flex布局使原本元素居中（不需要知道元素高度）.father { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
关于 Promise 内存泄漏的问题
PromisePromise 是 ES6 的新特性，在 ES6 之前各大浏览器、各种 polyfill 和各种 js 执行环境都针对 Promise 进行了自己的实现，不过实现上大同小异。V8 Promise 内存泄漏不过 V8 对 Promise 的实现存在内存泄漏问题，当一个 promise 无法 resolve 也无法 reject 的时候，就会发生内存泄漏。一个很容易造成 Promise 内存泄漏的场景便是递归 Promise 或者嵌套 Promise。为方便观察内存使用情况，下面是一段在 Nodejs 里面运行的代码(function() { // 记录Promise链的长度 var i = 0; function run() { return new Promise(function(resolve) { // 每增加10000个Promise打印一次内存使用情况 if (i % 10000 === 0) console.log(i); i++; ...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
JavaScript 定时器与执行机制解析
从 JS 执行机制说起浏览器（或者说 JS 引擎）执行 JS 的机制是基于事件循环。由于 JS 是单线程，所以同一时间只能执行一个任务，其他任务就得排队，后续任务必须等到前一个任务结束才能开始执行。为了避免因为某些长时间任务造成的无意义等待，JS 引入了异步的概念，用另一个线程来管理异步任务。同步任务直接在主线程队列中顺序执行，而异步任务会进入另一个任务队列，不会阻塞主线程。等到主线程队列空了（执行完了）的时候，就会去异步队列查询是否有可执行的异步任务了（异步任务通常进入异步队列之后还要等一些条件才能执行，如 ajax 请求、文件读写），如果某个异步任务可以执行了便加入主线程队列，以此循环。JS 定时器JS 的定时器目前有三个：setTimeout、setInterval 和 setImmediate。定时器也是一种异步任务，通常浏览器都有一个独立的定时器模块，定时器的延迟时间就由定时器模块来管理，当某个定时器到了可执行状态，就会被加入主线程队列。JS 定时器非常实用，做动画的肯定都用到过，也是最常用的异步模型之一。有时候一些奇奇怪怪的问题，加一个 setTimeout(fn, ...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
移动端输入框填坑系列
输入框来来来，我们来想一下我们一天中使用频率最高的 App——微信，英文名是 WeChat，它的聊天界面长啥样子，输入框在最底部（不知道你什么反应，我反正当场就打开了 weibo，facebook， twitter 等等等的 mobile 端，就没有一个是把输入框放在最底部的，好的，我当场就对产品发动了强烈的反抗，当然依旧没有成功），输入框默认单行展示，随着用户输入，输入框中的内容自动换行，最多显示 3 行，超出部分可以滚动，要求可以输入超链接，输入框左边有个插入表情按钮，右边是发送按钮，输入框下面有个 checkbox，，，，，产品：这个需求很简单，怎么实现我不管，反正下个月要上线。技术方案虽然我很绝望，但是需求还是要做，，，，输入框技术选型来，我们来具体看需求，“输入框内容要自动换行”，排除 input；“输入框中可以输入超链接”，排除 textarea；还有啥，只有 contentEditable 为 true 的 div 了。插入表情我们知道，如果想做各端样式统一的表情的话，必然是用图片展示表情，这样的话，我们的成本就会增加很多，所幸在这一点上说服了产品，可以直接使用 e...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
给 JavaScript 插上多线程的翅膀 —— Web Worker 的 Promise 化实践
Web Worker 介绍众所周知，JavaScript 这门语言的一大特点就是单线程，即同一时间只能同步处理一件事情，这也是这门语言衍生出的 nodeJS 被各后端大佬诟病的很重要的一点。然而，JavaScript 在设计之初，其实是故意被设计成单线程语言的，这是由于它当时的主要用途决定的。JavaScript 最初的设计初衷是完成页面与用户的交互，操作 DOM 或者 BOM 元素，此时如果一味地追求效率使用多线程的话，会带来资源抢占，数据同步等等问题，因此必须规定，同一时间只有一个线程能直接操作页面元素，以保证系统的稳定性以及安全性。尽管如此，但是 JavaScript 并不是只能线性处理任务。JS 拥有消息队列和事件循环机制，通过异步处理消息的能力来实现并发。在高 I/O 型并发事务处理的过程中，由于不需要手动生成与销毁线程以及占用额外管理线程的空间，性能表现及为优异。因此，nodeJS 作为 JavaScript 在服务端的探索者，在处理高并发网络请求的优势极为明显。尽管 JavaScript 通过异步机制完美解决了高 I/O 性能的问题，但 JavaScript 单线程...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
javaScript数组去重方法总结
数组去重方法总结哈希法：空间换时间var array = [1,2,2,3,3,4,5,6,7,8,8,9,0,0,0]; function uniqueArrayHash (array) { var map = {},result = [],i,len = array.length; for (i = 0; i < len; i++) { if (!map[array[i]]) { map[array[i]] = true; result.push(array[i]); } } return result; } console.log('hash method'); console.log(uniqueArrayHash(array));indexOf()var array = [1,2,2,3,3,4,5,6,7,8,8,9,0,0,0]; function uniqueArrayIndexof (array) { var i, res...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
javaScript 手写bind()函数
javaScript 手写bind()函数var name = 'windowName' var a={ name:'Cherry', fn:function (newName) { console.log(this.name+' and new :'+newName) } } var b=a.fn; b("33333") b.apply(a,['3333']) if(Function.prototype.binder === undefined){ console.log('您的浏览器不支持bind') Function.prototype.binder = function(obj){ //todo arg1 没用吧 var arg1 = [].slice.call(arguments,1); var fun =this; return function(){ fun.apply(obj,arg1.conc...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
javaScript原型与原型链这么看好像也不难
为什么 javaScript 设计为基于原型的模式 在以往的学习过程中，我们曾通过学习面向对象语言 java 了解到其有三大特性：封装、继承、多态。关于继承，java 与 javascript 其实两者并不完全一样。 那么 javascript 到底是如何设计出来的呢？早期，浏览器只能浏览网页内容，而不能进行用户交互，也就说当我们输入账号密码进行登录时，浏览器不能对其输入内容进行判断，需要通过服务器进行判断，而网景公司为了解决这一问题，发明一种与 java 搭配使用的辅助脚本语言，并在语法上有些类似。由此可以看出，javascript 受到 java 的影响，其都是对象类型，有对象则就会涉及到继承机制，那么JS的继承机制是怎么样呢？ JS参考java的设计，使用new操作符生成对象，但其与java不同的是new后面跟的是 Construtor 而不是 Class 。// java 中生成一个对象 Person p = new Person() // Person 指的是类名 // js 生成一个对象 function Person (age) { this.age =...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
javaScript之setTimeout和setInterval的原理以及优缺点
前言我们在做项目的时候有时候会遇到一些需求，要求我们间隔一段时间执行某段代码，或者是在给定的时间内重复执行代码，从而达到某种效果。这就需要我们用到Javascript中的定时器方法setTimeout和setInterval来完成，这两种方法可能看起来非常像，而且显示的结果也会很相似，今天牛人博客就给大家详细的介绍一下这两种方法的工作原理以及优缺点，希望对大家有用。定时器setTimeout和setInterval的工作原理以及优缺点具体规则是：setTimeout（expression,milliseconds）函数用于启动在所述延迟之后调用特定功能的定时器。setInterval（expression,milliseconds）函数用于在提到的延迟中重复执行给定的功能，一旦调用了这个函数，那么就会每隔5秒钟就显示一次时间，只有在取消时才停止。其中第一个参数expression可以是字符串，也可以是函数名。是字符串的时候可以带参数，函数名不能带参数，如果带上参数就直接执行函数了，不会延时。第二个参数为延时的时间。function hello (){ console.lo...
小白
2020-11-10
/
0 评论
/
0 阅读
2020-11-10
Css3如何:before :after 写小三角形
主要介绍了详解Css3如何利用 :before :after 写小三角形，在开发过程当中还是会实际用到的，分享给大家做个参考。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> #demo { margin: 100px;; width: 100px; height: 100px; background-color: #fff; position: relative; border: 2px solid #333; } /*方框的样式*/ #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; left: 100%; /*根据三角形的位置，可以随意...
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
web前端跨域总结
跨域最常见的还是CORS和服务端代理，其它的虽然有些不太常用，但还是总结一下。需要说明一下的时，浏览器的跨域限制包括：前端与服务器的跨域限制；前端窗口之间通信的跨域限制；图片法这种方法利用了图片没有跨域限制的特点，仅适用于不需要获取服务端响应的场景，如日志统计等，且只能以GET方式请求，一般很少用。var img = new Image(); img.src = 'http://other.domain.com/log.png';JSONPXmlHttpRequest有跨域限制，但是script标签没有，利用这个特点，可以跨域访问到某个接口返回的内容，但由于script标签只能返回js，所以一般将JSON内容嵌入返回的js中，这种方法就叫JSONP（JSON with Padding），同时为了获取回调，一般在请求的时候会把回调函数以某种方式告诉后台让其在返回的时候主动触发。JSONP一般是这样工作的：// 简单的JSONP前端实现 function jsonp(url, success) { var callbackId = '_jsonp_' + Date.now()...
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
CSS限制字数,超出部份显示点点点...
最近项目中需要用CSS实现限制字数,超出部份显示点点点...，只需要一下代码即可：width:400px;/*要显示文字的宽度*/ text-overflow :ellipsis; /*让截断的文字显示为点点。还有一个值是clip意截断不显示点点*/ white-space :nowrap; /*让文字不换行*/ overflow : hidden; /*超出要隐藏*/语法：text-overflow : clip | ellipsis参数：clip : 不显示省略标记（...），而是简单的裁切（clip这个参数是不常用的！）ellipsis : 当对象内文本溢出时显示省略标记（...）说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。请您注意，text-overflow:ellipsis属性在FF中是没有效果的。示例：div { text-overflow : clip; }text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50 个汉字，而我们的列表可能只有300px的宽...
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
web前端浏览器内核简介
浏览器内核：也称为渲染引擎或排版引擎，主要用于对网页语法进行解释，并进行网页渲染，将网页代码转换为看得到的页面。可分为两部分：渲染引擎和 JS 引擎。最开始渲染引擎和 JS 引擎并没有被区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。渲染引擎主要负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。不同浏览器内核对于网页的语法解释会有所不同，所以渲染的效果也不相同。JS引擎用于解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。常用浏览器内核内核的种类很多，如果加上没什么人使用的非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。Trident（windows）Trident(IE内核) ：由微软开发，国内很多的双核浏览器的其中一核便是 Trident，美其名曰 "兼容模式"。代表：IE、傲游、世...
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
小白
2020-11-09
/
0 评论
/
0 阅读
2020-11-09
JavaScript中轻松遍历对象属性的几种方式
自身可枚举属性Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举，那么将返回由键组成的数组。这是合理的，因为大多数时候只需要关注对象自身的属性。来看看一个对象拥有自身和继承属性的例子，Object.keys()只返回自己的属性键：let simpleColors = { colorA: 'white', colorB: 'black' }; let natureColors = { colorC: 'green', colorD: 'yellow' }; Object.setPrototypeOf(natureColors, simpleColors); Object.keys(natureColors); // ['colorC', 'colorD'] natureColors['colorA']; // 'white' natureColors['colorB']; // 'black'Object.setP...
