前端
关注
分享
扫一扫
裂痕中的阳光.ゝ
这个作者很懒，什么都没留下…
展开
-
20 个杀手级 JavaScript 单行代码
1、获取浏览器Cookie的值const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();cookie('_ga');2、颜色RGB转十六进制const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(原创 2021-10-15 10:44:55 · 150 阅读 · 0 评论 -
中国所有城市（json数据），按A-Z排序。
{ "city":[ { "title":"A", "lists":["阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门"] }, { "title":"B", "lists":["北京","白银","保定","宝鸡","保山","包头","巴中","北海","蚌埠","本溪","毕节","滨州","百色","亳州"] }, { "title":"C", "list原创 2020-07-14 14:50:46 · 2001 阅读 · 1 评论 -
JavaScript 原生js 生成树结构
toTree: function(data) { // 将数据存储为 以 id 为 KEY 的 map 索引数据列 var map = {}; data.forEach(function(item) { map[item.id] = item; }) var val = []; data.forEach(function(item) { // 以当前遍历...原创 2020-06-19 23:16:55 · 1159 阅读 · 0 评论 -
小程序滚动条自动撑开
<scroll-view class="scrollview" scroll-x="{{true}}" style="width: 100vw;"> <block wx:for="{{sort}}" wx:key="index"> <view bind:tap="changeIndex" data-id="{{index}}" ...原创 2020-04-06 13:54:26 · 389 阅读 · 0 评论 -
基于create-react-app的打包后文件路径问题
直接在package.json里加 “homepage”:"." 就OK了，会在路径前加homepage的值原创 2019-12-27 08:42:34 · 896 阅读 · 0 评论 -
js [JavaScript] 正则 身份证号验证 最强身份证校验
JavaScript 最强身份证校验// 验证身份证号码function verifyIDCard(code) { //身份证号合法性验证 //支持15位和18位身份证号 //支持地址编码、出生日期、校验位验证 var city = { 11: "北京", 12: "天津", 13: "河...原创 2019-11-12 09:33:50 · 2186 阅读 · 0 评论 -
axios 跨域请求 及 axios使用方式
axios地址原创 2018-12-27 15:18:06 · 636 阅读 · 0 评论 -
前端js压缩上传图片 多图、单图 ajax上传
/* 三个参数 file：一个是文件(类型是图片格式)， w：一个是文件压缩的后宽度，宽度越小，字节越小 objDiv：一个是容器或者回调函数 photoCompress() */ function photoCompress(file,w,objDiv){ ...原创 2018-12-22 11:18:38 · 718 阅读 · 0 评论 -
谈谈 JavaScript Promise对象 的使用
什么是 Promise一个 Promise 对象可以理解为一次将要执行的操作（常常被用于异步操作），使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观。而且由于 Promise.all 这样的方法存在，可以让同时执行多个操作变得简单。resolve 和 reject在 Promise 对象当中有两个重要方法————resolve 和 reject。resol...原创 2018-12-23 09:57:30 · 881 阅读 · 0 评论 -
react-create-app 之后 yarn eject 后报错
今天在新建一个react项目的时候先新建的仓库，git拉去到本地之后新建的react项目，当新建好之后显示配置项的时候尽然报错，什么原因导致的呢？当我们yarn eject解开项目结构时，报错This git repository has untracked files or uncommitted changes:这是提示我们没有进行git提交这样的的问题解决方式：先推送一次git文件，...原创 2018-12-30 11:19:51 · 1532 阅读 · 0 评论 -
Ajax同步和异步的区别
最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执 行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个AJAX代码运行中的时候其他代码一样可以运行。jquery的async:false,这个属性默认是true：异步，false：同步。$.ajax({ url: "path...原创 2019-02-11 14:25:04 · 704 阅读 · 0 评论 -
yarn(vue) build之后上传到服务器，刷新页面出现404
yarn build打包之后，刷新页面出现404，HTML5 History 模式原因分析：vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会出现找不到情况如果不想使用 hash模式，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而...原创 2019-02-27 09:16:53 · 2424 阅读 · 0 评论 -
前端 九种跨域方式实现原理
1.jsonpJSONP 原理利用 script 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。// index.htmlfunction jsonp({ url, params, callback }) { return new Promise((resolve, reject) ={ let sc...原创 2019-03-04 09:04:14 · 286 阅读 · 0 评论 -
前端：html输出文本，文章，识别其中的 \n
在css中设置样式就可以了，一行代码搞定： white-space: pre-line;例如pre{ text-indent: .2rem; color: #333; font-size: .28rem; white-space: pre-line;}原创 2019-03-11 08:46:46 · 1281 阅读 · 0 评论 -
javascript 前端js 获取当前，今天开始，这周开始，这个月开始的时间戳
1、获取当前时间戳 let timestamp = Math.floor(new Date().getTime() / 1000);2、获取今天开始的时间戳 let timestamp = Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000);3、获取这周开始的时间戳思路1、获取今天凌晨的...原创 2019-03-28 12:01:23 · 1063 阅读 · 0 评论 -
JavaScript 笔记整理
声明：此文为笔者工作中实际使用的方法或者事件，不定时更新，如有不妥请指正目录1、js 获取当前时间2、js 获取url指定参数（hash参数）3、压缩图片，ajax上传图片4、es6 Promise 的使用...原创 2019-03-28 12:02:10 · 176 阅读 · 0 评论 -
分页实现的原理
什么是分页技术分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不是全部数据,而是其中的一部分,如果在其中没有找到自习自己想要的内容,用户可以通过制定页码或是翻页的方式转换可见内容,直到找到自己想要的内容为止.其实这和我们阅读书籍很类似分页的意义分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如...原创 2018-12-20 15:49:17 · 5750 阅读 · 0 评论 -
git 代码管理工具 命令总结
个人习惯 一般情况下现在远程创建代码库，然后克隆到本地，这样的好处是直接了当编辑器命令行推送，简单方便，所以就不讨论 git init 了，想要了解的自行上网查阅资料；git clonegit clone -b 分支名 git项目地址git cone git项目地址 //默认克隆的是主分支的项目clone下来的repo会以url最后一个斜线后面的名称命名,创建一个文件夹,如果想要指定...原创 2018-12-20 15:08:56 · 559 阅读 · 0 评论 -
JavaScript 原型链 实战
最近看到这么一道题如何让下面的代码执行：const a = [1, 2, 3, 4, 5];// Implement thisa.multiply();console.log(a); // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25]执行结果： a.multiply is not a function解决方式在原型链上加此方法...原创 2018-12-13 14:19:26 · 440 阅读 · 0 评论 -
五大主流浏览器内核总结
1、IE浏览器内核：Trident内核，也是俗称的IE内核；2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；4、Safari浏览器内核：Webkit内核；5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了B...原创 2018-10-12 08:43:04 · 913 阅读 · 0 评论 -
前端学习路线
原创 2018-10-19 22:34:35 · 450 阅读 · 0 评论 -
javascript数组去重的方式
以下总结了7中数组去重的方式方法："use strict";/** 此js主要是数组去重* * */let arr = [1, 2, 3, 5, 4, 71, 2, 1];console.log(arr);//打印结果: [1, 2, 3, 5, 4, 71, 2, 1]/** * 方法一 使用es6 Set方法去重 * @param arr * @returns {...原创 2018-10-17 14:17:44 · 332 阅读 · 0 评论 -
下面的代码将输出到控制台的是什么，为什么？
(function(){ var a = b = 3;})();console.log("a defined? " + (typeof a !== 'undefined'));console.log("b defined? " + (typeof b !== 'undefined'));由于a和b都在函数的封闭范围内定义，并且由于它们所在的行以var关键字开头，因此大多数JavaS...原创 2018-10-20 14:04:27 · 896 阅读 · 1 评论 -
水平排列元素（高度不同）的底部对齐方式
今天工作中有一个需求，需要将所有的图片底部对齐，高度大小不同，图片就用简单的div来代替HTML如下： &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;parent&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quo原创 2018-10-20 14:23:13 · 8571 阅读 · 0 评论 -
前端性能优化
原创 2018-10-31 10:58:06 · 139 阅读 · 0 评论 -
JavaScript常用数组操作方法
1、concat()concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，仅会返回被连接数组的一个副本。2、join()join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的，默认使用’,'号分割，不改变原数组。3、push()push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。末尾添加，返回的是长度，会改变原数组。...原创 2018-11-13 09:57:18 · 11615 阅读 · 2 评论 -
理解JavaScript中的call,apply和bind方法
前言：js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。这几个方法很好地体现了js函数式语言特性，在js中几乎每一次编写函数式语言风格的代码，都离不开call和applyapply()使用 apply， 你可以继承其他对象的方法...原创 2018-11-16 15:54:18 · 257 阅读 · 2 评论 -
Vue+Axios+Vuex+webpack+Vue-Router 全家桶搭建前端框架
如何快速搭建vue前端框架：a、我们是在node环境下开发，借助webpack打包工具，安装vue-cli； npm install -g vue-clib、安装完之后就可以用vue命令了：vue init webpack projectName //注意：projectName 为全小写英文c、创建之后进入目录安装依赖：cd projectNamenpm install...原创 2018-11-19 09:25:29 · 2959 阅读 · 0 评论 -
javascript中的常见数据类型以及他们的判断方法
一.根据数据类型的复杂方式划分数据分类在javascipt中数据的复杂方式一般分为：基本类型，特殊类型以及复杂类型，1.基本数据类型：包括 number：数字类型；string：字符串类型；boolean：布尔类型。2.复杂数据类型：包括 array：数组类型；object：对象数据类型。3.特殊数据类型：包括 null（空对象数据）；underfined：未定义的任何数据类型注意：未定...原创 2018-11-29 23:36:55 · 784 阅读 · 0 评论 -
gulp构建自动化工具
首先确保gulp是全局变量npm install -g gulp安装完之后 gulp -v 查看版本gulp -v首先安装 gulpyarn add gulp 最重要的，版本安装不对，不能转化和生成文件es6-&amp;gt;es5yarn add gulp-babel@7.0.1 babel-core babel-preset-es2015本地服务yarn add gu...原创 2018-11-27 22:12:35 · 158 阅读 · 0 评论 -
JavaScript 对文件进行MD5加密
为了区分文件是否为同一个文件，即便文件名不同，文件内容相同，MD5之后的值也是相同的下面 具体代码：<script src="../js/spark-md5.min.js"></script>function get_filemd5sum(ofile) { var file = ofile; var tmp_md5; v...原创 2018-12-01 08:45:58 · 10635 阅读 · 0 评论 -
JavaScript 的 原型和原型链
在JavaScript中，数组，对象和函数被称为引用类型，他们都有一个__proto__属性，该属性是一个对象（我们称之为隐式原型）数组的构造函数是Array，Array构造函数中有一个prototype属性，（我们暂时称之为显式原型）arr是构造函数的实例对象，arr中的__proto__对象指向构造函数中的prototype对象demo function Animal(na...原创 2018-12-05 09:13:05 · 217 阅读 · 0 评论 -
前端面试题之页面加载过程和跨域原理
页面加载过程，从输入url到加载出页面输入地址浏览器查找域名的 IP 地址这一步包括 DNS 具体的查找过程，包括：浏览器缓存-&gt;系统缓存-&gt;路由器缓存…浏览器向 web 服务器发送一个 HTTP 请求服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）浏览器跟踪重定向地址服务器处理请求服务器返回一个...原创 2018-09-25 09:27:30 · 797 阅读 · 0 评论