本文目錄一覽:
- 1、我想把html和js分離管理,於是把script標籤中的所有代碼剪切到js文件中保存,script
- 2、什麼是JS代碼?
- 3、[PHPCms教程] 標籤JS如何調用管理
- 4、如何利用Require.Js管理多頁面站點文件
- 5、JS代碼怎麼寫
我想把html和js分離管理,於是把script標籤中的所有代碼剪切到js文件中保存,script
1、js代碼必須要寫正確的。比如你的js文件是123.js,在123.js中直接寫js代碼。代碼中不要加script /script
2、調用時,js路徑要寫正確。如果你的js放到根目錄就寫
script src=”/123.js”/script
什麼是JS代碼?
JavaScript
縮寫。一種計算機腳本語言,主要在web瀏覽器(客戶端)解釋執行,由網景公司開發。
我在網上抄的。
[PHPCms教程] 標籤JS如何調用管理
打開系統設置,在左欄下方的「模板風格」里我們看到有一項「標籤JS調用治理」
在這裡我們可以生成系統中預置的公共標籤和JS調用。
公共標籤調用治理 包含:
欄目標籤、專題標籤 、 專題幻燈片標籤、 公告標籤、 友情鏈接標籤、 評論標籤
PHPCMS教程:
下面以欄目調用為例介紹一下使用過程:
首先點擊「公共標籤調用治理」中的「欄目標籤」
在下方出現「欄目目錄列表調用標籤治理」
點擊「添加欄目目錄列表調用標籤」 進入參數設置狀態
「配置名稱」中填入由字母、數字和下劃線組成的唯一名稱
「配置說明」對標籤進行簡單描述(可用中文)方便以後治理
下面就是具體的參數設置了「標籤參數設置」
設置好各項參數後點下面的「保存」即生成相應的標籤和JS調用。
我們再打開「欄目目錄列表調用標籤治理」中的「治理欄目目錄列表調用標籤」
就可以看到我們添加的標籤和JS調用代碼
這裡系統為我們提供了長、短標籤和JS調用,您可以根據自己的需要選擇不同的調用方式。
我們還可以在「治理操作」進行「預覽」「 修改」 「 刪除」的操作。
最後把標籤或者JS代碼複製粘貼到模板中的相應位置,這樣就可以在該位置顯示我們設置好的信息了。
您可以先設置好參數,然後把標籤或者JS代碼複製粘貼到模板中的相應位置,這樣就可以在該位置顯示信息。
標籤和JS調用顯示的結果相同,您需要根據實際情況來決定選擇哪一種調用方式。
下面就標籤調用與JS調用特點做一下講解:
標籤調用:
優點:在調用頁產生html,有利於搜索收錄,下載速度快
缺點:假如您設置了生成html,html生成速度慢,需要經常更新頁面才能保持最新,不能跨站或者跨頻道調用
JS調用:
優點:可以跨站調用,自動更新,html生成速度快
缺點:搜索收錄差,速度相對html要慢一點(相差不大)
我們的建議:
在首頁、欄目首頁、專題首頁使用標籤調用;
欄目信息列表、信息具體頁中的推薦信息、熱點信息等
如何利用Require.Js管理多頁面站點文件
直接上例子,自己參考一下吧。我複製粘貼的,對於這個不太懂。
RequireJS 的作者 James Burke ,做了很多有效組織代碼,利用 RequireJS Optimizer 壓縮優化代碼的努力,有些例子是我經常提到的: example-multipage-shim. , example-multipage 。但我更喜歡用 shim 版本(它支持非 AMD 方式定義的模塊載入)的 RequireJS,因為一個項目裡面似乎總有幾個非 AMD 的腳本文件。
如果你在用RequireJs創建一個單頁站點,那麼你可能會這樣定義你的script標籤:
!–This sets the baseUrl to the “scripts” directory, and
loads a script that will have a module ID of ‘main’–
script data-main=”scripts/main.js” src=”scripts/require.js”/script
data-main 屬性可以很方便的用來設置 RequireJs 的 baseUrl property ,通常,你也可以在 main.js 裡面加上一些配置,比如,你要載入一個第三方的js庫,你要創建一個路徑以便引用。因為模板里的每一個單頁的 mian-* 文件都不同,所以,我們可以把配置信息放在 common.js 里:
1 //The build will inline common dependencies into this file.
2
3 requirejs.config({
4 baseUrl: ‘./js’,
5 paths: {
6 ‘jquery’: ‘vendor/jquery’,
7 ‘bootstrap’: ‘vendor/bootstrap’
8 },
9 shim: {
10 ‘bootstrap’: [‘jquery’]
11 }
12 });
除了 common.js,我還在 app/models 下創建了BasicModel文件以表明common.js是公用的,並把BasicModel放進common.js里。
編譯
編譯之前需要有一個 option.js 來指定哪些文件需要編譯,哪些不需要:
1 module.exports = {
2 appDir: ‘www’,
3 baseUrl: ‘js/’,
4 mainConfigFile: ‘www/js/common.js’,
5 dir: ‘www-release’,
6 modules: [
7 {
8 name: ‘common’,
9 include: [
10 ‘app/models/basicModel’,
11 ‘jquery’,
12 ‘bootstrap’
13 ]
14 },
15 {
16 name: ‘app/main-about’,
17 exclude: [‘common’]
18 },
19 {
20 name: ‘app/main-contact’,
21 exclude: [‘common’]
22 }
23 ]
24 };
上面的代碼中,首先把所有的文件用 include 方法包含進來,然後把不需要的文件用 exclude 方法排除出去。RequireJs 會根據 exclude 的參數配置理出嵌套依賴關係並把文件排除掉。因為 bootstrap 已經編譯合併進 common.js 了,所以不需要單獨為 main-about 或 main-contact 再 exclude 掉 bootstrap。
在執行這些操作之前,你需要執行一個 npm 安裝。首先你要確保安裝了 grunt 工具,安裝完成後執行 grunt 命令壓縮打包。如果打包順利完成,會在www-release/build.txt 里看到如下被打包的文件清單:
css/bootstrap-responsive.css
—————-
css/bootstrap-responsive.css
css/bootstrap.css
—————-
css/bootstrap.css
css/style.css
—————-
css/style.css
js/common.js
—————-
js/common.js
js/app/models/basicModel.js
js/vendor/bootstrap.js
js/app/main-about.js
—————-
js/app/models/aboutModel.js
js/app/main-about.js
js/app/main-contact.js
—————-
js/app/models/contactModel.js
js/app/main-contact.js
www-release/common.js 裡面試一大塊壓縮後的代碼,代碼里就包含了 BasicModel, Bootstrap, jQuery, and 初始配置代碼。要配置 about.html ,只需要按下面的順序載入文件即可:
1 script src=”./js/vendor/require.js”/script
2 script type=”text/javascript”
3 // Load common code that includes config,
4 // then load the app logic for this page.
5 require([‘./js/common’], function (common) {
6 // ./js/common.js sets the baseUrl to be ./js/
7 // You can ask for ‘app/main-about’ here instead
8 // of ‘./js/app/main-about’
9 require([‘app/main-about’]);
10 });
11 /script
通過層層引入 RequireJs — common.js — main-about.js 實現了明晰簡便的代碼管理方式。
JS代碼怎麼寫
將需要在js中修改的代碼放在js變數中,該變數在js中定義,然後在insertHtml中添加這段代碼,示例如下:var code = “a herf = ‘#’img url = ‘#’/a”;insertHtml(“beforeend”,document.body,code);將包含上述代碼的js引入到頁面中即可,在頁面上調用js的代碼如下:script language=javascript src=”test.js”/scriptinsertHtml的使用方法:insertHtml(where,el,html);where:插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEndel:用於參照插入位置的html元素對象html;要插入的html代碼例:insertHtml(“beforeEnd”,document.getElementById(“fav_list”),”li id=’aaa’a href=” class=’fav_link’百度/a/li”);
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/193324.html