自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

良_123的专栏

日常开发记录

  • 博客(210)
  • 收藏
  • 关注

转载 【npm】利用npm安装/删除/发布/更新/撤销发布包

正文  回到顶部什么是npm?npm是javascript的包管理工具,是前端模块化下的一个标志性产物简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率 1.从社区的角度:把针对某一特定问题的模块发布到npm的服务器上,供社区里的其他人下载和使用,同时自己也可以在社区里寻找特定的模块的资源,解决问题2.从团队的角度:有了npm这个包管理工具,复用团队既有的代码也变的更加地方便 回到顶...

2018-07-09 10:03:17 1946

原创 微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:$("body").on("touchmove", function (event) {event.preventDefault();});ordocument.addEventListener('touchmove', function(e){e.preventDefault()}, false);但这样往往会把页面原生的s...

2018-07-06 17:13:20 2217

转载 webpack4-用之初体验

众所周知,webpack进入第4个大版本已经有2个月的时间了,而且webpack团队升级更新的速度也是非常的惊人在写下如下内容的时候webpack已经出到了4.6的版本了,剑指5.0应该是指日可待了,当然这些都是个人的臆想,并不代表任何意见既然我们已经迎接了webpack4的到来了,那么就一起来使用一下,即使你没用过之前的版本,没关系,我们重新出发,将工作中常用到的配置写给大家来看非友情提示:由于...

2018-05-02 15:23:42 609

转载 前端知识点总结(vue)

1.框架和库的区别框架(framework):有着自己的语法特点、都有对应的各个模块。库(library):专注于一点。框架的好处:1.    提到代码的质量,开发速度2.    提高代码的复用率3.    降低模块之间的耦合度(高内聚低耦合)UI:user interfaceGUI:graphical user interfaceCLI:command line interfaceAPI:app...

2018-04-25 20:45:20 260

原创 JS中深拷贝数组、对象、对象数组方法总结

我们在JS程序中需要进行频繁的变量赋值运算,对于字符串、布尔值等可直接使用赋值运算符 “=” 即可,但是对于数组、对象、对象数组的拷贝,我们需要理解更多的内容。首先,我们需要了解JS的浅拷贝与深拷贝的区别。我们先给出一个数组:var arr = ["a","b"];现在怎么创建一份arr数组的拷贝呢?直接执行赋值运算吗?我们来看看输出结果var arrCopy = arr;arrCopy[1] ...

2018-03-10 18:23:50 592 3

转载 iPhone X 适配手机端 H5 页面通用解决方案

一:本文提供两种解决方案1.终端解决方案(最优,建议选择)2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了新的挑战。 对于手Q中的各业务来说,受iPhone X影响的H5页面挺多,应该采取什么快速有效的办法来应对呢? 目前的H5页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下: 通栏...

2018-03-05 13:42:49 1356

转载 聊聊我对现代前端框架的认知

现在前端界有三大框架横行,Vue,React,Angular,几乎是所有身为一名前端工程师所必备的一项技能。但是我不知道有多少人仔细思考过为什么会这样?现在的一些应届生和刚入行的人们,在刚一踏入前端这个行业起就会面临着是学习Vue还是学习React又或者是学习Angular等这样的选择问题。事实上在早几年是没有这个问题的,我们不需要选择,那时候我们写前端就是jQuery一把

2018-02-01 11:48:20 1143

转载 Vue项目自动转换 px 为 rem

Vue项目自动转换 px 为 rem,高保真还原设计图前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem。然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换。而本文的目标就是通过一系列的配置后,在开发中可以直接使用设计图的尺寸开发,项目为我们自动编译,转换成rem。技术栈vue-cli:使用脚手架工具创建项

2018-02-01 11:33:24 3057

原创 HTML <fieldset> 标签

在form表单中常常被忽视的两个标签fieldset和legend标签的定义和使用 fieldset元素可将表单的相关元素分组。 fieldset标签将表单内容的一部分打包,生成一组相关表单的字段。 当一组表单元素放到标签内时,浏览器会以特殊的方式来显示它们,它们可能有特殊的边界,3D效果,或者甚至可以穿件一个子表单来处理这些元素。标签的定义和使用 le

