【编写一个供浏览器端使用的NPM包】的更多相关文章

编写一个供浏览器端使用的NPM包

此文已由作者吴维伟授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在编写程序时,总会有一些代码是我们不愿意一遍又一遍重复地去写的,比如一些UI或交互相似组件,或是一些相似的流程或逻辑.以前,面对这样的情况,我会将可以复用的部分抽象出来,做成可以复用的模块,放在专门存放公用模块的文件夹中,便于查找和引用.但是这样只能解决单个项目中公用模块复用的问题,如果你的模块需要被多个项目复用,那么就需要另寻它法了.本文讨论的是通过发布npm包来实现模块复用时有哪些注意事项. 新建一个…

编写一个 Chrome 浏览器扩展程序

浏览器扩展允许我们编写程序来实现对浏览器元素(书签.导航等)以及对网页元素的交互, 甚至从 web 服务器获取数据,以 Chrome 浏览器扩展为例,扩展文件包括: 一个manifest文件(主文件,json格式) 至少一个HTML文件(主题可以没有HTML文件) JavaScript文件 (可选,非必须) 任何其他你需要的文件(比如图片) 将这些文件放在一个文件夹内,并通过浏览器提供的打包程序进行打包,就可以发布使用了. 这里以一个简单的例子,说明 Chrome 扩展的创建和运行过程. 首先创…

一个在浏览器端将html 转为pdf 的js 插件 jsPDF

<!DOCTYPE html> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="https://code.jquery.com/jquery-git.js"></script&g…

从0到1发布一个npm包

从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.APP往往是不同的业务.不同的代码库中,尽管已经将公用的组件和方法抽离到各自公共common中,但是各个大业务大方向上的公用封装依然不能满足需求. 比如一个计算文档类型大小的方法,可能都同时存在于各个业务的common中,假设是有3处代码库中均有:如果此时的需求是将文档类型或者大小的方法进行一些修改,…

Html5浏览器端less应用

之前的一个布局是用rem来做的 我上一段代码 div { margin: 0.833333333rem 0; } /* 去处a标签的下划线*/ a { text-decoration: none; } .one { width: 30rem; /*100/720*30*/ height: 4.166666667rem; /*图片宽750,高100*/ background: url("./img/head.png"); background-size: contain; } .two…

Node.js 最早 npm 包 request 将被废弃

相信 Node.js 开发者对 Request 都不会陌生,这是一个 Node.js 模块,以 npm 包的形式提供,是一个简单的 HTTP 客户端,通过它可方便地实现 HTTP 请求. 可以看到,request 的最新版本是 2.88.0,更新日期是八个月前. 近日 request 作者 Mikeal Rogers 表示 request 已进入维护模式,并停止考虑添加新功能或发布主要版本. request 是添加到 npm 包仓库最早的模块之一,随着 npm 的发展,越来越多的应用依赖于 re…

SeaJS：一个适用于 Web 浏览器端的模块加载器

什么是SeaJS?SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容.在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definition)规范.SeaJS本身遵循(Keep it Simple, Stupid)理念开发,API仅有几个. 为什么用SeaJS?假如我们要开发一个web应用App,在这个应用中需要使用jquery框架.App的首页index.html会用到module1.js,module1.js依赖module2…

2道acm编程题（2014）：1.编写一个浏览器输入输出（hdu acm1088）；2.encoding（hdu1020）

//1088(参考博客:http://blog.csdn.net/libin56842/article/details/8950688)//1.编写一个浏览器输入输出(hdu acm1088)://思路:对已经输入的字符串进行处理,遇到<br><hr>分别进行处理.遇到多于80个字符(统计该行的长度)或者<br>或者结束,则换行:遇到<hr>,输出80个'-'.#include<stdio.h>#include<string.h>#d…

Java基础---Java---网络编程---TCP的传输、客户端和服务端的互访、建立一个文本转换器、编写一个聊天程序

