暂时未有相关云产品技术能力~
前端领域五年工作经验, csdn/掘金等平台优质作者, 效率工具爱好者,开源工具作者: koroFileHeader VSCode头部和函数注释插件 32w用户 3.8k star stop-mess-around 浏览器节省时间防摸鱼插件 自律插件,1k用户 200star 等等其他工具
npm run build 是vue-cli用来打包项目的命令行,本文是关于vue-cli打包的一些常见的坑,会尽量详细的写每个步骤,大家可以一边看着文章,一边打包试试。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 初始化一个项目: 这里初始化一个项目,因为导致打包错误的原因多种多样,避免因为其他设置错误干扰,从头开始打包整体步骤也会更加清晰。 命令行: vue init webpack build1(项目名) //吧啦吧啦进行一波设置 //进入项目文件夹 npm install如果还不清楚如何初始化运行一个项目,可以参考我之前写的一篇文章:传送门。
写在前面: 这是一篇vue-cli的几个小知识点简单介绍,适用于刚接触vue-cli脚手架以及对此方面并不太了解的同学,大佬们绕道。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 静态资源处理: assets和static文件夹的区别 相信有很多人知道vue-cli有两个放置静态资源的地方,分别是src/assets文件夹和static文件夹,这两者的区别很多人可能不太清楚。 assets目录中的文件会被webpack处理解析为模块依赖,只支持相对路径形式。例如,在 <img src="./logo.png">和 background: url(./logo.p
写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery、bootstrap的时候颇费了一番功夫,所以本文的步骤会尽量详细一点。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家。 引入bootstrap 1. 下载所需要的bootstrap文件。 将要使用的bootstrap文件放入src目录下的assets文件夹中。 2. 在入口文件src/main.js中引入bootstrap import './assets/bootstrap-3.3.7
写在前面: 使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建环境的教程,每一步尽量详细解析。需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望可以帮到大家。 vue-cli脚手架的优势: 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目. vue-cli是官方支持的一个脚手架,会随本版本进行迭代更新。
写在前面: ui-router是angular的一个插件,因为angular前面几个版本自带的原生ng-router不能很好的满足开发需求,所以在实现angular单页面嵌套的时候,都是使用ui-router。本文是的内容关于angular ui-router实现过程,内含demo以及代码地址,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,ui-router的实现过程并不复杂,希望通过本文大家能够学会ui-router的使用方法。 ui-router与ng-router: UI-Router是angular原生ng-route进化版,相较与ng-router有如下两条优点:
写在前面: 本文主要总结整理Ajax使用方法背景知识点的详细解析,以及Ajax跨域的具体使用方式并且对栗子进行了讲解,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望通过本文能够作为一个Ajax的查找资料,不懂Ajax?看这篇文章就可以了。 ajax简介: Ajax 的全称是Asynchronous JavaScript and XML,意思是:异步 JavaScript 和 XML Ajax是使用XMLHttpRequest对象与服务器端通信的脚本语言 可以发送及接收各种格式的信息,包括JSON、XML、HTML和文本文件。 AJAX可以无需刷新页面而与服务器端进行通信。
写在前面: 在js应用中,定时器的作用就是可以设定当到达一个时间来执行一个函数,或者每隔几秒重复执行某段函数。这里面涉及到了三个函数方法:setInterval()、setTimeout()、clearInterval(),本文将围绕这三种函数的用法,来实现定时器的功能,需要的朋友可以过来参考下,喜欢的可以点波赞,或者关注一下本人,希望对大家有所帮助。 定时器的应用需求: 1.设定一个时间,当时间到达的时候执行函数————比如:倒计时跳转页面等等。 2.每隔一段时间重复执行某段函数————比如抢票软件,比如设定500毫秒就重复刷新一次页面等等。 倒计时跳转实现demo:
写在前面: 很早之前在简书写过几篇关于随机数的文章之前写的很乱,现在重新整理一下这些知识点。本文包含了如下这些知识点:js生成随机数,生成指定范围的随机数,获得不重复随机数组。 js生成随机数。 Math.random()——生成大于等于0.0且小于1.0的一个随机数; 通常我们生成随机数都是使用这个方法,这个方法返回值是一个伪随机选择的数,该值大于等于0.0且小于1.0,即取值范围是[0.0,1.0)的左闭右开区间,在该范围内(近似)均匀分布。
写在前面: 所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更也能实时展现到界面。angular封装了双向绑定的方法,使双向绑定变得十分简单。但是在有些场景下(比如下面那个场景),不能使用angular来实现双向绑定,需要我们使用js来实现双向绑定。 需求场景: 写了一个点击事件,当点击的时候在后台赋值了,但是在页面视图上面没有显示出来,想到要使用双向绑定来实现这个功能。因为代码之前是用js和jq写的,引入angular的话,会导致之前的代码不能用。在网上参考了一篇文章之后做出来了这个功能
写在前面: 闭包是被讲烂的内容,但是当我不了解的情况下,看过很多教程,听过很多道理,还是无法完全理解闭包这个东西。所以想要写一篇比较详细,前端小白也能够真正理解闭包概念的干货文章,本文参考很多闭包资料,希望能真正把闭包这个东西讲清楚,喜欢的朋友可以点个赞,或者点波关注。 首先需要了解一波js变量的作用域以及变量的生存周期。 前几天我发在掘金上面了,下面是一个内容概要,墙裂推荐所有小伙伴,还是点进去学习一波,作用域这个问题可以说是闭包最为重要的内容。 里面的内容包括: 1.变量的作用域(变量的有效范围)。2.变量作用域,js高级程序设计(红宝书)中的解释。3.红宝书中的作用域链栗子(还有一个例子
写在前面 好记性不如烂笔头,研究了一下BFC,发现里面比较细的东西也是很多的!关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本文预计篇幅较长,认真,耐着性子看,应该都能够比较深入的理解BFC这个概念的规则、作用以及用法。希望喜欢的朋友可以点个赞,或者关注一波本人,谢谢。 BFC是什么鬼? BFC概括:可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念,是一块区域,一个环境。 先稳住别懵逼,接着往下走。
写在前面: 是想写一个闭包的,因为写的比较细,基于篇幅,所以闭包前面关于变量的部分就单独发出来,到时候放个链接引进来,js闭包虽然是一个被讲烂的东西,但其实很多人刚接触这个概念也不太懂,所以希望写一篇接地气,能够让一个从前不知道这个内容的小伙伴能够清楚的理解闭包这个东西。so,本文是基于闭包的变量部分。 首先需要理解变量的作用域(变量的有效范围): 变量的作用域有两种:全局变量和局部变量。 全局变量很好理解:就是我们平时没有再函数内部声明的那些变量,在全局中任何地方(函数,对象等)都可以被引用。
写在前面: 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头用以响应浏览器的请求。本文主要是:关于http状态码是什么,有什么用,在哪里查看状态码分别代表什么意思的分享,这里面内容也是非常多的,所以在此科普一下,做波分享。这里面有关键词版本和详细介绍每个错误的版本。 http状态码有什么用? http状态码的核心作用是Web Server服务器用来告诉客户端,当前的网页请求发生了什么事,或者说当前Web服务器的响应状态。所以HTTP状态码常用来判断和分析当前Web服务器的运行状况。
写在前面: 前段事件,做了一个用ajax后台异步交互的登录功能,自己在上面加了一个验证码的功能,这个功能背后的原理挺好理解的,实现起来也十分简单,特此写波分享,,自己写的过程中踩了不少坑,这里还是照例写的详细点,大家可以做个参考,喜欢的朋友可以点个赞,或者关注一波。 最终实现的效果: 验证码效果 当点击登录之前,会先判断验证码是否正确(验证码可以不区分大小写,也可以区分大小写),验证码错误会刷新验证码,验证码验证之前,不会进行跨域登录操作。 整体思路。 1.取四位随机数 2.赋值到验证码的input框里。
写在前面: 现在一直使用sass写css,当初入门的时候,看的很多教程,当时看的云里雾里的,现在看来还是蛮详细的,就是一点,不够小白。本人文章类型一直比较偏小白的,想要更好的为不会用sass提供一点学习的资料,相信本文对想要学习sass的人,还是有极大的参考价值的。里面有些细节,也许对已经学会使用sass的大手子也有一定的参考价值。 变量是什么? w3c关于JavaScript 变量的介绍: 上面一大堆巴拉巴拉的东西,可以先这么理解,把变量看作一个存放东西的盒子,可以将钥匙、手机、饮料等物品存放在这个盒子中,也可以在需要的时候换成我们想存放的新物品,那里面的旧的东西就存不了。
写在前面: 在写页面的时候,偶尔有时会遇到下图这两种情况,一种是单词过长时会溢出div,一种是直接换行,导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了,本文主要内容有:word-wrap和word-break属性介绍,使用方法,他们之间的区别,浏览器兼容性,demo链接。需要的朋友可以过来参考下,喜欢的可以点个赞,希望能对大家有所帮助。 应用场景:
写在前面: 本文都是我目前学到的一些比较零碎的知识点,也是相对偏一点的知识,这是第二篇。前后可能没有太大的相关性,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。本文的受众是刚学前端,大手子可以跳过。 1.页面加载完成之后,才开始执行函数。 $(function() { // 需要执行的js函数内容 });背景:碰到一个JQ很复杂的函数,上面简化了的整体格式,这跟自执行函数又不太一样,之前没见过这种写法,查了蛮久之后才找到这方面的内容,在这里分享一波。 jQuery 事件 -ready() 方法 定义和用法 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全
写在前面: 本文的主要内容包括:type="range"属性介绍,修改range默认css样式以及在js中的实际应用。本文面向前端小白,写的不好之处,请多多见谅。文末有demo链接,可以自行复制到本地进行试验。 相关:自定义 range radio select的样式滑轮,按钮,选择框 最终要实现的效果: 步骤: 1.range属性相关介绍 2.搭建html结构; 3.css样式修改,包括给滑动轨道添加样式、给滑块添加样式; 4.添加相关js代码实现应用效果; 5.关于浏览器兼容。 在html里面输入如下内容,即可使用: <input type="range">//这是最粗糙的使用方式
写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式。当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面。对此做个总结。本文是面向前端小白的,大手子可以跳过,写的不好之处多多见谅。 额,今天就先大概的将代码贴上来,考虑到篇幅的问题,就先写一下三个的实现方式,一般也都看得懂,代码注释的非常详细。因为细分下来内容也很多,准备之后再将如何实现的方式,属性,优化以及如何兼容各个浏览器的方式一步步的写出来。 最终效果:
写在前面: 这篇文章是本人学习过程中遇到css的零碎知识点2(就是以前自己不知道的),我都记下来了,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。本文的受众是前端小白,大手子可以跳过。 1.scss编译css文件使用中文注释出现乱码: 在文件开头部分加上:@charset "UTF-8"; 注意:这里必须要加在文件开头部分,加在文件中部和结尾部分是无效的。 2.HTML input标签的 maxlength 属性 定义和用法: maxlength 属性规定输入字段的最大长度,以字符个数计。 maxlength 属性与 input type="text" 或 input t
写在前面: 本文主要内容包括js原生dom对象和jQuery对象的区别,联系,相互转换,以及踩坑经历。情况是这样的,今天在实现一个js验证码的功能,需要获取input的值,然后我用jQuery的方法获取到了dom节点,然后用原生js获取input的值,结果就出错了,好在后来场外求助启宸欧巴在师兄的帮助下发现问题所在,并成功解决。将今天的踩坑经历,以及网上查阅的资料,集合成一篇文章,分享一波。 Dom原生对象和jQuery对象的区别: 1.jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类
写在前面: 在前端开发的过程中,如果有注意的话,发现有些写css3属性时,兼容性的写法顺序不太一样,比如transition属性,有些把transition放在前面有些是放在后面,这就引出了两个概念:优雅降级和渐进增强。 写法栗子: .transition { /*渐进增强写法*/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .transition { /*优雅降级写法*/
写在前面 之前写了两篇前端图片相关的内容(前端ps切图方法,图文详细,css sprite雪碧图制作,使用以及相关,图文gif),本文是面向前端小白的,搜集整理的一些切图技巧,及其相关内容。 关于版本: 推荐pscc2017版,一些老版本很多新功能没有,会影响到效率的。(目前2017/4/11) 基本设置 先要调整工作区域的布局。 1.选择“窗口”——把“信息”,“图层”,“历史记录”,“颜色”面板打开,其他的可以先关闭了,在切图的工作中其他的基本用不到,这个很简单的,打几个勾就可以了。
在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能。百度词条对雪碧图的解释是:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。本文主要内容包括雪碧图如何制作,雪碧图优缺点,哪些场景需要使用雪碧图。 实现原理: CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义.
viewport指的是是用户网页的可视区域,查了许久,遗憾的是近一两年几乎没有高质量的解析viewport的文章,本文内容是参考大牛,对内容进行了重新排版,以及对重点内容进行标注、精简,加上些许的个人理解形成的。有兴趣的朋友,可以参考一下。 一.背景介绍 现在人通过手机浏览网页占了大多数,随着浏览方式的改变,网页在webapp下面实现多终端自适应,无论是对于避免工程师无谓的重复劳动或者是对于项目管理便捷性上来说都是十分重要的,然而在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了view
本文内容如题,自己做的一个demo,倒计时和获取实时时间在许多场景都用的到,所以还算蛮实用的,需要的朋友可以做个参考。 代码解析:html代码 <body onload="startTime()"> <div class="box"> <div class="time">请等待<span id="dd">6</span>秒</div> <!--设置时间长一点,不然一直跳转很烦--> ![](aaa.png) <div class="id-box"> <div id="time"></div>
内容包括demo代码,应用和定义,以及参考文献,本文主要内容是学习js期间学到的一些实用的零碎的js1知识,我都记下来了,需要的朋友可以过来参考下,前后可能没有太大的相关性。喜欢的可以点个赞,希望对大家有所帮助。 参数lst -- 这可能是一个列表或元组。作用:打乱一个有序数组,最高效的数组乱序方法应用:打乱输出后,从头输出可用来输出随机数字。 这里有篇文章介绍数组乱序效率www.jb51.net/article/560… HTML DOM removeAttribute()
整体思路:先random()获取随机数,indexOf()排除相同的随机数,push()将不重复随机数添加到数组。其实一直想写这篇已经很久了,因为之前做的一个东西还不完善,有bug。所以一直拖到现在。今天中午趁机做了个总结,需要的小伙伴可以看看,做个参考。 之前本来是一个很low的去重方法: 先获得三个随机数,然后三个随机数分别互相比较,当出现相等的情况时,那个随机数再随机一次,然后返回那三个随机数。这个方法low在:每个数值都要比较一下,,数量少的时候,还可以写,数量多的时候,你一个个比一下试试看?
写在前面:本文详细的介绍了5中js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法。不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考。 1.常规写法(最常见的那种) 2.匿名函数写法(可以想成给变量赋值一个函数) 3.将方法作为一个对象 4.构造函数中给对象添加方法 javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。
很惭愧我都在做jq了,关于手机端页面变形,直到今天早上才知道问题出在哪里?之前写了好多css页面用谷歌的F12查看手机端的页面,效果如下面的图,然后我一直以为我电脑的谷歌F12出问题了,直到今天在启宸师兄的帮助下才明白。下面进入正文:一直以为是谷歌F12出问题了,查了好多相关的资料还是没查到,然后今天回过头来修改之前页面的问题,然后看到head头部,就觉得可能是initial-scale出的问题,抱着死马当活马医的心态改了一下meta标签的内容。修改initial-scale之前页面的效果。
内容包括demo代码,应用和定义,以及参考文献,本文主要内容是本人学习过程中遇到css的零碎知识点1(就是以前自己不知道的),我都记下来了,需要的朋友可以过来参考下,喜欢的可以点个赞,希望对大家有所帮助。 writing-mode: tb-rl; (纵向排列文字)应用: 说明:设置或检索对象的内容块固有的书写方向。西方语言一般都是 lr-tb 的书写方式,但是亚洲语言 lr-tb | tb-rl 的书写方式都有。作为IE的私有属性之一,IE5.5率先实现了 writing-mode ,后期被w3c采纳成标准属性;此属性效果不能被累加使用。例如,父对象的此属性值
一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。 先放最终效果(在下面会有demo代码。): Paste_Image.png 实现这些效果要怎么做呢?咱一步一步来。 第一步: 先设置html结构:这里我已经搭好了。 第二步然后开始写css样式了 设置父元素box的样式 设置box1的样式 现在尝试把html解除注释 下面就到了关键的部分了(文章末尾有demo,不想看的话,可以自己试试。): 在上面我们已经设置了最大高度和最小高度,因为box1空间不够所以溢出来了。