2018-01-30 21:54:22 736

转载 移动前端自适应适配布局解决方案和比较

互联网上的自适应方案到底有几种呢?就我个人实践所知,有这么几种方案:固定一个某些宽度,使用一个模式,加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem淘宝最近开源的一个框架和网易的框架有同工之异。都是采用rem实现一稿解决所有设置自适应。在没出来这种方案之前,第一种做法的人数也不少。类似以下说到的拉钩网。看一下流云诸葛的文章。以下摘自:从网易与淘宝的font-size思

2018-01-15 17:56:26 456

转载 web和native进行交互(JSBridge)

随着HTML5的不断普及及优化,其在移动端开发的应用也越来越多,在开发者我们经常需要web和native进行交互,也就是要用到经常听到的“JSBridge”。这里我就自己的理解及实践,讲一下什么是JSBridge。有些朋友听到JSBridge,会觉得是个蛮高大上的东西,好像很厉害很复杂的样子,有了它web和native都能交互了呢。其实并非如此,相信我,JSBridge真的是一个非常非常简

2018-01-04 14:36:50 2551

原创 H5页面中唤起native app

 需求:如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载。兼容性:在手机各大浏览器能唤醒。微信 QQ客户端 新浪微博客户端 腾讯微博客户端无法唤醒,需另行处理。&lt;span style="color:inherit"&gt;原理:ios与android都支持一种叫做schema协议的链接。这种协议的类似于我们熟悉的http协议,我们只要跟app协...

2017-12-28 16:52:55 1550

转载 95 个超实用的 JavaScript 代码片段( ES6+ 编写)

目录Array 数组Array concatenation (数组拼接)Array difference (数组比较)Array includes (数组包含)Array intersection (数组交集)Array remove (移除数组中的元素)Array sample (数组取样随,机获取数组中的1个元素)Array union (数组合集)

2017-12-27 10:29:12 4501 1

转载 在没有DOM操作的日子里,我是怎么熬过来的(上)

前言在我动笔写这篇文章的时候,我刚刚从我的项目中删除了最后一行JQuery代码。至于我为何要这么做,请听闰土娓娓道来。前几年我还在想,假如有一天,前端世界里不能再直接操作dom了,我该怎么办?没想到竟一语成谶,这一天终究还是来了......此文记录了一次JQ党转变成Vue信徒的心路历程。那么接下来,正文从这开始~熟悉闰土的朋友都知道,我是从JQ时代过来的前端,在刚接触react和v

2017-12-01 11:23:24 457

转载 使用nrm快速切换npm源

一、nrm是什么?这是官方的原话:  开发的npm registry 管理工具 nrm, 能够查看和切换当前使用的registry, 最近NPM经常 down 掉, 这个还是很有用的哈哈顾名思义,就是说nrm是一个管理npm的工具,如果你不知道npm是什么的话,请看下这里npm的是什么?。二、nrm的安装$ npm install -g nrm三、n

2017-11-29 16:06:08 634

转载 webpack

1. webpack 是什么?先来说一下 webpack 是什么。webpack 的官方对它是这样定义的:webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also ca

2017-11-03 15:44:43 1167 1

转载 前端模块化

前端模块化标签(空格分隔): 模块化前端模块化系列(一):网站需要模块化的原因由于我最近在研究前端各种各样的模块化系统,所以就翻译了一篇来自webpack官网的文章,总的来说作者写的还是相当不错的。这样在自己学习的同时也可以与大家共同学习~~~在今天的网站正在逐步的向web apps转变。单个页面中越来越多的Javascript。在现代浏

2017-11-03 15:18:01 301

原创 可滚动的 tbody

这个简单的技巧用来解决使固定表头(thead)和滚动表体 (tbody) 的问题。这使得数据表更易于浏览。当用户滚动表格时,固定表头为用户所注意的列提供了上下文。看下面图示你就明白了:为了使其工作,第一步是:设置 tbody 为 display:block ,以便我们可以应用 height 和 overflow 属性。下一步将是:设置thead 中的

2017-10-12 17:59:31 458

转载 Fetch()

