今天火端开始使用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代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。
用原生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
翻下 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, 那就不渲染. 另外再根据层级填充缩进字符即可: <!
栈 栈是一个「线性」的数据结构。栈最重要的特征是「只允许从一端操作数据」。栈就像一叠书，或者盘子，每次只能从最上边拿，往最上边放。 栈遵循「先进后出」的原则。...看到这里我们就能知道，由于入栈和出栈都在栈顶操作，所以插入或删除一个元素的复杂度为O(1)。 特殊情况下，当栈满的时候，再添加一个元素时，需要重新分配内存且移动所有的数据，复杂度为O(n)。...栈 队列 队列也是一个线性的存储结构，特点是「只能在一端添加数据，在另一端删除数据」，遵循「先进先出」的原则。...我们还是用数组来实现一个单链队列，代码实现如下： class Queue{ constructor() { this.queue = [] } // 入队 enQueue(...用两个栈实现队列。 实现一个栈，要求入栈出栈、返回最小值，且时间复杂度为O(1)。 一个数组实现两个栈。 跟队列相关的面试题： 用两个队列实现栈。 二叉树的广度优先遍历。 ...
用原生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
下图中 C和D 的部分就是中间键 创建一个js文件 middleware.js 内容如下 const App = () => { const req = { type: 'request...req, res) => { console.log('Response object accessd from get function') }) 执行这段代码 node middleware.js
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
用Rust和React创建一个富文本编辑器 作者：Arend van Beelen 原文链接：Creating a Rich Text Editor using Rust and React 译者：Yodonicc...我们曾经使用Slate.js——一个很好的编辑器——但是当我们为协作编辑实现我们自己的富文本基元时，我们发现我们自己的基元和Slate的数据模型之间的脱节是一个阻碍因素。...所以我们开始思考——如果我们建立自己的富文本编辑器（RTE, Rich Text Editor）会怎样？ 从一个非常高层次的角度来看，一个富文本编辑器是由两个部分组成的。...然后，我们添加了必要的事件处理程序来捕捉用户的互动，这又将再次调用数据模型上的适当逻辑。 那么用户的光标呢？只是另一个我们自己插入的小React组件。...这相对简单，因为我们的用例非常专业，而且它还有一个好处，如果真实DOM中发生任何意外（可能是由于浏览器扩展），我们的算法将简单地将视图恢复到我们基于数据模型的预期。
Phi is a minimal code editor designed to look pretty, run fast, and be easy to c...
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
