冬晴分身
冬晴分身

360前端星计划0412

小程序，大世界

1.简介

1.1 小程序解决了什么问题

  • 技术方向
    • H5(白屏时间长，调用系统能力弱)
    • 提高启动速度
      • 本质是数据和展示更彻底的分离
      • 符合数据驱动的前端优势
    • 实现最大限度地宿主能力外放
    • APP(体验好，开发成本高)
    • 开发成本降低
    • 技术统一
    • 多平台展现逻辑一致
    • 跨平台解决方案
  • 非技术方向
    • 审核保证应用合法性(审核后才放心下发更多权限)
    • 平台优势
    • 推广入口
    • 拉活手段
    • 配套工具
      • 微信开发者后台的分析报告

1.2 相关的技术栈

HTML/CSS/JavaScript

  • NodeJS
  • 移动端适配
  • HTTP协议/HTTPS
  • OAuth2
  • GIT

1.3 主流的小程序平台

微信小程序、支付宝小程序、百度小程序、头条小程序、京东小程序、快应用、钉钉小程序、360小程序（基于PC的小程序）

1.4类似小程序的技术

  • Cordova: 通过webview渲染，通过插件调用系统服务
  • PWA：Service Worker和PushAPI
  • React Native/Weex:JavaScript通过JavaScriptCore等执行，并通过Bridges和Native组件交互
  • Flutter：Dart直接与独立系统的UI库进行交互

2.小程序技术架构

2.1文件结构及其含义

.json后缀的JSON配置文件

app.json

  • 职责：小程序文件的配置
  • pages
  • window
    project.config.json
    -职责：微信开发者工具配置
    每个页面下的json
  • 职责：个性化page,可覆盖app.json中window的配置
    sitemao.json
  • 职责：指导搜索引擎进行检索

.wxml后缀的WXML模板文件

  • 本质是HTML模板
  • 有特定的标签
  • 接管一些简单的逻辑判断
  • JS不直接操作DOM，只复制set数据

.wxss后缀的WXSS样式文件

  • 提供rpx单位（屏幕宽度与750的比值）
  • 精简的CSS
  • 提供全局和局部的CSS

.js后缀的JS脚本逻辑文件

  • 负责逻辑交互
  • APP、Page、Component三个构造函数
  • 可调用系统API

2.2 双线程模型

渲染层和逻辑层是两个线程


360前端星计划0412_第1张图片
小程序双线程模型

渲染层不能操作 DOM，降低风险，但同时也造成不便

双线程导致线程通信实现数据传递，会有一定延迟

2.3生命周期

360前端星计划0412_第2张图片
小程序生命周期图

小游戏实时性要求较高，没有采用双线程架构

2.4组件

  • 官方组件
    • 容器
    • 基础内容
    • 表单组件
    • 导航
    • 地图
    • 画布
  • 原生组件
  • 自定义组件
    使用Component构造器，通过usingComponents引入

2.5其他

插件机制

如果想要开发插件，就将开发模式选为插件即可

云端函数

小游戏

3.开发发布流程

  • 开发者在小程序平台注册小程序，以获得APPID（需要用一个没有注册过小程序的邮箱进行注册）
  • 初始化代码并完成代码仓库配置
  • 开发代码并调试
  • 上传并发布

4.小程序的发展

多端同构框架

  • 意义：一次编写适配多端，一次迭代各端同步

  • 利用Web的优点，以及对各个平台进行动态适配
    常用框架：uni-app、Taro、KBone


    360前端星计划0412_第3张图片
    KNone的目录结构

自动化

  • 控制小程序跳转到指定页面
  • 获取小程序页面数据
  • 获取小程序页面元素状态
  • 触发小程序元素绑定事件
  • 往AppService注入代码片段
  • 调用wx对象上任意接口

硬件框架

360前端星计划0412_第4张图片
小程序硬件框架

云IDE

W3C小程序工作组

  • W3C小程序和快应用草案
    • URL Schema
    • Widget
    • Manifest
    • Lifestyle
    • Packaging

Web前端点播直播入门

什么是视频

了解媒体数据存储和应用的基础原理

格式与内容

1.文件扩展名≈媒体封装格式(媒体容器类型)
2.媒体封装格式≠音视频编码格式(使用了谁家的编码器)
3.文件内容：

  1. 头信息(格式、时长、帧率、码率、分辨率...)
  2. 索引信息
  3. 视频数据
  4. 音频数据
  5. 附加增强数据（存储一些音视频之外的信息，比如自定义的一些数据）

视频数据

1.显示器颜色呈现基于RGB(红绿蓝)颜色空间模型
2.视频领域大多基于YUV颜色空间做抽样存储


360前端星计划0412_第5张图片

3.帧内预测&帧间预测复用进一步有效的压缩数据
4.P帧(前向预测帧)、B帧(双向预测帧)、I帧(参考帧)
5.基于通用标准集N多技术于一身 --- 视频编码器
H.264(AVC)、H.265(HEVC)、VP8、VP9...

音频数据

1.声音：不同振幅&频率而产生的机械波；数字形式是一维波形
2.对自然中连续的声波采样，做数字化PCM存储
3.扬声器还原PCM(脉冲编码调制)数字信号为模拟音频信号
4.音频压缩基本算法：预测、变换
5.基于通用标准集N多技术于一身 --- 音频编码器​​​​​​​
AAC、MP3...

传输协议

  1. 传统场景
    1.流媒体(直播)
    - HLS：苹果为利
    用现有CDN设施而发明的"流媒体"协议（实际上是基于文件存储的）
    • HTTP(S)-FLV：基于HTTP的流媒体协议
    • RTMP、RTP/RTSP、TS、MMS...
      2.点播传输
    • HTP(S)：通过Range方式或参数方式完成Seek
      2.Web端
    • HTTP(S)、WS(S)、P2P...

