欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在小程序中集成redux/immutable/thunk第三方庫的方法

 更新時間:2018年08月12日 12:34:25   作者:Poetry''s Blog  
這篇文章主要介紹了在小程序中集成redux/immutable/thunk第三方庫的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

一、前言

小程序給我們暴露了兩個參數(shù) require 和 module , require 用來在模塊中加載其他模塊, module 用來將模塊中的方法暴露出去

module.exports = function(){}

所以只要需要讓第三方庫的代碼使用這種形式的 export 就可以了

二、構建Redux的微信小程序包

打一個 Redux 包,讓它可以兼容微信小城的加載方式

git clone https://github.com/reactjs/redux.git

npm install

# 詳細內容可以到redux項目的package.json中查看
# 這些命令是是使用webpack構建UMD模式的包。也就是說所有的代碼,包括依賴的庫都會被打包到一個文件中,并且自帶一段模塊加載代碼,文件可以在dist目錄下找到
npm run build:umd && npm run build:umd

用編輯器打開 dist 目錄下的 redux.js 文件

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports["Redux"] = factory();
  else
    root["Redux"] = factory();
})(this, function() {
... 
})

這段代碼是用來加載模塊的,里面的factory函數(shù)的返回的內容是用webpack提供的loader組織起來的redux的代碼和第三方依賴。

  • 如果我們把這個文件拷貝到小程序中,只需要讓程序能正常進入第三行代碼,就能把Redux加載進來
  • 將第二行代碼: if(typeof exports === 'object' && typeof module === 'object') 修改成: if(typeof module === 'object')
  • 這樣修改的原因是,在微信小程序的環(huán)境中是沒有exports變量的,所以就沒辦法正確進入這個分支,刪除之后就可以正確進入
  • 我們拷貝到 libs 目錄下,那么我們在程序中使用時,只要當做是一個本地模塊去 require 就可以了 var redux = require('./libs/redux.js')
  • 我們可以通過類似的方法,使用 Webpack 打包第三方庫,就可以集成任何庫了

三、集成Redux-devtools

因為微信小程序的開發(fā)環(huán)境是定制的,暫時沒有發(fā)現(xiàn)辦法直接安裝 redux-devtool 的插件

安裝remote-redux-devtools

原版的 remote-redux-devtools 使用的一個 websocket 的依賴會使用原生的 WebSocket ,小程序是不支持的,所以需要改成小程序的 websocket 實現(xiàn),修改好的代碼 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/remote-redux-devtools.js

把代碼下載到工程目錄里面就可以用了

安裝和啟動remotedev-server

npm install -g remotedev-server
remotedev --hostname=localhost --port=5678

因為沒辦法用 npm 安裝到本地(微信小程序會嘗試去加載項目目錄中的所有js),所以這里使用全局安裝,第二條命令是啟動 remotedev-server , hostname 和 port 分別指定為 localhost 和 5678

集成devtool

在 store 下集成 devtool

const {createStore, compose} = require('./libs/redux.js');
const devTools = require('./libs/remote-redux-devtools.js').default;
const reducer = require('./reducers/index.js')

function configureStore() {
 return createStore(reducer, compose(devTools({
  hostname: 'localhost',
  port: 5678,
  secure: false
 })));
}

module.exports = configureStore;

把 devtool 使用 redux 的 compose 加到 store 中去。 hostname 和 port 是指定為之前啟動 remotedev-server 啟動時候指定的參數(shù)。保存之后重啟一下小程序,如果沒有報錯的話就OK了

可以在瀏覽器中訪問 localhost:5678

四、小程序中集成immutable

Immutable 是 Facebook 開發(fā)的不可變數(shù)據集合。不可變數(shù)據一旦創(chuàng)建就不能被修改,是的應用開發(fā)更簡單,允許使用函數(shù)式編程技術,比如惰性評估。微信小程序無法直接使用 Immutable.js ,下面就來說說微信小程序如何使用第三方庫 Immutable.js

Immutable使用了UMD模塊化規(guī)范

(function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
 (global.Immutable = factory());
}(this, function () { 'use strict';var SLICE$0 = Array.prototype.slice;

....

}));

修改 Immutable 代碼,注釋原有模塊導出語句,使用 module.exports = factory() 強制導出

(function(global, factory) {
 /*
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
 (global.Immutable = factory());
 */

 module.exports = factory();

}(this, function() {

導入修改好的 immutable 到小程序中即可 https://github.com/poetries/wx-redux-immutable-template/blob/master/wx-redux-immutable-template/public/libs/immutable.js

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • 如何判斷出一個js對象是否一個dom對象

    如何判斷出一個js對象是否一個dom對象

    如何判斷出一個js對象是否一個dom對象呢?下面小編就為大家?guī)硪黄袛喑鲆粋€js對象是否一個dom對象的方法。希望對大家有所幫助。一起跟隨小編過來看看吧
    2016-11-11
  • webpack-cli在webpack打包中的作用小結

    webpack-cli在webpack打包中的作用小結

    webpack?是打包代碼時依賴的核心內容,而?webpack-cli?是一個用來在命令行中運行?webpack?的工具,那么webpack-cli在webpack打包中的作用是什么,本文就詳細的介紹一下,感興趣的可以了解一下
    2022-04-04
  • JS前端筆試題分析

    JS前端筆試題分析

    這篇文章主要介紹了JS前端筆試題,結合實例形式分析了javascript字符串、數(shù)組及日期操作相關技巧,需要的朋友可以參考下
    2016-12-12
  • 淺析JavaScript中五種模塊系統(tǒng)的使用

    淺析JavaScript中五種模塊系統(tǒng)的使用

    模塊系統(tǒng)是什么?簡單來說,其實就是我們在一個文件里寫代碼,聲明一些可以導出的字段,然后另一個文件可以將其導入并使用。今天我們來聊聊?JavaScript?的模塊系統(tǒng),感興趣的可以了解一下
    2022-11-11
  • 微信小程序自定義導航教程(兼容各種手機)

    微信小程序自定義導航教程(兼容各種手機)

    這篇文章主要給大家介紹了關于微信小程序自定義導航的相關內容,文中通過示例代碼介紹的非常詳細,兼容各種手機,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-12-12
  • 用瀑布流的方式在網頁上插入圖片的簡單實現(xiàn)方法

    用瀑布流的方式在網頁上插入圖片的簡單實現(xiàn)方法

    下面小編就為大家?guī)硪黄闷俨剂鞯姆绞皆诰W頁上插入圖片的簡單實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • 在js文件中寫el表達式取不到值的原因及解決方法

    在js文件中寫el表達式取不到值的原因及解決方法

    在js文件中寫el表達式取不到值,百度一下,將經驗總結如下,有類似情況的朋友可以參考下
    2013-12-12
  • 微信小程序實現(xiàn)多張圖片上傳功能

    微信小程序實現(xiàn)多張圖片上傳功能

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)多張圖片上傳功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • 原生JavaScript實現(xiàn)幻燈片效果

    原生JavaScript實現(xiàn)幻燈片效果

    這篇文章主要為大家詳細介紹了原生JavaScript實現(xiàn)幻燈片效果,文中安裝步驟介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-02-02
  • 一組JS創(chuàng)建和操作表格的函數(shù)集合

    一組JS創(chuàng)建和操作表格的函數(shù)集合

    在用AJAX的時候,經常要用JS操作DOM,當涉及到數(shù)據列表的時候,那用表格比較多,這里寫了組函數(shù)集合,專門用來操作表格,當然,目前還有很多不足,但是對一些簡單操作還是很方便的。
    2009-05-05

最新評論