代碼適用於jsfiddle（關於代碼的知識）

本文目錄一覽：

• 1、php中可以用angularjs的指令嗎？
• 2、html中一個標籤的末尾含有很多空格，在瀏覽器中首行沒有到達邊界就換行了
• 3、html 當文本框未輸入時點按鈕,旁邊出現紅色警告字怎麼寫求代碼
• 4、jsfiddle怎麼演示ajax 使用技巧
• 5、前端常用的幾種在線代碼編輯器各有什麼優勢

php中可以用angularjs的指令嗎？

摘要：使用過AngularJS的朋友應該最感興趣的是它的指令。現今市場上的前端框架也只有AngularJS擁有自定義指令的功能，並且AngularJS是目前唯一提供Web應用可復用能力的框架。目前有很多JavaScript產品提供插… SyntaxHighlighter.all();…

使用過 AngularJS 的朋友應該最感興趣的是它的指令。現今市場上的前端框架也只有AngularJS 擁有自定義指令的功能，並且AngularJS 是目前唯一提供Web應用可復用能力的框架。

目前有很多JavaScript 產品提供插件給Web開發人員。例如， Bootstrap 就是當前比較流行的提供樣式和JavaScript插件的前端開發工具包。但是開發人員在使用Booostrap中的插件時， 必須切換到JavaScript 模式來寫 jQuery 代碼來激活插件雖然jQuery 代碼寫起來十分簡單，但是必須和HTML進行同步，這是一個單調乏味且容易出錯的過程。

AngularJS主頁展示了一個簡單的例子，用於實現Bootstrap中的 Tab功能，可以在頁面中輕鬆添加 Tab 功能，並且使用方法和 ul 標籤一樣簡單。HTML代碼如下：

複製代碼

body ng-app=”components”

h3BootStrap Tab Component/h3

tabs

pane title=”First Tab”

divThis is the content of the first tab./div

/pane

pane title=”Second Tab”

divThis is the content of the second tab./div

/pane

/tabs

/body

複製代碼

JavaScript代碼如下：

複製代碼

angular.module(‘components’, []).

directive(‘tabs’, function() {

return {

restrict: ‘E’,

transclude: true,

scope: {},

controller: [ “$scope”, function($scope) {

var panes = $scope.panes = [];

$scope.select = function(pane) {

angular.forEach(panes, function(pane) {

pane.selected = false;

});

pane.selected = true;

}

this.addPane = function(pane) {

if (panes.length == 0) $scope.select(pane);

panes.push(pane);

}

}],

template:

‘div class=”tabbable”‘ +

‘ul class=”nav nav-tabs”‘ +

‘li ng-repeat=”pane in panes” ng-class=”{active:pane.selected}”‘+

‘a href=””

‘/li’ +

‘/ul’ +

‘div class=”tab-content” ng-transclude/div’ +

‘/div’,

replace: true

};

}).

directive(‘pane’, function() {

return {

require: ‘^tabs’,

restrict: ‘E’,

transclude: true,

scope: { title: ‘@’ },

link: function(scope, element, attrs, tabsCtrl) {

tabsCtrl.addPane(scope);

},

template:

‘div class=”tab-pane” ng-class=”{active: selected}” ng-transclude’ +

‘/div’,

replace: true

};

})

複製代碼

你可以從以下鏈接查看效果：

image

正如你所見，除了擁有用於實現指令的 tabs 和pane 標籤，頁面和常規HTML頁面沒有什麼區別。HTML開發人員無需編寫任何代碼。當然，總需要有第一個吃螃蟹的人，創建指令共享使用，但是目前Tabs指令已經很常見了，可以在任何地方復用（如BootStrap,、jQueryUI、Wijmo, 和一些知名的前端插件集）。

由於指令的易用和易編寫，許多用戶已經開始使用AngularJS編寫指令了。例如， AngularJS 開發組已經基於AngularJS實現了一系列指令-UI Bootstrap 來代替Bootstrap； 知名ComponentOne 控制項廠商也在AngularJS 基礎上創建了Wijmo ；我們也可以在GitHub上找到一些公共指令資料庫：jQueryUI widgets。

擁有了 AngularJS，是不是覺得自己已經站在了巨人的肩膀上了？但是不要高興的太早，如果已經有了這麼多的指令供我們使用，那我們為什麼還要學習AngularJS ，為什麼還要學習自定義指令呢？

舉個簡單的例子，也許你有特殊的需求：假設你在一家財務公司工作，你需要創建一張財務表單，它需要以表格的形式展示數據、擁有綁定、編輯、校驗並且同步數據更新到伺服器的功能。表單插件很常見但是能夠滿足這些具體需求的不得而知了，所以你必須根據實際業務需求來創建自定義指令。