播放器原理

1.解协议(加载数据)
2.解封装(解复用)
3.解码
4.渲染

好玩的Web端API

了解通过Web端接口可以实现哪些方向的具体应用

媒体兼容判断

let videoEl = document.createElement("video");
let types = {
  'mp4': 'audio/mp4',
  'MP4': 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
  'webm': 'video/webm; codecs="vp8, vorbis"',
  'ogg': 'video/ogg; codecs="theora, vorbis"',
  'm3u8': 'application/vnd.apple.mpegURL',
  'ts': 'video/mp2t; codecs="avc1.42E01E,mp4a.40.2"'
};

Object.keys(types).forEach(key => {
  const type = types[key];
  const ret = videoEl.canPlayType(type) || '不支持';
  console.log(key + ': ' + ret);
});

交互式视频

基于Video时间轴实现交互式视频

let video = $('video');

video.ontimeupdate = ()=>{
  let {currentTime} = video;
  show(currentTime > 64 ? '.s2' : '.s1');
  hide(currentTime > 64 ? '.s1' : '.s2');
  if(
     (currentTime > 64 && currentTime < 65) || 
     (currentTime > 113 && currentTime < 114)
  ){
    video.pause();
  }
};

let ppBtn = $('paly_pause');
video.onplay = ()=>{
  ppBtn.innerText = '暂停';
};
video.onpause = ()=>{
  ppBtn.innerText = '播放';
};
ppBtn.onclick = ()=>{
  video[video.paused ? 'play' : 'pause' ]();
};
$('start').onclick = ()=>{
  video.currentTime = 1;
  video.play();
};
$('step').onclick = ()=>{
  video.currentTime = 60;
  video.play();
};
$('dream').onclick = ()=>{
  video.currentTime = 83;
  video.play();
};
$('drink').onclick = ()=>{
  video.currentTime = 116;
  video.play();
};

hide('.s2');
function show(sel){
  document.querySelectorAll(sel).forEach(el=>{
    el.style.display='inline'
  });
}
function hide(sel){
  document.querySelectorAll(sel).forEach(el=>{
    el.style.display='none'
  });
}
function $(id){
  return document.getElementById(id);
}

播放本地视频文件

基于 FileReader API 播放本地文件

let iptFileEl = document.querySelector('input[type="file"]');
let videoEl = document.querySelector('video');

iptFileEl.onchange = e =>{
  let file = iptFileEl.files && iptFileEl.files[0];
  playFile(file);
};

function playFile(file){
  if(file){
    let fileReader = new FileReader();
    fileReader.onload = evt => {
      if(FileReader.DONE == fileReader.readyState){
        videoEl.src = fileReader.result;
      }else{
        console.log('FileReader Error:', evt);
      }
    }
    fileReader.readAsDataURL(file);
  }else{
    videoEl.src = '';
  }
}

播放硬件资源(调用摄像头或麦克风)

基于 getUserMedia 调用摄像头或麦克风
iframe 引入页要调用媒体设备的，需要父页面中给iframe设置 allow="microphone;camera;midi;encrypted-media;" 。

const getUserMediaPromise = options => new Promise((resolve, reject) => {
  const nvgt = window.navigator;
  if(nvgt) {
    if(nvgt.mediaDevices && nvgt.mediaDevices.getUserMedia) {
      return nvgt.mediaDevices.getUserMedia(options).then(resolve, reject);
    }
    const getUserMedia = nvgt.getUserMedia || nvgt.webkitGetUserMedia || nvgt.mozGetUserMedia;
    if(getUserMedia) {
      return getUserMedia(options, resolve, reject)
    }
  }
  reject('当前环境不支持获取媒体设备。');
});

let streamTrack;
const video = document.querySelector('video');
document.querySelector('#play').onclick = () => {
  getUserMediaPromise({
    audio: false,
    video: true
  }).then(stream => {
    video.srcObject = stream;
    streamTrack = stream.getTracks()[0];
  },
  err => {
    console.log('getUserMedia error: [' + err.name + '] ' + err.message)
  });
};

document.querySelector('#stop').onclick = () => {
  streamTrack && streamTrack.stop();
};

const box = document.querySelector('div');
document.querySelector('#sketch').onclick = () => {
  box.className = box.className ==='' ? 'sketch' : '';
};

人脸识别

实现视频录制

基于 getUserMedia、MediaRecorder 实现录像

const getUserMediaPromise = options => new Promise((resolve, reject) => {
  const nvgt = window.navigator;
  if(nvgt) {
    if(nvgt.mediaDevices && nvgt.mediaDevices.getUserMedia) {
      return nvgt.mediaDevices.getUserMedia(options).then(resolve, reject);
    }
    const getUserMedia = nvgt.getUserMedia || nvgt.webkitGetUserMedia || nvgt.mozGetUserMedia;
    if(getUserMedia) {
      return getUserMedia(options, resolve, reject)
    }
  }
  reject('当前环境不支持获取媒体设备。');
});

const video = document.querySelector('#preview');

let cameraStream;
const opencameraBtn = document.querySelector('#opencamera');
const closecameraBtn = document.querySelector('#closecamera');
const recordBtn = document.querySelector('#record');
const stopRecordBtn = document.querySelector('#stoprecord');
const playBtn = document.querySelector('#play');
const downloadBtn = document.querySelector('#download');

opencameraBtn.onclick = () => getUserMediaPromise({
  audio: false,
  video: true
}).then(
  stream => {
    cameraStream = video.srcObject = stream;
    opencameraBtn.disabled = true;
    closecameraBtn.disabled = false;
    recordBtn.disabled = false;
  },
  err => {
    console.log('getUserMedia error: [' + err.name + '] ' + err.message)
  }
);

