Amelian的博客

原创 HTML5新添加的语义化标签

1）语义化标签语义化标签使得页面的内容结构哈，见名知义标签<>描述header定义了文档的头部区域footer定义文档尾部区域nav定义文档的导航section定义文档的节（section、区段article定义页面的独立的内容区域aside定义页面侧边栏内容dialog定义对话框，比如提示框(2)增强型表单HTML5拥有多个新的表单inout类型，这些新的特性提供了更好的输入控制和验证，使用：<input

原创 HTML5中得缓存机制

1.Web Worker当在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能，你可以继续做任何愿意做的事情：点击、选取内容等待，而此时web worker在后台运行首先检测浏览器是否支持 Web Workerif(typeof(Worker)!=="undefined"){ // 是的! Web worker 支持! // 一些代码..... }else{ // //抱歉!

原创 javascript的执行机制

1、场景分析/* 以下这段代码的执行结果是什么？ 如果依照：js是按照语句出现的顺序执行这个理念， 那么代码执行的结果应该是： //"定时器开始啦" //"马上执行for循环啦" //"执行then函数啦" //"代码执行结束" 但结果并不是这样的，得到的结果是： //"马上执行for循环啦" //"代码执行结束" //"执行then函数啦" //

原创 js中的闭包以及闭包的实际运用

1.闭包的形成条件：1.函数嵌套2.内部函数引用了外部函数的局部变量PS：正常情况下，当一个函数调用完之后，内存中关于函数的东西会全部释放掉，局部变量也会消失，而闭包是一种特殊的存在。由于外部函数返回的是内部函数的引用，相当于你返回了一个函数，这个函数还未被真正调用。但是内函数又使用了外函数的变量，导致内存不能释放它们，需要等到内函数使用完成之后才能释放它们----由此形成了闭包3.闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数

原创 从一个url地址到最终页面的渲染，发生了什么？（或者一次完整的HTTP服务过程）

一个url地址到最终页面的渲染，具体过程如下：1.DNS解析：即将域名地址解析为ip地址其解析具体过程如下:1）从浏览器的DNS缓存中进行解析–没有往下（逐步进行）2）从系统DNS缓存中进行解析3）从路由器DNS缓存中进行解析4）网络运行商DNS缓存中进行解析5）递归搜索：如blog.baidu.com先是在.com域名下查找DNS解析没有则在.baidu域名下查找DNS解析再没有则blog域名下查找DNS解析最后，上面所有均没有查找到的话-----报错若解析成功，便可以拿到相应的

原创 什么是跨域？前后端解决跨域的方法

一、同源策略出于浏览器的同源策略限制同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会收到影响。可以说web时构建在同源策略的基础上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另一个域的内容进行交互。所谓同源（即指在同一个域），就是两个页面具有相同的协议（protool），主机（host）和端口号（port）二、什么是跨域当一个请求url的协议、域名、端口三者

原创 js的综合面试题

题目 <script> function Foo(){ getName=function(){ alert(1); return this; } } Foo.getName=function(){ alert(2); } Foo.prototype.getName=function(){ alert(3); } var getName=function(){

原创 js中的toString()方法

toString方法上实例（toString的使用）

原创 js中如何使用工厂方式和构造函数创建对象

说明：工厂（即可以批量创建对象）最终：缺点：使用工厂方法创建的对象，使用的构造函数都是Object（var obj=new Object() )所以创建的对象的类型都是Object类型导致我们无法区分出多种不同类型的对象（如Person、Dog）引入新的创建对象方式（构造函数）1.创建一个构造函数，专门用来创建不同类型的对象（如Person、Gog）构造函数也是一个普通函数，创建方式和普通函数一样不同：构造函数首字母大写构造函数的调用方式不同function Pers

原创 js中的this

1.解析器在调用函数时每次都会向函数内部传递进一个隐含的参数2.这个隐含的参数就是this，this指向的是一个对象3.这个对象我们称为函数执行的上下文对象（有调用方式决定）4.根据函数调用方式不同，this会执行不同的对象4.1 以函数的形式调用时，this永远指向window4.2 以方法的形式调用时，this指向的就是调用方法的那个对象this则可以根据调用者的不同而得到该对象的一些属性，使得程序更加灵活...

原创 js复习--函数

6 函数返回值注意7 立即执行函数使用：加一个括号（）把函数包起来调用：再再（）外部添加一个（）表示调用综上：注意：如果一个函数作为一个对象的属性报错，那么我们称相和歌函数为对象的方法，调用这个函数就是调用对象的方式（method）函数（方法）8 枚举对象中的属性使用 for in 语法for（var 变量 in obj）{/*obj对象有几个属性循环体就会被执行几次*/}...

