js
关注
分享
扫一扫
文章平均质量分 54
zhangrui_web
程序媛
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
kbone-多端统一开发工具（小程序）
kbone 是一个致力于微信小程序和 Web 端同构的解决方案。简介微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。这里有个简单的代码片段：https://developers.weixin.qq.com/s/R9Hm0Qm67Acd，可以使用开发者工具打开看看效果。因为 kbone 是通过..转载 2021-12-27 15:55:11 · 766 阅读 · 0 评论 -
React 性能优化技巧(纯干货)
本文篇幅较长，将从编译阶段->路由阶段->渲染阶段->细节优化->状态管理->海量数据源，长列表渲染方向分别加以探讨。一 不能输在起跑线上，优化babel配置,webpack配置为项1 真实项目中痛点当我们用create-react-app或者webpack构建react工程的时候，有没有想过一个问题，我们的配置能否让我们的项目更快的构建速度，更小的项目体积，更简洁清晰的项目结构。 随着我们的项目越做越大，项目依赖越来越多，项目结构越来越来...转载 2021-01-22 10:56:20 · 12214 阅读 · 3 评论 -
NW.js之window篇(4)
4.1 window api 概述 4.2 获取和创建窗口 4.3 window对象属性和方法 4.3.1 Window.window 4.3.2 Window.x/Window.y 4.3.3 Window.width/Window.height 4.3.4 Window.title 4.3.5 Window.menu 4.3.6 Window.isFullscreen...转载 2018-09-20 14:54:17 · 6844 阅读 · 2 评论 -
NW.js之入门篇(1)
目录1.1 环境安装 1.1.1 windows下的安装 1.1.2 linux环境下的安装 1.2 hello world1.1 环境安装webkit是开源项目，项目地址为https://github.com/rogerwang/node-webkit。我们可以在该项目首页找到downloads节（https://github.com/rogerwang/node-we...转载 2018-09-20 14:56:46 · 3813 阅读 · 0 评论 -
NW.js之Native UI API概览(3)
目录node-webkit学习(3)Native UI API概览3.1 Native UI api概览 Extended Window APIs. Menus. Platform Services. Tips. 3.2 注意事项 3.3 EventEmitter 3.4 小结3.1 Native UI api概览Native UI API，是提供了在代码中访...转载 2018-09-20 14:59:02 · 885 阅读 · 0 评论 -
NW.js之基础篇（2）
2.1 基本程序结构 2.2 package.json 2.2.1 必须的配置 2.2.2 特性控制字段 2.3 小结2.1 基本程序结构如上图，是一个nw程序的基本组织结构，在根目录下package.json,程序的配置文件；index.html(可以是任意名称)，应用的启动页面；js/css/resources，应用的样式、脚本、html、图片等资源文件；node_mo...转载 2018-09-20 15:03:14 · 1407 阅读 · 0 评论 -
nwjs解决页面透明化，启动时显示白屏的问题
在html页面实现：<body style="background-color:rgba(0,0,0,0)">在package.json 文件中实现"window": {"frame": false,"transparent": true}好了可以透明化了，可是就是显示的时候有一闪的白屏，白屏就闪了一下，怎么办继续在package.json中添加文件"sho...转载 2018-09-20 15:22:29 · 1830 阅读 · 0 评论 -
react如何显示HTML之dangerouslySetInnerHTML
在react中，通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示。在显示时，将内容写入__html对象中即可。具体如下： <div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />如果是直接调用接口中的值，则是以上的写法，如果是单纯的显示固定的内容，用如下的写法...转载 2018-09-28 15:02:59 · 6700 阅读 · 0 评论 -
electron窗口和主进程通信ipc
Electron与前端通信ipcconst electron = require('electron')const { app } = electronconst ipc = require('electron').ipcMainconst { BrowserWindow } = electronlet winipc.on('getMsg', (sys, msg) =&g...转载 2018-10-23 14:06:15 · 1831 阅读 · 0 评论 -
h5+实现手机端的录音，拍照，录像
使用h5+即h5plus可以实现调用手机的功能实现语音的录制播放，图片上传下载，拍照，录像的功能，并提供上传下载的功能。开发工具使用hbuilder，该开发工具有模板和demo可以参考实现快速的开发app功能。使用h5调用硬件的功能，实现原生的效果，前端开发app周期短，开发速度快，入门门槛低，hbuilder还提供了一个mui库，可以实现很多手机原生ui的效果。上传下载参考：https://...转载 2019-03-06 16:44:13 · 7991 阅读 · 0 评论 -
Less中使用calc()的坑
前端开发者们对于calc()已经不陌生了，它是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来计算元素的长度。使用示例如下：div { height: calc(100vh - 88px);}需要注意的只有一点：中间的运算符两头都要有空格！！！同样的代码写在less中，就出现问题了。最终结果可能变成了：div { height: ca...转载 2019-05-16 19:00:41 · 2516 阅读 · 0 评论 -
Vue3.0时代即将到来
在10月05日凌晨Vue3的源代码正式发布了，来自官方的消息：目前的版本是Pre-Alpha ，作者表示，Vue 3 主要的架构改进、优化和新功能均已完成，剩下的主要任务是完成一些 Vue 2 现有功能的移植。仓库地址：Vue-next， 可以通过Composition API了解更多新版本的信息， 目前版本单元测试相关情况vue-next-coverage。Vue 3...原创 2019-10-09 09:23:16 · 5884 阅读 · 0 评论 -
Electron前端开发桌面程序--入门篇
前言前端开发桌面程序这个概念已经出现有一段时间了，这项技术也已经走向成熟，Github上nw和光electron的star就差不多有10w颗星了，github也衍生出了很多开源的桌面项目俨然成了一个热门项目。既然这么热，那就一个字：学。本文主要帮助js基础比较薄弱，又没有接触过electron的同学更好的学习electron，文中有什么不足之处或者错误，欢迎指出。electron 安装npm命令安...转载 2018-06-15 13:31:24 · 23345 阅读 · 1 评论 -
Nerv - 京东高性能前端框架
Nerv 是一款由京东凹凸实验室打造的类 React 前端框架。目前已广泛运用在京东商城（JD.COM）核心业务及TOPLIFE全站。Nerv 基于React标准，使用 Virtual Dom 技术，拥有和 React 一致的 API 与生命周期，如果你已经对 React 使用非常熟悉，那么使用 Nerv 开发对你来说绝对是零学习成本。与此同时，相比于 React 以及市面其他同类型框架，Nerv...转载 2018-06-14 09:39:33 · 5393 阅读 · 0 评论 -
多端统一开发框架 - Taro
Taro 是什么？Taro - 多端开发框架Taro 是由京东 - 凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。现如今市面上端的形态多种多样，Web、App 端(React Native)、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Tar...转载 2018-06-14 09:32:51 · 3909 阅读 · 0 评论 -
身份证号码的正则验证
手机号码，身份证号码的正则验证是我们开发中很常用到的东西，而大部分的身份证号码验证也只不过只是验证了身份证号码的长度及几个关键数字的匹配。怎样能更加完善的验证身份证号码呢？如下代码可以进一步的提高身份证号码的验证精密度：var cardValid = function (value) { var ex = /^((1[1-5])|(2[1-3])|(3[1-7])|(4[1-6])|(5原创 2017-04-25 13:46:15 · 1654 阅读 · 0 评论 -
canvas学习笔记
1、前言 canvas一般就是用来绘制图像的2、基本知识 上下文对象 var canvas = doucment.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "color";// 填充样式 ctx.strokeStyle = "color";//边框样式 ctx.fill();//填充...转载 2018-02-26 12:22:55 · 277 阅读 · 0 评论 -
canvas简易绘图（海绵宝宝篇）
最近在研究canvas，简单的用canvas绘制了一下卡通人物--海绵宝宝。图片如下：代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>canvas海绵宝宝</title> </head> &原创 2018-02-26 13:47:40 · 12422 阅读 · 0 评论 -
为企业级框架和应用而生--Egg.js
一. Quick StartEgg是一个强约束的Node框架，这也会其和Express/Koa最大的不同，后者对开发者相对宽松，主要体现在目录结构，编写方式等均可以自定义。Egg对目录结构等有一系列要求，幸运的是，虽然官方文档几乎是鸭蛋，但是Git上的官方人员还是很贴心的给我们送上了一个自动生成项目目录以及一些简单例子的方式，我们可以来看下：执行如下命令来安装egg-init，在*nix系统下有可...转载 2018-02-27 17:29:49 · 1195 阅读 · 0 评论 -
支付宝框架UmiJs（五米）
最近有发现了一套dva过后的新的React应用框架--UmiJs（当然也可叫做“优米”或者“五米”）。不知道，对UmiJs这套框架有所了解的小伙伴们，对这套框架有什么看法呢？请留言哦！也是刚刚了解这套框架，那么废话少说我们来切入主题吧。umi 就是一套零配置，按最佳实践进行开发的前端框架。具有以下几点特性：1、高性能 PWA、按需加载、tree-shake、scope-hoist、智能提取公...原创 2018-02-27 17:10:26 · 13638 阅读 · 0 评论 -
react前端框架dva(二)
dva的8个基础概念：数据流向 数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且...转载 2018-03-19 09:12:47 · 5615 阅读 · 2 评论 -
react前端框架dva(一)
react前端框架dva最近正在看dva框架，发现这是一个很好应用于react的框架。 众所周知，react的学习成本是较高的，而antd推出的这款框架，大大的降低了react的学习成本。dva简化了 react-redux 的部署的文件复杂度。使其清晰易懂。相信熟悉redux 的人，并不需要了解太多知识就能很快的上手。Dva的安装首先需要安装的是 dva-cli 。dva-...转载 2016-11-18 10:21:34 · 21869 阅读 · 0 评论 -
react前端框架dva(三)
API输出文件dva默认输出文件。dva/router默认输出 react-router 接口， react-router-redux 的接口通过属性 routerRedux 输出。比如：import { Router, Route, routerRedux } from 'dva/router';dva/fetch异步请求库，输出 isomorphic-fetch 的接口。不和 dva 强绑定，...转载 2018-03-22 11:23:47 · 10567 阅读 · 0 评论 -
react前端框架dva(四)
dva.js 知识导图不知大家学 react 或 dva 时会不会有这样的疑惑：es6 特性那么多，我需要全部学会吗?react component 有 3 种写法，我需要全部学会吗?reducer 的增删改应该怎么写?怎么做全局/局部的错误处理?怎么发异步请求?怎么处理复杂的异步业务逻辑?怎么配置路由?...这篇文档梳理了基于 dva-cli 使用 dva 的最小知识集，让你可以用最少的时间掌握...转载 2018-03-22 11:40:52 · 4510 阅读 · 1 评论 -
WebSocket入门篇
一、为什么需要 WebSocket？初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续...转载 2018-04-14 16:51:13 · 238 阅读 · 0 评论 -
Three.js与canvas实现地球自转动画
效果如上图实现代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>旋转球体</title> <style> body{ margin: 0;原创 2018-06-06 13:40:25 · 7243 阅读 · 0 评论 -
js屏幕自适应浏览器高度
Document body{ margin:0; padding:0; } autoheight(); function autoheight(){ var winHeight=0; if (window.innerHeight) winHeight = window.innerHeight; else if ((document.原创 2017-04-25 13:21:45 · 5019 阅读 · 0 评论