複製代碼

body ng-app=”abcFinance”

h3Offshore Investment Summary/h3

abc-investment-form

customer=”currentCustomer”

country=”currentCountry”

/abc-investment-form data

/body

複製代碼

這就是本篇文章的目的，接下來我們會討論如何創建 AngularJS指令。

創建自定義AngularJS 指令

文章開頭的自定義指令十分的簡單。它僅僅實現了同步的功能。一般指令是包含更多元素的：

複製代碼

//創建指令模塊 (或者檢索現有模塊)

var m = angular.module(“myApp”);

// 創建”my-dir”指令

myApp.directive(“myDir”, function() {

return {

restrict: “E”, // 指令是一個元素 (並非屬性)

scope: { // 設置指令對於的scope

name: “@”, // name 值傳遞 （字元串，單向綁定）

amount: “=”, // amount 引用傳遞（雙向綁定）

save: “” // 保存操作

},

template: // 替換HTML (使用scope中的變數)

“div” +

” {{name}}: input ng-model=’amount’ /” +

” button ng-click=’save()’Save/button” +

“/div”,

replace: true, // 使用模板替換原始標記

transclude: false, // 不複製原始HTML內容

controller: [ “$scope”, function ($scope) { … }],

link: function (scope, element, attrs, controller) {…}

}

});

複製代碼

效果如下：

image

注意這個自定義指令遵循一種格式：以”my” 為前綴，類似於命名空間，因此如果你在應用中引用了多個模塊指令，你可以通過前綴很容易的判斷出它是在哪定義的。這不是硬性要求，但是這樣做可以帶來很多便利。

指令的構造函數會返回帶有屬性的JavaScript 對象。這些內容在AngularJS 主頁中都有清晰說明。以下是我對一些屬性的理解：

restrict: 說明指令在HTML中的應用形式，備選項有”A”、”E” 和 “C”， “M” ，分別代表 attribute、element、class和comment（默認值為”A”）。我們將更多的關注attributes-如何創建UI元素。

scope: 創建指令的作用範圍，scope在指令中作為屬性標籤傳遞。Scope 是創建可以復用指令的必要條件，每個指令（不論是處於嵌套指令的哪一級）都有其唯一的作用域，它不依賴於父scope。scope 對象定義names 和types 變數。上面的例子即創建了3個scope變數。

name: “@” （值傳遞，單向綁定）：

“@”符號表示變數是值傳遞。指令會檢索從父級scope中傳遞而來字元串中的值。指令可以使用該值但無法修改，是最常用的變數。

amount: “=” （引用,雙向綁定）

“=”符號表示變數是引用傳遞。指令檢索主Scope中的引用取值。值可以是任意類型的，包括複合對象和數組。指令可以更改父級Scope中的值，所以當指令需要修改父級Scope中的值時我們就需要使用這種類型。

save: “” (表達式)

「」符號表示變數是在父級Scope中啟作用的表達式。它允許指令實現比修改值更高級的操作。

template: 替代原始模板中的標記的字元串。替換功能將替換所有舊元素為新值。注意template是如何使用Scope中定義的變數的。這允許你無需寫任何額外的代碼即可創建macro-style 風格指令。replace: 說明是否替換原始標記中的值或是追加原始標記中的值。默認值是false，這時原始標記將被保留。

transclude: 說明自定義指令是否複製原始標記中的內容。例如，之前展示的「tab」指令設置了transclude 為 true，因為tab 元素包含其他HTML 元素。 “dateInput” 指令則需要在初始化時為空，所以需要設置transclude 為false。

link: 該方法在指令中扮演著重要的角色。它負責執行DOM 操作和註冊事件監聽器等。link 方法包含以下參數：

scope: 指令Scope的引用。scope 變數在初始化時是不被定義的，link 方法會註冊監視器監視值變化事件。

element: 包含指令的DOM元素的引用， link 方法一般通過jQuery 操作實例（如果沒有載入jQuery，還可以使用Angular’s jqLite ）。

controller: 在有嵌套指令的情況下使用。這個參數作用在於把子指令的引用提供給父指令，允許指令之間進行交互， tab 指令就是使用該參數較典型的例子：

注意，當調用link 方法時， 通過值傳遞（”@”）的scope 變數將不會被初始化，它們將會在指令的生命周期中另一個時間點進行初始化，如果你需要監聽這個事件，可以使用scope.$watch 方法。

html中一個標籤的末尾含有很多空格，在瀏覽器中首行沒有到達邊界就換行了

你body上有600px的寬啊，還有你寫這個 為了展位，你還不如寫寬度呢,你設置一個高度，他不就有3行空白了

你的意思是這個不

html 當文本框未輸入時點按鈕,旁邊出現紅色警告字怎麼寫求代碼

