分类: 前端研究预览模式: 普通 | 列表

lodash的get函数来判断对象深处的空值，太有用了！

作者:admin  日期:2022-01-21
例题，比如，有这样一个对象：
Javascript代码
  1. let arr = [  
  2.   {id:1,tit:'ttt1'},  
  3.   {id:2,tit:'ttt2',bb:{ cc:{dd:12} }},  
  4.   {id:3,tit:'ttt3',bb:{}},  
  5.   {id:5,tit:'ttt5',bb:{ cc:{dd:''}}},  
  6.   {id:6,tit:'ttt6',bb:{ cc:{dd:null}}},  
  7.   {id:7,tit:'ttt7'},  
  8. ]  
分支内的数据不太规范，有的分支多，有的少。现在要求：输出所有含有dd属性的一级分支（dd如为空值也要排除掉）
想想，怎么写?
 
直接给答案吧，lodash大法好，清晰优美，而且是带变量的写法，不管有多深，一探到底：
Javascript代码
  1. _.each(arr, item=>{  
  2.   let flag = _.get(item, [ 'bb', 'cc', 'dd' ])  
  3.   if(flag){  
  4.     console.log(item)  
  5.   }  
  6. })  
另外，_.isEmpty这个函数也很好用，用于空值判断，可以判断各种不同的空值，比如对象空，数组空，字符空。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 41

在contenteditable的div中的段落文字中获取光标位置，并在光标处插入字符

作者:admin  日期:2021-12-23

 vue项目中的一个小需求如题，代码整理如下：

Javascript代码
  1. <template>  
  2.   <el-container class="about">  
  3.     <el-main>  
  4.       <section class="bgBox">  
  5.           <h1>在诗句上任意位置点击，再点击“插入字符”按钮，即可在光标处插入字符</h1>  
  6.           <div class="h20"></div>  
  7.         <el-button type="primary" @click="insertChar">插入字符</el-button>  
  8.         <div class="h30"></div>  
  9.         <div class="edit" contenteditable>  
  10.           <p  
  11.             v-for="(item, index) in sentenses"  
  12.             :key="item"  
  13.             @click="getCurrentSent(index)"  
  14.           >  
  15.             {{ item }}  
  16.           </p>  
  17.         </div>  
  18.       </section>  
  19.     </el-main>  
  20.   </el-container>  
  21. </template>  
  22.   
  23. <script>  
  24. const insertStr = (soure, start, newStr)=>{     
  25.    return soure.slice(0, start) + newStr + soure.slice(start);  
  26. }  
  27.   
  28. import { getTableList, uploadFile } from "@/api/system/api_user";  
  29. export default {  
  30.   data() {  
  31.     return {  
  32.       current_sent: null,  
  33.       sentenses: [  
  34.         "凌波不过横塘路。但目送、芳尘去。",  
  35.         "锦瑟华年谁与度。月桥花院，琐窗朱户。只有春知处。 ",  
  36.         "飞云冉冉蘅皋暮。彩笔新题断肠句。若问闲情都几许。",  
  37.         "一川烟草，满城风絮。梅子黄时雨。"  
  38.       ]  
  39.     };  
  40.   },  
  41.   computed: {  },  
  42.   methods: {  
  43.     getCurrentSent(index) {  
  44.       // 获取当前句子  
  45.       this.current_sent = index;  
  46.     },  
  47.     insertChar() {  
  48.       // 获取getSelection对象，这个对象有很多内容，自己找到有用的数据  
  49.       let select = window.getSelection();  
  50.   
  51.       // 利用insertStr函数，在光标位置插入###三个字符  
  52.       let newSent = insertStr(  
  53.         this.sentenses[this.current_sent],  
  54.         select.anchorOffset - 1,  
  55.         "###"  
  56.       );  
  57.   
  58.       // 更新sentenses数组视图  
  59.       Vue.set(this.sentenses, this.current_sent, newSent);  
  60.     }  
  61.   }  
  62. };  
  63. </script>  
  64. <style lang="scss"></style>  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 166

纯CSS实现文字水波动画

作者:admin  日期:2021-10-11

点击打开：

http://www.contactu.cn/2021/test_water/test_water.html

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 381

moment定义日期针对苹果手机的一个小bug

