移动端横屏方案

文章转载于掘金 https://juejin.im/entry/5a30a76df265da430703411e

js实现手机横竖屏事件

在做H5项目时,需要在横竖屏变化时,做一些处理。毫无疑问,需要使用orientationchange来监听横竖屏的变化。

方案1 orientationchange事件

1
2
3
4
// 监听 orientation changes
window.addEventListener("orientationchange", function(event) {
// 根据event.orientation|screen.orientation.angle等于0|180、90|-90度来判断横竖屏
}, false);

orientationchange事件在低端的adroid机器上存在兼容性问题,可能不会触发

方案2 resize配合(window.inner/outerWidth, window.inner/outerHeight)

hexo指令记录

hexo 常用指令记录

hexo init 初始化项目,生成一个hexo站点

hexo new [layout]

创建一篇新文章
layout: 指定输出目录
title: 指定文章标题

hexo generate

生成静态站点文件
可简写 **hexo g**

hexo deploy

部署网站
可简写 **hexo d**

hexo clean

清除生成的站点文件

Node学习

基本点

全局对象

属性

  • ‘process.pid’ 进程pid
  • ‘process.argv’ // argument参数 获取命令行参数 0:node的绝对路径;1:文件的绝对路径; 后续的为获取到得指令 空格分割
  • ‘process.env’ // 环境变量
    • NODE_DEV process.env.环境变量名
    • ‘NODE_DEV’ process.env[‘环境变量名’]

函数

  • processs.abort 终止程序
  • process.exit(code)
    • 注册事件 ‘process.on(‘exit’, function(code){具体推出前的操作})’
    • 退出状态码: 0代表正常退出 非0代表异常退出
  • process.kill(pid) 终止指定进程

异步函数的比较

  • process.nextTick(fn, [,…argv]); idle空闲观察者 优先级最高 底层:数组
  • setImmediate(fn, [,…argv]); check观察者 优先级最低 底层:链表
  • setTimeout(fn, [,…argv]); time观察者 优先级居中

Iframe使用小点

了解iframe

今天帮朋友做一个看似简单的页面之间跳转判断问题,实际上却花费了我将近一个小时的时间才解决,最后还是选择用ifrmae的黑魔法完成。

iframe表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中。在HTML 4.01中,文档可能包含头部和正文,或头部和框架集,但不能包含正文和框架集。但是,iframe可以在正常的文档主体中使用。每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文(没有父级)通常是浏览器窗口。

属性:

首先该元素包含全局属性

frameborder HTML 4 only
取值为1时(默认值),告诉浏览器在当前iframe与其他iframe之间绘制边框,取0时则无需绘制此边框。
height
以CSS像素格式HTML5,或像素格式HTML 4.01,或百分比格式指定frame的高度。

longdesc HTML 4 only
指向frame详细描述的URI(统一资源标识符),因为广泛乱用,该属性在非视觉浏览器中没什么作用。

marginheight HTML 4 only
框架内容到框架的上下边距,以像素格式表示。

marginwidth HTML 4 only
框架内容到框架的左右边距,以像素格式表示。
name
嵌入的浏览上下文(框架)的名称。该名称可以用作’a’标签,’form’标签的target属性值,或’input’标签和’button’标签的formtaget属性值。

sandbox HTML5 only
如果指定了空字符串,该属性对呈现在iframe框架中的内容启用一些额外的限制条件。属性值可以是用空格分隔的一系列指定的字符串。

seamless HTML5 only
该布尔属性指示浏览器将iframe渲染成容器页面文档的一部分。例如,通过打被包含的文档的链接,在iframe页面的样式被渲染之前,父页面的CSS样式就可以应用在iframe中(除非被其他设置阻止)。

src
嵌套页面的URL地址。使用遵守同源策略的 ‘about:blank’ 来嵌套空白页。

