手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

Use the `--scripts-prepend-node-path` option to include the path

Submitted by gouki on 2020, July 7, 2:37 PM

有时候编译的时候会出现这个错误，提示是说：Use the `--scripts-prepend-node-path` option to include the path 。然后会告诉你有两个路径的存在

有个简单的办法，在项目根目录下面增加一个文件.npmrc，加入：

scripts-prepend-node-path=true

问题解决

 

Javascript | 评论:0 | 阅读:10615

微信视频播放在Android 10下的BUG

Submitted by gouki on 2020, March 30, 9:33 AM

起初不知道是微信的BUG还是android 10的BUG，但因为搜索：android10 视频播放横屏 暂停后无法继续播放，等类似关键字都无法找到结果 。

而且在启用eurdaJS后，发现出错的是DomException，再接着去搜索，也没有什么特别好的结果，对于一个非专业前端来说，除了知道可以用unhandlerejection可以用来捕获这个错误外，其他一无所知。

于是开始尝试，打开有赞课堂、荔枝微课、B站等有网页在线播放的页面，发现除了B站外，其他两个都不正常。都是横版情况下，只能暂停，不能播放。如果是先暂停再进入横版，同样不可播放。B站的播放器是自定义的。即使全屏，也是用的自己的控件，所以无法重现。

再之后想了想，是在其他浏览器也正常吗？于是用浏览器打开有赞和荔枝，有赞前几步都很正常，但在点播放的时候，却告诉我，请在微信打开。估计还是捕获了play的事件。荔枝微信可以正常打开，但问题就这么来了。。无论是系统自带的播放器还是chrome中的播放器，他们的界面都是一样的（有分享、有列表，还有投屏功能）。

那么，也就意味着微信浏览器中的video control其实已经被微信定制了。这个BUG应该就是微信更新后的BUG（同样的问题在Android 9上并无）

---

最后，只能用原生的click事件，同时记录播放状态来处理（希望微信在新版中可以改掉这个BUG）

 

Javascript | 评论:0 | 阅读:7359

被sortable.js坑了一小把

Submitted by gouki on 2020, March 24, 10:53 AM

记录一下。如果同一个页面，基于同一个class或者同一个元素，但数据不同进行排序时。记得及时destroy。否则sortable会缓存。一直在使用第一次的数据。

被它坑了好久，浪费了1个小时。原来是首次编辑时，可以变动。但再次编辑时，可以拖动，但数据不会变，打印数据的时候发现，一直在使用传入数据。

Javascript | 评论:0 | 阅读:8683

browser-sync 省时的浏览器同步测试工具

Submitted by gouki on 2020, February 29, 12:16 AM

 不知道将它算在哪个分类。但即实是js写的就扔在javascript下面了。。

不怎么为什么，我npm install -g browser-sync，就是没用。最后还是用yarn global add browser-sync，才让这个命令行成为全局的。
 
因为在用PHP开发，没有用纯vue，所以没法用webpack那类的玩意，就造成我写完页面，要刷新一下才OK。特别是两个屏幕。。好麻烦。鼠标移来移去，按再cmd+r。。。
虽然装了hammerspoon，弄了个插件可以让鼠标切换显示 在不同的显示器上，但还是麻烦。以前也用过browser-sync好象都失败了。
最近实在觉得烦，又操起来了。
试了一下。原来还是很简单的。
 browser-sync start --proxy "localhost.dev" --files "resources/views/*/*/*.php" --no-ui --no-open
因为我本地测试会使用域名。所以，需要指定proxy，启动后会打开3000端口，这样就可以通过localhost:3000进行访问了。
 
--files，是指监测resources下的文件。我开始用 *.php 失效。所幸我90%的情况下只要监测模板。所以目前看来还是够用了。
命令太长。可以放到Makefile里或者象我一样，扔在了fabric的文件中，运行一下：fab watch就OK了
 
-----
补充：附上两个网址：
1、官网：https://browsersync.io/
2、国内的文档：http://www.browsersync.cn/
 
再补充：因为在laravel里进行了分组，要检查一下PHP也reload。只能这样了。
1、laravel下的命令行：browser-sync start --proxy "localhost.dev" --files "resources/views/*/*/*.php,app/*/*.php,app/*/*/*.php,app/*/*/*/*.php,config/*.php,app/*/*/*/*/*.php" --no-open --no-ui
2、没有用browsersync的 --xip参数，因为他使用之后，域名就变成：http://127.0.0.1.xip.io，你要干脆就是这个域名也就算了，却偏偏还带了port，那就失去意义了。

Javascript | 评论:0 | 阅读:8217

vue + sortable js的一些简单操作

Submitted by gouki on 2020, February 28, 10:03 PM

 用sortable处理排序，代码真的很少，不需要引用什么vue-sortable之类的。但会有个问题。。实际的DOM和Vnode可能会显示不一致。往往拖完了，序号变了，数据变了（可以通过console.log来查看），但就是DOM没变。

后来是搜索到这篇文章，写的比较详情：https://www.jianshu.com/p/d92b9efe3e6a，我就不多写了。我的几行代码类似如下：

JavaScript代码
  1. dragable() {  
  2.   let contentRow = document.querySelector('.content-row');//指定element，如果有ID最好，在这个下面的元素，最好都是统一类型的，如果当前元素是ul，那就是拖li  
  3.   Sortable.create(contentRow, {  
  4.     onEnd: ({newIndex, oldIndex}) => {  //监听拖动结束事件  
  5.       let newline = contentRow.children[newIndex],  
  6.         oldline = contentRow.children[oldIndex];  
  7.       // 先删除移动的节点 ，再插入移动的节点到原有节点，还原了移动的操作  
  8.       //这里是操作DOM  
  9.       contentRow.removeChild(newline);  
  10.       contentRow.insertBefore(newline, newIndex > oldIndex? oldline : oldline.nextSibling);  
  11.       //这里是操作数据  
  12.       let currRow = this.items.splice(oldIndex, 1)[0];  
  13.       this.items.splice(newIndex, 0, currRow);  
  14.   
  15.     }  
  16.   });  
  17. },  

这个方法是vue的methods中的。不复杂。看看就行。记录一下。原来我觉得很简单。这个方法的最后两行就行了。。。但就是DOM不变。参考了上面链接中的内容才加了那两行。

 

Javascript | 评论:0 | 阅读:8439

Records:306«‹567891011121314›»