關於js函式重構的問題

阿新 • • 發佈：2019-01-03

今天在走獲得焦點動作時，想著去重構一下獲得和失去焦點的程式碼，重構前：

$(".searchInput").focus(function(){
		$(".search").css("width","320px");
		$(".searchInput").css({"width":"268px","border":"none","outline":"none"});
		$(".searchHidden").css("display","block");
		$(".searchbtn").css({"background-color":"#969696","color":"white"});
	});
	$(".searchInput").blur(function(){
		$(".search").css("width","240px");
		$(".searchInput").css({"width":"188px","border-style":"none"});
		$(".searchHidden").css("display","none");
	});

重構後：

$(".searchInput").focus(function(){
		changeInputDiv("320px","268px","block","#969696","white")
	});
	$(".searchInput").blur(function(){
		changeInputDiv("240px","188px","none","#eeeeee","#969696")
	});
	
	function changeInputDiv(width1,width2,display,bakcolor,color){
		$(".search").css("width",width1);
		$(".searchInput").css("width",width2);
		$(".searchHidden").css("display",display);
		$(".searchbtn").css({"background-color":bakcolor,"color":color});
	}

遇到的問題是：剛開始我直接這樣子寫，沒有在為onfocus建立一個函式，所以解析器是直接呼叫了changeInputDiv函式，並不能表現出獲得焦點和失去焦點的變化。沒有點選時就已經呼叫了這個函式，而獲得焦點和失去時就不再有反應。

$(".searchInput").onfocus=changeInputDiv("320px","268px","block","#969696","white");

關於js函式重構的問題

今天在走獲得焦點動作時，想著去重構一下獲得和失去焦點的程式碼，重構前： $(".searchInput").focus(function(){ $(".search").css("width","320px"); $(".searchInput").css({"wi

js函式引數是按值傳遞的，不是按引用傳遞

今天看到高程關於傳遞引數這一張的時候，說到，引數不管是基本型別還是引用型別的傳遞都是按值傳遞，但是 demo： function setName(obj){ obj.name=“Nicholas”; obj=new Object(); obj.name=“Greg”;

js函式為什麼不能夠放在window onload中

今天在jsp中的form表單利用onclick=”xxx”來監聽js中一個function xxx(){}函式，遇到一個很奇怪的問題就是點選submit按鈕之後竟然沒有響應xxx()函式。在這之前我已經多次在form表單中利用onclick=”xxx”來監聽一個函式，並沒有出現過這種

2018.9.14 關於對JS函式的理解的總結

今天是2018.9.14星期五，下午16:00整，今天是我們公司是雙休的，也就是說週末放假兩天！今天下午我的內心的是很浮躁的，看著螢幕裡面的程式碼，心卻早已飛向遠方。我知道這樣很不好，但是就是有那麼一段時間很煩躁的。真的希望我能改掉這個壞毛病。時間過得真快，轉眼間來到公司當實習生已經半

js函式的深入理解

1.函式宣告 2.函式表示式 3.匿名函式函式宣告：function fnName(){,,,} 使用function關鍵字宣告一個函式再指定一個函式名叫做函式宣告函式表示式：functioin(){...} 使用function關鍵字

JS函式執行

函式定義： function name(){ #內容 } 普通函式：

Js檔案中呼叫其它Js函式的方法

轉載：在一個js中引用另一個js的方法方法/步驟一個js呼叫另外一個js的方法，最簡單的例子就是jquery的呼叫。首先準備好兩個js檔案。然後寫一個html檔案，通過<script type='text/javascript' src=''></

JS函式、arguments、作用域、作用域鏈、預解析

函式的返回值返回值語法： //宣告一個帶返回值的函式 function 函式名(形參1, 形參2, 形參…){ //函式體 return 返回值; } //可以通過變數來接收這個返回值 var 變數 = 函式名(實參1, 實參2, 實參3); arguments的使用

JS檔案的.js和.min.js的區別，以及js函式執行的順序

①**.js和**.min.js的區別引用 Q: .js和.min.js檔案分別是什麼？ A: .js是JavaScript 原始碼檔案， .min.js是壓縮版的js檔案。 Q：為什麼要壓縮為.min.js檔案？減小體積 .min.js檔案經過壓縮，相對編譯前的js檔案體積較小

js函式大全

文章來自：原始碼線上https://www.shengli.me/javascript/69.html 一、函式高階 1、函式回撥 2、閉包二、迴圈繫結 html檔案 &n

js 函式宣告提升和變數提升

1. 函式宣告提升 func() function func () { } 上例不會報錯，正是因為 ‘函式宣告提升’，即將函式宣告提升（整體）到作用域頂部（注意是函式宣告，不包括函式表示式），實際提升後結果同下： // 函式宣告提升 function func () { } func()

JS 常用的js函式

在火狐瀏覽器可以在控制檯直接測試 js（換行時要按住shift），註釋表示結果。 1、以 “|” 等字元分割字串：split(分割的字元) str = "jpg|bmp|gif|ico|png"; arr = str.split("|"); //arr = ['jpg','bmp','g

js---函式引數

函式的引數分為形參和實參 add(1,2,3)----執行函式的時候給的值是實參 function add(a,b){}----宣告函式的時候，是形參 function add(a,b,c,d){ console.log(arguments.length);//實參個數 3 cons

js 函式實參列表arguments和形參的那點事兒

**JavaScript是解釋下前端語言和其他編譯性後端語言（C++、java、python、golang…）不一樣，由於變數的型別沒那麼嚴格，一個var就可以定義全部，導致語法也比較鬆懈！函式形參和實參傳遞的時候，也無需一一對應，都是隱式轉換了！而後端編譯性語言是有嚴格的變數型別定義的，所

JS:函式執行順序

for(var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000); } console.log(i + "===="); 這個列印結果不是 0 1 2

js函式、作用域、作用域鏈、閉包、立即執行函式

1.函式定義 1.函式宣告 ```java function test(){ 函式體 }; 2.函式表示式： - 命名函式表示式 - ```java var fn = function test(){}; （匿名）函式表示式 var fn = function(){};

關於js函式節流理解

函式節流的目的從字面上就可以理解，函式節流就是用來節流函式從而一定程度上優化效能的。例如，DOM 操作比起非DOM 互動需要更多的記憶體和CPU 時間。連續嘗試進行過多的DOM 相關操作可能會導致瀏覽器掛起，有時候甚至會崩潰。尤其在IE 中使用onresize 事件處理程式的時候容易發生，當調整

在jsp頁面使用JS函式設定標籤屬性值

使用js函式實現按鈕控制倒計時

1.設定控制倒計時的函式 function count(){ var count = 149;//倒計時開始的秒數 var countdown = setInterval(CountDown, 1000); //倒計時增量（1000為毫秒） function CountD

js--函式提升和變數提升

一：函式提升 console.log(global); // undefined var global = 'global'; console.log(global); // global function fn () { 　　console.log(a); // undefined 　　var

關於js函式重構的問題

相關推薦