本を読む筆記-第七章:モジュール化
4070 ワード
7.1モジュール
js自体には類の概念がないので、普段はjsを書くのは全体的な環境の中で任意に書いています.もちろんこれは初心者の一般的なやり方です.このように時のコードは非常に乱れています.また、関数呼び出しエラーや変数再定義など多くの問題が発生します.どう解決するかはモジュール化によるものです.特定の関連変数や関数を「場所」に集中させることです.ここの「場所」については関数、jsファイル、またはフォルダとすることができます.つまりコードを分けて、絡まないようにします.
一番簡単な例から言えば、次の2つの独立関数:
また、ファイルのモジュール化とは、異なるモジュールを異なるファイルに書き込むことです.例えばa.jsとb.jsの2つのファイルがありますが、b.jsの関数はa.jsの関数(依存関係があります)を使う必要があります.今必要なのはこの2つのファイルをすべてtest.に引用することです.その後導入された二つのシナリオの間でお互いの内容にアクセスすることができます.
7.2モジュールの形態
全体の環境で変数を定義すると名前空間の汚染を招きやすくなります.jsは定義を繰り返す変数については間違いがないので、全体の変数に対してはもっと慎重にしてください.下のコードはモジュールにパッケージする方法を教えます.
何も言いません.本で言っているのは概念がいっぱいあります.
でも、本の中には例のコードがよく書いてあります.私はしばらく反応しませんでした.jsの中の関数は値です.この点はまだ理解が足りないです.コードは下記の通りです.
よく使われるjsライブラリをいくつか挙げました.自分が一番多く使っている自然はやはりjQueryです.これはもちろん、他の多くの倉庫もjQueryに基づいています.またdwz、jQueryUI、bootstrap、knockoutといういくつかのオススメがあります.
js自体には類の概念がないので、普段はjsを書くのは全体的な環境の中で任意に書いています.もちろんこれは初心者の一般的なやり方です.このように時のコードは非常に乱れています.また、関数呼び出しエラーや変数再定義など多くの問題が発生します.どう解決するかはモジュール化によるものです.特定の関連変数や関数を「場所」に集中させることです.ここの「場所」については関数、jsファイル、またはフォルダとすることができます.つまりコードを分けて、絡まないようにします.
一番簡単な例から言えば、次の2つの独立関数:
function forEachIn(object,action){
for(var property in object){
if(Object.prototype.hasOwnProperty.call(object,property)){
action(property,object[property]);
}
}
}
function forEach(array,action){
for(var i = 0; i<array.length; i++){
action(array[i]);
}
}また、ファイルのモジュール化とは、異なるモジュールを異なるファイルに書き込むことです.例えばa.jsとb.jsの2つのファイルがありますが、b.jsの関数はa.jsの関数(依存関係があります)を使う必要があります.今必要なのはこの2つのファイルをすべてtest.に引用することです.その後導入された二つのシナリオの間でお互いの内容にアクセスすることができます.
<html>
<head>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript">
function add1(a,b){
return a * b;
}
alert(add2(1,2,3));
</script>
</head>
</html>7.2モジュールの形態
全体の環境で変数を定義すると名前空間の汚染を招きやすくなります.jsは定義を繰り返す変数については間違いがないので、全体の変数に対してはもっと慎重にしてください.下のコードはモジュールにパッケージする方法を教えます.
//
var names = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
function getMonthName(number){
if(arguments.length > 0){
if(number >= 1)
return names[number-1];
}else{
return "have no this month";
}
}
function getMonthNumber(name){
for(var i = 0; i<names.length; i++){
if(names[i] == name)
return i+1;
}
}
//----------------------------------------------------
// names ，
function buildMonthNameModule(){
var names = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
function getMonthName(number){
if(arguments.length > 0){
if(number >= 1)
return names[number-1];
}else{
return "have no this month";
}
}
function getMonthNumber(name){
for(var i = 0; i<names.length; i++){
if(names[i] == name)
return i+1;
}
}
window.getMonthName = getMonthName;
window.getMonthNumber = getMonthNumber;
}
function getMonthName(){
return "zhangran";
}
buildMonthNameModule();// window
alert(getMonthName()); // buildMonthNameModule() 。何も言いません.本で言っているのは概念がいっぱいあります.
でも、本の中には例のコードがよく書いてあります.私はしばらく反応しませんでした.jsの中の関数は値です.この点はまだ理解が足りないです.コードは下記の通りです.
// ， ，‘ ’ ， “==”
function positionOf(element,array,compare,start,end){
if(start == null)
start = 0;
if(end == null)
end = array.length;
for(;start<end;start++){
var current = array[start];
if(compare ? compare(element,current):element == current)//
return start;
}
}よく使われるjsライブラリをいくつか挙げました.自分が一番多く使っている自然はやはりjQueryです.これはもちろん、他の多くの倉庫もjQueryに基づいています.またdwz、jQueryUI、bootstrap、knockoutといういくつかのオススメがあります.