javascript最流行的语言
一个被程序员耽误的厨师
经历一番,才会沉淀,人生需要储备
展开
-
React hooks 实现仿头条tab居中切换效果
/* eslint-disable react-hooks/rules-of-hooks */import React, { useEffect, useRef } from 'react';import _ from 'lodash';import PageComponent from '@/components/PageComponent';import { useCallbackState } from '@/useHooks/useCallbackState';import styles原创 2021-07-20 18:39:48 · 626 阅读 · 0 评论 -
基于antd4二次封装的form组件
antd4二次封装form组件下载地址组件支持如下1、单选2、复选3、下拉4、日期5、文本框6、区间值7、多级联动8、自定义使用方式如下/* eslint-disable no-console *//* eslint-disable @typescript-eslint/no-shadow *//* eslint-disable no-param-reassign *//* eslint-disable import/no-unresolved */import React原创 2020-12-31 11:13:32 · 1422 阅读 · 1 评论 -
antd中的upload结合cropper.js上传裁切组件
/* eslint-disable @typescript-eslint/no-unused-vars *//* eslint-disable import/no-extraneous-dependencies *//* eslint-disable prefer-const *//* eslint-disable react/jsx-boolean-value *//* eslint-disable spaced-comment *//* eslint-disable react/self-cl原创 2020-12-31 10:49:40 · 544 阅读 · 0 评论 -
如何快速完美的实现本地存储
store.js 如下:var store = (function () { var api = {}, win = window, doc = win.document, localStorageName = 'localStorage原创 2016-12-13 15:25:57 · 297 阅读 · 0 评论 -
JavaScript 面向对象与基于对象
几乎每个开发人员都有面向对象语言(比如C++、C#、Java)的开发经验。 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例。 类定义了一类事物公共的行为和方法;而实例则是类的一个具体实现。 我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对转载 2016-10-08 16:35:42 · 274 阅读 · 0 评论 -
JS重要知识点
这里列出了一些JS重要知识点(不全面,但自己感觉很重要)。彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的。讲解还是以示例代码搭配注释的形式,这里做个小目录:JS代码预解析原理(包括三个段落);函数相关(包括 函数传参,带参数函数的调用方式,闭包);面向对象(包括 对象创建、原型链,数据类型的检测,继承)。 JS代码预解析原理转载 2016-10-08 16:07:02 · 287 阅读 · 0 评论 -
Ajax+Js+Dom+Json无刷新分页技术
本文首次发表地址:http://qiuchangsheng.com终极分页:Ajax+Js+Dom+Json无刷新分页技术 采用了时下比较流行的Ajax无刷新技术、JavaScript、JavaScript Dom、Json等技术实现,使得用户在向服务器发出请求的时候通过Ajax的异步通讯实现,这样极大的提升的用于界面的友好性,避免了传统分页技术在实现分页时页面刷新的情况。转载 2016-10-08 11:24:31 · 430 阅读 · 0 评论 -
JS中some(),every(),forEach(),map(),filter()区别
JS在1.6中为Array新增了几个方法map(),filter(),some(),every(),forEach(),也就是一共有这么多方法了。刚开始接触这些倒也记得不是很清楚,在此纪录一下以加深影响。我主要从两个角度来理解和记忆吧,一个是API的使用,一个是内部实现。函数简述map():返回一个新的Array,每个元素为调用func的结果filter():返回一转载 2016-10-18 15:06:05 · 2448 阅读 · 0 评论 -
闭包是什么
闭包是什么?闭包是指某种程序语言中的代码块允许一级函数存在并且在一级函数中所定义的自由变量能不被释放,直到一级函数被释放前,一级函数外也能应用这些未释放的自由变量。 怎样?看得一头冒汗吧……没事,我也是(虽然是我是了解的,只是表达能力的问题)。让我们换个更加简单的方法说明:闭包,其实是一种语言特性,它是指的是程序设计语言中,允许将函数看作对象,然后能像在对象中的操作搬在函数中定义实例(局部转载 2016-10-18 14:19:21 · 484 阅读 · 0 评论 -
对require.js 的使用进行总结
一、为什么要使用require.js 首先一个页面如果在加载多个js文件的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。 require.js,就是为了解决这两个问题: (1)实现js文件的异步加载,避免网转载 2016-10-18 13:56:49 · 241 阅读 · 0 评论 -
RequireJS - 用法
首页在html页面中写入: [html] view plain copy script src="js/require.js" data-main="js/main">script> data-main属性的作用是,指定网页程序的主模块。在上例中,就是js目录下面的main.js,这个文件会第一个被require.js加载。由于req转载 2016-10-18 13:27:40 · 170 阅读 · 0 评论 -
JS怎样获取url中的参数?
//获取url参数function get_url_param(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if原创 2016-10-18 11:32:02 · 234 阅读 · 0 评论 -
利用JS代码判断是否手机访问()
很多网站都会有一个判断过程,判断是否为手机浏览器,然后跳转到相应适合的手机网站!其实只要有一个支持JS脚本的访问,我们一样可以达到这样的效果[javascript] view plain copy function uaredirect(murl){ try { if(document.ge原创 2016-12-15 14:16:04 · 382 阅读 · 0 评论 -
js调用百度分享功能能
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body)原创 2017-03-03 13:52:45 · 967 阅读 · 0 评论 -
js合并两个数组的方法
apply 函数的apply方法有一个特性,那就是func.apply(obj,argv),argv是一个数组。所以我们可以利用这点,直接上代码:a.push.apply(a,b); 调用a.push这个函数实例的apply方法,同时把,b当作参数传入,这样a.push这个方法就会遍历b数组的所有元素,达到合并的效果。 这里可能有点绕,我们可以原创 2017-12-05 11:31:57 · 528 阅读 · 0 评论 -
外部如何调用到ajax返回值?
回调函数里面的变量如何在函数外部也能访问到只需要回调内部变量赋值给全局变量就可以了,但一般这问题都出在没有搞清楚同步和异步的区别,于是虽然赋值给全局变量了,但立即访问全局变量还是没有值的情况。解决:注意ajax访问的同步和异步。使用$.ajax访问,别用get,post等已经封装过的,这类没有$.ajax来的灵活。1$.ajax(原创 2017-10-18 09:33:03 · 2257 阅读 · 0 评论 -
js 将图片连接转换称base64格式
我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求。坏处呢,就是浏览器不会缓存这种图像。现在我们提供一个js:function convertImgToBase64(url, callback, outputFormat){ var canvas = document.createElement('CANVAS'), ctx = c转载 2017-08-04 09:14:06 · 413 阅读 · 0 评论 -
如何更好的使用Echarts,做好地图?
首先去echarts官网定制你需要的模块。http://echarts.baidu.com/builder.html下载下载完成会生成一个echarts.min.js再去echarts官网上下载相应的地图js,jsonhttp://echarts.baidu.com/download-map.html将对应得JS/JS原创 2017-06-29 09:23:38 · 1123 阅读 · 1 评论 -
讲讲如何将图片格式转化成base64格式的
又到周五了,这几周遇到一个让我很头疼的问题,接口文档里写着:尼玛!看着就头疼,这写的什么呀,完全看不懂呀!于是乎,一番百度,似乎有了点头绪,下面讲讲:我不是来讲概念的,直接切入正题,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址。这样做有什么意义呢?我们知道,我们所看到的网页上的每一个图片,都是需要消耗一个http请求下载原创 2017-03-10 17:39:45 · 16028 阅读 · 1 评论 -
如何修改js的编码格式?
现在编码方式主要有两种,一个是utf-8,一个GB2312,如果编码方式不同,会导致页面出现乱码。想修改编码方式一般可以用charset指定,也可以再工具中设置:1.可以在使用script标签时指定。如: 2.以DW为例,工具栏里点击编辑,找到‘首选参数’点击,找到‘新建文档’点击进去就可以看到修改编码格式了原创 2017-03-07 09:57:02 · 7452 阅读 · 0 评论 -
JS正则表达式验证账号、手机号、电话和邮箱
效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm验证帐号是否合法验证规则:字母、数字、下划线组成,字母开头,4-16位。function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.test(str)){ alert("正确原创 2017-03-08 09:03:24 · 647 阅读 · 0 评论 -
js 展示聊天动画
效果图:代码:var ChatLog = [//聊天记录数组 { identity:'0', ChatContent:'星星,听说你最近又搜集到新的干货了是嘛?', ChatExpression:['icon/02.png','icon/02.png','icon/02.png'], ChatImg:[''] }, { identity:'1',原创 2017-03-03 14:03:31 · 730 阅读 · 0 评论 -
highcharts.js饼状图/折线图 二次开发
$(function () { var DataExperience = [{ name: '经验', colorByPoint: true, data: [{ name: '不限', color:'#147cde', y:原创 2017-03-03 13:59:25 · 602 阅读 · 0 评论 -
requireJS 简要介绍和完整例子
从事前端开发工作的大概都有所耳闻 requireJS 这个框架,以前都是使用而已没时间写一些记录,今天有空就写一下,顺便写个例子;什么是 requireJS ? requireJS 是用JavaScript编写的JS框架,主要功能是可以按不同的先后依赖关系对 JavaScript 等文件的进行加载工作,可简单理解为JS文件的加载器,它非常适合在浏览器中使用,它可以确保所转载 2016-10-17 16:28:05 · 355 阅读 · 0 评论 -
RequireJs的使用和快速理解
RequireJs已经流行很久了,它提供了以下功能:声明不同js文件之间的依赖可以按需、并行、延时载入js库可以让我们的代码以模块化的方式组织初看起来并不复杂。在html中引入requirejs在HTML中,添加这样的 标签: src="/path/to/require.js" data-main="/path/to/app/confi转载 2016-10-17 16:00:32 · 170 阅读 · 0 评论 -
瀑布流布局
我们常能在网上看到很多瀑布流布局的页面,尤其是很多图片网站,例如百度图片。这种最典型的瀑布流布局,每个元素的宽度是固定的,但图片长度各不相同,于是通过下图这种样子竖着排列了下来,达到了最大的页面空间利用率。因为对前端开发不了解,一开始为了找到这种布局叫什么名字也是花了我好久时间o(╯□╰)o瀑布流布局不局限于等宽布局,例如下面这种形式也可以,来自Masonry官网截转载 2016-09-28 16:52:33 · 450 阅读 · 0 评论 -
Swiper 参数说明
Swiper 初始化 支持下列中的参数Parameter(参数)Type(类型)Default Value(默认值Example(例子)Description(说明)speednumber300600slides滑块动画之间的持续时间(单位ms)eventTargetstri转载 2016-10-11 11:49:12 · 1008 阅读 · 0 评论 -
javascript 返回页面
返回上一页 history.go(-1), 返回两个页面: history.go(-2);window.history.forward()返回下一页onclick="javascript:history.back(-1);"一,返回上一级123history.back()window.history原创 2016-10-11 11:42:47 · 248 阅读 · 0 评论 -
原生JavaScript简单的静态搜索过滤文字(只支持中文,暂无拼音搜索)
效果介绍:在input输入框内,输入中文会自动检索匹配list里面所有包含此中文的item。目前唯一的缺点是不支持拼音检索,在后期的文章里会加入相对于的效果,敬请期待!html部分的代码:1234567891011121314inputtype="text"placehold转载 2016-10-11 11:41:21 · 1254 阅读 · 0 评论 -
什么是“前端路由”?什么时候适合使用“前端路由”?“前端路由”有哪些优点和缺点?
1,什么是前端路由?路由是根据不同的 url 地址展示不同的内容或页面前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据 url 的不同返回不同的页面实现的。2,什么时候使用前端路由?在单页面应用,大部分页面结构不变,只改变部分内容的使用3,前端路由有什么优点和缺点?优点用户体验好,不需原创 2016-10-11 10:59:05 · 6107 阅读 · 1 评论 -
关于JavaScript中apply与call的用法意义及区别
call方法:语法:call(thisObj,Object)定义:调用一个对象的一个方法,以另一个对象替换当前对象。说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。a原创 2016-10-11 09:32:30 · 156 阅读 · 0 评论 -
JS经典算法之冒泡排序算法
冒泡排序算法的运作如下:(从后往前)比较相邻的元素。如果第一个比第二个大,就交换他们两个。对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大的数。针对所有的元素重复以上的步骤,除了最后一个。持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较示例: 冒泡原创 2016-10-10 11:30:20 · 396 阅读 · 0 评论 -
【转】【three.js详解之一】入门篇
开场白webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,由于其易用性被广泛应用。如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结,二是与大家分享。转载 2016-10-10 09:39:16 · 402 阅读 · 0 评论 -
Three.js 是干什么的?
three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.j原创 2016-10-10 09:21:00 · 1331 阅读 · 0 评论 -
构建一个简单的Three.js 示例
!DOCTYPE html>html>head>title>/title>canvas { width: 100%; height: 100% }>script src="js/three.js">/script>>body>script>var sc原创 2016-10-09 15:38:20 · 2106 阅读 · 0 评论 -
使用JSON格式来进行数据交换
基本原理: JSON是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript原生格式,这意味着在 JavaScript 中处理 JSON数据不需要任何特殊的 API 或工具包。 与XML序列化相比,JSON序列化后产生的数据一般要比XML序列化后数据体积小,所以在Facebook等知名网站中都采用了JSON作为数据交换方原创 2016-10-09 14:14:16 · 745 阅读 · 0 评论 -
js获取url传递参数,js获取url?号后面的参数
方法一:正则分析法[html] view plain copy print?function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.loca转载 2016-10-21 16:14:25 · 292 阅读 · 0 评论 -
如何在JS中还原被转码的字符 "等等
script type="text/javascript"> var a = 'h hello<world>!!!<script>alert(1)</script>' alert(a); var c = document.createElement('div'); c.innerHTML = a; a = c.i原创 2016-10-21 17:58:04 · 3182 阅读 · 0 评论 -
瀑布流布局神器——JQuery Masonry
最近在做个网站时,其中有一部分涉及到很多图片布局,想采用比较流行的Water Flow布局。开始的时候自己动手写的,真费事情,没有考虑检测图片大小,虽然也能达到布局效果,但是图片有的本身尺寸比较小却被强行拉大了,看起来很不和谐。后来上网收了一下,原来有很好的Water Flow布局工具使用。下面来认识一下这个神器吧~神器名称:JQuery Masonry , 网址:http://m转载 2016-09-28 16:28:36 · 909 阅读 · 0 评论 -
原生JS实现的简单“瀑布流”布局
自pinterest网站爆红以来,国内一度掀起“仿PIN”狂潮,诸如花瓣、蘑菇街等等。正是如此,“瀑布流”式布局受到广大网民的青睐。众多知名JS库,也相继出现“瀑布流”布局插件,譬如jQuery的Masonry插件、KISSY的waterfall插件等。今天闲来无聊,我也自己动手弄了段原生JS代码,实现了简单的“瀑布流”布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希转载 2016-09-28 16:15:36 · 288 阅读 · 0 评论