srcdoc HTML5 only
该属性值可以是HTML代码,这些代码会被渲染到iframe中,如果同时指定了src属性,srcdoc会覆盖src所指向的页面。该属性最好能与sandbox和seamless属性一起使用。

width
以CSS像素格式HTML5,或以像素格式HTML 4.01,或以百分比格式指定frame的宽度。

如何在页面中iframe中的元素对象

内联的框架,就像 ‘frame’ 元素一样,会加入 window.frames 伪数组中。

通过contentWindow属性,脚本可以访问iframe元素所包含的HTML页面的window对象。contentDocument属性则引用了iframe中的文档元素(等同于使用contentWindow.document),但IE8-不支持。

脚本试图访问的框架内容必须遵守同源策略,并且无法访问非同源的window对象的几乎所有属性。同源策略同样适用于子窗体访问父窗体的window对象。跨域通信可以通过window.postMessage来实现。

基本使用示例:

1
var iframeInsideNode = window.frames["iframe中name的值"].document.getElementById("ifrmae中元素的Id")

实现网页同步刷新调试

实现网页同步刷新,释放你的F5

参考文档 browser-sync

1:首先你需要一个nodeJs的环境
这一步非常简单,去node官网下载node安装包,安装即可
2:全局安装browser-sync
npm i browser-sync -g
3:到指定目录路径下 启动命令
browser-sync start --server --files '*.html,*.js,*.css'
(将你的命令添加到package.json中去,方便后续使用)
4: 修改文件,当监视到监视的文件被修改时,浏览器会自动刷新

npm使用学习

script

配置一些快捷启动项

设置

npm init 初始化,创建package.json文件
npm i gulp -g 全局安装gulp包
npm i jquery --save 安装jquery包,保存的生产依赖
npm i jquery --save-dev 安装jquery包,保存到开发依赖
npm uninstall jquery 卸载jquery包
npm i jquery@3.1.1 安装指定版本的jquery包
npm i --production 根据package.json中的dependencies安装生产依赖的包文件
npm root -g 查询npm全局安装路径
npm config set prefix "D:/npm"改变npm默认的安装路局同时需要修改环境变量path中的路径

ES6学习(0)

前言

在业务的开发过程中,我们做的最多的事情就是复制粘贴,但是在向往成为一名IT技术大牛的路上,显然这样是不行的,开发了这么久了,也发现了自己不少的弊端,所以决定敞开心扉去拥抱ES6,毕竟马上ES7就要出来了…

for-of循环

ES6的到来或多或少会改变我们的编码风格,但是你完全不用担心你写的那些又丑又长的旧代码是否会在ES6中出现这样或者那样的问题,首先ES6是一个划时代的Javascript的进化,但这并表明它就抛弃了原有的东西,所以你那些又丑又长的代码是可以通过部分的改装成ES6尽量变得美观起来。

我们在JS中经常会用的for去遍历数组、或者对象之类的。
那时候的天很蓝,我们没有那么多的小心思。

1
2
3
for (var i = 0; i < arr.length; i++) {
console.log('小呆呆' + arr[i]);
}

从ES5正式发布后,我们的小心思就多了,你可能不会再像之前那样按部就班的写代码了,我们会去尝试更多的新鲜元素

1
2
3
arr.forEach(function (value) {
console.log('新鲜的元素' + value);
})

小程序踩坑记录

记录自己在开发微信小程序上遇到的一些坑

也是刚刚接触微信小程序没多久,觉得有必要记录下自己在工作中遇到的各种问题,以方便后续的回顾,古人语:温故而知新,虽然我不怎么看好小程序的发展,除非它能走出自己的那个封闭开发环境。

swiper 轮播组件

今天遇到一个场景,需要竖向的轮播显示信息,可是在官方的开发文档上来回看了几遍,也没有看到如何让swiper组件竖向滚动
小程序踩坑记录
其实swiper是支持竖向滚动的,只要添加属性’vertical=”true“‘就可以了,但不知道为什么官方没有写到文档中,可能有些小BUG吧。