closecameraBtn.onclick = () => {
  cameraStream && cameraStream.getTracks()[0].stop();
  cameraStream = null;
  opencameraBtn.disabled = false;
  closecameraBtn.disabled = true;
  stopRecordBtn.onclick();
};

let mediaRecorder;
let recordedBlobs;
const mimeType = ['video/webm;codecs=vp9', 'video/webm;codecs=vp8', 'video/webm', ''].find(type => {
  return MediaRecorder.isTypeSupported(type);
});
// console.log('mimeType', mimeType);
recordBtn.onclick = () => {
  recordedBlobs = [];
  try {
    mediaRecorder = new MediaRecorder(cameraStream, { mimeType });
  } catch(e) {
    alert('Exception while creating MediaRecorder: ' + e + '. mimeType: ' + mimeType);
    return;
  }
  recordBtn.disabled = true;
  stopRecordBtn.disabled = false;
  playBtn.disabled = true;
  downloadBtn.disabled = true;
  mediaRecorder.onstop = evt => {
    console.log('Recorder stopped');
  };
  mediaRecorder.ondataavailable = function(event) {
    if (event.data && event.data.size > 0) {
      recordedBlobs.push(event.data);
    }
  };
  mediaRecorder.start(20); // 单次收集数据毫秒时长，ondataavailable 触发频率时长间隔
};


const recordedVideo = document.querySelector('#recorded');
stopRecordBtn.onclick = () => {
  mediaRecorder && mediaRecorder.stop();
  mediaRecorder = null;
  // console.log('Recorded Blobs: ', recordedBlobs);
  recordedVideo.controls = true;
  playBtn.disabled = false;
  downloadBtn.disabled = false;
  stopRecordBtn.disabled = true;
  if(!cameraStream) {
    recordBtn.disabled = true;
  }
};

const getRecordedBlobUrl = () => {
  const superBuffer = new Blob(recordedBlobs, {type: mimeType.split(';')[0]});
  return window.URL.createObjectURL(superBuffer);
};

playBtn.onclick = () => {
  recordedVideo.src = getRecordedBlobUrl();
}

downloadBtn.onclick = () => {
  var a = document.createElement('a');
  a.style.display = 'none';
  a.href = getRecordedBlobUrl();
  a.download = 'test.webm';
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 100);
}

播放JS拉取的媒体数据

基于MediaSource播放JS拉取的媒体数据

const video = document.querySelector('video');
const fetchMp4 = (url, cb) => { 
  const xhr = new XMLHttpRequest();
  xhr.open('get', url);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function () {
    cb(xhr.response);
  };
  xhr.send();
};

const assetURL = 'https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4';
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

// 创建动态媒体源，并关联到video元素上
const mediaSource = new MediaSource(); 
video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  // 拉取数据
  fetchMp4(assetURL, buf => {
    sourceBuffer.addEventListener('updateend', () => {
      // 媒体流传输完毕
      mediaSource.endOfStream();
      // video.play();
    });
    // 将数据喂给 Video -- 注意这里只是一次性输入整个MP4数据
    sourceBuffer.appendBuffer(buf);
  });
});

Web端点播直播&播放方案

点播直播的区别

1.应用流程
- 点播：创作者 => 上传 => 转码 => 存储 <=> CDN分发 <=> 观众
- 直播：创作者 => 推流 <=> 存储 <=> 转码 <=> CDN分发 <=> 观众
2.媒体类型的选择

  • HTTP(S)-MP4..
    点播服务
  • HTTP(S)-FLV
    点播、直播
  • HTTP(S)-HLS
    点播、直播(高延迟)

播放器解决方案

  1. 原生浏览器支持的
    • 直接走原生Video播放
  2. 原生浏览器不支持的
    1. 协议或容器类型不支持
      • JS解协议下载数据、解容器、重新封装，然后通过MSE喂给Video解码、渲染播放
        例如Web端播放FLV、HLS：http://chimee.org
    2. 解码器不支持
      • JS下载数据，WASM 解容器、解码，通过 WebGL&WebAudio 渲染播放
        例如Web端播放HEVC编码视频：https://zyun.360.cn/developer/doc?did=QHWWPlayer
    3. 有解密需求的
      • 参考前两条，在解容器之后对每帧数据启用解密逻辑。

可扩展学习的参考资料

基础API:
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

数据获取：
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

虚拟文件：
https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

动态媒体源：
https://developer.mozilla.org/zh-CN/docs/Web/API/Media_Source_Extensions_API

数据操作：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API

画音渲染：
https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

场景应用：
https://developer.mozilla.org/zh-CN/docs/Web/API/MediaRecorder
https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API

开源项目：
http://chimee.org
https://github.com/bilibili/flv.js
https://github.com/video-dev/hls.js
https://github.com/huzunjie/WasmVideoPlayer

非开源 WasmVideoPlayer 示例：
http://lab.pyzy.net/qhww

前端代码的自我修养

如何衡量代码质量的好坏

衡量代码质量的唯一有效标准：WTF/min —— Robert C. Martin


360前端星计划0412_第6张图片
image.png

代码的自我修养

代码规范

  • no-fallthrough(质量问题)
  • max-depth(风格问题)
    ESlint 
yarn global add eslint//安装eslint

{
    "extends": "eslint:recommended",
    "rules": {
        // enable additional rules
        "indent": ["error", 4],
        "linebreak-style": ["error", "unix"],
        "quotes": ["error", "double"],
        "semi": ["error", "always"],

        // override default options for rules from base configurations
        "comma-dangle": ["error", "always"],
        "no-cond-assign": ["error", "always"],

        // disable rules from base configurations
        "no-console": "off",
    }

ESlint还可以配合前端框架工作
.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "standard"
    ],
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "no-console" : ["error"]
    }
};

husky + lint-staged
husky 原理：修改 .git/hooks/pre-commit

"scripts": {
    "precommit": "lint-staged"
},
"lint-staged":{
    "src/**/*.js": [
        "eslint --fix --ext .js",
        "prettier --write",
        "git add"
    ]
}

