More Related Content Similar to モテる JavaScript Similar to モテる JavaScript (20) More from Osamu Monoe (20) 5. 変数/関数の命名規則
• 基本
var fistName; (キャメルケース)
• コンストラクタ
var calendar = new CalenderCtrl();
(先頭が大文字)
• this (現在の名前空間)
var that = this;
• 定数
var GENERAL_API_KEY = "4fh5cv$sp";
• プライベート
var _userName = "user01";
8. スコープ (1/2)
• JavaScript の変数スコープは関数単位
//変数 i と fullName のスコープは for 文内に閉じていな
い
for (var i = 0; i < length; i++) {
var fullName = items[i].firstName + " "
items[i].lastName;
:
//以下は期待どおりの動作とならない
for (var i=0; i<5; i++) {
console.log("Outer loop " + i);
for (var i=0; i<10; i++) {
console.log("Inner loop " + i);
}
}
10. 名前空間を汚染しないための工夫
• “use strict” の使用
• 即時実行関数に閉じる
<script>
(function(){
"use strict";
onload = function(){
var variable1, variable2, variable3;
//ページ読み込み時の処理
};
function otherFunction(){ //関数の処理 };
})();
</script>
11. オブジェクトを利用した書き方(1)
var myUtil = {
methodA : function () {
//method A の処理
return resultValue;
},
methodB : function(arg){
//method B の処
理
return resultValue;
}
};
//呼び出し方
var variable = myUtil.methodA();
12. オブジェクトを利用した書き方(2)
var myUtil = {};
myUtil.methodA = function () {
//method A の処理
return resultValue;
};
myUtil.methodB = function (arg) {
//method B の処理
return resultValue;
};
//呼び出し方は同じ
var variable = myUtil.methodA();
13. 中括弧({})の書き方 (1/2)
• 中括弧の開始タグの前で改行しない
• 暗黙的 ; (セミコロン) の挿入による意図
しない動作となる場合がある
function userInfo(){
return {
firstName : "ひろし",
lastName : "山田",
age : 23};
}
×〇
function userInfo()
{
return
{
firstName : "ひろし",
lastName : "山田",
age : 23};
}
エラーが発生
14. 中括弧({})の書き方 (2/2)
• if 文は {} を省略せずに書く
if( itemslength == MAX_LENGTH) countLabel.innerText = "Full";
else countLabel.innerText = itemslength;
if( itemslength == MAX_LENGTH) {
countLabel.innerText = "Full";
}else{
countLabel.innerText = itemslength;
}
△
〇
15. DOM アクセスについて
• DOM ツリーを探すのでアクセスにはコストがかかる
• 2 回以上アクセスする際はインスタンスを変数に
//一般的に使用される DOM エレメントのインスタンスの取得法
var element = document.getElementById("エレメントの
ID");
.getElementByName("エレメントの名前");
.querySelector("CSS セレクタ");
.activeElement();
.all();
16. DOM アクセスの例
//非常に効率が悪い例
for(var i=0; i < document.getElementById(“itemList”).childNodes.length; i++){
document.getElementById("itemList").childNodes[i].innerText = "アイテム" +
i;
}
//ロスを減らした例
var nodes = document.getElementById("itemList").childNodes;
var length = nodes.length;
for(var i=0; i< length; i++){
nodes[i].innerText = "アイテム" + i;
}
24. 即時実行関数
• (function(){//処理})();
• 一か所からのみ呼び出される
• 名前空間を使用しない
var shopName = item.shopName;
var avgFare = item.avgFare;
var creditCard = (function(sepChar){
var dotList = "",
cardList = item.creditCardList,
length = cardList.length;
for(var i=0; i<= length; i++){
dotList += cardList[i].name + sepChar;
}
return dotList;
})(",");
27. クロージャー(2/3)
var ctrl_listView = document.getElementById("itemList"),
ctrl_item = null;
for(var i=0; i <=5; i++){
crtl_item = document.createElement("li");
crtl_item.innerText = "リンク" + i;
crtl_item.addEventListener("click",
function (index) {
return function(){
console.log(index
+ "番目がクリックされました。");
}
}(i)
, false);
ctrl_listView.appendChild(crtl_item);
}
• ex) リストに生成時のインデックスを保持
29. メソッドチェーン (2/2)
var myPage = {
methodOne : function(){
console.log("ONE");
return this;
},
methodTwo : function(){
console.log("TWO");
return this;
},
methodThree : function(){
console.log("THREE");
return this;
}
}
//呼び出し
myPage.methodOne().methodTwo().methodThree();
32. 完結したページ/コントロールを
1 対 1 のオブジェクトで管理
var thisPage ={
ctrls:{
//コントロールの
//インスタンスを保持
},
init:{
//ページの初期化関数群
},
handlers:{
//イベントハンドラ群
},
util:{
//一般関数群
}
}
35. Web ページの場合の応用
・ブラウザ間のイベント設定の記述の違いを吸収する
var util ={
addEvent:null,
init: function () {
if(document.addEventListener) {
this.addEvent = function(element, type, handler){
element.addEventListener(type, handler, false);
}
}else if(document.attachEvent) {
this.addEvent = function(element, type, handler){
element.attachEvent('on' + type, handler);
}}}}
//初期化
util.init();
//イベントハンドラの設定
util.addEvent(document.getElementById("button"));
