Javascript

分类下相关文章

使用 Babel 将 ES6 转成 ES5 代码

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 ...

阅读全文...

使用 fetch 替代 ajax

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

阅读全文...

innerHTML, innerText, TextContent 的区别

测试用的 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 ...

阅读全文...

返璞归真:使用纯粹的 javascript 替换掉 jQuery

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

阅读全文...

javascript 正则提取页面中的变量值

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

阅读全文...

JQuery 自动勾选 checkbox, 并触发提交

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

阅读全文...

使用 fiddler5 替换线上生产环境的 JS 文件,方便调试

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

阅读全文...

JS 的省市区三级联动选择组件

由于后台要与小程序前端的城市选择对应起来,所以需要实现一个 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:/ ...

阅读全文...

ES6 三个点新语法:数组元素的 rest / spread ,与对象属性的 rest / spread

今天在看微信小程序 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 & ...

阅读全文...

javascript 正则解析选择题答案

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

阅读全文...

Grunt.js Warning: Path must be a string

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

阅读全文...

百度统计的自定义上报功能 - 事件分析

在页面引入百度统计的代码之后,对于页面上需要统计的事件,可以加入自定义统计。 例如,点击了某个按钮,完成了某个流程,等等 _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 ...

阅读全文...

避免三方 js 文件被重复加载

问题 想在 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 ...

阅读全文...

ES6 的箭头函数,让 let that = this 去死吧

调试小程序的时候,发现清空本地全部数据缓存之后,报错 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 ...

阅读全文...

ES6 函数参数的 destructuring

在 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 ...

阅读全文...

近期节日

2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
2019年05月01日 国际劳动节
2019年05月04日 五四青年节
2019年05月06日 立夏
2019年05月08日 世界红十字日
2019年05月08日 世界微笑日
2019年05月12日 国际护士节
2019年05月12日 母亲节
2019年05月12日 佛诞
2019年05月15日 国际家庭日
2019年05月17日 世界电信日
查看更多节日