JS를 통해 PHP 출력 DOM 자동 개체화
13999 단어 HTMLPHPJavaScript
PHP, JS, HTML 공동 작업
PHP와 JS의 왕래가 번거로울 때 시도해 본 방법이 노트에 적혀 있다.
index.php<script type="text/javascript">
/**
* DOMと紐付けるオブジェクト。
* @param[in] name 紐付けに使う名前。ID、クラス名で使用される。
*/
Object = function(name) {
this._name = name;
this._root = document.getElementById(name);
this._root.getElementsByTagName('p')[0].textContent = name;
};
Object.prototype.getName = function() {
return this._name;
};
</script>
<?php
/**
* DOMを出力し、JSとの紐付けを行う。
* @param[in] $name 紐付けに使う名前。
*/
function render_object($name) {
?>
<div id="<?php echo $name; ?>" class="<?php echo $name; ?>">
<p>content</p>
</div>
<script type="text/javascript">
/// JSをインライン展開して紐付けを行う。
(function() {
var obj = new Object('<?php echo $name; ?>');
console.log(obj.getName());
}());
</script>
<?php
}
/// 開発者が再利用するコード。
$number = 0;
render_object("object_" . $number++);
render_object("object_" . $number++);
?>
결과 HTML.
result<script type="text/javascript">
Object = function(name) {
this._name = name;
this._root = document.getElementById(name);
this._root.getElementsByTagName('p')[0].textContent = name;
};
Object.prototype.getName = function() {
return this._name;
};
</script>
<div id="object_0" class="object_0">
<p>content</p>
</div>
<script type="text/javascript">
(function() {
var obj = new Object('object_0');
console.log(obj.getName());
}());
</script>
<div id="object_1" class="object_1">
<p>content</p>
</div>
<script type="text/javascript">
(function() {
var obj = new Object('object_1');
console.log(obj.getName());
}());
</script>
결과의 JS 콘솔입니다.
result"object_0" index.php:20:1
"object_1" index.php:29:1
반을 나누어 카운터를 만들다
UI.php의 등급화 필요성은 여전히 수수께끼다.
함수면 충분할 것 같아.서버/클라이언트 쪽에서 대상에 따라 new를 진행합니다.
또 양측도 이름을 공유해야 한다.PHP에 관해서는 이름의 관리자도 필요하다.
그리고 JS에서 getElementById를 사용하면 스캔하는 시간도 많이 걸립니다.
index.php<script type="text/javascript" src="ui.js"></script>
<?php
require_once(dirname(__FILE__) . '/UI.php');
/// TODO: You should be created Class for name
$prefix_name = 'counter_widget';
$suffix_number = 0;
$counter_0 = new UI\Counter($prefix_name . '_' . $suffix_number++);
$counter_1 = new UI\Counter($prefix_name . '_' . $suffix_number++);
$counter_0->render();
$counter_1->render();
?>
UI.php<?php
namespace UI;
/**
* UI\Counter
* @see ui.js
*/
class Counter {
private $_name;
function __construct($name) {
$this->_name = $name;
}
/**
* render html and associate by inline JS
*/
public function render() {
?>
<div id="<?php echo $this->_name; ?>" class="<?php echo $this->_name; ?>">
<div class="display">display</div>
<input class="button" type="button" value="click me" />
</div>
<script type="text/javascript">
(function() {
var counter = new UI.Counter('<?php echo $this->_name; ?>');
counter.build();
}());
</script>
<?php
}
}
?>
ui.js/// namespace
UI = {};
/**
* UI.Counter
*
* @param[in] name widget name string
*/
UI.Counter = function(name) {
this._name = name;
this._root = document.getElementById(name);
if (this._root == null) {
console.error('not found name "' + name + '"');
return;
}
this._counter = 0;
};
/**
* build logic with root node
*/
UI.Counter.prototype.build = function() {
var self = this; /// alias for this
var display = self._root.getElementsByClassName('display')[0];
var button = self._root.getElementsByClassName('button')[0];
button.addEventListener('click', function() {
display.textContent = self._counter++;
});
};
result
Reference
이 문제에 관하여(JS를 통해 PHP 출력 DOM 자동 개체화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/narupo/items/abe342203d3da551ef9f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<script type="text/javascript">
/**
* DOMと紐付けるオブジェクト。
* @param[in] name 紐付けに使う名前。ID、クラス名で使用される。
*/
Object = function(name) {
this._name = name;
this._root = document.getElementById(name);
this._root.getElementsByTagName('p')[0].textContent = name;
};
Object.prototype.getName = function() {
return this._name;
};
</script>
<?php
/**
* DOMを出力し、JSとの紐付けを行う。
* @param[in] $name 紐付けに使う名前。
*/
function render_object($name) {
?>
<div id="<?php echo $name; ?>" class="<?php echo $name; ?>">
<p>content</p>
</div>
<script type="text/javascript">
/// JSをインライン展開して紐付けを行う。
(function() {
var obj = new Object('<?php echo $name; ?>');
console.log(obj.getName());
}());
</script>
<?php
}
/// 開発者が再利用するコード。
$number = 0;
render_object("object_" . $number++);
render_object("object_" . $number++);
?>
<script type="text/javascript">
Object = function(name) {
this._name = name;
this._root = document.getElementById(name);
this._root.getElementsByTagName('p')[0].textContent = name;
};
Object.prototype.getName = function() {
return this._name;
};
</script>
<div id="object_0" class="object_0">
<p>content</p>
</div>
<script type="text/javascript">
(function() {
var obj = new Object('object_0');
console.log(obj.getName());
}());
</script>
<div id="object_1" class="object_1">
<p>content</p>
</div>
<script type="text/javascript">
(function() {
var obj = new Object('object_1');
console.log(obj.getName());
}());
</script>
"object_0" index.php:20:1
"object_1" index.php:29:1
UI.php의 등급화 필요성은 여전히 수수께끼다.
함수면 충분할 것 같아.서버/클라이언트 쪽에서 대상에 따라 new를 진행합니다.
또 양측도 이름을 공유해야 한다.PHP에 관해서는 이름의 관리자도 필요하다.
그리고 JS에서 getElementById를 사용하면 스캔하는 시간도 많이 걸립니다.
index.php
<script type="text/javascript" src="ui.js"></script>
<?php
require_once(dirname(__FILE__) . '/UI.php');
/// TODO: You should be created Class for name
$prefix_name = 'counter_widget';
$suffix_number = 0;
$counter_0 = new UI\Counter($prefix_name . '_' . $suffix_number++);
$counter_1 = new UI\Counter($prefix_name . '_' . $suffix_number++);
$counter_0->render();
$counter_1->render();
?>
UI.php<?php
namespace UI;
/**
* UI\Counter
* @see ui.js
*/
class Counter {
private $_name;
function __construct($name) {
$this->_name = $name;
}
/**
* render html and associate by inline JS
*/
public function render() {
?>
<div id="<?php echo $this->_name; ?>" class="<?php echo $this->_name; ?>">
<div class="display">display</div>
<input class="button" type="button" value="click me" />
</div>
<script type="text/javascript">
(function() {
var counter = new UI.Counter('<?php echo $this->_name; ?>');
counter.build();
}());
</script>
<?php
}
}
?>
ui.js/// namespace
UI = {};
/**
* UI.Counter
*
* @param[in] name widget name string
*/
UI.Counter = function(name) {
this._name = name;
this._root = document.getElementById(name);
if (this._root == null) {
console.error('not found name "' + name + '"');
return;
}
this._counter = 0;
};
/**
* build logic with root node
*/
UI.Counter.prototype.build = function() {
var self = this; /// alias for this
var display = self._root.getElementsByClassName('display')[0];
var button = self._root.getElementsByClassName('button')[0];
button.addEventListener('click', function() {
display.textContent = self._counter++;
});
};
resultReference
이 문제에 관하여(JS를 통해 PHP 출력 DOM 자동 개체화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/narupo/items/abe342203d3da551ef9f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)