演示TCP的传输的客户端和服务端的互访 需求:客户端给服务端发送数据,服务端收到后,给客户端反馈信息. 客户端: 1.建立Socket服务,指定要连接方朵和端口 2.获取Socket流中的输出流,将数据写到该流中,通过网络发送给服务端. 3.获取socket流中的输入流,将服务端反映的数据获取到,找打印. 4.关闭客户端. 客户端: class TcpClient2{ public static void main(String[] args) throws Exception{ Socket…

JAVA WEB快速入门之从编写一个基于SpringBoot+Mybatis快速创建的REST API项目了解SpringBoot、SpringMVC REST API、Mybatis等相关知识

JAVA WEB快速入门系列之前的相关文章如下:(文章全部本人[梦在旅途原创],文中内容可能部份图片.代码参照网上资源) 第一篇:JAVA WEB快速入门之环境搭建 第二篇:JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构.调试.部署 第三篇:JAVA WEB快速入门之通过一个简单的Spring项目了解Spring的核心(AOP.IOC) 第四篇:JAVA WEB快速入门之从编写一个基于SpringMVC框架的网站了解Maven.SpringMVC.Spri…

在浏览器端用es6，babel+browserify打包

写得最清楚的是这个系列: 一个普通的写网页的人如何过渡到ES6 (一) 感觉比babel官网写得还清楚点. 看完这个才有点理解node原来不只是用来起express后端web server,更主要用途是作为开发时,用npm作为js语言的包管理器,然后打包,管理浏览器端<script>字段的js.有了npm+打包工具:写程序时 按包.模块,文件夹,单元测试这样写,然后打包成1个文件,供浏览器下载运行. 而不是在html手写一堆<script></script>,还要考虑先…

Web 2.0 浏览器端可靠性测试第2部分(如何发现和分析 Web 2.0 浏览器端的内存泄漏)

介绍浏览器端的可靠性测试 在上一编文章中我们介绍了浏览器端可靠性测试的概念.测试方法.以及常用的测试和分析工具.我们知道,浏览器端可靠性测试,就是以浏览器为测试平台,通过模拟用户在真实场景下的页面操作(点击.拖拽),来发现 Web 应用中潜在可靠性问题的测试.测试目的是确保 Web 应用在浏览器上能达到令人满意的用户体验和可靠性. 在浏览器的可靠性测试中,我们的测试重点,简单地说,就是浏览器进程的内存泄露.发现和分析这些内存泄露问题就是我们测试工作的主要目的.一般来说,我们可以通过手工测试.自动…

html5 浏览器端数据库

为什么使用浏览器端数据库:随着浏览器的处理能力不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少用户等待从服务器获取数据的时间. 一.localStorage  — 本地存储  可以长期存储数据,没有时间限制. 可以存储 :数组.json数据.图片.脚本.样式文件 function test(){ if(window.localStorage){//判断浏览器是否支持 localStorage var ls=window.localStorage; ls.setItem("n…

FingerprintJS - 在浏览器端实现指纹识别

FingerprintJS 是一个快速的浏览器指纹库,纯 JavaScript 实现,没有依赖关系.默认情况下,使用 Murmur Hash 算法返回一个32位整数.Hash 函数可以很容易地更换. 官方网站      立即下载 什么是指纹识别 FingerPrint 即我们常说的指纹识别,使用手指和拇指前端的纹理按下的纹印来鉴定身份.指纹是鉴别身份的一种可靠的方法,因为每个人的每个指头上的纹理排列各不相同而且不因发育或年龄而改变. 什么是浏览器指纹? 其实这是 Electronic Front…

"浏览器端" 使用 commonjs 模块规范开发网页应用，像开发 node 那样开发网页应用

Containjs 1.0 Containjs 是什么? Containjs 是一个基于 Commonjs 模块管理规范的 浏览器端 的 JavaScript 模块加载器(目前为非标准的,代码会持续迭代,现阶段主要提供思路,想集结各路 js 大神一同完善) Containjs 项目地址 Containjs 使用 获取 Containjs 去 gitHub 下载 页面下载文件. 目录结构 Containjs 目前的目录结构非常简单,项目中 JavaScript 都放在一个 "js" 目录…

实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. 话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request) 1.浏…

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D…

【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一遍. vue上手相对react来说是比较简单的,对于vue的基本指令以及语法,应该没有什么能比官网更详细,更生动的了.仔细想来,vue值得一说的,在项目中会让新手感到困惑的,是vue的组件,今天就最近工作中用到的一个pdf查看组件,和大家聊聊vue的组件.最后会讲如何将自己的代码封装成一个npm包,…

用 Go 编写一个简单的 WebSocket 推送服务

用 Go 编写一个简单的 WebSocket 推送服务 本文中代码可以在 github.com/alfred-zhong/wserver 获取. 背景 最近拿到需求要在网页上展示报警信息.以往报警信息都是通过短信,微信和 App 推送给用户的,现在要让登录用户在网页端也能实时接收到报警推送. 依稀记得以前工作的时候遇到过类似的需求.因为以前的浏览器标准比较陈旧,并且那时用 Java 较多,所以那时候解决这个问题就用了 Comet4J.具体的原理就是长轮询,长链接.但现在毕竟 html5 流行开来…

JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署

接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的基本结构.调试.部署,至于为什么要先写JSP WEB,而不是直接上SSM(Spring.SpringMVC.Mybatis),原因很简单,先得了解基础,再由浅入深,这是我的学习方法,如果一开始就写MVC,那么顶多也是照葫芦画瓢,很难深入,因为不知道原理,就无法扩展与灵活运用.好了废话不多说,开始本文的主题.…

如何让Node.js运行在浏览器端

Node.js又称服务端JavaScript.今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript.尽管这种方式有其局限性,但是还是可以用的. 1.安装库 npm install -g browserify 2.转换 browserify test.js > index.js 或 browserify test > index.js 或 browserify test.js -o index.js 以上三种方式均可行 参考资料:如何让node…

基于HTTP可供浏览器调用的本地打印程序

之前给公司做打印都是用ActiveX控件,只支持IE浏览器,最近需要支持谷歌,又不想去学谷歌插件编写,于是就用本地启动一个http服务器来供浏览器调用(写成windows服务更好),同事用了都说好(笑)!为了方便大家使用,重新简单的封装了一下,源码下载:点我下载 源码简单的封装了一个webserver(基于httplistener,可以使用Nancy框架代替),可以大致了解HTTP服务器处理的流程:APACHE,NINGX等服务器主要负责响应浏览器HTTP(基于SOCKET)的请求,并将请求转交…

在2018年如何优雅的开发一个typescript语言的npm包？

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小明plus发表 很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用, 那么在 2018 年,如果我想要初始化这样的一个模块,我需要做哪些步骤呢?: 答案是:创建一个优雅的,对开发者友好的模块,至少需要以下 15 个步骤 初始化文件夹,初始化 git 仓库,初始化 npm,初始化 tsc 修改 tsconfig.js 配置 添加 npm 脚本 添加 tslint 校验代码规则以及 ed…

【PHP】五分钟教你编写一个实时弹幕网站

由于博主是个忠实的英雄联盟粉丝,所以经常观看一些明星大神的直播.而一谈到直播,肯定会看到满屏幕飘来飘去的弹幕.那么问题来了,这些视频弹幕网站如何做到实时同步的?PHP如何开发一个类似的网站? 首先要搞定的是前端页面,最起码得有个框,让弹幕飞起来吧.一想到前台,博主头就大(毕竟我不喜欢去扣前端代码,而且做出来的东西还巨丑).那咱们就百度一下吧,看看有什么好用的弹幕插件,现在开源的东西那么多. 经过搜索,找到了一个jQuery.danmu.js的开源项目.看了一下star的人还挺多.https://…

浏览器端Less

摘要: 之前项目用过Less,现在负责的项目也要使用,所以就总结下Less,也方便以后查看.本文主要是讲浏览器端如何使用Less. 简介: LESS是一种由Alexis Sellier设计的动态层叠样式表语言.LESS 是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被替换为JavaScript.受益于JavaScript,LESS可以在客户端上运行(IE6+.Webkit.Firefox),也可以在服务端运行(Node.js.Rhino). 本质上,LESS 包含一套自定…

Vue 全家桶 + Electron 开发的一个跨三端的应用

代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 Vue.js 实现 objc中国 的跨平台全栈应用 ✅ 桌面应用,支持 Mac.Linux.Windows 三个平台 ✅ Web 应用,支持 桌面浏览器 和 手机浏览器 ✅ 手机 App,目前只支持了 Cordova 框架,支持 iOS.Android.Windows Phone.BlackBerr…

Web 2.0 浏览器端可靠性测试第1部分(浏览器端可靠性测试的概念和背景)

Web 2.0 是一个体现当代网络技术发展趋势的流行概念.它使得基于 Web 的信息交互和用户间协作性更加灵活和丰富.很多的社交网站.博客.wiki,都是 Web 2.0 技术的典型应用. 我们知道,Web 2.0 最突出的特色就是丰富的客户端技术:而客户端技术中,最基本也最重要的技术就是 JavaScript.通过大量的 JavaScript 脚本,我们可以创建动态的页面展示,活泼的界面效果,以及与服务器之间进行数据交互等. 然而,我们往往忽略了一个重要问题,就是大量使用这些 JavaScri…

Vue服务端渲染 VS Vue浏览器端渲染)

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D…

Electron构建一个文件浏览器应用(二)

在前一篇文章我们已经学习到了使用Electron来构建我们的文件浏览器了基础东西了,我们之前已经完成了界面功能和显示文件或文件夹的功能了,想看之前文章,请点击这个链接  .现在我们需要在之前的基础上来继续完成余下的功能,我们之前的只完成了界面和显示文件夹或文件.那么这篇文章我们需要完成如下功能: 1. 如果它是一个文件夹,我们可以对该文件夹进行双击,然后打开该文件夹.2. 当前文件夹就是刚刚我们双击的那个文件夹.3. 如果它内部有子文件夹的时候,我们也可以双击,然后重复第一步的操作步骤. 那么在…

设计和编写一个异步通用Picker选择器，用于时间日期、城市、商品分类的选择

目录 一.功能规划 二.最底层基础实现 (1)Picker界面和功能实现 (2)不同类型的选择器基础实现 三.数据源层 (1)时间日期 (2)多级同步分类,如:城市 (3)多级异步分类,如:城市 四.最终的调用层 回到本初,看到多年前写的一段移动端App内嵌入的H5兼容处理代码,有段专门兼容处理输入框类型的代码: 针对Android 5.0.1,5.0.2 time类型的输入框统统改成text类型(当年的记忆犹新:这两个版本有些手机上的弹框居然只有重置和取消两个按钮,被客户叼了一顿); 不管是I…