water_v-CSDN博客

原创视网膜屏幕和高清视网膜屏幕

媒体查询 dpr 比值 dpr==2 视网膜屏 dpr==3 高清视网膜屏示例：查询高清视网膜屏@media(-webkit-min-device-pixel-ratio:3){ 显示3x图}

2022-02-20 21:01:43 368

原创 JSCORE面试题汇总(一)

第一题 function fun(){ for(var i=0,arr=[];i<3;i++){ arr[i]=function(){ console.log(i) } } return arr; } var funs=fun(); funs[0]();//3 funs[1]();//3 funs[2]();//3第二题去掉数组中...

2020-04-15 14:56:24 342

原创 Promise

要求多个异步任务顺序执行function liang(){ console.log(`亮起泡...`); setTimeout(function(){ console.log(`亮到达终点！`); },Math.random()*2*1000+1000);}function ran(){ console.log(`然起泡...`); s...

2020-04-14 16:50:06 200

默认情况下函数的返回值为undefined（即没有显示地定义返回值的话），但是构造函数除外，new构造函数在没有return的情况下默认返回新创建的对象。但是在有显示返回值的情况下，如果返回值为基本数据类型的话（string，number，boolean，undefined，null），返回值仍然为新创建的对象，这一点比较奇怪，需要注意。只有在显示返回一个非基本数据类型的对象的时候，函数的返回值才...

2020-04-04 22:47:06 1247

转载 defer和async的区别

页面的加载和渲染过程1.浏览器通过HTTP协议请求服务器，获取HTML文档并开始从上到下解析，构建DOM；2.在构建DOM过程中，如果遇到外联的样式声明和脚本声明，则暂停文档解析，创建新的网络连接，并开始下载样式文件和脚本文件；3.样式文件下载完成后，构建CSSDOM；脚本文件下载完成后，解释并执行，然后继续解析文档构建DOM；4.完成文档解析后，将DOM和CSSDOM进行关联和映...

2020-01-15 20:26:57 302

转载 JavaScript中getBoundingClientRect()方法详解

Document * { padding: 0px; margin: 0px; } #main { width: 300px; height: 200px

2017-11-08 10:35:50 568

转载 Javascript:history.go()和history.back()的用法与区别

Javascript：history.go()和history.back()的用法与区别简单的说就是：go(-1):返回上一页，原页面表单中的内容会丢失；back():返回上一页，原页表表单中的内容会保留。history.go(-1):后退+刷新history.back():后退之所以注意到这个区别，是因为不同的浏览器后退行为也是有区别的，而区别就跟javascri

2017-11-07 16:14:24 55306 4

转载 Vue2+VueRouter2+Webpack+Axios构建项目实战2017重制版（一）基础知识概述

基础概念论述前后端分离开发模式在若干年以前，我们的web项目开发模式是如下的： 1.设计师设计页面初稿 2.前端工程师切成html+css+js的页面 3.后端工程师拿到前端工程师的做好的页面，利用模板引擎或其他技术嵌套进后端代码中，实现项目开发。这种开发模式的缺点是，哪怕页面出现一点点小的改变，也需要前端人员和后端人员同时协调开发，并且后端人员不能把全部全部精力放

2017-11-01 20:32:28 617

转载 Jquery append 方法在ie8不兼容问题

var $a=$("<a>");　　$("body").append($a);　　这段代码在ie8下不兼容,怎么也添加不鸟元素，改成如下即可行：　　　　var $a=$("<a></a>");　　$("body").append($a);　　总结：ie对动态append的内容有要求，需要将一个具有完整意义的html一起append到代码中

2017-10-31 11:13:16 1422

转载前端开发CSS命名规范-命名规则

使用类选择器，放弃ID选择器i ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS，就无法重用。NEC特殊字符:”-“连字符 “-“在本规范中并不表示连字符的含义。他只表示两种含义：分类前缀分隔符、扩展分隔符，详见以下具体规则。分类的命名方法：使用单个字母+”-“为前缀布局（grid）（.g-）;模块（module）（.m-）;元件（unit）（.u-）;功能（function）（.

2017-10-31 11:11:05 368

转载前端开发CSS规范-分类方法

前端开发规范虽然没有一个完全的统一规范，但是在每个团队中必然有自己的开发规范。如果是单独的个人，也需要拥有一套属于自己的规范。CSS文件的分类和引用顺序。通常，一个项目我们只引用一个CSS，但是对于较大的项目，我们需要把CSS文件进行分类。我们按照CSS的性质和用途，将CSS文件分为”公共性样式”，“特殊型样式”，“皮肤型样式”，并依此顺序（按需求决定是否添加版本号）。<link href="a

2017-10-31 07:50:41 354

转载字体属性设置(一)：谷歌浏览器12px以下字体的显示;方法和原理

前言chrome谷歌浏览器默认的字体大小为16px；可以通过设置font-size来设置字体大小但是当设置到12px以下的时候字体大小不再改变；对于想设置其他大小的字体就很头疼，本文参考网上的方法，并对该方法以及原理介绍；并对该方法的弊端进行阐述并提出一种合适的解决办法。1.适用对象block或者inline-block；2.方法（该方法先以p标签举例）方法: 通过设置transform:scale

2017-10-31 07:02:52 748

转载如何设置输入框input中placeholder的字体颜色、字号

一、须知 placeholder属性时css3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占用文本。二、设置placeholder文字颜色、字号方式1 因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定（可以在冒号前面写input和textarea）。::-webkit-input-placeholder{/*Webkit browsers*/

2017-10-30 21:26:35 21092 2

原创 MVC、MVP、和MVVM

MVC特点1.耦合性低 2.可扩展性好 3.模块职责划分明确MVC总结1.利用MVC设计模式，使得项目有了很好的可扩展性和维护性 2.controller(控制器)是一个中间桥梁 3.什么时候适合使用MVC设计模式？MVPMVP的定义

2017-10-28 11:50:24 331

转载浅谈JavaScript执行环境及作用域链

1.执行环境每个执行环境都有一个与之关联的变量对象，环境中定义的所有变量和函数都保存在这个对象中。执行环境包括全局执行环境和函数执行环境。全局执行环境是最外围的一个执行环境，在浏览器中，全局执行环境被认为是window对象，所有全局变量和属性都是作为window对象的属性和方法创建的。函数执行环境是指函数的执行环境，当执行流进入一个函数时，函数的环境会被推入一个环境栈中，在函数执行之

2017-10-26 15:01:27 194

转载浅谈JavaScript严格模式

除了正常运行模式，ECMAscript 5添加第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得JavaScript在更合理，更安全、更严禁的条件下执行。进入严格模式的标识为”use strict”①严格模式有两种调用方法 1) 将”use strict”放在脚本文件的第一行，指定整个脚本都以严格模式运行。 2)将”use strict”放在函数体的第一行，指定函数以

