今天火端开始使用clipboard.js来复制网页文本内容了,clipboard.js不需要flash,也不依赖其它的js库,min版仅11KB,GZIP压缩后仅3KB,非常的小巧。...点击复制 new Clipboard('.btn'); 如果要添加事件,可以这样 点击复制 <script src="dist/clipboard.min.<em>js</em>
加载的同时,网页的任何元素我们都是可以修改的,隐藏、替换、插入新的html元素balabala,总之,webview的神奇给了我们很多发挥创意的可能: 而且操作起来也是异常简单,几乎是模板代码,不管你是否精通js...2018120200582056.png /** * 注入js隐藏部分div元素,多个操作用多个js去做才能生效 */ private void hideHtmlContent() { /.../修改文本,可以注入任意的html代码,我是直接注入一段带样式的文本节点,表现良好 String javascriptq = "javascript:function modifyText()...于是,随便换一个能实时调用的地方,问题解决。就是这么粗暴,看其他文章有说写handler和线程去搞,太麻烦了,还得开线程,不能忍,最后,还是用我的简单粗暴的方法,效果依旧完美。
前言 在这篇文章中,我们将通过 JS 构建我们自己的 JS 解释器,用 JS 写 JS,这听起来很奇怪,尽管如此,这样做我们将更熟悉 JS,也可以学习 JS 引擎是如何工作的!...Mini Js Interpreter~ 实践准备 Acorn.js A tiny, fast JavaScript parser, written completely in JavaScript....一个完全使用 javascript 实现的,小型且快速的 javascript 解析器 本次实践我们将使用 acorn.js ,它会帮我们进行词法分析,语法解析并转换为抽象语法树。...项目初始化 // visitor.ts 创建一个Visitor类,并提供一个方法操作ES节点。...目前只实现了几个语法,本文只是提供一个思路。
首先从数组的第一个元素开始到数组的最后一个元素为止,对数组中相邻的两个元素进行比较,如果位于数组左端的元素大于数组右端的元素,则交换这两个元素在数组中的位置。
下面是一个具体的使用例子。 安装 npm install ejs 使用示例 在koa中使用ejs模板引擎。...index.js const Koa = require('koa') const views = require('koa-views') const path = require('path') const...下面我们来手写一个简单的类ejs模板引擎。 需求分析 实现模板引擎先要定义模板的语法,这里我们就重新不定义了,直接使用ejs的语法。...在里面的字符,保留为js逻辑 在里面的字符,保留js逻辑,且其值输出为html代码。 对这些处理方式,着手实现。 正则/<%=(.+?)...其他不是插值的字符,直接\n echo( $1 ); \n,由于正则取反比较复杂,这里巧妙转换一下写法,改为在开头和每个类型二三的结尾加一个 "echo(`",结尾加一个结束符号,也能达到统一的结果。
user.id|safe }">{ user.company } <script src="http://libs.baidu.com/jquery/1.9.0/jquery.<em>js</em>...(model) { return fn.apply(model); }; } 这个我们能用这个模板引擎创建<em>一个</em>我们前端需要的...这里面我们使用正则表达式去匹配字符串中的变量,当然,你要对<em>js</em>正则表达式熟练应用。
console.log(fsm.result) /* nodejs var fs = require('fs'); var str = fs.readFile('fsm6.js
分别创建 index.html 、 main.js 、router.js 和 route.js文件 route.js export class Route { constructor(name,..._handler = handler; } } router.js import { Route } from '..../route.js' export class Router { constructor() { this.mode = 'history' this.routes = []...replace(/\/$/, '') window.kk = window.kk.replace(/#(.*)$/, '') + '#' + route } } } main.js.../router.js' const router = new Router() router.mode = 'hash' router.root = 'http://192.168.1.103:8080
用js实现一个弹出图层,具体效果: 点击按钮后弹出图层,图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题,弹出后背景页面不可点击、背景变灰。...所有代码不分开、放在一个html中显示。 以下是一个简单的JavaScript代码示例: <!...overlay.style.display = "none"; document.body.style.overflow = "auto"; } 该代码使用了CSS样式,包含一个按钮和一个弹出图层...如果想隐藏JS功能逻辑,可用JShaman对JS代码进行混淆加密,加密后的代码是密文状态,不可读、不可分析。
翻下 Json.cn 的源码, 发现是用 jQuery 写的, 代码量不多, 比较有用的就是缩进填充函数 indent_tab 还有类型判断函数 _typeof: function indent_tab...tmp_array.join(',') + '' + indent_tab(indent_count - 1) + '}'; } 递归返回组件 了解原理之后, 再回头想想该如何用 Vue.js...如何实现组件化 JSON由key和val组成, 不妨将它们各自拆分为一个组件; JSON的每一行由key:val组成, key:val合并为item组件....第一个单词 var, 用 const 啊! 好吧我只是为了说明原理, 所以没有用 ES6/7 等高级特性, 没有 webpack 也没有 npm, 全部被我撸在一个 html 里了哈哈哈!...key 组件 组件 key 逻辑比较简单, key 用双引号 " 包起来, 如果是数组的 key, 那就不渲染. 另外再根据层级填充缩进字符即可: <!
用原生js写一个"多动症"的简历 预览地址 源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现。...会动的简历实现思路 这张会动的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果。又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...background: red; } 项目搭建 在这个项目中我们 使用webpack2来完成项目的构建 使用yarn来处理依赖包的管理 使用es6的写法 使用部分原生dom操作api standard.js...代码风格约束利器) 目录结构如下 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...markdownToHtmlWrap) .then(showStylesWrap.bind(null, 2)) 可以看到,代码清爽了很多,纵向发展,应用第一步第二步第三步...一眼就能够看出来,当然实现的逻辑是将原来的相关的模块用Promise
栈 栈是一个「线性」的数据结构。栈最重要的特征是「只允许从一端操作数据」。栈就像一叠书,或者盘子,每次只能从最上边拿,往最上边放。 栈遵循「先进后出」的原则。...看到这里我们就能知道,由于入栈和出栈都在栈顶操作,所以插入或删除一个元素的复杂度为O(1)。 特殊情况下,当栈满的时候,再添加一个元素时,需要重新分配内存且移动所有的数据,复杂度为O(n)。...栈 队列 队列也是一个线性的存储结构,特点是「只能在一端添加数据,在另一端删除数据」,遵循「先进先出」的原则。...我们还是用数组来实现一个单链队列,代码实现如下: class Queue{ constructor() { this.queue = [] } // 入队 enQueue(...用两个栈实现队列。 实现一个栈,要求入栈出栈、返回最小值,且时间复杂度为O(1)。 一个数组实现两个栈。 跟队列相关的面试题: 用两个队列实现栈。 二叉树的广度优先遍历。 ...
下图中 C和D 的部分就是中间键 创建一个js文件 middleware.js 内容如下 const App = () => { const req = { type: 'request...req, res) => { console.log('Response object accessd from get function') }) 执行这段代码 node middleware.js
用原生js写一个"多动症"的简历 预览地址 源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现。...会动的简历实现思路 这张会动的简历,就好像一个打字员在不断地录入文字,页面呈现动态效果。又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...background: red; } 项目搭建 在这个项目中我们 使用webpack2来完成项目的构建 使用yarn来处理依赖包的管理 使用es6的写法 使用部分原生dom操作api standard.js...(代码风格约束利器) 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...markdownToHtmlWrap) .then(showStylesWrap.bind(null, 2)) 可以看到,代码清爽了很多,纵向发展,应用第一步第二步第三步...一眼就能够看出来,当然实现的逻辑是将原来的相关的模块用Promise
OBS studio很酷,但 JavaScript 更酷,现在,我们用 JavaScript 创建自己的录屏功能。 首先,创建一个HTML文件,包含记录按钮和一个播放标签,内容如下: 然后在创建 index.js,监听按钮的点击: let btn = document.querySelector(".record-btn...现在你可能认为选择一个屏幕,然后点击分享,就开始录制了。非也,这个比我们想象中的复杂点。我们要使用 MediaRecorder 来录制我们的视频。...}) // 必须手动启动 mediaRecorder.start() }) 当我们的屏幕被录制下来时,mediaRecorder 会给我们提供分块的数据,我们需要将这些数据存储在一个变量中...---- 代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
可能的问题 Axios的POST请求主体默认是json,但api可能只接受x-www-form-urlencoded编码 一方面,header要添加content-type信息,另一方面,需要引入qs库
又好像一个早已经录制好影片,而我们只是坐在放映机前观看。...接下来让我们一步步完成它 项目搭建 在这个项目中我们 1、使用webpack2来完成项目的构建 2、使用yarn来处理依赖包的管理 3、使用es6的写法 4、使用部分原生dom操作api 5、standard.js...代码风格约束利器) 目录结构如下 最重要的几个模块分别是resumeEditor(简历编辑模块) 、 stylesEditor(简历样式编辑模块) 、 以及vQuery(封装的dom操作模块) 最后app.js...可以看出它做的事就是封装一个构造函数Vquery,它的实例会有一些简单的dom操作方法,最后为了能够像jQuery那样使用$().funcName的形式去使用,我们导出了一个匿名函数,在匿名函数中去new...我们来看一下promise分支中app模块最终的写法 可以看到,代码清爽了很多,纵向发展,应用第一步第二步第三步...一眼就能够看出来,当然实现的逻辑是将原来的相关的模块用Promise包装起来,并且在原来回调函数执行的地方
some-list__item">One Two ; 为了能够让他被编译成常规的方法,我们需要加上注释来定义用哪个函数...React is not defined错误,但是我安装的是作者这个简易的类React包,后来才知道在jsx前要加一段注释来告诉babel编译的时候用哪个函数 /** @jsx Gooact.createElement...如何判断这个节点应该渲染成真实dom的什么样子呢,这里就会有3种情况,第一种就是直接会返回一个字符串,那我们就直接生成一个文本节点,如果返回的是一个我们自定义的组件,那么我们就在调用这个方法,如果是一个常规的...dom, prop, vdom.props[prop]); active.focus(); return dom; } }; Component 组件是最像js...反正笔者看了原文对React框架思路又更加清晰了,最后献上使用这个框架的用例demo
Phi is a minimal code editor designed to look pretty, run fast, and be easy to c...
用Rust和React创建一个富文本编辑器 作者:Arend van Beelen 原文链接:Creating a Rich Text Editor using Rust and React 译者:Yodonicc...我们曾经使用Slate.js——一个很好的编辑器——但是当我们为协作编辑实现我们自己的富文本基元时,我们发现我们自己的基元和Slate的数据模型之间的脱节是一个阻碍因素。...所以我们开始思考——如果我们建立自己的富文本编辑器(RTE, Rich Text Editor)会怎样? 从一个非常高层次的角度来看,一个富文本编辑器是由两个部分组成的。...然后,我们添加了必要的事件处理程序来捕捉用户的互动,这又将再次调用数据模型上的适当逻辑。 那么用户的光标呢?只是另一个我们自己插入的小React组件。...这相对简单,因为我们的用例非常专业,而且它还有一个好处,如果真实DOM中发生任何意外(可能是由于浏览器扩展),我们的算法将简单地将视图恢复到我们基于数据模型的预期。
领取专属 10元无门槛券
手把手带您无忧上云