前端技术总结
已转行此号停用
这个作者很懒,什么都没留下…
展开
-
Android开发Web相关
零、混合开发概念混合开发是一种开发方式(模式),开发一个App时候,一部分功能用原生(native)构建,一部分功能用html5构建,这样用两种方式合作开发出来的App叫Hybrid App。原生开发原生开发是基于手机本地操作系统如IOS,Android,利用官方提供的开发语言、开发类库、开发工具进行App开发 。用这种方式开发出来的App,叫native app-本地app。Native App业务逻辑代码在本地,操作系统能对Native App进行有效性能约束(比如内存不能占用太多、流量转载 2020-09-27 14:32:50 · 93 阅读 · 0 评论 -
两个span元素中间的空格间隙
初学html、css的同学是不是遇到过这样一个问题?一对好朋友(两个span元素)之间总是存在间隙。就像下图那样:这是一对不快乐的 span,因为他们中间有了间隙当我们给span元素添加了内容时,两个相邻的span元素的文字之间有一个间隙问:那么这个间隙到底是什么呢?其实它是一个空格。问:那这个空格时怎么来的呢?首先先来看看我们平时的代码书写习惯吧我们是优秀的程序猿,代码要求格式要规范,所以我第二个span换行了而就是这个没毛病的换行,让两个span差生了间隙。.原创 2020-09-09 15:37:14 · 1747 阅读 · 1 评论 -
kbone 高级 - 扩展 dom/bom 对象和 API
kbone 能够满足大多数常见的开发场景,但是当遇到当前 dom/bom 接口不能满足的情况时,kbone 也提供了一系列 API 来扩展 dom/bom 对象和接口。这里需要注意的是,下述所有对于 dom/bom 对象的扩展都是针对所有页面的,也就是说有一个页面对其进行了扩展,所有页面都会生效,因此在使用扩展时建议做好处理标志,然后判断是否已经被扩展过。1、用法1.1 使用 window.$$extend 对 dom/bom 对象追加属性/方法举个例子,假设需要对 window.locat原创 2020-09-09 15:35:54 · 116 阅读 · 0 评论 -
kbone 高级 - 自定义 app.js 和 app.css
在开发过程中,可能需要监听 app 的生命周期,这就需要开发者自定义 app.js。1、用法1.1 修改 webpack 配置首先需要在 webpack 配置中补上 app.js 的构建入口,比如下面代码的 miniprogram-app 入口:// webpack.mp.config.jsmodule.exports = { entry: { 'miniprogram-app': path.resolve(__dirname, '../src/app.js'),原创 2020-09-09 15:35:49 · 285 阅读 · 1 评论 -
开发Web应用为啥要使用TypeScript?
一、什么是 TypeScriptTypeScript 是近几年被火爆的应用了,这让大家产生了一个错觉:这么多的拥护者,难道TypeScript是一个新的语言?TypeScript是微软公司开发和维护的一种面向对象的编程语言。它是JavaScript的超集,包含其所有元素。TypeScript完全遵循OOPS的概念,在TSC(TypeScript编译器)的帮助下,我们可以将TypeScript代码(.ts文件)转换成JavaScript(.js文件)TypeScript是JavaScrip原创 2020-09-09 15:35:33 · 181 阅读 · 0 评论 -
前端企业面试题:企业真实案例——27
现在有一个json, 在某一维度中可能出现'score'键, 请使用任意语言写一个check方法判断该json是否满足要求. 要求如下:a. 任意一个键为score的值预期是整型数字且大于60, 则检查通过b. 若不存在键为score的值, 则检查通过这道题目本身的质量是不错的, 可惜出题的人语文可能不太好.最讨厌这种看似严谨实则不会说人话的题目描述, 因为题目中一旦出现歧义, 你无法通过日常语言习惯进行判断. 题目要求a明显就是有歧义的.我按照我的理解, 尝试把它翻译成人类能看懂的话. 内原创 2020-09-09 15:35:15 · 273 阅读 · 1 评论 -
kbone 高级 - 使用小程序内置组件(二)
2.5 编写系列组件2.5.1 App.vue在src/index下创建App.vue文件,内容如下:<template> <div> <ul class="tab"> <li class="tab-item" :class="{selected: wxPrefix === 0}" @click="wxPrefix = 0">wx-component 用法</li> <li class...原创 2020-09-08 14:19:37 · 113 阅读 · 1 评论 -
Electron使用指南——18项目打包部署
1、基本概念本节我们将介绍打包和分发我们的项目,内容包括代码签名和添加发布自动应用程序更新的功能。为此,我们将使用electron builder模块。electron Builder 已成为打包 electron 几乎所有我们需要的所有功能,包括一个非常简单的使用electron更新。我们应该听说将应用程序更新推送到官方的服务器。这里Mac应用程序商店需要一个专用的应用程序更新服务器。在配置和维护时,这通常增加了复杂性。所以在使用electron Builder时,我...原创 2020-09-04 14:07:13 · 576 阅读 · 0 评论 -
Electron使用指南——17定制菜单
本节为大家介绍如何为我们的应用定制一个菜单,让它看起来更像一个原生的桌面端APP。1、载入菜单模块在renderer的/public/index.html里载入菜单模块:<script> const { remote, shell } = require('electron')</script>2、定制菜单修改/src/App.vue,在mounted里定制菜单:<script>// ...export default...原创 2020-09-04 14:06:52 · 443 阅读 · 0 评论 -
Electron使用指南——搜索信息
搜索信息的思路:在/src/components/Header.vue组件里获取到用户从搜索框里的关键字(keyword),保存在Store里,再做个getter, 过滤items信息,修改Main.vue组件的渲染信息源。1、定制 Store修改src/store/modules/main.js:// ...const state = { // ... keywords: ''}const mutations = { // ... chang...原创 2020-09-04 14:06:40 · 369 阅读 · 0 评论 -
Kbone基础——5Kbone + Vue 项目手工搭建流程
此方案基于 webpack 构建实现,构建 web 端代码的流程无需做任何调整,此处只介绍如何将源码构建成小程序端代码。1、搭建 webpack 环境在本地手工搭建一个 webpack 环境。在任意目录下执行以下命令:// 创建项目目录mkdir kbone-vue-project// 生成 Node 包管理配置文件cd kbone-vue-projectnpm init -y// 安装 webpack, webpack-clinpm install webpack webpa原创 2020-09-04 14:06:24 · 163 阅读 · 0 评论 -
kbone 基础——6Kbone + React 项目手工搭建流程
1、搭建 webpack 环境在本地手工搭建一个 webpack 环境。在任意目录下执行以下命令:// 创建项目目录mkdir kbone-react-project// 生成 Node 包管理配置文件cd kbone-react-projectnpm init -y// 安装 webpack, webpack-clinpm install webpack webpack-cli --save-dev2、编写 webpack 配置2.1 webpack.mp.config.原创 2020-09-04 14:06:17 · 244 阅读 · 0 评论 -
Electron使用指南——13显示列表
屏幕快照的图片获取生成以后,将返回的信息显示在列表里。1、重新规划 Store重新规划 Store, 使用Vuex模块来分开管理数据。在/src/store/创建modules文件夹, 在文件里创建main.js与modal.js两个文件。将/src/store/index.js文件里的代码迁移到modal.js里,做修改。三个文件的内容如下:1.1 index.js修改/src/store/index.js:import Vue from 'vue'i...转载 2020-09-02 13:54:59 · 594 阅读 · 1 评论 -
Electron使用指南——Renderer Process API
Renderer Process APIRenderer API 主要包括remote、Browser window proxy、desktop CaptureRenderer Process APIremoteBrowser Window Proxydesktop Capture1、remote (服务端对象)1.1 index.html<!DOCTYPE html><html> <head> <meta charset.转载 2020-08-28 14:15:13 · 623 阅读 · 1 评论 -
Electron使用指南——IPC 通信
IPC 通信1、index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'"> <title>Hello World!</title> </h转载 2020-08-28 14:15:05 · 1771 阅读 · 1 评论 -
Electron使用指南——特性和技巧
共享API (Shared API)本节重点讲解process、screen、shell、nativeImage、clipboard几个部分内容。1、process (进程)1.1 index.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Security-Policy" content="sc..转载 2020-08-28 14:14:57 · 838 阅读 · 1 评论 -
Electron使用指南——共享API (Shared API)
特性和技巧本节我们来学习一下Electron其他特性和使用技巧。1、Offscreen 渲染// Modulesconst {app, BrowserWindow} = require('electron')const fs = require('fs')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the ..转载 2020-08-28 14:14:48 · 705 阅读 · 1 评论 -
Electron使用指南——Main Process API
Main Process APIElectron API (Electron API 有三种)Main Process (主进进程)Renderer Process(渲染进程)Share Modules(共享模块)App事件ready:当 Electron 完成初始化时被触发。两种使用方法app.on('ready', createWindow)app.on('ready', () => { console.log('App is ready!') crea转载 2020-08-28 14:15:19 · 788 阅读 · 1 评论 -
Electron使用指南 - [01] 介绍
Electron 介绍1、概览想必你已经听说了可以应用electron来构建令人惊叹的桌面应用程序!单纯使用JavaScript API 就可以构建Mac, windows或者Linux应用程序。长期以来,很多开发语言都保留了生成桌面应用程序的功能,比如C和Java,但是用这些语言来构建应用程序是非常困难的。当然,近年来,构建本地应用程序变的更加灵活,但您仍然需要为每个操作系统学习不同的语言并使用非常特定的工具进行开发。而如今,在Mac,Windows和Linux系统上,原创 2020-08-27 13:57:52 · 282 阅读 · 0 评论 -
谈谈模块化的 require 和 import
一、区别require是commonjs的规范,在node中实现的api,import是es的语法,由编译器处理。所以import可以做模块依赖的静态分析,配合webpack、rollup等可以做treeshaking。 commonjs导出的值会复制一份,require引入的是复制之后的值(引用类型只复制引用),es module导出的值是同一份(不包括export default),不管是基础类型还是应用类型。 写法上有差别,import可以使用import * 引入全部的export,也可以使原创 2020-08-27 13:57:24 · 193 阅读 · 0 评论 -
浅谈koa中间件的实现原理
koa中间件的实现原理如何?先来看一个例子。koa的执行顺序是这样的:const middleware = async function (ctx, next) { console.log(1) await next() console.log(6)}const middleware2 = async function (ctx, next) { console.log(2) await next() console.log(5)}const middlewar原创 2020-08-27 13:56:56 · 212 阅读 · 0 评论 -
如何用typescript写一个处理console的babel插件
技术点介绍通过这篇文章你可以学到:ts-mocha和chai来写测试用例, 如何写一个babel插件, 如何用schame-utils来做options校验, typescript双重断言的一个应用场景 如何组织测试代码一、前言console对象对前端工程师来说是必不可少的api,开发时我们经常通过它来打印一些信息来调试。但生产环境下console有时会引起一些问题。如果项目报了一个bug,console对象被重写了但是没有把所有的方法都重写,导致了报错,另外考虑到console会原创 2020-08-27 13:56:22 · 522 阅读 · 0 评论 -
Electron使用指南 - [02] 搭建 Electron 运行环境
1、安装 Electronnpm install electron -S2、尝试官网的一个案例# 克隆这仓库git clone https://github.com/electron/electron-quick-start# 进入仓库cd electron-quick-start# 安装依赖库npm install# 运行应用npm start原创 2020-08-27 13:55:12 · 264 阅读 · 0 评论