传统 Ajax 指的是 XMLHttpRequest(XHR),未来现在已被 Fetch 替代。最近把阿里一个千万级 PV 的数据产品全部由 jQuery 的 $.ajax 迁移到 Fetch,上线一个多月以来运行非常稳定。结果证明,对于 IE8+ 以上浏览器,在生产环境使用 Fetch 是可行的。由于 Fetch API 是基于 Promise 设计,有必要先学习一下 Pro

2017-08-09 14:21:21 922

转载 HTTPS详解

存在即合理http是非常常见的应用层协议,是超文本传输协议的简称,其传输的内容都是明文的。在这个混乱的世界,明文传输信息想想就可怕,网络“小混混”的手段远比我们这些凡人高明得多,他们有一万种方式劫持,篡改我们的数据。对于一个网站或者服务,如果你给你的用户两个选择:通讯数据明文传输,速度快;通讯数据加密传输,但是速度可能会稍微慢一点.我想,只要脑袋没有长歪的用户都宁愿牺牲一点速度去换

2017-08-01 13:52:53 372

转载 前端疲劳

坦然面对:应对前端疲劳我最近和一个做后端开发的朋友讨论我在工作之余花了多长的时间去写码和学习写码。他给我看了Uncle Bob的《Clean Code》这本书中的一段话,它将音乐家们为准备音乐会而花费的时间与开发者让代码正确执行所用的练习时间进行了比较。原文链接:http://www.zcfy.cc/article/not-an-imposter-fighting-front-en

2017-07-26 11:42:44 1495 3

转载 angular路由详解

angular路由路由 (route) ,几乎所有的 MVC(VM) 框架都应该具有的特性,因为它是前端构建单页面应用 (SPA) 必不可少的组成部分。那么,对于 angular 而言,它自然也有 内置 的路由模块:叫做 ngRoute 。不过,大家很少用它,因为它的功能太有限,往往不能满足开发需求!!于是,一个基于 ngRoute 开发的 第三方路由模块 

2017-06-28 17:02:30 728

转载 history.pushState无刷新改变url

通过history.pushState无刷新改变url背景在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容。但随着单页应用的增多,越来越多的网站采用ajax来加载资源。因为异步加载的特性,地址栏上的资源路径没有被改变,随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式(点击浏览器前进/后退按钮),在前

2017-06-28 17:00:50 12554

转载 nodeJs 安装 npm node_modules

Nodejs 1.安装nodejs从nodejs官网下载最新版本的node,设置环境变量这样就可以在cmd下直接用命令行操作npm环境变量:path  d:/nodejs查看本机node及npm版本2.从官网上直接拷一个小脚本:nodeExample.jsconst http = require('http');

2017-06-22 18:19:59 14539

转载 Nodejs之npm&package.json

作为前端,因为经常用到gulp,webpack等工具,所以我们最常见到的是npm和package.json,所以先总结一下它们俩。npm初始化$ npm initor$ npm init --y 在做前端开发的时候,我们经常会用到构建工具,例如gulp,webpack等,为了让别人也可以参与进来,我们需要告诉别人项目有些什么依赖包,然后让别人也安装同样的依赖包,而n

2017-06-22 18:19:22 836

原创 Socket.IO(聊天应用程序)

最近周末无聊学习了下socket.io,做了个简单的聊天室,以下是关键代码文件:html文件:html>html>head> title>Socket.IO chattitle> style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, A

2017-06-17 21:08:41 569

转载 javascript模块化之CommonJS、AMD、CMD、UMD、ES6

差异:在前端开发中,发现小组成员总是对ES6、JavaScript、CommonJS、AMD、nodejs概念搞不清,既不知道它们之间的联系,更不知道它们之间的差异。理清它们的关系很简单,首先要从最核心的说起,也就是javascript,javascript是一种脚本编程语言,有自己独立的语法与语义,没有javascript,也就没有其他的那些概念了。关于ES6,可直接理解

2017-06-16 18:50:05 640

原创 数组对象去重

