Ⅰ js節流函數的時間戳時長如何控制 vue是遵從amd還是cmd
我是這樣理解的：
模塊化思想只是封裝好的模塊對外提供介面。使用時require進來。require進來後，調用各個介面。感覺AMD規范和CMD規范只是載入模塊的時機不同，語法不同而已。至於將模塊引進來後模塊做了什麼，那就是模塊本身的內容了。
個人感覺可以認為vue.js是支持cmd規范的，只不過官方的vue.js 在CMD規范下使用require引進它之後，它還是在window變數下添加了全局變數Vue，嚴格說來是偏離了cmd規范的初衷的。
可以仔細看下vue.js源代碼的第7第8第9行：
typeof exports === 'object' && typeof mole !== 'undefined' ? mole.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Vue = factory());
可以看到如果把上文的define.amd判斷改成define.cmd，那麼此vue就是完美支持cmd規范了。樓主不妨自行修改下試試。
Ⅱ 如何正確理解javascript的模塊化
模塊化在項目中十分的重要，一個復雜的項目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費時又耗力。但是引用別人編寫模塊的前提是要有統一的「打開姿勢」，如果每個人有各自的寫法，那麼肯定會亂套，下面介紹幾種JS的模塊化的規范。
一:模塊化進程一：script標簽
這是最原始的 JavaScript 文件載入方式，如果把每一個文件看做是一個模塊，那麼他們的介面通常是暴露在全局作用域下，也就是定義在 window 對象中，不同模塊的介面調用都是一個作用域中，一些復雜的框架，會使用命名空間的概念來組織這些模塊的介面。
缺點:
1、污染全局作用域
2、開發人員必須主觀解決模塊和代碼庫的依賴關系
3、文件只能按照script標簽的書寫順序進行載入
4、在大型項目中各種資源難以管理，長期積累的問題導致代碼庫混亂不堪
二:模塊化進程二：CommonJS規范
該規范的核心思想是允許模塊通過require方法來同步載入所要依賴的其他模塊，然後通過 exports 或 mole.exports 來導出需要暴露的介面。
require("mole");
require("../file.js");
exports.doStuff = function(){};
mole.exports = someValue;
優點：
1、簡單並容易使用
2、伺服器端模塊便於重用
缺點:
1、同步的模塊載入方式不適合在瀏覽器環境中，同步意味著阻塞載入，瀏覽器資源是非同步載入的
2、不能非阻塞的並行載入多個模塊
mole.exports與exports的區別
1、exports 是指向的 mole.exports 的引用
2、mole.exports 初始值為一個空對象 {}，所以 exports 初始值也是 {}
3、require() 返回的是 mole.exports 而不是 exports
exports示例：
// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
return r * r * Math.PI;
}
mole.exports示例：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
mole.exports = function(r){
return r * r * Math.PI;
}
錯誤的情況：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
return r * r * Math.PI;
}
其實是對 exports 進行了覆蓋，也就是說 exports 指向了一塊新的內存（內容為一個計算圓面積的函數），也就是說 exports 和 mole.exports 不再指向同一塊內存，也就是說此時 exports 和 mole.exports 毫無聯系，也就是說 mole.exports 指向的那塊內存並沒有做任何改變，仍然為一個空對象{}，也就是說area.js導出了一個空對象，所以我們在 app.js 中調用 area(4) 會報 TypeError: object is not a function 的錯誤。
總結：當我們想讓模塊導出的是一個對象時， exports 和 mole.exports 均可使用（但 exports 也不能重新覆蓋為一個新的對象），而當我們想導出非對象介面時，就必須也只能覆蓋 mole.exports 。
三:模塊化進程三：AMD規范
由於瀏覽器端的模塊不能採用同步的方式載入，會影響後續模塊的載入執行，因此AMD(Asynchronous Mole Definition非同步模塊定義)規范誕生了。
AMD標准中定義了以下兩個API
1、require([mole], callback);
2、define(id, [depends], callback);
require介面用來載入一系列模塊，define介面用來定義並暴露一個模塊。
示例：
define("mole", ["dep1", "dep2"], function(d1, d2){
return someExportedValue;
});
require(["mole", "../file"], function(mole, file){ /* ... */ });
優點：
1、適合在瀏覽器環境中非同步載入模塊
2、可以並行載入多個模塊
缺點：
1、提高了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢
2、不符合通用的模塊化思維方式，是一種妥協的實現
四:模塊化進程四：CMD規范
CMD(Common Mole Definition)規范和AMD很相似，盡量保持簡單，並與CommonJS和Node.js的 Moles 規范保持了很大的兼容性。在CMD規范中，一個模塊就是一個文件。
示例：
define(function(require, exports, mole){
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
mole.exports = ...
})
優點：
1、依賴就近，延遲執行
2、可以很容易在 Node.js 中運行
缺點：
1、依賴 SPM 打包，模塊的載入邏輯偏重
AMD和CMD的區別
AMD和CMD起來很相似，但是還是有一些細微的差別，讓我們來看一下他們的區別在哪裡：
1、對於依賴的模塊，AMD是提前執行，CMD是延遲執行。
2、AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個模塊的時候再去require。看代碼：
// AMD
define(['./a', './b'], function(a, b){ // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething()
...
});
// CMD
define(function(require, exports, mole){
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b')
// 依賴可以就近書寫
b.doSomething()
// ...
});
3、AMD 的 API 默認是一個當多個用，CMD 的 API 嚴格區分，推崇職責單一。
五:模塊化進程五：ES6模塊化
EcmaScript6標准增加了JavaScript語言層面的模塊體系定義。ES6 模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變數。CommonJS和AMD模塊，都只能在運行時確定這些東西。
在 ES6 中，我們使用export關鍵字來導出模塊，使用import關鍵字引用模塊。需要說明的是，ES6的這套標准和目前的標准沒有直接關系，目前也很少有JS引擎能直接支持。因此Babel的做法實際上是將不被支持的import翻譯成目前已被支持的require。
盡管目前使用import和require的區別不大(本質上是一回事)，但依然強烈推薦使用import關鍵字，因為一旦JS引擎能夠解析ES6的import關鍵字，整個實現方式就會和目前發生比較大的變化。如果目前就開始使用import關鍵字，將來代碼的改動會非常小。
示例：
import "jquery";
export functiondoStuff(){}
mole "localMole" {}
優點：
1、容易進行靜態分析
2、面向未來的 EcmaScript 標准
缺點：
1、原生瀏覽器端還沒有實現該標准
2、全新的命令字，新版的 Node.js才支持
Ⅲ js處理微信分享配置
整理一下通過h5做微信分享相關配置。
登錄微信公眾號， 獲取AppID ， 配置白名單 ，然後 配置JS介面安全域名 。
登錄公眾號後，左側菜單欄選擇：開發 => 基本配置，直接復制開發者ID(AppID)即可：
注意使用公網IP
左側菜單欄選擇：設置 => 公眾號設置：
網頁授權主要是獲取微信openId使用，如果只是用分享操作，本步可以略過。
網頁授權介紹
大致步驟是：
在配置完前面AppId、白名單及安全域名後，開始處理網頁授權。
網頁授權這一塊兒內容主要是後端需要處理的內容較多，前端還是很簡單的，僅需要跳入微信鏈接即可。為什麼要走這一步呢因為有些操作，例如微信支付、播放微信錄音、獲取微信地址、微信卡券、商品、小店等等許多功能必須在微信瀏覽器匯總打開操作才可以，因此需要跳入微信瀏覽器及微信鏈接來處理後續操作。當配置後，鏈接便只有在微信瀏覽器中打開才會生效了，不然會提示：
鏈接如下：
https://open.weixin.qq.com/connect/oauth2/authorize?appid={$appId}&redirect_uri=={$URL}&response_type=code&scope=snsapi_base#wechat_redirect
參數分解
可見，上面需要填入的變數有二，一個是前面回去的AppId，另外一個則是url，需要寫的是與配置域名所對應域名下的url，並且要進行urlEncode編碼處理使用。
在拿到上述完整鏈接後，通過 window.location.href = ${url} 進行網頁授權即可。在授權成功後，頁面會重定向到自己設置的url頁面去，然後在該連接上會有code值，取出即可：
將拿到的code值傳給後端即可，看具體需求決定是否前端使用openId，如果非必要則不在前端獲取保存或者由後端加密後傳給前端使用。
大致分為五個步驟：
在步驟 1.3 中已經配置。
在需要調用JS介面的頁面引入如下JS文件： https://res.wx.qq.com/open/js/jweixin-1.6.0.js
備註：支持使用 AMD/CMD 標准模塊載入方法載入
配置需要如下幾個參數：
那這些參數從哪兒來呢？依舊不用擔心，依然是交給後端處理，後端返回時間戳、隨機串及簽名，其他的自己配置即可。
通過後端獲取需要進行一個小交互，將此時的鏈接地址(window.location.href)傳給後端即可。
於是就有了上述的除了最後一個以外的所有參數。最後一個 jsApiList 則是寫分享介面，如我們想要分享到朋友圈、QQ、騰訊微博這3個，那就寫：
可以發現，我們其實多配置了一個 checkJsApi ，這個是一個判斷配置，可以判斷當前客戶端版本是否支持指定JS介面。
簽名演算法
所有JS介面列表
接下來就可以寫分享信息配置了。配置信息一般都是通過 wx.ready 處理的:
例如我們要分享到朋友圈，配置則如下：
注意：不要出現 誘導分享
同樣，一般都是通過 wx.error 處理失敗相關信息：
其實微信分享（地理位置、掃一掃、卡券等微信各類介面）都是通過上述步驟配置的，可舉一反三，在面對不同需求時通過微信開發文檔來進行更為復雜的操作。
Ⅳ jweixin-1.1.0.js 支持AMD/CMD 標准模塊載入方法載入嗎 寫法是怎麼寫的
步驟一：引入JS文件
在需要調用JS介面的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
備註：支持使用 AMD/CMD 標准模塊載入方法載入
步驟二：通過config介面注入許可權驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用）。
wx.config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
步驟三：通過ready介面處理成功驗證
wx.ready(function(){
// config信息驗證後會執行ready方法，所有介面調用都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就調用相關介面，則須把相關介面放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的介面，則可以直接調用，不需要放在ready函數中。
});
步驟四：通過error介面處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對於SPA可以在這里更新簽名。
});
介面調用說明
所有介面通過wx對象(也可使用jWeixin對象)來調用，參數是一個對象，除了每個介面本身需要傳的參數之外，還有以下通用參數：
success：介面調用成功時執行的回調函數。
fail：介面調用失敗時執行的回調函數。
complete：介面調用完成時執行的回調函數，無論成功或失敗都會執行。
cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操作的api才會用到。
trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關介面。
以上幾個函數都帶有一個參數，類型為對象，其中除了每個介面本身返回的數據之外，還有一個通用屬性errMsg，其值格式如下：
調用成功時："xxx:ok" ，其中xxx為調用的介面名
用戶取消時："xxx:cancel"，其中xxx為調用的介面名
調用失敗時：其值為具體錯誤信息
基礎介面
判斷當前客戶端版本是否支持指定JS介面
wx.checkJsApi({
jsApiList: ['chooseImage'] // 需要檢測的JS介面列表，所有JS介面列表見附錄2,
success: function(res) {
// 以鍵值對的形式返回，可用的api值true，不可用為false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
});
備註：checkJsApi介面是客戶端6.0.2新引入的一個預留介面，第一期開放的介面均可不使用checkJsApi來檢測。
分享介面
請注意不要有誘導分享等違規行為，對於誘導分享行為將永久回收公眾號介面許可權，詳細規則請查看：朋友圈管理常見問題 。
獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容介面
wx.onMenuShareTimeline({
title: '', // 分享標題
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
獲取「分享給朋友」按鈕點擊狀態及自定義分享內容介面
wx.onMenuShareAppMessage({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '', // 分享圖標
type: '', // 分享類型,music、video或link，不填默認為link
dataUrl: '', // 如果type是music或video，則要提供數據鏈接，默認為空
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
獲取「分享到QQ」按鈕點擊狀態及自定義分享內容介面
wx.onMenuShareQQ({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '' // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
獲取「分享到騰訊微博」按鈕點擊狀態及自定義分享內容介面
wx.onMenuShareWeibo({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享鏈接
imgUrl: '' // 分享圖標
success: function () {
// 用戶確認分享後執行的回調函數
},
cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
Ⅳ 微信介面 可以在js中直接調用嗎
1.引入JS文件
在需要調用JS介面的頁面引入如下JS文件
備註：支持使用 AMD/CMD 標准模塊內載入方法載入
2.注入配置config介面
所有容需要使用JSSDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用）。
Ⅵ 微信公眾號開發之如何使用JSSDK
微信開發交流群：148540125
歡迎留言、轉發、打賞
系列文章參考地址 極速開發微信公眾號
項目源碼參考地址 點我點我--歡迎Start
服務號、訂閱號可以通過登錄 微信公眾平台 查看 開發>介面許可權
使用JSSDK主要包括
1、判斷當前客戶端版本是否支持指定JS介面、
2、分享介面（微信認證）
3、圖像介面
4、音頻介面
5、智能介面（識別語音並返回結果）
6、設備信息（獲取網路狀態）
7、地理位置
8、界面操作
9、微信掃一掃
10、微信小店（服務號必須通過微信認證）
11、微信卡券 （微信認證）
12、微信支付（服務號必須通過微信認證）
官方參考文檔
步驟一：綁定域名
先登錄微信公眾平台進入 公眾號設置 的 功能設置 里填寫 JS介面安全域名 。
步驟二：引入JS文件
在需要調用JS介面的頁面引入如下JS文件，（支持https）： http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用搖一搖周邊功能，請引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
備註：支持使用 AMD/CMD 標准模塊載入方法載入
步驟三：通過config介面注入許可權驗證配置
簽名演算法生成規則
請 官方參考文檔
下面具體來講講 開源項目 weixin_guide 中的封裝。
使用的時候只要在Controller方法上添加一個攔截器 JSSDKInterceptor 來實現簽名驗證再將 wx.config 需要的參數設置對應的屬性在頁面上進行獲取。
攔截器實現如下：
在Controller中使用
JSP頁面上面使用
測試結果
在AppConfig 中添加路由 me.add("/jssdk", JSSDKController.class,"/view"); 手機中訪問 http://域名[/項目名稱]/jssdk ,如果設置了 debug= true 成功了就會彈出
如果出現 {"errorMsg":"config:invalid url domian"} 請檢查 步驟一：綁定域名 與你訪問的域名是否在安全域名列表當中
步驟四：通過ready介面處理成功驗證
步驟五：通過error介面處理失敗驗證
步驟六：介面調用
攔截器具體實現 參考地址 點這里
js 介面調用參考地址 點這里
以上就是JSSDK使用的介紹。
歡迎留言、轉發、打賞項目
源碼參考地址 點我點我--歡迎Start
Ⅶ angularjs，vue之類的框架如何實現可視化拖拽室組件開發，效率比手寫高很多倍
mintUI：基於vue框架，這個組件可以幫助到你
使用教程：
1.找官網
2.安裝 npm install mint-ui -S -S表示 --save
3.引入mint Ui的css 和 插件
import Mint from 'mint-ui';
Vue.use(Mint);
import 'mint-ui/lib/style.css'
4.看文檔直接使用。
在mintUi組件上面執行事件的寫法@click.native
<mt-button @click.native="sheetVisible = true" size="large">點擊上拉 action sheet</mt-button>
Ⅷ JavaScript 中 import * as x from x'是否有明確的規范
import 是針對 export 的。
按 es6 的規范 import * as obj from "xxx" 會將 "xxx" 中所有 export 導出的內容組合成一個對象返回。如果都使用 es6 的規范，這個是很明確的。
但是現在問題來了，moment 不是一個符合 es6 規范的庫。
不管是 AMD、CMD 還是 CommonJS，都是通過 mole.exports 導出，AMD 和 CMD 還可以通過工廠函數 return 來導出。不過是 mole.exports = ... 還是 function factory() { return ... } 哪種方式，都對默認提供的 mole.exports 對象進行了替換，它可以是任意 JS 數據類型，函數就是一種很常用的數據類型。
TypeScript 對 ES6 export 的轉譯，是將所有 export 的東西，都作為 exports，即 mole.exports 的屬性，比如
// test.ts
export function hello() {}
const a = 0;
export default a;
用 tsc 按 AMD 模塊轉譯
tsc test.ts --mole AMD
得到
define(["require", "exports"], function (require, exports) {
"use strict";
function hello() { }
exports.hello = hello;
var a = 0;
exports.__esMole = true;
exports["default"] = a;
});
所以 TypeScript 對 import * as x from "./test.js" 的轉譯直接轉譯成
var x = require("./test");
是可以理解的。
Babel 也類似，同樣的 es6 代碼轉譯出來是
// by babel
"use strict";
Object.defineProperty(exports, "__esMole", {
value: true
});
exports.hello = hello;
function hello() {}
var a = 0;
exports.default = a;
但是 Babel 想得比較復雜。既然不是 __esMole，說明不是 es6 定義的模塊。那麼按 es6 模塊導出的方式，導入的肯定是一個對象，所以它就創建了一個新對象，把導出內容的所有屬性拷貝過去，兼容 exports.xxx = xxx 或 mole.exports 是個一般對象的情況。但萬一 mole.exports 不是個普通對象呢，假設它是當作 export default 導出的，所以最後加了句 newObj["default"] = ....
在這一點上其實我更傾向 Babel 的作法，但是這個轉譯沒有標准(如果標准那麼好定，NodeJS 早就用上 es6 的模塊語法了)。
問題在於不管誰的作法，關鍵是你需要有一個統一的標准來兼容 TypeScript 和 Babel，那麼要不試試
// .ts
import * as _moment from "./moment";
const moment = (_moment as any).default || _moment;
(_moment as any).default 是為了 ts 編譯不報錯，|| _moment 是為了兼容有 default 和沒有 default 的情況 (其實可以不做兼容處理，反正 Babel 處理過後一定會有 default)。