完成配置后，再提交代码就会自动检查代码问题

格式

eslint会自动检查代码格式是否有错误
工具：prettier

流程化

360前端星计划0412_第7张图片
image.png

如何优雅地提交代码

git commit message规范

合并提交

有的时候，我们会遇到多次Commit才能完成一个feature
这时git log就会出现多次记录，如下图所示，污染提交历史


360前端星计划0412_第8张图片
image.png

使用以下命令进行合并提交

git rebase -i $GIT_LOG_VERSION$

具体步骤如下

git commit --fixup HEAD

git rebase -i $GIT_LOG_VERSION$ --autosquash

git push -f origin master

rebase 有一定危险，多人协作慎用
如果改变了代码的时间线，push 时需要带上 -f

技术翻译，进阶地直梯

翻译的类型

  • 文学翻译
  • 非文学翻译
    文学翻译| 非文学翻译
    -|-
    艺术成分多一些 |科学成分多一些
    需要更多的灵感 |需要更多的勤奋
    责任小一些 |责任大一些

技术翻译的意义

  • 翻译技术文章，学习新技术思想
  • 翻译技术文档，掌握标准和工具
  • 翻译技术图书，获得名声和报酬

技术翻译的标准

准确、地道、简洁

技术翻译的方法

  • 消化吸收原文
  • 母语地道表达
  • 就是翻译意思

技术翻译要坚持技术驱动