html>html> head> meta charset="utf-8"> title>title> head> body> script type="text/javascript"> /* 期望得到不包含hasRoles集合的对象

2017-06-16 18:45:51 2145

转载 js汉字转拼音

HTML>html>head> title>用JS实现汉字转拼音title> meta charset="utf-8" />head>body>请输入:input type="text" id="J_input" />br/>br/>input type="button" id="J_btn" value="转化"/>br/>br/>输出是:span id="J_o

2017-06-13 18:32:57 3128

转载 打造一个自动化的前端项目

前言作为一名前端开发者,刀耕火种的年代随着 NodeJS 等工具的出现,已经一去不复返了。如果你还停留在写着冗长的HTML代码,不断重复着复制粘贴,那么你应该继续学习了。之所以写这篇文章,是源于前段时间我的一个Github个人主页项目。因为是要放在Github上的,所以只能是静态站点,那么所有静态页面如果一个一个手写的话,是很痛苦的。没有了后台程序,如何去定义模板文件?总不至于每个

2017-06-08 11:10:54 587

转载 HTML5 之图片上传预处理

在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量。像我这么为用户着想的程序员,绝对不会让这种事情发生的,于是就有了本文。获取图片通过 File API 获取图片。var input = document.createElement('input');input

2017-06-07 15:23:02 527

转载 Angular双向数据绑定

1、什么是双向数据绑定双向数据绑定: Angular实现了双向绑定机制。所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。即数据模型(Module)和视图(View)之间的双向绑定。例子:html>head>meta charset="utf-8">script src="http://apps.bdimg.com/libs/angul

2017-06-01 14:50:47 960

转载 JavaScript 浮点数运算的精度问题

问题描述在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此。 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 1.00 。在一些特殊的数值表示中,例如金额,这样看上去有点变扭,但是至少值是正确了。然而要命的是,当浮点数做数学运算的时候,你经常会发现一些问题,举几个例子:JavaScript 代码

2017-05-25 10:57:16 35310 3

原创 JavaScript 获取键盘事件(键盘某个按键被按下)

键盘事件(Keyboard Events)属性值描述onkeydownscript当按下按键时运行脚本onkeypressscript当按下并松开按键时运行脚本onkeyupscript当松开按键时运行脚本js中获取键盘事件

2017-05-24 18:23:34 32162

转载 Promise

去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛复杂的概念先不讲,我们先简单粗暴地把Promise用一下,有个直观感受。那么第一个问题来了,Promise是什么玩意呢?是

2017-05-17 17:11:37 304

原创 前端路由

注:一般情况下不用AngularJS自带的这个路由,因为它不能完成深层次的嵌套内容介绍,为什么要使用前端路由?在2005左右,兴起了一种叫做ajax的技术,有了ajax之后,我们向服务端提交数据的时候就不再需要使用from表单去提交了,因为from表单之间的提交会导致页面之间的切换,也就是说无法实现单页应用。 ajax的缺陷 1、不会在浏览器里面留下历史记录 2、用户无

2017-05-15 11:11:14 647

转载 Web前端面试总结-2017-05

声明: 以下皆是个人观点, 仅供参考之用.1、简历投递前期为了解自身短板, 可以海投一些试试. 不建议长期海投简历, 对用人单位简历筛选和你自身都没什么好处. 投简历之前最起码要关注以下几点(薪资范围, 公司位置, 职位要求, 是否为培训机构冒充招聘). 2、前端职位类型现在前端招人分的挺细了, 下面是我印象中几种职位.Web 前端开发工程师 (页面重构方面

2017-05-13 12:43:31 2028

转载 JavaScript 事件委托详解

avaScript 事件委托详解 | 掘金技术征文基本概念事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown......)的函数委托到另一个元素;一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数;举

2017-04-26 15:58:29 1220

转载 http长/短轮询和WebSocket 的介绍和比较

应用场景:实现即时通讯:如股票交易行情分析、聊天室、在线游戏等,替代轮询和长轮询轮询轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器。这种传统的HTTP request 的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求,然而HTTP request 的header是非常长的,里面包含的有用数据

2017-03-07 15:44:48 811

转载 常用API合集

一、节点1.1 节点属性Node.nodeName //返回节点名称,只读Node.nodeType //返回节点类型的常数值,只读Node.nodeValue //返回Text或Comment节点的文本值,只读Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写Node.baseURI //返回当前网页的绝对路径Node.o

2017-03-07 15:26:04 380

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除