Javascript

2019-03-13 · 阅读 389 · 字数 368

Laravel 内置的 Mix 太过臃肿了，我本身又非常反感 JS NPM 这种低质量代码的包管理方式，所以能少一点 JS 依赖就尽量少一点。所以，我直接抛弃了 Laravel Mix。而且，Laravel Mix 在 Windows WSL 中非常不稳定，安装都会报错，问题颇多，并不想研究。 最终，我决定使用简单的 Babel 替换掉 Laravel Mix，因为我实际上只需要 ES6 转成 ES5 这一个功能。 Babel 的文档写的真好 解释了 ES 2015 有哪些新特性 Babel 的配置文件 可以在三个地方配置 Babel babel.config.js .babelrc p ...

阅读全文...

2019-03-07 · 阅读 444 · 字数 262

前一段时间看到条消息 bootstrap 5 将移除对 jquery 的依赖。例如： 用 querySelectorAll 来查询 DOM 节点 使用 fetch 代替 ajax（在不支持的浏览器上使用 XHR） 使用代理事件来进行事件处理 为一些尚未实现的 DOM 标准写了 polyfill 更多地使用自定义元素 (CustomElement) 我完全理解 bootstrap 这样做的初衷，因为写一个简单的小功能，例如调用服务端接口，就需要引入庞大的 jquery 依赖，实际上是非常不合理的。 所以，我决定在新项目中都采用相同的做法，使用 fetch 替代 ajax。 fetch 如何替 ...

阅读全文...

2018-12-15 · 阅读 1713

测试用的 HTML 代码 <div class="quoteText"> “Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.” <br> ― <span class="authorOrTitle"> Albert Einstein </span> </div> innerHTML document.querySelect ...

阅读全文...

2018-12-06 · 阅读 1005

为何要替换掉 jQuery 一个简单的 element 选择，为何要引入一个 jQuery 依赖？ 我想尝试一下摆脱 jQuery 的依赖 Vuejs 中使用 jQuery 总感觉怪怪的 为何 jQuery 可以被替换掉 使用 jQuery 有一个很大的历史原因，那个年代，多种浏览器需要兼容，而 jQuery 是兼容的最好的。例如，ie6 很多功能函数跟 firefox / chrome 不一致，一行 js 代码就需要不得不多写几行来做兼容。用 jQuery 确实省心。 但是，时代不同了。目前手机浏览器完全没有 ie 的包袱，并且桌面平台 ie8 以下的用户凤毛麟角，甚至可以完全忽略不计。 ...

阅读全文...

2018-10-23 · 阅读 1315

有的网页为了防止 tampermonkey 这类插件读取页面中的 js 变量，把变量写到了匿名自调用函数 self-invocation 中，例如 <script type="text/javascript"> (function() { var a = 1; console.log(a); })(); </script> 而我为了某些不可告人的目的必须读取到变量 a 的值。 一种有效的方式是，使用 ajax 获取当前页面的源代码，然后正则匹配中某个指定变量的值。 正则匹配 var s = 'var name = "hahahah ...

阅读全文...

2018-10-11 · 阅读 1462

正在用 tampermonkey 写一个网站自动答题的程序。 网站题目的大致结构是 <input type="radio" name="qa" value="A"> <input type="radio" name="qa" value="B"> <a href="javascript:" class="submit-answer">提交答案</a> $('.submit-answer' ...

阅读全文...

2018-09-04 · 阅读 1634

晚上回家想继续调试白天没有调完的管理后台 JS Bug，但是又懒得重新搭建一套后台开发环境。 于是想起之前使用的 fiddler，替换线上环境的 JS 文件为本地文件即可。 发现当年使用的 fiddler2 已经升级到了 fiddler5。 我在 Windows 10 上使用 fiddler 始终无法启动 Chrome，干脆换成了 Edge，发现兼容性还不错。 ...

阅读全文...

2019-03-26 · 阅读 7422 · 字数 207

由于后台要与小程序前端的城市选择对应起来，所以需要实现一个 JS 的后台省市区三级联动选择组件。 方案一：基于 element-china-area-data 的实现 https://github.com/Plortinus/element-china-area-data element-china-area-data 是基于 Vue 的 element ui 的一个实现。效果如图： 注意，github 里只介绍了基于 npm 的实现，如果想使用 CDN 引入的方式实现。 可以参考： <link rel="stylesheet" href="https:/ ...

阅读全文...

2018-03-24 · 阅读 3114

今天在看微信小程序 zanui 的 field 组件代码时，发现一个新的语法，即三个点： <template is="zan-field" data="{{ ...config.base.name, value }}"></template> 其中的 config.base.name 是个对象，类似于 name: { focus: true, title: '收货人', placeholder: '名字' } 如果不加这三个点就会报错 Bad attr `data` with message & ...

阅读全文...

2018-03-07 · 阅读 2426

在做题库录入后台的 vuejs 组件。 一个一个录入答案确实费劲，如果能将几个答案一起粘贴过来，自动解析成独立的答案分别自动录入就爽多了。。。 下面的实现，支持带英文句点、中文逗号、以及没有间隔符的情况。 var str2 = new_value.replace(/^(.*)(A[\.\u3001]*\s*)/,'') // 去掉 A 选项前的内容 var choices = str2.split(/[A-G][\.\u3001]*\s*/); // 按选项分割 \u3001 是中文顿号的 unicode. ...

阅读全文...

2018-02-20 · 阅读 2887

Github 上找了个 Chrome 插件进行修改，但是运行 grunt 命令之后报错 Running "jshint:files" (jshint) task Warning: Path must be a string. Received null Use --force to continue. Aborted d ...

阅读全文...

2018-01-16 · 阅读 4680

在页面引入百度统计的代码之后，对于页面上需要统计的事件，可以加入自定义统计。 例如，点击了某个按钮，完成了某个流程，等等 _hmt.push([‘_trackEvent’, category, action, opt_label, opt_value]); 具体参数，参考百度统计文档 http://tongji.baidu.com/web/help/article?id=236&type=0 举例说明，统计页面上的打赏按钮的点击量 var title = document.getElementsByTagName("title")[0].innerHTML; _h ...

阅读全文...

2018-01-15 · 阅读 4616

问题 想在 web 统一模板中引入 jquery 和 vuejs，但是部分页面之前已经引入了。 如果想引入这两个库，但是又不影响已存在的页面使用。例如，对 ajax 请求统一修改了 header 加入了 csrf token, 但是如果再次引入 jquery, 就会导致配置被重置。 思路 判断一个库是否已经引入，如果引入了，就不再引入。 实现 <script> if (condition) { document.write('<script src=\"https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js\&q ...

阅读全文...

2017-12-20 · 阅读 6059

调试小程序的时候，发现清空本地全部数据缓存之后，报错 thirdScriptError this.login is not a function;at App onShow function;at api refreshSession fail callback function TypeError: this.login is not a function at Function.fail (http://127.0.0.1:9973/appservice/app.js:31:14) at Object.fail ( 第一眼愣是没发现问题，仔细一看 at api refre ...

阅读全文...

2017-06-20 · 阅读 2416

在 weex 中使用 vuex 的 actions 时，发现了 ES6 的一种新语法 export function FETCH_USER ({ commit, state }, { id }) { return state.users[id] ? Promise.resolve(state.users[id]) : fetchUser(id).then(user => commit('SET_USER', { user })) } 之前从未见过函数可以这样定义, 参数居然都是 object。查了一下，发现是 ES6 的新特性 函数参数 destructuring ...

阅读全文...