作者:admin  日期:2021-05-08

 moment('2021-1')这种格式定义一个日期时，安卓机可以通过，苹果机不行，显示NaN,

因此必须统一使用：moment('2021-01')这样的标准格式。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 954

SVG异形边框及路径动画+CSS动画演示

作者:admin  日期:2021-03-19

演示地址：

http://contactu.cn/2021/vue_svg_tweenmax_demo/index.html

- 根据窗体的width/height参数，自动计算生成SVG的path路径

- tweenmax+MorphSVGPlugin生成小光点绕路径环游的动画，tweenmax的CSS动画生成右下角的色彩变化

- VUE组件化，方便复用

查看更多...

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1420

snap.svg+vue实现圆形导航

作者:admin  日期:2020-11-24
查看案例请点击此处：
 
使用的技术框架：
1、snap.svg实现Svg
2、数据与视图双向交互由vue-cli3实现
 
功能点：
1、图形与数组双向互动。可点击“添加”按钮添加数组中的对象。
2、算法实现path环状节点，角度、弧度、边长的逻辑关系。下图中所有不同颜色的线段，都是通过CSS定义得到的。可以把一个圆环分成3份，也可以分成50份，得到不同的视觉效果。
3、Snap.animate 实现动画、transform用法
4、stroke-dasharray实现线条间隙，比如下例中的白色间隔。
5、viewBox改变Svg中心。
6、textPath路径文字，实现跟随弧度变化的文字
 
通过这个案例，了解了两种方式，来实现SVG线条。用HTML+CSS方式、或使用snap.svg的JS方式，都可以实现。
 
 
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1599

vue-cli3引用snap.svg出现错误的解决办法

作者:admin  日期:2020-11-12
做为正当的做法，应该使用
Javascript代码
  1. npm install snapsvg  
  2. import Snap from 'snapsvg'  
来使用svap.svg
 
但事实上这样是不行的，会报红字错：
vue-router.min.js:6 TypeError: Cannot read property 'on' of undefined
 
 
找了很多百度、github issue的很多资料，发现很多人都碰到了这个问题，也提供了Webpack及改写vue-cli3( vue.config.js)的办法，但实验发现都解决不了问题。

最终在stackoverflow.com找到了最简便的解决办法：
Javascript代码
  1. npm install snapsvg-cjs  
  2. import "snapsvg-cjs"  
经我验证可行。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2254

使用echarts地图，大屏实现“县乡级行政区划”数据展示的几个难点汇总

作者:admin  日期:2020-06-12

某大屏展示项目中，要实现“点击乡级区划，显示出相应的数据”，

最终效果，链接：http://258754.cn/2020/guidong/demo.html

 

经过几天的学习，解决了一些疑难问题，特汇总如下以供参考：

 

 

难点 解决方法 参考文章或链接
echarts地理图的基础实现-基于geojson 参考了百度官方示例-香港地图 https://echarts.apache.org/examples/zh/editor.html?c=map-HK
外框发光效果实现 geo--itemStyle  
得到县一级的geojson数据 很多方法得到，本处给出一个很方便的工具 https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe
网上公开的geojson数据，免费只到县一级，没有乡镇一级地图

1、自己手工绘制，比较粗糙，边界不准

2、找到了精确边界数据的购买渠道，很便宜

 geojson.io这个网站可以手工绘制区块
买到的 geojson数据比较旧，今年度新的区划已经发生了合并。

使用mapshaper.org提供的工具，对区划进行了合并，完美解决了问题。

 

合并操作及控制台语法花了点时间。

工具：mapshaper.org

 

解析贴：

https://segmentfault.com/q/1010000013001601
同一页面展示多个图表 vue组件将地图封装了一下 查看本文源码

 

解决了以上主要问题，绘制类似地图，就只剩一些细节问题了。

 

 

本文同时发布到两处：

本人博客：http://www.contactu.cn

知乎专栏《低水平前端》：https://zhuanlan.zhihu.com/c_1040198727197237248

Tags: echart geojson

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3181

SVG制作不规则链接热点的最简版演示

作者:admin  日期:2019-02-28
一朋友要做一个“战国地图”，不会做“不规则热点”。我给他做了这个最简版演示。SVG是我用ps描的，很粗略。响应用的是vue.js，其实用jquery也是一样的。

这就是个最简演示，其它常用技术就不解释了。