2017-10-26 11:59:59 640

转载如何实现浏览器多个标签页之间的通信？

题目点评本题主要考察数据存储的知识，数据存储有本地和服务器存储两种方式，对于前端开发来讲，只需要讲解用本地存储的方式来解决就好。当然也能知道服务器端的方式更好。本题的难易程度一般，只要能够说出思路就可以，至少说两种解决方法。解题方法方法一：使用localStorage 使用localStorage.setItem(key,value);添加内容使用storage事件监听添加、修改、删除的动作

2017-10-26 11:39:52 910

转载 JavaScript模板引擎原理，几行代码的事

一、前言什么是模板引擎，说简单点，就是一个字符串有几个变量待定。比如：var tpl="Hei,my name is <%name%>,and I\'m <%age%> years old.";通过模板殷勤函数把数据塞进去，var data={ "name":"Miya Bai", "age":"20"};var result=tplEngine(tpl,data);//Hei

2017-10-25 19:14:39 203

原创 Web前端性能优化

Web前端性能优化资源的合并与压缩理解减少http请求数量和减少请求资源大小两个优化要点掌握压缩与合并的原理掌握通过在线网站和fis3两种实现压缩与合并的方法web前端本质上是一种GUI软件本可以直接借鉴其他GUI系统架构设计方法但 web前端有点特别浏览器的请求从发送到返回都经历了什么？ dns是否可以通过缓存减少dns查询时间网络请求的过程走最近的网络环境相同的

2017-10-25 03:45:23 273

转载聊一聊CommonJS，RequireJS，SeaJs，AMD,CMD之间需要清理的关系