html

head

meta http-equiv=content-type content=”text/html;charset=GBK”

/head

body

form action=”” method=”post” onsubmit=”return check(this)”

label id=”msg” style=”color:red;font-size:12pt;”/label

br/

用戶名:input name=”username”/

br/

密 碼:input type=”password” name=”username”/

br/

input type=”submit” value=”提交”/

/form

/body

script

function check(form){

return (function(node){

// 如果已經沒有需要校驗的子節點，則推出遞歸

if(!node) return true;

// 判斷子節點類型，這裡我們只需要校驗text和password類型文本

if(/((text)|(password))/i.test(node.type)){

var isEmpty = node.value.length == 0;

// 校驗文本是否為空

if(isEmpty){

caution(node); return false;

}

}

// 使用遞歸來遍歷下一個節點

return arguments.callee(node.nextSibling);

})(form.firstChild);

}

function caution(node){

document.getElementById(“msg”).innerHTML = “請填寫賬號”;

node.focus();

}

/script

/html

jsfiddle怎麼演示ajax 使用技巧

首先要在頁面引入相關的js庫，然後在textarea 裡面放入要執行的代碼，然後eval(document.getElementById(‘interactiveEmitCode’).value)代碼如下：

textarea id=”interactiveEmitCode” rows=”20″ cols=”100″

var ps = new ParticleSystem();

ps.effectors.push(new ChamberBox(0, 0, 400, 400));

var dt = 0.01;

else

newMousePosition = new Vector2(e.offsetX, e.offsetY);

};

/textarea

br /

button onclick=”eval(document.getElementById(‘interactiveEmitCode’).value)” type=”button”Run/button

button onclick=”stop();” type=”button”Stop/button

br /

canvas id=”interactiveEmitCanvas” width=”400″ height=”400″/canvas

優點：可以在本頁面編輯代碼，並且看到實時效果，

缺點：頁面需要引用相關js庫，和本頁代碼邏輯混在一起。代碼顏色黑白顯示，用戶體驗差

b.岑安方式和司徒正美方式，如下圖：

把代碼放到一個iframe中，然後再新開頁面執行該頁面的代碼。相關代碼如下：

script type=”text/javascript”

function runCode(id) {

obj = document.getElementById(id);

var TestWin=open(”); //打開一個窗口並賦給變數TestWin。

TestWin.opener = null // 防止代碼對論談頁面修改

TestWin.document.write(obj.value); //向這個打開的窗口中寫入代碼code，這樣就實現了運行代碼功能。

TestWin.document.close();

}

/script

優點：邏輯分離，可以編輯運行。

缺點：需要新開頁，代碼黑白顯示，用戶體驗差

C.外鏈方式

優點：不與本頁html,css,js出現衝突，只要給出外鏈，不能編輯代碼。

缺點：需要想SAE上傳相關的js、img、css和html

D.jsFiddle方式,我直接拿岑安方式的代碼作為例子：效果如下

這裡有個小技巧：上面看到的iframe指定的src為”

最後的result,js,html,css為iframe中tab的顯示的順序，或者你不想顯示html,css,你就可以直接寫成

效果如下：

也可以顯示result js和html，效果如下：

四.總結

比較這四種方式，我最喜歡最後一種，我相信喜歡最後一種的多一些，因為不僅演示的代碼和博客的代碼分離，html和CSS和js和最終效果也分離開了·

前端常用的幾種在線代碼編輯器各有什麼優勢

jsfiddle

Create a new fiddle

最經典的的編輯器了，主要寫頁面，沒有集成console不太方面調JS

jsbin

JS Bin

跟jsfiddle差不多，有自帶console挺適合調JS的，我最近幾篇專欄文章的代碼都是放在jsbin里的，可以方便的到處到gist很不錯。但是存snapshot有點不清楚（反正我是還沒弄清楚）。Node快閃 御用。

plunker

這個好像國內用的人不多，難道是被牆了？這是我見過的最貼近真實開發環境的ide，所有html js css文件一覽無遺，不像jsfiddle一樣隱藏html和body元素。要是有console就更好了。Angular1文檔御用。

repl.it

Online REPL, Compiler IDE

這個大家可能見的不多，多語言環境，JS的是純console環境，布局很乾凈，調JS挺好的。

codepen

CodePen

這個跟jsbin差不多，好像上面的代碼大多數是CSS相關的。御用。

hackerrank

HackerRank

這個嚴格說是個比賽／面試環境，實時性不錯，其它跟jsfiddle大同小異。我司電面御用。

runkit

RunKit is Node prototyping

這個是node編程用的，在線require( )各種包，看上去挺屌的，我還沒怎麼玩過。npm御用。