原创 js中的作用域

在js中只有两种作用域1.全局作用域总结变量的声明提前函数的提前（function）使用函数声明形式创建的函数function 函数（）{}它会在所有代码执行之前被创建，注意，这时不同于var，var只是把变量提前声明，而function是将整个函数提前！所以我们可以在函数声明前调用（即不管你写在哪都可以）如①使用函数 表达式所创建的函数，不会被声明提前，所以不能在声明前调用（如②）函数作用域1.函数可以反问全局变量（但还是就近原则查找，若想直接查找全局中的变量，可以直接加

原创 求背景图片左边到#box盒子左边外侧的距离

题目1：求背景图片左边到#box盒子左边外侧的距离 <style> * { margin: 0; padding: 0; } #box { width: 100px; height: 200px; background-color: pink; padding: 100px; border: 80px solid blue; background-image: url('

原创 js复习

1.in运算符通过该运算符可以检查一个对象中是否含有指定的属性（有则返回true，无则返回false）语法：“属性名” in 对象var obj= new Object();obj.name="我“；console.log(“name” in obj);2.基本数据类型3.引用类型注意1：注意2：3.对象字面量4 js的运用1.document.write(“向body中写入内容”)–会插入到body标签中5 函数在实际开发中很少用构造函数创建一个函数对象（

原创 1物理像素的实现

1.对于1物理像素问题（不会出现在pc端，因为pc的像素比永远为1，而物理像素为1时，此时css自然为1），因此你写的css像素和物理像素永远时一对一的关系像素比=物理像素/css像素2.在移动中，不同设备其dpr即像素比不一样，可为2、3等，因此当你在dpr为2的移动端设置1px的css像素时，对应2物理像素，因此会达不到我们想要的效果3.解决–通过操作meta标签上的缩放比（即initial-scale）当initial-scale为1时，表示没有进行任何的缩放，而现在我想要把1px的css

原创 解决移动端适配方法总结

常用的解决移动端布局的方案大概有：1.flex弹性布局2.百分比3.rem布局4.用框架搭建页面5.通过meta标签中的viewport6.媒体查询media百分比布局百分比布局采用百分比设置元素宽高flex布局父级元素设置display：flex子级元素通过flex参数来设置缩放比例，缩放条件、排列方式等缺点：具有兼容性问题rem布局这里提供两种思路：思路11）设置根节点字体大小为（为了方便，可以灵活设置：16、32、100等），布局时使用原px/@rem得出r

原创 如何rem解决移动端适配问题？

解决移动端适配问题方法一：使用rem准备：在实际开发中，一般设计稿都是给定的，而且设计稿中的元素的大小也是给定px值的，比如一般给定设计稿适应的屏幕宽度为750px；问题：ui设计师给定的设计稿是在移动设备屏幕为750px下的显示效果，而针对于使用不同设备的用户，其显示屏幕宽度必然是不同的，因此我们需要根据ui设计图做相应的适配；思路：假设一个元素宽度为200px，那么我要是的这个为w:200px的元素在750px设备和375px（或者其他设备）上显示的效果一样可以得到x=100，但是这只是针对

原创 js中数组的翻转、去重