在学习js和使用js的过程中一定会使用到模块化开发的思想。而提到模块化就一定会提到CommonJS、RequireJS、AMD、CMD等名词。下面我将根据自己查阅的资料梳理以下这几个名词背后的关联。首先上个图，直观感受下这个几个名词的关系： commonjs使用在服务器端的，模块的加载方式是同步的，如nodejs amd，cmd是用在浏览器端，这两种规范规定的模块的加载方式是异步的，它们的对应的

2017-10-24 10:40:59 2145

原创程序员常用快捷键

Windows+E 调出资源管理器（Explorer） Windows+R 调用“运行”窗口 cmd/calc/mspaint Windows+D 显示/隐藏桌面 Alt+Tab+Shift 切换窗口 Alt+F4 关闭当前窗口缩略词补全展开功能： div+Tab 补全为<div></div> h1#bt1+Tab

2017-10-23 19:26:42 354

转载 HTTP缓存机制一二三

web缓存大致可以分为：数据库缓存，服务器端缓存（代理服务器缓存，CDN缓存）、浏览器缓存。浏览器缓存也包含很多内容：HTTP缓存、indexDB缓存、cookie、localstorage等等。这里我们只讨论HTTP缓存相关内容。在具体了解HTTP缓存之前先来明确几个术语：缓存命中率：从缓存中得到数据的请求数与所有请求数的比率。理想状态是越高越好。过期内容：超过设置的有效事件，被标记为”陈

2017-10-23 01:52:13 269

转载谈谈你对模块化开发的理解？

题目点评主要考察你是否有做过比较复杂、庞大的项目，是否具备一定的编程思想。随着前端技术的发展，前端编写的代码量也越来越大，就需要对代码有很好的管理。目前比较好的开发语言就是OOP（面向对象语言）编程语言，例如java语言，C#语言。从JavaScript新的版本来看，要求JavaScript具有封装、继承、多态这样的优点需求越来越明显。这道题属于编程思想上范畴。什么是模块化所谓的模块化开发就是封装细

2017-10-23 00:06:42 3167

转载用JS实现千分位分隔符