演示地址 ：
http://www.contactu.cn/2016/svg/qg.html

查看更多...

分类:前端研究 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 7757

VUE+TWEENMAX+SVG动画，用来模拟流程控制

作者:admin  日期:2019-02-18

那种工厂中很多个管道、流水线、控制阀门的控制体系，如果用软件来控制的话，会要操作很多的动画。用普通的HTML+IMAGE方式，很难表现一些复杂的控制。早几年的FLASH，是这方面的强手，但现在适用的方案，应该只好用SVG了。

我一直想了解一下SVG的组织结构及动画控制，这次终于实践了一个小demo。

这个演示用到了SVG的symbol/pattern。动画控制用的tweenmax，状态控制用了vue.js。
绘制方面，用了一个ps插件，我用自己熟悉的ps直接导出了svg矢量图形。
 
演示地址 ：
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 16149

在Scss中直接使用px单位，通过gulp，自动转为rem单位

作者:admin  日期:2018-10-27

 使用了https://www.npmjs.com/package/gulp-px2rem-plugin

使用这个gulp插件，可以在Scss中直接使用px单位，然后通过gulp的转换，自动转为rem单位，与我常用的ydui.flexible.js配合，最终完成px2rem的转换。
gulp语法如下：
.pipe(sass().on('error', sass.logError))
            .pipe(px2rem({'width_design':640,'pieces':6.4,'ignore_px':[1,2]}))
            .pipe(gulp.dest(dir+"/css"));

注意width_design与pieces都要与ydui.flexible.js中的设定配合。

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6967

试着用css animation实现的逐帧动画

作者:admin  日期:2018-10-20

我的试验： 258754.cn/2018/tyfp/test.html

模仿对象是：http://www.101.com

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4906

开始学写微信小程序

作者:admin  日期:2018-09-23
早就有朋友跟我建议：“你应该开始写小程序，很简单，跟VUE的路子很象”。九月份，有一段时间手头没有新单子，于是开始学习。机会不错，从我一个业务关系那里买到了一个慕课的视频，《纯正商业级应用-微信小程序开发实战》。课程不错，我想听的都讲了。我不想听的，基本都没有。
 
花二天时间听完课程，自己写代码实战了一下---果然跟VUE类似。第一感觉就是文件体系拆得太散了。虽然大家都是HTML/CSS/JS/JOSN这几样，但是小程序4个文件分开写，几个页面一起弄的话，感觉我的sublime的标签都不够用了。VUE的单页面组件多么的紧凑。
 
另外，组件的写法跟页面文件，两者有点不一样。比如小程序组件调用的开关还要在josn中定义、小程序的响应函数居然要放在methods:{}中，而页面又不需要。感觉小程序好粗糙。
 
第三方库，我找了有赞出品的vant-weapp，跟vant for vue一脉相承。
js工具库，小程序
 
SCSS写习惯了。可是小程序没有提供支持。在网上找到个由gulp驱动的workflow，还真好用。
 
编辑器这块儿，在Sublime中直接找了个小程序语法插件，配合原来使用的emmet，还挺好用。
 
总体来说，确实难度不大。熟悉VUE体系的不妨多学这一项技能。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3929

跨域时遇到的一个顽症总结

作者:admin  日期:2018-02-01

在进行post跨域数据请求时（所有请求均header中带token），碰到一个奇怪的现象，postman测试可以通过，但是用页面进行调用时，总是报错。前后端忙活了大半天时间，最后找出问题。以下是程序员 “灰色头像”写的总结：

总结下今天出现的问题，主要是在跨域CORS的时候出现这个问题
 
首先需要知道一些容易忽略的知识点，浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
具体看
 
http://www.ruanyifeng.com/blog/2016/04/cors.html
 
还有一点需要注意，头部字段只支持
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
对于自定义的，比如我们头部传的token这个自定义头部会出现下面2种情况
 
1、axios对于跨域CORS正常会发送2次请求，第一次“预检”，我们这边有token自定义头部字段，虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有，但只限制于上面所说的支持的，自定义的不会支持，所以就导致预检就失败，不会发送第二次请求
 
2、普通的ajax却可以支持，应该是没有做预检处理（这个还没详细了解）
 
所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />，增加自定义的token，不能使用*这样的配置。这样对于做预检的，有什么自定义头部字段，这里就要额外增加。
 

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4789