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