前端
前端零碎知识
picoasis
这个作者很懒,什么都没留下…
展开
-
笔记-深入浅出Node.JS-CH1
设计高性能web服务器的要点:事件驱动,非阻塞I/ONode采用JavaScript作为后端语言。Node是一个构建网络应用的基础框架,可以在它的基础上构架诸如服务器、客户端、命令行工具等。Node发展为一个强制不共享任何资源的单线程、单进程系统。Node包含适宜网络的非阻塞I/O库。Node目标是成为一个构建快速、可伸缩的网络应用平台。Node.js通过通信协议组织许多N原创 2021-02-28 20:03:04 · 72 阅读 · 0 评论 -
VUE注意事项
新入职,开始用VUE,看过文档,就开始使用,各种小白级别的焦头烂额。每天总结一点吧,实战中的心得经验之类的。 规范data中的写法,对象中的最后一个属性之后加逗号。 data(){abc:'', edf:"",} 父组件传值给子组件之后,子组件内尽量不要对此值做出更改。 props中的值 当需要在子组件中修改父组件中值,那么不使用p...原创 2018-11-06 00:18:04 · 192 阅读 · 0 评论 -
复杂界面,如何确认表单数据是否更改?
问题背景公司使用封装的Jalor框架。切换中英文时,界面将刷新重载。在界面存在表单时,直接重载会丢失数据,希望在这种情况下,识别用户是否做了修改,进行相应的提示。如果没有改动,那么直接刷新界面。如果有改动,弹框提示用户是否保存数据。解决方案问题的关键在识别用户是否修改了数据。搜索了一下目前常见的解决方案,有两种。捕获界面的change事件,捕获到change事件则在切换中英文时弹...原创 2019-03-28 00:03:56 · 1043 阅读 · 0 评论 -
chrome中使用rem做单位,宽高计算数值不可用
下面三图为chrome的计算结果:代码设置:html{font-size:62.5%;}可以发现同样为1.6rem,字体大小正常计算得到16px,而padding-right不是16px.搜索得到的解答:原因是chrome的最小计算单位是12px;当小于12px时,会被当作12px进行计算。示例1html{font-size:10px;}原创 2017-11-19 21:32:34 · 2576 阅读 · 0 评论 -
chrome中ul的padding-left: 40px
ul的padding-left:40px使用 * {margin:0; padding:0;} ,或者用这个body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:转载 2017-11-14 21:53:28 · 520 阅读 · 0 评论 -
Flex布局display:(-webkit-)flex;
基本概念:容器参数/项目参数/容器属性/项目属性。实现布局:骰子布局/网格布局/均匀布局/百分比布局/圣杯布局HolyGrail/输入框布局/悬挂式布局/固定底栏布局/流式布局。转载链接:Flex 布局教程:语法篇 转载链接:Flex 布局教程:实例篇基本概念Flex容器:设置为Flex布局的元转载 2017-11-14 11:11:41 · 1455 阅读 · 0 评论 -
基于HTML5的可预览多图片Ajax上传
HTML5是个好东东,其中之一就是支持多图片上传,而且支持ajax上传,而且支持上传之前图片的预览,而且支持图片拖拽上传,纯粹利用file控件实现,JS代码寥寥,想不让人称赞都难啊!转载 2017-11-08 21:55:39 · 591 阅读 · 0 评论 -
惊天困惑--到底是闭包的功还是闭包的锅?
我们经常看到一段闭包的经典应用:假设页面上5个div节点,通过循环来给每个div绑定onclick事件,按照索引顺序,分别弹出0,1,2,3,4,5。但下面这段代码的运行结果是,无论点击那个div,最后弹出的都是5。<html> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div>&l原创 2020-05-28 01:46:46 · 210 阅读 · 0 评论 -
JS数组函数 sort 实现机制
对js数组进行排序,是一段常识性的代码了。但是一直疑惑的是,sort函数为什么可以将一个减法结果,改变对数组元素的排序?var arr = [1,3,12,3,5,89]//小数在前,大数在后arr.sort( function(a, b){ return a-b;});//[1, 3, 3, 5, 12, 89]今天找了一下,发现最根本的原因是sort函数的内部实现机制:sort()方法会接受一个比较函数compare(a, b),该函数要比较两个值,然后返回一个用于说明这两个值的相对顺原创 2020-05-25 18:15:32 · 569 阅读 · 0 评论 -
js基础-堆内存与栈内存
转载:https://www.cnblogs.com/heioray/p/9487093.html要点:1. 在js引擎中对变量的存储主要有两种位置,堆内存和栈内存。2. 栈内存主要用于存储各种基本类型的变量,包括Boolean、Number、String、Undefined、Null,**以及对象变量的指针,这时候栈内存给人的感觉就像一个线性排列的空间,每个小单元大小基本相等。...转载 2019-11-06 10:33:25 · 264 阅读 · 0 评论 -
前端视角:搭建本地开发环境
基于windows系统搭建 基于mac系统搭建--简易快速(http://miaowm5.github.io/RMMV-F1/page/01_11_08.html) 基于webpack搭建 基于webpack+vue/react搭建基于MAC系统搭建在Mac电脑中,Apache是默认安装的。你可以通过运行Apache来使用本地服务器。>>>>>...原创 2019-10-17 12:25:35 · 471 阅读 · 0 评论 -
js数据结构-知识点-数组
1. join和toString同:都可将数组转换为字符串。异:join可自定义拼接的连接符号,默认为‘,’ ;而toString只有‘,’例如:var a=[1,2,3]a.join();//'1,2,3'a,join('-');//'1-2-3'a.toString();//'1,2,3'2. 深拷贝,浅拷贝,一层深拷贝针对引用数据类型产生的问题。引用数据类...原创 2019-09-25 16:03:32 · 205 阅读 · 0 评论 -
JavaScript map(parseInt)
参考文章:https://www.cnblogs.com/cjvae/p/9782387.html问题来源 这个问题的来源是一道面试题,题目如下:` ['1','2','3'].map(parseInt)` 的结果和原因?在控制台中输入此表达式:var arr = ['1', '2', '3'];arr.map(parseInt)// [1, NaN, NaN]结果...原创 2019-09-04 12:07:08 · 385 阅读 · 0 评论 -
JS基础--with()语的作用域链,内存泄漏,低性能
with语句的使用,多用于简化对对象属性的引用,其语法为将参数添加到执行环境的活动变量中,将延长作用域链。如果使用不当,将造成内存泄漏。例如:with(aaa){ //aaa属性可直接 var a= aaa.attr1}其中的aaa变量将直接添加在with()所在执行环境的作用域链中。当attr1属性不存在于aaa变量中,将产生一个全局属性,导致尽管with()所...原创 2019-07-08 00:14:46 · 339 阅读 · 0 评论 -
Primate类型 null不是一个对象类型
虽然 typeof null 会输出 object,但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统,为了性能考虑使用低位存储变量的类型信息,000 开头代表是对象,然而 null 表示为全零,所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了,但是对于这个 Bug 却是一直流传下来。...转载 2019-05-31 00:16:01 · 118 阅读 · 0 评论 -
对象原型与属性容易混淆的函数
获取原型isPrototypeOfObjectgetPrototypeOfinstanceof获取属性Objectkeys forinObjectgetOwnPropertyName 判断属性的位置 在原型中定义还是在实例中hasOwnProperty 单独使用in操作符同时使用两种方法枚举原创 2017-12-19 16:32:00 · 296 阅读 · 0 评论 -
canvas雨滴绘制(五)最终实现代码
两个实现代码原创 2017-12-14 21:35:49 · 1725 阅读 · 0 评论 -
Canvas绘制雨滴(二)之setInterval与setTimeout
用setTimeout实现setInterval,并放在Rain原型的move属性中。运行结果:画面显示混乱,浏览器卡死。。原因是: setTimeout与setInterval尽量不要写在函数里, 无论是定时器还是延时器,他们会严重阻碍程序的正常运行流程。这次程序又多次调用定时器函数,重复执行,性能降低。此外,设置定时器属于业务代码,而在原型中定义的属性属于逻辑代码。应该将两者分开写。便于debug和整理。原创 2017-12-14 21:12:37 · 1105 阅读 · 0 评论 -
Canvas绘制雨滴之setInterval与setTimeout(一)
绘制雨滴时,目前大多数的程序中,雨滴的原型有属性update。对于雨滴的移动move进行了原型外的function操作。并使用数组下标的方式对雨滴实例进行定位实现move。那么,倘若move是固定在每一个雨滴的程序,是否意味着,可以将move也写为雨滴原型中的属性。下面进行了实验: 雨滴下落1 body{margin:0;} #rain原创 2017-12-13 22:26:29 · 953 阅读 · 0 评论 -
canvas雨滴绘制总结(三)
问题一 Canvas宽高设置出现白边问题二 Canvas具有默认大小 300px150px问题三 Canvas自适应页面大小如何实现问题四 雨滴绘制原理问题五 setIntervalmoveRain100060问题六 一个函数在没有指定调用主体前它的this永远指向window原创 2017-12-14 20:41:29 · 1257 阅读 · 0 评论 -
回流与重绘
高性能WEB开发-页面呈现、重绘、回流-页面呈现流程:(DOMSource->DOMTree)+(CSSSource->样式结构体)==>renderTree(呈现树)==>绘制页面转载 2017-12-03 22:42:02 · 539 阅读 · 0 评论 -
区分:subString/ substr / slice / splice
String 对象的方法 slice()、substring() 和 substr()都可返回字符串的指定部分。Array对象的操作方法slice(),splice()。原创 2017-11-14 10:46:11 · 227 阅读 · 0 评论 -
iframe加载方案及性能
普通方法加载iframe/在onload之后加载iframe/setTimeout来加载iframe/友好型iframe加载。我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为它可以和主页面并行加载,不会阻塞主页面。转载 2017-11-09 17:34:03 · 7834 阅读 · 0 评论 -
区别:innerHTML---innerText---createTextNode--document.write
innerHTML---innerText---createTextNode--document.write转载 2017-11-01 16:14:00 · 306 阅读 · 0 评论 -
a标签中href=""的几种用法
a标签的最重要功能是实现超链接和锚点。转载 2017-11-01 15:35:26 · 2832 阅读 · 0 评论 -
问题:aUl.getElementsByTagName("li")错误“Uncaught ReferenceError: getElementsByTagName is not defined”
element.getElementsByTagName()方法的操作对象是一个确定唯一的元素,一个页面具体元素对象,不允许是数组。原创 2017-11-01 11:03:13 · 2449 阅读 · 0 评论 -
unix时间戳转换为日期格式
参考文章:JS时间戳转换为日期格式的方法 以下结果为在thinkpad E420 chrome浏览器 所得:一、获取当前时间var myTime=new Date();//返回本地格式的当前时间var myTime=new Date().getTime();//返回毫秒数,距离格林威治时间1970-01-01-00-00-00二、获取给定时间/秒数的时间戳(毫秒数)原创 2017-10-19 11:30:32 · 2079 阅读 · 0 评论 -
区分:subString/ substr / slice
stringObj.subString(strat,stop)start,stop为起始下标,从0开始:①不可取负数 ②当stopstringObi.slice(start,end)start,end为起始下标,从零开始:①可取负值,-n 代表数组的倒数第n个元素②当stopstringObi.substr(str,length)start为起始下标①可取负值;length为截原创 2017-10-19 11:06:54 · 173 阅读 · 0 评论 -
webpack是什么
总的来说,webpack能将各种浏览器无法识别的文件,转换成浏览器环境可以识别的文件(html,js,css)。这个转换过程称为构建。webpack能操作的文件必须是模块化项目中的文件,webpack将所有文件类型识别为‘模块’。对构建的参数(输入,输出,转换方法)进行说明的文件,是webpack的配置文件webpack.config.js。配置文件中关键的几个参数有:入口...原创 2019-11-04 17:19:29 · 715 阅读 · 0 评论 -
发布和安装npm包时遇到的报错
文章目录发布npm包遇到的报错: ERR! 403 Forbidden, Are you logged in as the correct user发布npm包遇到的报错:you must verify your email before publishing a new package:安装npm包遇到的报错 npm WARN saveError ENOENT: no such file or ...原创 2019-12-18 17:23:56 · 708 阅读 · 0 评论 -
create-nuxt-app 新版本v3.1.0安装选项变化
Nuxt 新版本v3.1.0安装选项变化:原来的server framework选项消失了新增了deployment target选项和development tools 选项原始安装: npx create-nuxt-app 项目名还原方式:npx create-nuxt-app@v版本号 项目名截图1: v2.9.2 的server framework选项截图2: v3.1.0多出了deployment target选项截图3: v3.1.0多出了development tool原创 2020-06-29 11:42:19 · 5764 阅读 · 7 评论 -
React Native -1环境搭建(macOS--Android)
文章目录安装依赖AndroidwatchmanJava Development Kit安装Andriod Studio安装Android SDK配置环境变量 ANDROID_HOME创建新项目在Android设备上运行应用开启USB调试通过USB数据线连接设备运行应用编译并运行 React Native 应用修改项目Hello World开始开发平台:macOS目标平台:Android参考文...原创 2020-02-14 19:17:33 · 438 阅读 · 0 评论 -
已解决未解惑:mac中 eggjs框架下安装commitizen安装问题
问题描述:mac中 eggjs框架下安装commitizen安装时,执行git cz时提示无法cz-conventional-changelog路径,并找不到该模块。Could not resolve /Users/picoasis/node_modules/cz-conventional-changelog. Cannot find module '/Users/picoasis/node_modules/cz-conventional-changelog'问题分析:猜测是之前在mac原创 2020-08-11 12:26:25 · 1072 阅读 · 0 评论