# JavaScript - something about childNodes and nextSibling why they get DOM is not as you imagine childNodes MDN
nextSibling - MDN
## Sometimes we use childNodes ### HTML <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> ### JavaScript console.log(document.querySelector('ul').childNodes); // output [text, li, text, li, text, li, text, li, text] Why?
Then
### HTML <ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul> ### JavaScript console.log(document.querySelector('ul').childNodes); // output [li, li, li, li] If you log text object, you can find it is wrap.
...
Category: JavaScript
# JavaScript - Google Closure Compiler V.S. Gulp uglify ## Intro I have two choice
Google Closure Compiler
UglifyJs
### Google Closure Compiler Google Closure Compiler
Google Closure Compiler is a tool for minify and uglify js.
From Google
Java
Command Line
Slow
### UglifyJs mishoo/UglifyJS2
More option setting
Node.js
Command Line
Fast
## Test ### Google Closure Compiler When i run command line, it used lot of cpu source.
...
# gulp.js - Concatenate File When Gulp Watch ## package.json { "name": "gulp", "version": "3.8.7", "devDependencies": { "gulp": "^3.9.0", "gulp-concat": "^2.6.0", "gulp-watch": "^4.3.4" } } ## gulpfile.js var gulp = require('gulp'), watch = require('gulp-watch'), concat = require('gulp-concat'); var js; gulp.task('concat', function (cb) { var options = {}; watch('dev/*.js', options, function (e) { // console.log('e:'+JSON.stringify(e)); // console.log('\n'); console.log(new Date() + ' -- ' + e.history[0].replace(e.base, '')); js = e.history[0].replace(e.base, ''); gulp.
...
# JavaScript - scrollTop ## scrollTop Element.scrollTop - Web API Interfaces | MDN
## Issue in firefox Normal
element.scrollTop = intValue; But when I use
document.body.scrollTop = 0; It doesn’t work in firefox.
Solution
document.documentElement.scrollTop = 0; // for firefox Refer - document.body.scrollTop vs document.documentElement.scrollTop
...
# JavaScript - insertBefore & insertAfter ## insertBefore This is native JavaScript api
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
var vDom = document.createElement('div'), dom = document.querySelector('#list'); dom.insertBefore(vDom, dom.childNodes[1]); // or var vDom = document.createElement('div'), dom = document.querySelector('#target'); dom.parentNode.insertBefore(vDom, dom); Refer - Node.insertBefore()
## insertAfter JavaScript doesn’t have any api handle insert DOM after reference DOM
We can use this way
function insertAfter(newNode, referenceNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } Refer - How to do insert After() in JavaScript without using a library?
...
# JavaScript - Dynamic Load script || JSONP Callback ## Intro Sometimes we need dynamic load script or handle jsonp callback
And we need handle script onload or jsonp callback onload or something error
## How to do? Use onload, onerror method
## Code if (typeof UTIL == 'undefined' || !UTIL) { var UTIL = {}; } UTIL.createEl = { get: function(sTag, oAttr, handleOnLoad, handleError) { var el = document.
...
# JavaScript - Cross Module Communication When website modulize, need a better way handle cross module communcation.
Refer JavaScript design pattern’s observer pattern and Android EventBus
## Principle ## My Implement ## Example Hub is a array put publish object
publish object must include action and something want to do
var funcA = function () { alert('Red Alarm'); } publish('alarm', funcA); If more something to in same action
var funcA = function () { alert('Red Alarm'); } var funcB = function () { console.
...
# AJAX - REST 在 REST 當道的現在, 不得不了解一下如何實作 CRUD(create, read, update, delete) 本文 server side 以 php 為例子
var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.html', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('myDiv').innerHTML = xhr.responseText; } }; xhr.send(); 上面為一個簡單的 AJAX 行為
在此之前須了解在做 AJAX 行為時, 資料是如何跟 request 一起帶到 server side 大致上有 3 種
FormData application/x-www-form-urlencoded payload 前面 2 種是用傳統的 form 包起來一起帶到 server side 再經由 php 解析 GET / POST 由於 php 只有 $_GET & $POST 這無法達到真正的 rest(不過有人硬幹出來 tronice/epv) 所以必須由其他方式實作 最簡單的實作就是使用 $_SERVER['REQUEST_METHOD'] 來捕捉 4 種 request 的 method
...
# AJAX - XMLHttpRequest Introduction ## Intro 說到 AJAX 行為就不行不提到 XMLHttpRequest object
不知道現在的前端工程師還有人認識這個東西嗎?
當前 library 眾多(YIU, jQuery, AngularJS, Backbone.js…)
可能用過
Y.jsonp(url, callback); $.ajax(); $http(); …… 這些處理 AJAX 行為的 method
這些 library 在處理 AJAX 行為時其實都是 base on XMLHttpRequest
所以就來簡單說明一下這玩意, 了解這東西其實有助於處理 AJAX 行為
因為這算是在前端開發上會較接觸到網路 http Protocol 的東西, 也跟後端有較緊密的關係
## History 其實在早期 XMLHttpRequest 尚未定案下來時也有許多名稱
var httpRequest; if (window.XMLHttpRequest) { // IE7,Mozila,Safari... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE5,IE6 // 找出最新版MSXML剖析器 var msxmls = ["MSXML2.
...
# JavaScript - Detect CSS3 transitionEnd transitionend
It is a event can fired when CSS3 transition end.
function transitionEnd() { var el = document.createElement('div'), //what the hack is bootstrap transEndEventNames = { WebkitTransition : 'webkitTransitionEnd', MozTransition : 'transitionend', OTransition : 'oTransitionEnd otransitionend', transition : 'transitionend' }; for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return transEndEventNames[name]; } } return false; // explicit for ie8 ( ._.) } // Usage document.
...