随笔分类 - javascript
javascript
摘要：跨域请求原理
1、通过jsonp跨域
利用在页面中创建script节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题。
js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。
阅读全文
摘要：js 把字符串转换成数组，数组去重后再转成字符串
数组去重使用ES6标准函数
function unique(arr){
//Set数据结构，它类似于数组，其成员的值都是唯一的
return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组
}
//字符串转换成数组（根据分割符）
var outstrArr = outstr.split(',');
//数组去重
var uniqueArr = unique(outstrArr);
//数组转换成字符串（添加分割符）
outstr = uniqueArr.join(",");
阅读全文
摘要：js实现N个元素的排列组合及存在相同元素的处理方法
不能有相同的元素,相同号码替换成对应字母处理
阅读全文
摘要：js获取url原有参数，增加页面select值拼接url后跳转页面，获取对象keyValue方法，get提交html5页面模版
阅读全文
摘要：对各种开发语言优劣的讨论，入门难度，IDE，大型网站并发性，java，golang，php，python，api接口，前后端分离
现在很多有高并发要求的 java c++的接口改成golang的
有个朋友公司就是把java写的接口改成golang的，听他说的是效率提高了上百倍，节省了大量服务器
java入门比较难，要达到熟练独立开发一个网站出来需要比较长的学习时间
php Python入门很容易，要做大型网站深入也很难
php Python零基础一星期就可以入门了
java你搞一个月门都没有找到
php做个小网站还是比较快的
Python做个小工具还是很好的，一个文件就可以直接运行起来了
金融相关的用java比较多，比较成熟了，招人也容易
现在流行前后端分离了
golang java 做API接口更有优势的
Python做科学计算，自动化，人工智能的更有优势
springboot springcloud 做API还是很不错的，之前的tomcat 那些容器搞得太复杂了
阅读全文
摘要：bootstrap中checkbox操作实战例子
//init val
var initwei = $('#wei').val();
$("input[name='wz']").each(function(i){
if(initwei.indexOf($(this).val()) != -1){
$(this).prop('checked', true);
}
});
$('#submitBtn').on('click', function(){
//set val
var wzstr = '';
$("input[name='wz']:checked").each(function(i){
wzstr = wzstr + $(this).val() + ',';
});
$('#wei').val(wzstr);
});
阅读全文
摘要：使用highcharts实现无其他信息纯趋势图实战实例
Highcharts去掉或者隐藏掉y轴的刻度线
yAxis : {
gridLineWidth: 0,
labels:{
//enabled:false//隐藏y轴刻度
},
}
Highcharts去掉或者隐藏掉x轴的刻度线
xAxis: {
categories: [],
tickWidth:0,
lineColor:'#ffffff',
lineWidth:0,
labels:{
enabled:false//隐藏x轴刻度
}
},
图表版权信息。显示在图表右下方的包含链接的文字，默认的文字是 Highcharts，链接是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。
去掉highcharts右下角默认
阅读全文
摘要：js 某个值在数组中的下标
javascript中知道一个数组中的一个元素的值，如何获取数组下标
JS 获取数组某个元素下标 函数方法
采用prototype原型实现方式，查找元素在数组中的索引值
js查找元素在数组中的位置（index值）
遍历所有数组，当数组中的数值与你期望的数值相同时返回下标即可。
阅读全文
摘要：js javascript map函数去重功能的使用实例
先上一个实战例子代码
var map = new Map();
for(var i=0; i<=9; i++){
map.set(i,i);
}
//遍历出去重后的元素值
map.forEach((value, key, self) => {
Map是一组键值对的结构，具有极快的查找速度。
阅读全文
摘要：用chrome的snippets片段功能创建页面js外挂程序，从控制台创建js小脚本
Chrome的snippets是小脚本，还可以创作并在Chrome DevTools的来源面板中执行。
可以访问和从任何页面运行它们。当你运行一个片段，它从当前打开的页面的上下文中执行。
要创建一个片段（Snippets），首先F12 打开开发者工具，
再到Sources面板中，单击上Snippets选项卡，在导航器中单击鼠标右键，然后选择New。
阅读全文
摘要：移动端调试神器vconsole,手机端网页的调试工具Eruda
移动端中使用 vConsole调试，移动端调试工具vconsole安装
Git地址：https://github.com/WechatFE/vConsole
vConsole是一款由微信公众平台前端团队打造的前端调试面板，专治手机端看log难题。
目前vConsole自带有2个面板，默认为“日志”面板，负责展示log。
手机端网页的调试工具Eruda: Console for Mobile Browsers
UI Recorder是一款零成本的整体自动化测试解决方案，一次自测等于多次测试，测一个浏览器等于测多个浏览器！
AlloyLever是腾讯AlloyTeam团队开源的一款Web 开发调试工具。
Android&Html5混合开发WebView调试必备神器DevTools，chrome浏览器调试手机端WebView
DevTools能在浏览器上调试手机中的webview代码，给手机端调试带来了极大的便利!
阅读全文
摘要：正则表达式，匹配非本站图片网址去掉img标签内容实例
在线正则表达式测试 http://tool.oschina.net/regex/#
正则表达式：<[img|IMG].*?src=[\'|\"]((?!https\:\/\/img\.zdz).*?(?:[\.jpg|\.jpeg|\.png|\.gif|\.bmp]))[\'|\"].*?[\/]?>
重点：(?!https\:\/\/img\.zdz).* 这个表示不是本站网址的图片，如果要匹配本站的用(https\:\/\/img\.zdz).* 即去掉?!
阅读全文
摘要：web开发前端面试知识点目录整理
基本功考察，工程能力考察，内功考察，附加技能考察
阅读全文
摘要：css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位
一些只能vw, vh才能完成的应用场景：
1. 场景之：元素的尺寸限制
vw vh 主要是实现了动态高度百分比布局，比如宽高比不固定的图片，vw很轻易的实现正方形图片缩略图
原始大图的尺寸限制问题——因为很有可能图片过大，尼玛一屏显示器区域不够放，我们需要对其进行缩放处理。
这类限制的实现，在当下，需要获得图片的原始大小，以及浏览器内部尺寸，算大小，算比例等，算是比较折腾的。
但是，vw, vh等单位本身就是浏览器视区大小相关单位，直接使用其做限制，岂不省了N多JS代码？
阅读全文
摘要：vue打包app嵌入h5，区分app进入和android，ios显示不同的下载链接
需求：自己app打开的登录页面不显示app下载链接。
其他地方打开判断android手机的跳转到android下载页链接，ios手机的跳转到ios下载链接，pc版的不显示下载链接。
H5前端与Android和iOS混合开发时，需要区分浏览器平台，JS判断客户端是否是iOS或者Android手机移动端
阅读全文
摘要：Cookie写不进去问题深入调查 https Secure Cookie
什么情形下，Cookie 会写不进去？https Secure Cookie
像是语法错误那种显而易见的就不用说了，除此之外你可能会答说：写完全不同domain的Cookie。例如说你的网页在http://a.com却硬要写http://b.com的Cookie，这种情形当然写不进去。
或者，你可能会回答：不在https却想加上Secureflag的Cookie。
没错，像是这种情形也会写不进去。
除了这些，你还能想到什么吗？
如果想不太到，那就听我娓娓道来吧！
阅读全文
摘要：vue获得当前页面URL动态拼接URL复制邀请链接方法
当前页面完整url可以用 location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params
实例：动态邀请链接，获得当前页面URL去掉path，替换成注册的加上邀请码：
this.invitelink = location.href.replace(this.$route.path,'') + "/register?invitecode=" + this.invitecode;
复制邀请链接方法：
main.js里添加：
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
阅读全文
摘要：JS的防抖与节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。
此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。
函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
阅读全文
摘要：懒加载是如何实现的？
找到一个不需要知道图片宽高的懒加载方法了（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）
dinbror/blazy: Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
https://github.com/dinbror/blazy#demo
这个兼容性比较好
注：vuejs，react有对应的懒加载插件
阅读全文
摘要：Vue用axios跨域访问数据
axios是vue-resource的替代品，vue-resource不再维护。
安装axios：npm install axios
使用vue-cli开发时，由于项目本身启动本地服务是需要占用一个端口的，所以会产生跨域的问题。在使用webpack做构建工具的项目中,使用proxyTable代理实现跨域是一种比较方便的选择。
proxyTable相关配置及使用说明：
在config/index.js文件中，找到dev对象下proxyTable对象进行跨域设置，配置如下：
阅读全文