题目点评本题的难度偏高，涉及到的算法确实有一定小复杂，这种题目一般出现在鄙视上，不会出现在面谈上。这道题主要的目的应该是考察你是否有一题多解的思路，特别是正则表达式的使用，如果你能使用正则表达式做出来，面试官应该会深深地镇住。解题思路方法一：使用正则表达式function format (num) { var reg=/\d{1,3}(?=(\d{3})+$)/g; ret

2017-10-22 20:09:17 3963

转载浅谈JavaScript异步加载的三种方式——async和defer、动态创建script

一、script标签的位置传统的做法是：所有script元素都放在head元素中，必须等到全部js代码都被下载、解析、执行完毕后，才能开始呈现网页的内容(浏览器在遇到<body>标签时才开始呈现内容)，这在需要很多js代码的页面来说，会造成浏览器呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。因此，一般把script标签放在</body>标签前面。二、嵌入脚本与外部脚本尽可能使

2017-10-22 15:21:12 421

转载浅谈JavaScript new对象的四个过程

new对象：function Person(name,age){ this.name=name; this.age=age;}var person=new Person("Alice",23);new一个对象的四个过程： 1、创建一个空对象var obj=new Object();2、让Person中的this指向obj，并执行Person的函数体var result=Pe

2017-10-22 14:18:27 477

转载 meta标签的特殊用法

2017-10-22 14:10:17 355

原创前端跳槽面试必备

面试模拟与技巧如何看待面试什么是面试？答：面试时测查和评价人员能力素质的一种考试活动。具体地说，面试时一种经过组织者精心设计，在特定场景下，以考官对考生的面对面交谈与观察为主要手段，又表及里测评考生的知识、能力、经验等有关素质的一种考试活动。面试准备职位描述分析看公司的要求业务分析与实战模拟看官方网站分析所用的技术栈艺龙：jQuery+requireJs+模板引擎（handle

2017-10-22 13:12:36 5800

转载浏览器的渲染：过程与原理

本文不是关于浏览器渲染的底层原理或钱盾优化具体细节的讲解，而是关于浏览器对页面的渲染——这一过程的描述及其背后原理的解释。这事因为前段优化是一个非常庞大且零散的知识集合，一篇文章如果要写优化的具体方法恐怕只能做一些有限的列举。然而，如果了解清楚浏览器的渲染过程、渲染原理，其实就是掌握了指导原则。根据优化原则，可以实现出无数种具体的优化方案，各种预编译、预加载、资源合并、按需加载方案都是针对浏览器渲染

2017-10-22 02:12:02 278

转载 Vue 2.5 发布了

我们很高兴宣布Vue 2.5 Level E 的发布！本次发布包括多个功能提升并且我们推荐你查看发布说明来获取完整详细信息。在这篇文章中，我们将重点介绍一些更重要的变化：更好的TypeScript集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染。更好的TypeScript集成得益于TypeScript团队的帮助，2.5提供了大大改进的类型声明，可以与Vue的开箱即用

2017-10-22 02:00:35 705

转载从上下文，到作用域(彩蛋:理解闭包)

前言近几天在编程群中的聊天，让我发现了很多人并不清楚什么是上下文（context）,什么是作用域（scope），而且纠结在其中。我当初对这两个概念也只有粗浅的理解，不过我从一开始就不怎么困惑，因为我清楚自己对这一问题的认识边界。现在，我对它们的认识也只加深了一点点。不过，群聊中小伙伴的热情鼓舞了我——很多最初学的小伙伴，想到和思考的是很多我从没考虑过得问题，小伙伴们真是达到了”进一寸有一寸的欢喜”这

2017-10-22 01:24:51 252

转载手机移动端web资源整合

做移动端开发，会存在各种兼容问题。meta基础知识<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxinum-scale=1.0,user-scalable=no"忽略将页面中的数字识别为电话号码<meta name="format-detection" content="

2017-10-21 21:51:43 273

原创 HTML5水滴特效

实现canvas铺满全页面，并随窗口的大小变化而变化 /*②如果加上这个样式，会出现竖向滚动条，这是因为canvas和img标签一样有默认的对齐方式，只要把canvas中添加上display:block即可解决 html,body{ height:100%; } /*①如果只有canvas样式的定义，并且不包括disp

2017-10-21 13:19:37 5513

转载跨资源共享CORS详解

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制本文详细介绍CORS的内部机制一、简介CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对

2017-10-20 20:40:33 364

原创前端js面试技巧(2)——JS-WEB-API部分

上期回顾 JS基础知识 ①变量类型和计算 ②原型和原型链 ③闭包和作用域 ④单线程和异步 ⑤其他(如日期，Math，各种常用API) 注意：内置函数和内置对象的区别 1、内置函数：Object Array RegExp Function Error Date Number Boolean String… 2、内置对象：Math JSON…

2017-10-20 18:41:39 806

转载 js创建一条通用链表

什么是链表？链表是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的。什么是顺序存储结构？在计算机中用一组地址连续的存储单元依次存储线性表的各个数据元素，称作线性标的顺序存储结构。多数高级语言的数组使用顺序存储结构，不过早期的javascript引擎用了链式存储结构。chrome的V8的数组使用了顺序存储结构与链式存储结构混合模式；大多数情

2017-10-19 16:32:33 262

原创 python学习笔记-基础篇-day03 python历史、32bit和64bit系统的区别，系统运行机制浅析

6:34

2017-10-19 15:37:49 296

转载 JavaScript的this指向问题深度解析

JavaScript中的this指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论this的问题。与我们常见的很多语言不同，JavaScript函数中的this指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了this指向。JavaScript中，普通的函数调用方式有三种

2017-10-19 15:31:52 191

原创 JavaScript的this指向问题深度解析

JavaScript中的this指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论this的问题。与我们常见的很多语言不同，JavaScript函数中的this指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了this指向。JavaScript中，普通的函数调用

2017-10-19 09:24:10 240

原创 MongoDB学习笔记

mongodb文档数据库，存储的是文档(Bson文档是json的二进制化)，就是json的二进制对象特点：内部执行引擎为JS解释器，把文档存储成bson结构，在查询时转化成JS对象，并可以通过熟悉的JS语法来操作mongo和传统型数据库相比最大的不同传统型数据库：结构化数据，定好了表结构后，每一行的内容，必是符合表结构的，就是说–列的个数类型都一样 mongo文档型数据库：表下

2017-10-18 01:23:47 302

空空如也

微应用，轻应用和微信小程序什么区别啊

压缩文件并加密，用流输出，中间不生成zip文件，怎么实现