- 博客(14)
- 收藏
- 关注
原创 用svelte.js开发web components
文章目录前言一、web components是什么?二、使用步骤1.起步2.构建示例3. 实际应用4.踩坑小点总结前言最近有点闲,看到svelte.js,一个挺好玩的框架,搭配rollup开发相当丝滑,api就我而言,比vue、react那些都好用~尤大说的比较中肯,它属于小而美的类型,构建复杂项目可能会有压力;但用来做小项目,活动页,编译可独立分发的 web components等,则很合适,今天我那它做个组件尝尝味道。一、web components是什么?其实这玩意就是自定义html组件
2022-04-14 12:12:17
1466
原创 iframe 跨域传递 cookie
最近在处理 iframe 跨域通讯(也就是PostMessage的应用,有兴趣可以看一下我的文章),发现了个比较头疼的问题:在 iframe 环境中,无法跨域读取内嵌网页的 cookie ,得到的结果都是空值。本来原计划构思,iframe 通过 PostMessage 实现跨域数据共享,但这个问题的出现让我蛋碎不已…(´༎ຶД༎ຶ`)如果不解决,前面的努力就等于全白搭了。于是乎我便开始了各种查文档和解决方案。据文档说明:Chrome 51 开始,浏览器的 Cookie 新增加了一个SameSite
2020-12-01 17:15:12
17681
9
原创 PostMessage的原理和实际应用
PostMessage和实际应用PostMessage是html5新引进的一个可跨源通信api,你可以通过这个api,让主页面和任意frame类页面或window.open打开的页面进行双向通信。大概流程如下图:简而言之,通过PostMessage,你可以无视不同域名导致的跨域报错等问题。关于它的用法,需要注意的几点:首先,信息传递安全问题。为了你的信息传递能准确传达,无论是作为主页面还是子页面,传递重要信息时都应该填写origin而不是“*”,避免被截获。其次,iframe或者window.
2020-11-23 17:04:07
17604
1
原创 Vue插件开发-纯数据模式
最近忽然心血来潮(嗯,闲的~),想捣鼓一下Vue的插件开发。刚好项目中有i18n的需求,但是不想引用vue-i18n,正好可以自己实现一个,顺便愉快的装个**【哔——】**。首先,分析一下自身的需求。我要实现的i18n需求如下:游戏站点的需求,有不同国家地区的游戏,语言字段是通过ajax请求返回的i18n插件的用法是 ($t("字段名")),返回值是翻译的内容,这点比较友好,要有由于语...
2019-06-14 16:33:02
495
原创 cookie信息提取
cookie信息提取 // 简单提取键值信息 let obj = {}, reg = new RegExp('([^=]*)=([^;]*);?', 'g') document.cookie.replace(reg , (str, key, val) => { cookieObj[key.trim()] = val.trim() })...
2019-01-15 16:28:08
1845
原创 遍历对象
一直以来,遍历对象是个挺麻烦的事,特别是遇到后端那不规范不规则的数据返回的时候,分分钟想掐死…… 算了,我F……佛慈悲,自己动手,丰衣足食。言归正传,和遍历数组不同,object是没有固定下标和顺序可言的,只能通过key值查找,而key值没有一个很完美的方式查找,for in那些总是伴随着兼容问题,新的keys方法也同样如此,那么要很好遍历对象,首先要解决这个问题。keys的api在ie...
2018-09-17 17:20:34
233
原创 原生js事件绑定和事件委托
最近常在移动端开发,由于不是大型站点,不需要使用vue等库,也不需要引用jquery和zepto等。写得最多得就是各种元素选择器和事件绑定,操作下来也是有点烦人。这时候怀念起jquery的美好来了,但是仅为了这个引用这么大个库,实在时下不了手,思考了一下,直接在html构造函数上拓展支持了。按照习惯来走,一般我们会喜欢在选择的元素上直接 on + 事件 ,加上相应的逻辑函数完成一个事件绑定...
2018-09-17 15:03:00
5251
原创 JavaScript复制对象和数组
JavaScript 中,数据类型分为两大类型,基本类型和引用类型。简述一下,基本类型是指我们常见的Undefined、Null、String、Number、Boolean,是保存在 栈内存 中的简单数据段;而引用类型则是指Object、Array、RegExp、Date、Function、特殊的基本包装类型(String、Number、Boolean)以及单体内置对象(Global、Math...
2018-09-17 14:25:39
159
原创 模块化开发简述
模块化开发简述都说模块化开发为前端发展带来了巨大的进步,然而不熟悉的人看着也是两眼一懵,那其实这到底是什么?好处在哪?我来说说自己的见解吧。 1. 模块化和传统开发的区别 实话讲,其实在我看来,两者的开发是一样的,除了方式不一样,达到的效果并没两样。 看着扯淡,但实际可以想一下,现流行的模块化开发主要有两种方式:依赖加载。这种方式是最广泛的,像requirejs,sea....
2018-08-14 11:42:43
13237
1
原创 npm开发简述
npm开发简述最近公司相关业务有需要写npm插件公用,正好之前没接触过,可以尝试着做。在开发过程中我遇到了不少问题(主要是英文差,看不了文档…囧),然而在查baidu的时候发现,基本找到的都是介绍如何发布,貌似没几个详细的开发过程的…只能找认识的前端大神求救才知道真相,心塞…以下是npm插件开发的基本流程,我将以一个发送文件的插件作为例子说明,希望对其他人有所帮助。先列几个要注意...
2018-08-13 18:11:54
1444
原创 plupload踩坑小结
plupload踩坑小结最近项目需要做上传,刚好是传到七牛云的,那挑选plupload是再适合不过的了。 不过东西是好东西,但毕竟不是自己写的,总会有些坑爹的地方,以下总结几点:关于上传七牛云上传到七牛云其实不需要用它官方的js sdk,直接用plupload。但是要记得,七牛上传是要配置token的。为了不必要的麻烦,最好要求后端做个获取配置的接口。官方的接口例子是这样的 ...
2018-07-12 13:11:22
9293
2
原创 event.srcElement与event.target的区别
起初不知道这玩意是啥,看到的时候是别人写的原生事件委托时用到,大约猜到是和event.target类似的兼容写法,好奇就度娘搜了一下。 其实就是字面的意思,event的源元素,通过它可以进行和document.getElementById(element)一样的操作。我们在一个输入框失焦的时候alert一下值html:<input type="text" onblur="...
2018-04-11 11:29:46
1045
原创 针对html元素的全屏实现
这是个很棒的功能。一般我们都是直接针对网页来实现,等同与F11的功能。 但是今天发现个好玩的,可以针对某元素实现全屏⊙_⊙ 这就很6了,有了它我们就能实现类似元素视觉聚焦,如HTML5全屏等╮(╯▽╰)╭ 实现原理,主要靠浏览器提供的API支持首先是w3c标准的// 全屏element.requestFullScreen();// 退出全屏document.exitFull...
2018-04-11 11:28:31
3667
1
原创 日常笔记
日常笔记记录,有啥好玩的都要记录下来,好记性不如烂笔头,何况记性不好咧~ 1、类型判断 _.type = function (obj) { //直接会return一个字符串 &quot;[objec 你传进了的数据的类型String/Number/Array/Object/Null/Undefined]&quot; //然后正则匹配得到想要的类型 re...
2018-04-11 11:26:57
150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人