你可能感兴趣的:(360前端星计划0412)

  • 科研信息管理系统（项目管理者的日常工作） cc6b6903e5d1
    现在，我是第一个承认项目管理令人沮丧的人。这不是因为我很软弱!因为在完成项目计划之后，项目管理者的唯一任务就是发现项目的障碍并解决它们。请记住,项目障碍不仅是在特殊情况下出现,它们是项目管理者的日常工作!请记住，项目障碍不仅是在特殊情况下出现,它们是项目管理者的日常工作!不存在任何障碍的项目，每周只要花几个小时，或任何常规的管理人员就可以进行管理。这样一来，全世界都不需要专职的项目管理者了。好消息
  • 用前端的语言写后端——Node.js之Express tabzzz 前端前端node.jsexpress
    ExpressExpress是一种流行的模型视图控制器(MVC)Node.js框架，具有快速、极简和灵活的优点，为Web和移动应用程序开发提供了强大的功能集合。最受欢迎的Node.js框架！文章目录Express安装ExpressHelloWorld路由中间件全局中间件应用中间件开放跨域请求几种常用的Express内置中间件函数1.JSON格式数据中间件函数2.静态文件中间件函数3.路由中间件函数
  • 腊月二十六 川哥不放弃
    闺女昨夜十一点半才睡，早上六点半就起床找爸爸…还有几天就过年了，把车加满油，给它也洗洗澡，过了年，还要南征北战。今年的春运基本上又是无疾而终，就地过年还是倡导的主要方向，姐她们早早的就放弃了回家的计划。三年了，大家都已经习以为常，春天到了，这该死的疫情也快结束了吧！
  • 前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令 编程轨迹_ 前端面试复习笔记前端面试面经前端工程化WebpackBabel前端面试大厂面试题
    31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段，这三步具体是：解析、转换、生成解析Parse:将代码解析⽣成抽象语法树（AS
  • 射手座的男子 张慕菁
    胜利才是真正的贵族白色猎人黑色心由于射手座的守护星是众神之神邱比特，因此也象徵了对任何事充满好奇心。在成长过程中，若发现可以狩猎之处必如满弦之箭瞄准猎物。冒险在他的右手，征服在他的左手，刺进敌人的任督二脉，别人看来残忍，他自觉贵族。对于打击假猎人不遗余力，最怕的是只剩最后一支箭。赌性坚强的不老林天生的赌徒未必天生的赢家。男射手不怕死就怕老。不怕穷就怕没得赌。安于室的不得不相信男射手会只爱你一个的女
  • 前端开发深入了解webpack 史努比的大头 前端
    什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E
  • 【Webpack】了解Webpack Sam9029 Webpackwebpack前端node.js
    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*文章若有错误或某个内容有更优的解决方案，还望指正！*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前
  • 1539 | 鱼水三顾：年华深处充满了遗失的孤独，心无所累才是生命最好的归宿。【2022.11.10】 邓越_越越安
    图、文/越享生活馆Part1关键词：甜蜜、恩爱、责任所有少年时期经历过的一草一木，在任何时候都会非常亲切地保留在一个人的记忆中，并且一想起来就叫人甜蜜得鼻子发酸。又是一个充满了沉重感的下雨天，连带着周围的温度都变得异常清冷，计划好的出游计划只能一推再推，还有自己家中的琐碎日常，它们在一点一点的吞噬着本就不多的热情和温暖。我想每一个有爱的人，都会自觉的维护内心的那份安宁和宁静，不会被周围的凌乱和懒散
  • 近期读到的一眼就惊艳你的神仙句子 文案分享集
    1.什么时候觉得情敌越多越好，当他们说我爱中国的时候。2.国家教育有方，金牌干干净净。3.人民有信仰，国家有力量，民族有希望。4.愿世界和平，可以温柔以待。5.我们生在红旗下，长在春风里，人民有信仰，国家有力量，目光所致皆是华夏，五星闪耀皆为信仰。6.以前那个连国歌都不愿意大声唱的小孩，现在因为国家如此骄傲。7.我落笔写下青春年华，只是墨色淡了，没能写出未来可期，也没能写出放荡不羁，所以我一生奔赴
  • 【N4】No.17“高”定目标激发自己前行——《云访谈9陈嘉谊：后浪奔涌-90后如何带着使命去奋斗》 于杰雄
    2018年在在刚接触青椒计划的时候就加了陈嘉谊老师为好友，当时我在的《十年规划，不负流年》的阅读量超过了一万五，被陈老师发现，聊了一些微不足道的小事。一、今晚对话后浪，让你印象最深的是什么？不妨定一个远一点的目标身为年过三十的“社会人”，我很少挑战自己的极限，处理的多是眼前的一些事情。常常是领导交代一个任务，我就去做一个任务，很少去多想一步为什么。听了今天的对话，我也发现了如果想让成长速度快起来，
  • 【0223我在悦读】陈小兰 chen小兰
    书名：《哪有没时间这回事》作者：纪元篇目：第一章感想：001先整理心情、再整理事情。列出自己日常事务清单，在执行时就可以按照清单来就做就行了。不需要大脑来记住所有琐碎的事。也可避免落下一些事，还可避免焦虑，还可促使把日常任务做得更好。刚刚列出自己的日常清单，还没划分出时间段，对这一部分的执行还有一点疑惑。严格的日程表。以前做计划就是按着这种具体的时间表来安排，可是，一旦中间某个时间的事情耗费时间过
  • 万里素食行是一场巅峰体验 吉林长春张耀辉
    2020年5月24日，全家周日观影日，是N师学院的一次特别精神大餐，感谢互加计划吴虹校长的推荐和邀约，徐立导演的素食题材电影《巅峰体验》，这是一部超过瘾的影片，全程视觉享受，影片中体验人生巅峰为了寻找人生的终极意义，为了挖掘自己未知的潜能，记录了一群人63天的素食雷达骑行者从繁华似锦的大上海万里到达宁静致远的拉萨圣地，预计骑行1万里的故事。这是一部真人真事的纪录片，没有任何情节设计，也没有预设台词
  • Livox_Mid360+IMU仿真搭建 夜雨拾年 无人机
    前言本文是对在gazebo里搭建一个livoxmid360+惯导仿真平台测试FAST-LIO2的实现，此博文中存在部分需要修改代码的地方，因此在本文中做出更详细的说明。资源包安装注：由于livox点云的格式是CustomMsg，而rviz中主要使用PointCloud和PointCloud2，转换不太方便，因此不使用官方提供的软件包，使用他人修改后的软件包。但此软件包开发时间较早，缺少mid360
  • 基于XTDrone的ZD550+Mid360实现 夜雨拾年 无人机
    前言本文是对ZD550搭载Mid360激光雷达Gazebo仿真平台搭建记录的实现文件导入先下载提供的文件链接:https://pan.baidu.com/s/1reqGCcQOj1T_tGBY3EZWpw?pwd=328c提取码:328c将文件夹ZD550_Mid360中的5个文件夹都添加到PX4_Firmware/Tools/sitl_gazebo/models目录下，其中models目录下可能
  • XTDrone+ZD550+Livox_Mid360+IMU仿真实现 夜雨拾年 无人机
    简介本文是前两篇博客Livox_Mid360+IMU仿真搭建、基于XTDrone的ZD550+Mid360实现的结合，将ZD550与Livox_Mid360+IMU结合，从原有的xacro文件转为sdf文件，更适合gazebo仿真的实现。最终效果DIY若想实现对激光雷达参数的修改，可参考以下部分标签内部的元素详细定义了Gazebo中使用的雷达传感器的扫描特性和性能。这些设置影响雷达模拟的准确性和效
  • 最好用的e2e框架，使用 Cypress 让产品持续稳定交付 Node全栈 javapython编程语言软件测试html
    以前我们经常使用nightwatch，现在都已经切换到cypress了，可以说cypress目前最好用的e2e框架。具体原因和对比，就是本文要讲的内容。背景ApacheAPISIXDashboard的设计是为了让用户通过前端界面尽可能方便地操作ApacheAPISIX。从项目初始化到现在，已经有552commits、发布了10个版本。在如此之快的产品迭代过程中，确保开源产品质量显的尤为重要。为此，
  • 2023-08-20 Leslie91
    活在当下和活在未来并不对立，就像确认攀登一坐高山，设定自己的目标和计划，一路前行。适当停留领略周边风景稍做调整休息，继续登高。活在未来的思维逻辑让我有时间紧迫感，训练主动前瞻行思维和坚定执行力；活在当下是让我体验世界的一切美好和不经意收获的感动。用贝叶斯定律从新修正自己的观点：用30%时间体验当下人世间酸甜苦辣，因为我活着；用70%时间去活在未来，因为前方有更广阔的视野和更多的收获，每时每刻都要按
  • 生成一个完整的App代码通常不会仅仅通过单一的文件或几种语言的简单组合来完成，因为App的开发涉及前端用户界面、后端逻辑处理、数据库管理以及可能的第三方服务集成等多个方面。不过，我可以为你提供一个概念 NewmanEdwarda2 前端ui数据库
    前端(用户界面)yinanjinying.comHTML/CSS/JavaScript(原生Web开发)对于简单的WebApp，你可以直接使用HTML来构建页面结构，CSS来设置样式，JavaScript来添加交互性。React(JavaScript/TypeScript)对于更复杂的单页应用（SPA），React是一个流行的选择。它允许你构建可复用的UI组件。Flutter(Dart)如果你想要
  • 2018-11-02 吕志刚l
    11月1日精进。今日体验，制定计划是一个十分有效的方法，千里之行始于足下，只有每天坚持不懈的一点点努力，我们才能最终实现目标。
  • 由于直接在回答中完整展示一个复杂如游戏商城的代码系统并不现实（会超出限制且难以维护），我将为你概述一个简化的游戏商城系统的架构，并提供关键部分的示例代码，这些代码将涵盖几种不同的编程语言。 NewmanEdwarda2 游戏架构
    架构概述pzswcc.cn前端：用于展示商品、处理用户交互（如查看商品详情、添加到购物车、结账等）。后端：处理业务逻辑（如商品库存管理、订单处理、用户认证等），与数据库交互。数据库：存储商品信息、用户信息、订单信息等。示例代码前端（HTML+JavaScript）HTML（简单页面布局）html游戏商城游戏商城JavaScript(使用FetchAPI调用后端API)javascript//假设后
  • 解锁网页交互利器：深入浅出 AJAX，用 JavaScript 与后端服务器对话，局部请求刷新数据 微特尔普拉斯 ajaxjavascriptajax前端javascript
    在当今互联网时代，网页早已不再是静态的信息展示平台，而是充满动态交互的应用体验场。而实现这种流畅交互体验的关键技术之一，便是AJAX（AsynchronousJavaScriptandXML）。它允许网页在后台悄无声息地与服务器交换数据，无需刷新整个页面，便可实现内容的动态更新，为用户带来行云流水般的操作体验。在AJAX出现之前，网页开发采用的是前后端不分离的模式。前端开发者编写好HTML和CSS
  • 写一个图片裁剪的js，JavaScript图片裁剪插件PlusCropper 微特尔普拉斯 javascriptnodevuejavascript开发语言ecmascript
    在前端开发中，图片裁剪是一个常见的需求。本文将深入解析一个功能完善的JavaScript图片裁剪插件——PlusCropper，带你一步步了解其实现原理和使用方法。一、插件概述PlusCropper是一个轻量级的JavaScript插件，它允许用户在网页上交互式地裁剪图片。它提供了以下功能：可拖拽和缩放的裁剪框:用户可以通过鼠标或触摸操作来调整裁剪区域的大小和位置。图片旋转:支持图片的顺时针和逆时
  • 数据库datetime时间前端显示格式化 微特尔普拉斯 javajavascriptjquery数据库datetime时间格式转换
    后台查询数据库返回的这种时间格式2019-04-24T02:30:00.000+0000第一种方法:vartime="2019-11-04T08:04:52.000+0000";vard=newDate(time);vartimes=d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate()+''+d.getHours()+':'+d.getMinut
  • 看板（Kanban）与Scrum区别 智慧浩海 JIRA教程scrum
    看板和Scrum之间有很多不同之处。下面列出了看板和Scrum之间的区别：对比项Scrum看板计划它有固定的计划，它专注于规划。它从sprint计划开始，以sprint审查结束，回顾性。举行日常会议，以便团队了解后续步骤，优先事项以及之前步骤的经验。它没有固定的计划，也没有每日会议。在看板中，可以随时发生变化，即频繁发生变化。时间线在scrum中，处理具有固定时间持续时间的sprint意味着在一段
  • 2023-01-24 bcc87b218fde
    每日一省:今天和老公畅谈了一番。他也苦恼孩子的问题。他就是不成熟，老跟孩子怼。所以，他自己感觉要改变。我说第一步，先别嫌弃孩子。陈述问题提醒孩子去做就好。他也策划了明天的活动。另外，也和孩子一起制定了计划。[强]孩子还是挺配合的。给他点赞。孩子说了一句话，我管太严了。所以，他觉得就像在监狱。所以，我要在意孩子的感受，和孩子一起打败问题。嗯。加油。明天本着解决问题去和孩子沟通。加油
  • Vue项目中实现AES加密解密 小金子J 前端框架JavaScript分享vue.js前端javascript
    在前端开发中，保护用户数据的安全性至关重要。AES（高级加密标准）作为一种广泛使用的对称加密算法，因其高效性和安全性而受到青睐。本文将介绍如何在Vue项目中实现AES加密解密，包括ECB和CBC两种模式。环境搭建在Vue项目中使用AES加密解密功能之前，需要先安装crypto-js库。通过执行以下命令，可以轻松地将crypto-js添加到项目中：npminstallcrypto-js--save-
  • uni-app开发微信小程序 hong161688 uni-app微信小程序小程序
    uni-app是一个使用Vue.js开发所有前端应用的框架，它支持编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/字节跳动/QQ/京东等）平台。使用uni-app开发微信小程序，可以充分利用Vue.js的开发效率和小程序平台的原生能力，实现跨平台的高效开发。以下将详细介绍使用uni-app开发微信小程序的全过程，包括项目搭建、开发、调试、测试及发布等环节，内容将尽量达到或超
  • 忙碌的休息天 沈思扬
    连续的加班，不堪的疲惫，终于迎来了一个久违的休息天。原本计划好好休息调整一下，但是日常的琐屑事情，让这个休息天变得异常忙碌。今天舅舅家有事，母亲准备乘公交车前往舅舅家。从母亲那里去舅舅家，要倒三次公交车不说，还要步行两三里路，这一路起码要耗上两个多小时。母亲年岁已高，一路折腾怕是身体吃不消，于是清晨一大早，我便赶回乡下将母亲接至舅舅家。途中路经一市场，想起大女儿心心念的要饱餐一顿龙虾，顺便买了数斤
  • 2023-01-04 说痫话
    运动型癫痫病吃什么药好?癫痫病的治疗是要经过漫长的时间的，根据癫痫病的症状做出不同的治疗方针，而且癫痫病的用药也是要根据患者的病情来确定患者到底要用什么样的药物，不同的药物针对的病情是不同的，只有进行全面的检查以后才能制定计划。癫痫病分为很多种类型，每种类型的症状是不同的，所以在药物治疗上的选择也是有所差别的，患者是不能够盲目的用药，如果患者药物用错就会出现严重的不良效果，严重的甚至是出现药物中毒
  • 周一上课计划 潇风sunny
    周一下午第一节一点50到三点，七十分钟的课，怎么利用好？必须做好规划，精打细算每一分钟。一，一点50到2点20分，做2篇完型，并对答案，入空，讲解二，呈现重点句式和短语，背诵三，讲解二卷和七选五部分，重点讲解易错点，讲透，出各种变式练习。四，明天上午列一份知识清单，周二早读背诵五，出一份典型改错和语法填空小页，限时，精准训练。语法填空可用五三进行训练，改错单句和短文另出两个小页，精选有代表性的重点
  • ztree异步加载 3213213333332132 JavaScriptAjaxjsonWebztree
    相信新手用ztree的时候,对异步加载会有些困惑，我开始的时候也是看了API花了些时间才搞定了异步加载，在这里分享给大家。 我后台代码生成的是json格式的数据，数据大家按各自的需求生成，这里只给出前端的代码。 设置setting，这里只关注async属性的配置 var setting = { //异步加载配置
  • thirft rpc 具体调用流程 BlueSkator 中间件rpcthrift
    Thrift调用过程中，Thrift客户端和服务器之间主要用到传输层类、协议层类和处理类三个主要的核心类，这三个类的相互协作共同完成rpc的整个调用过程。在调用过程中将按照以下顺序进行协同工作：         （1）     将客户端程序调用的函数名和参数传递给协议层（TProtocol），协议
  • 异或运算推导, 交换数据 dcj3sjt126com PHP异或^
    /* * 5 0101 * 9 1010 * * 5 ^ 5 * 0101 * 0101 * ----- * 0000 * 得出第一个规律: 相同的数进行异或, 结果是0 * * 9 ^ 5 ^ 6 * 1010 * 0101 * ---- * 1111 * * 1111 * 0110 * ---- * 1001
  • 事件源对象 周华华 JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q
  • MySql配置及相关命令 g21121 mysql
            MySQL安装完毕后我们需要对它进行一些设置及性能优化，主要包括字符集设置，启动设置，连接优化，表优化，分区优化等等。           一 修改MySQL密码及用户      
  • [简单]poi删除excel 2007超链接 53873039oycg Excel
          采用解析sheet.xml方式删除超链接，缺点是要打开文件2次,代码如下:      public void removeExcel2007AllHyperLink(String filePath) throws Exception { OPCPackage ocPkg = OPCPac
  • Struts2添加 open flash chart 云端月影
    准备以下开源项目： 1. Struts 2.1.6 2. Open Flash Chart 2 Version 2 Lug Wyrm Charmer (28th, July 2009) 3. jofc2，这东西不知道是没做好还是什么意思，好像和ofc2不怎么匹配，最好下源码，有什么问题直接改。 4. log4j 用eclipse新建动态网站，取名OFC2Demo，将Struts2 l
  • spring包详解 aijuans spring
    下载的spring包中文件及各种包众多，在项目中往往只有部分是我们必须的，如果不清楚什么时候需要什么包的话，看看下面就知道了。 aspectj目录下是在Spring框架下使用aspectj的源代码和测试程序文件。Aspectj是java最早的提供AOP的应用框架。 dist 目录下是Spring 的发布包，关于发布包下面会详细进行说明。 docs&nb
  • 网站推广之seo概念 antonyup_2006 算法Web应用服务器搜索引擎Google
       持续开发一年多的b2c网站终于在08年10月23日上线了。作为开发人员的我在修改bug的同时，准备了解下网站的推广分析策略。     所谓网站推广，目的在于让尽可能多的潜在用户了解并访问网站，通过网站获得有关产品和服务等信息，为最终形成购买决策提供支持。     网站推广策略有很多，seo，email，adv
  • 单例模式,sql注入,序列 百合不是茶 单例模式序列sql注入预编译
      序列在前面写过有关的博客,也有过总结,但是今天在做一个JDBC操作数据库的相关内容时 需要使用序列创建一个自增长的字段  居然不会了,所以将序列写在本篇的前面    1,序列是一个保存数据连续的增长的一种方式; 序列的创建; CREATE SEQUENCE seq_pro 2 INCREMENT BY 1 -- 每次加几个 3
  • Mockito单元测试实例 bijian1013 单元测试mockito
    Mockito单元测试实例： public class SettingServiceTest { private List<PersonDTO> personList = new ArrayList<PersonDTO>(); @InjectMocks private SettingPojoService settin
  • 精通Oracle10编程SQL(9)使用游标 bijian1013 oracle数据库plsql
    /* *使用游标 */ --显示游标 --在显式游标中使用FETCH...INTO语句 DECLARE CURSOR emp_cursor is select ename,sal from emp where deptno=1; v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; begin ope
  • 【Java语言】动态代理 bit1129 java语言
      JDK接口动态代理 JDK自带的动态代理通过动态的根据接口生成字节码(实现接口的一个具体类)的方式，为接口的实现类提供代理。被代理的对象和代理对象通过InvocationHandler建立关联   package com.tom; import com.tom.model.User; import com.tom.service.IUserService;
  • Java通信之URL通信基础 白糖_ javajdkwebservice网络协议ITeye
    java对网络通信以及提供了比较全面的jdk支持，java.net包能让程序员直接在程序中实现网络通信。 在技术日新月异的现在，我们能通过很多方式实现数据通信，比如webservice、url通信、socket通信等等，今天简单介绍下URL通信。 学习准备：建议首先学习java的IO基础知识   URL是统一资源定位器的简写，URL可以访问Internet和www，可以通过url
  • 博弈Java讲义 - Java线程同步 (1) boyitech java多线程同步锁
      在并发编程中经常会碰到多个执行线程共享资源的问题。例如多个线程同时读写文件，共用数据库连接，全局的计数器等。如果不处理好多线程之间的同步问题很容易引起状态不一致或者其他的错误。    同步不仅可以阻止一个线程看到对象处于不一致的状态，它还可以保证进入同步方法或者块的每个线程，都看到由同一锁保护的之前所有的修改结果。处理同步的关键就是要正确的识别临界条件（cri
  • java-给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 bylijinnan java
    public class DeleteExtraSpace { /** * 题目：给定字符串，删除开始和结尾处的空格，并将中间的多个连续的空格合并成一个。 * 方法1.用已有的String类的trim和replaceAll方法 * 方法2.全部用正则表达式，这个我不熟 * 方法3.“重新发明轮子”，从头遍历一次 */ public static v
  • An error has occurred.See the log file错误解决！ Kai_Ge MyEclipse
    今天早上打开MyEclipse时，自动关闭！弹出An error has occurred.See the log file错误提示！ 很郁闷昨天启动和关闭还好着！！！打开几次依然报此错误，确定不是眼花了！ 打开日志文件！找到当日错误文件内容： --------------------------------------------------------------------------
  • [矿业与工业]修建一个空间矿床开采站要多少钱? comsci
           地球上的钛金属矿藏已经接近枯竭...........        我们在冥王星的一颗卫星上面发现一些具有开采价值的矿床.....        那么,现在要编制一个预算,提交给财政部门..
  • 解析Google Map Routes dai_lm google api
    为了获得从A点到B点的路劲，经常会使用Google提供的API，例如 [url] http://maps.googleapis.com/maps/api/directions/json?origin=40.7144,-74.0060&destination=47.6063,-122.3204&sensor=false [/url] 从返回的结果上，大致可以了解应该怎么走，但
  • SQL还有多少“理所应当”？ datamachine sql
    转贴存档，原帖地址：http://blog.chinaunix.net/uid-29242841-id-3968998.html、http://blog.chinaunix.net/uid-29242841-id-3971046.html！ ------------------------------------华丽的分割线--------------------------------
  • Yii使用Ajax验证时，如何设置某些字段不需要验证 dcj3sjt126com Ajaxyii
    经常像你注册页面,你可能非常希望只需要Ajax去验证用户名和Email,而不需要使用Ajax再去验证密码,默认如果你使用Yii 内置的ajax验证Form,例如: $form=$this->beginWidget('CActiveForm', array(        'id'=>'usuario-form',&
  • 使用git同步网站代码 dcj3sjt126com crontabgit
    转自:http://ued.ctrip.com/blog/?p=3646?tn=gongxinjun.com   管理一网站，最开始使用的虚拟空间，采用提供商支持的ftp上传网站文件，后换用vps，vps可以自己搭建ftp的，但是懒得搞，直接使用scp传输文件到服务器，现在需要更新文件到服务器，使用scp真的很烦。发现本人就职的公司，采用的git+rsync的方式来管理、同步代码，遂
  • sql基本操作 蕃薯耀 sqlsql基本操作sql常用操作
    sql基本操作 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:30:33 星期一     &
  • Spring4+Hibernate4+Atomikos3.3多数据源事务管理 hanqunfeng Hibernate4
    Spring3+后不再对JTOM提供支持，所以可以改用Atomikos管理多数据源事务。Spring2.5+Hibernate3+JTOM参考：http://hanqunfeng.iteye.com/blog/1554251Atomikos官网网站：http://www.atomikos.com/   一.pom.xml <dependency> <
  • jquery中两个值得注意的方法one()和trigger()方法 jackyrong trigger
      在jquery中，有两个值得注意但容易忽视的方法，分别是one()方法和trigger()方法,这是从国内作者<<jquery权威指南》一书中看到不错的介绍 1） one方法     one方法的功能是让所选定的元素绑定一个仅触发一次的处理函数，格式为    one(type,${data},fn) &nb
  • 拿工资不仅仅是让你写代码的 lampcy 工作面试咨询
    这是我对团队每个新进员工说的第一件事情。这句话的意思是，我并不关心你是如何快速完成任务的，哪怕代码很差，只要它像救生艇通气门一样管用就行。这句话也是我最喜欢的座右铭之一。 这个说法其实很合理：我们的工作是思考客户提出的问题，然后制定解决方案。思考第一，代码第二，公司请我们的最终目的不是写代码，而是想出解决方案。 话粗理不粗。 付你薪水不是让你来思考的，也不是让你来写代码的，你的目的是交付产品
  • 架构师之对象操作----------对象的效率复制和判断是否全为空 nannan408 架构师
    1.前言。   如题。 2.代码。 (1)对象的复制，比spring的beanCopier在大并发下效率要高，利用net.sf.cglib.beans.BeanCopier Src src=new Src(); BeanCopier beanCopier = BeanCopier.create(Src.class, Des.class, false);
  • ajax 被缓存的解决方案 Rainbow702 JavaScriptjqueryAjaxcache缓存
    使用jquery的ajax来发送请求进行局部刷新画面，各位可能都做过。 今天碰到一个奇怪的现象，就是，同一个ajax请求，在chrome中，不论发送多少次，都可以发送至服务器端，而不会被缓存。但是，换成在IE下的时候，发现，同一个ajax请求，会发生被缓存的情况，只有第一次才会被发送至服务器端，之后的不会再被发送。郁闷。 解决方法如下： ① 直接使用 JQuery提供的 “cache”参数，
  • 修改date.toLocaleString()的警告 tntxia String
      我们在写程序的时候，经常要查看时间，所以我们经常会用到date.toLocaleString()，但是date.toLocaleString()是一个过时 的API，代替的方法如下：   package com.tntxia.htmlmaker.util; import java.text.SimpleDateFormat; import java.util.
  • 项目完成后的小总结 xiaomiya js总结项目
    项目完成了，突然想做个总结但是有点无从下手了。 做之前对于客户端给的接口很模式。然而定义好了格式要求就如此的愉快了。 先说说项目主要实现的功能吧 1，按键精灵 2，获取行情数据 3，各种input输入条件判断 4，发送数据（有json格式和string格式） 5，获取预警条件列表和预警结果列表， 6，排序， 7，预警结果分页获取 8，导出文件（excel，text等） 9，修
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他