实现目标：数组翻转实现代码： <script> var a = [1, 2, 3, 4, 5, 6, 7, 8, 9] for (var i = 0; i < a.length / 2; i++) { /* a[0]----a[a.length-1-0] a[1]----a[a.length-1-1] a[2]----a[a.length-1-2] .......依次类推

原创 根据已有的字符串，写一个function将其转换成驼峰表示法

1.如已有字符串’get-element-by-id’，需要将其转换为getElementById封装成function后具有一般性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu

原创 js中基本数据类型与引用数据类型使用的区别

一、1.基本数据类型有：string、number、boolean、undedined、symbo（ES6）2.引用数据类型有：（也可以说是对象，对象是属性和方法得集合Object、Function、Array、RegExp、Date、以及单体内置对象（Global、Math）二、两者使用区别1.实际操作得对象基本类型：按值访问，操作的是保存在变量中的实际的值，即基本类型的变量是存放在栈区的（栈区指内存里的栈内存）假如有以下几个基本类型的变量：var name = 'jozo';var

原创 js-算法之扁平化数组、去重、排序

1.具体题目与分析如下：实现：let arr1 = [[12, 2, 3, 4], [7, 5, 2, 12], [1, 2, [3, 4, 7]], [5, 88, 99]] let result1 = [] function flat(arr) { for (let i = 0; i < arr.length; i++) { if (typeof arr[i] == 'number') { if (result1.indexOf

原创 js中的Object.prototype.toString.call()方法

在JavaScript里使用typeof判断数据类型，只能区分基本类型，即：number、string、undefined、boolean、object。对于null、array、function、object来说，使用typeof都会统一返回object字符串。要想区分对象、数组、函数、单纯使用typeof是不行的。在JS中，可以通过Object.prototype.toString方法，判断某个对象之属于哪种内置类型。分为null、string、boolean、number、undefined、a

原创 6-jQuery中的ajax

一、 主要有get、post、和一个通用的发送请求的方式① ：导入相关的jquery库② get请求③ post请求对于第四个参数‘json’是将响应体传过来的结果转成json对象④ ：通用方法（参数有很多可以查阅参考文档）...

原创 css中神奇的盒模型-----（box-sizing：border-box）

背景：先声明一下运用的场景，假如项目布局使用的是自适应的布局方式，div给出的宽度是百分比的形式，即框占窗口宽度的50%，但边界和内边距是用像素来表示的怎么办？为了避免这种问题，可以使用属性box-sizing来调整框模型。使用border-box，来将框模型更改成这个新的模型。注意：回顾一下，框的总宽度是width,padding-right,padding-left,border-right以及border-left属性之和，这就是造成上述背景下，样式不好调整的原因。box-sizing属性用于更改

原创 11-4定位的小应用（京东）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/rese

原创 11-1定位之相对定位

相对定位一、 定位：定位是一个更加高级的布局手段通过定位可以将元素拜访到也买你的任意位置使用positon属性来设置定位二、 相对定位1.-当元素的position属性值设置为relative时则启动了元素的相对定位2.-相对定位的特点2.1.相对定位特点1元素开启相对定位之后，如果不设置偏移量元素不会发生任何变化2.1.1.偏移量（offest）当元素开启了定位之后，可以通过偏移量来设置元素的位置top：定位元素和定位位置上边的距离bottom：定位元素和定位位置下边的距

原创 10-4（对10-1到10-3的综合）---解决浮动的总结

将清除浮动与清除外边距问题综合 .clearfix::before, .clearfix::after{ content:''; display: table; clear:both; }使用：当某个元素需要消除浮动时，则在该元素加上类名为class=“clearfix”即可消除外边距问题同理如：...

原创 css中的浮动float

浮动浮动的相关说明：通过浮动可以使一个元素向其父元素的左侧或者右侧移动使用float属性来设置元素额浮动可选值：none：默认值，元素不浮动left：元素向左移动right：元素向右移动注意：1）.元素设置了浮动之后，水平布局的margin-left+border+padding-left+…+…这个等式不需要成立，即此时浏览器不自动调节2）.元素设置浮动后，会完全脱离文档流，即不会再占用文档流的位置，因此还在文档流中的元素会自动向上移动浮动的特点：1） 浮动的元素会脱离文档流，不

原创 3-ajax请求超时与网络异常处理

一、 ajax超时与网络异常处理说明：主要表示前端在发送请求以获取响应时，若在一定时间内未能请求成功，则开发者则可以设置响应的提示给用户；1.1这里为了体验，所以在后端接收请求时设置了响应延时（3s）1.2 所以在前端时可以设置当响应时间小于3时则提示信息（因为在3s后会成功响应）...

原创 2-ajax中ie缓存问题

一、 IE缓存问题：ie浏览器会对ajax请求的结果进行缓存，因此下一次访问时访问到的是缓存的数据，而不是页面更新的数据主要在html前端申请数据是添加时间戳，以使得每次访问事件不一样，得以更新数据1.前端2.后端接收...

原创 1-ajax操作的基本步骤

确定响应的连接口（如按钮）然后为按钮绑定事件监听，在该监听函数中，处理ajax的相关操作，主要分为嘶个步骤2.1创建对象2.2 初始化2.3 发送2.4 对响应得到的结果进行处理GET请求****详细代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev..

原创 es6基础学习

一、 变量var的缺点 可以重复声明 无法限制修改 没有块级作用域产生const与let------特点：共同特点： 不能重复声明 具有块级作用域 const是常量、let是变量二、 箭头函数3. 当只有一个参数时，（）可以省略4. 如果只有一个return，{}可以省略----如 let show=a=>a*2; alert(show(12));5. 例子①function show() { }let show= ()=>{ }

原创 VScode不能正常打开html

原创 基于webpack+vue实现的待办VUE-TODOLIST前端项目简单总结

一、手动配置对webpack进行相关的配置参考我的上一篇文章：https://editor.csdn.net/md/?articleId=1100113011.实现页面2.实现技术：组件模块化思想父组组件之间的数据双向传递（porps、this.$emit)同理：使用stylus语法对css样式进行编译（实现css样式的模块化、优化代码结构，将具有共同样式的css代码组装起来，组装成函数，需要时直接引入调用即可）-使用watch实现对数据的监听 watch

原创 如何将本地项目上传到git进行管理

说明：默认以及有github的账号（没有则自行注册）1.创建项目（在github上操作）2.填写相应信息后点击create即可Repository name: 仓库名称Description(可选): 仓库描述介绍Public, Private : 仓库权限（公开共享，私有或指定合作者）Initialize this repository with a README: 添加一个README.mdgitignore: 不需要进行版本管理的仓库类型，对应生成文件.gitignorelic

原创 webpack中的热模块替换

说明：模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。本页面重点介绍实现，而概念页面提供了更多关于它的工作原理以及为什么它有用的细节1) 启用i 配置devServer: {// 指定服务器根目录contentBase: './dist',// 自动打开浏览器open: true,// 启用热模块替换hot: true},ii 插件2) 测试编写业务代码App.vu

原创 webpack的相关配置，以及使用webpack打包文件时用到的loader以及相关插件的使用

一、项目初始化1.init初始化使用命令：npm init -y （会生成package.json文件，y表示默认选项）我们需要使用webpack来完成打包. 因此我们安装webpack和webpack-cli2.安装webpack在命令行中执行 npm install webpack webpack-cli -Dinstall: 安装D: 安装开发环境依赖, 是–save-dev的简写二. 编写项目入口1 编写index.html<!DOCTYPE html>

原创 如何自如地使用npm在项目中安装、删除模块包

1、安装模块包npm安装模块包的方式有两种：全局安装和本地安装全局安装：npm install <package-name> -g全局安装后，可以通过使用对应模块包的命令行工具执行操作命令本地安装：本地安装模块包的一个特点就是：在使用安装好的模块包时，需要通过require(’’)来引入到项目中使用；本地安装时还需要考虑的一个问题就是安装好模块包后，其信息是否要写入到项目package.json中？如果写，写到哪？因此，本地安装衍生出三种命令，分别为：npm install &

原创 vue中组件通信1(props)

一、数据存储部分即是要解决存什么数据，什么时候读取，当一有对数据相关操作时要更新数据data中的数据不能写死了，需要从localStorage中读取数据使用window.localStorage.getItem(‘todos_key’)//但是这里获取到的是文本数据，因此需要得到key-value的形式，将其转换为JSON格式：（因为todos这里是一个JSON格式的数组）-------所以在监视中setItem存储的数据类型要相对应‘[ ]‘表示当为空时解析的文本2…用到深度监视（watc

原创 vue中组件通信4(slot)

一、 slot1.该方式用于父组件向子组件传递“标签数据”2.如同一个组件，切换不同页时只是使用了不同的标签3.给组件中不同站为分配数据，因此需要传递的时标签，且指定位置在父子组件相对应的插槽（slot）格式：二、 实例如下：1.在TodoFooter子组件中，定义插槽如下：2.在App父组件即指定插槽如下（在父组件中会有标签体）在父组件中指定插槽需要注意，由于传过来的标签体带有某些事件的响应，原本时在子组件中定了这些相关事件函数或者属性其代码，均需要剪切到父组件中，同时，之前若有