[前端]關於JS模組化/AMD/CMD/UMD及CSS的BEM
工作上接觸到的模組化都是比較主流的ESM和commonJS
CSS上通用的是BEM
這裡主要是總結給自己看的
ESM(ES6 Module)
一個檔案一個模組
基本是webpack結合vue最常用的東西了
引入import,暴露用export
import request from '@/utils/request' // 今日交易列表 export function getTodayTradeList(params) { return request({ url: '/merchant.OrderTradeAH.queryTodayTrade', method: 'get', params }) }
使用的時候可以解構或者別的,這樣匯入後你就可以用這個方法了
import {getTodayTradeList} from '@/api/account'
UMD(Universal Module Definition)
打包的時候出現,先判斷是否支援AMD,再判斷是否支援CommonJS
都不支援,使用全域性變數
也沒用過,不大清楚
CommonJS
同步執行,本地載入
一個檔案一個模組,通過require引入模組,通過module.exports暴露模組介面
形如
const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { NODE_ENV: '"development"', BASE_API: '"/api/"', })
然後用的時候會以這樣的形式出現,我們拿來當API拼接了
excelUrl: process.env.BASE_API + '/merchant.OrderTradeAH...
AMD(Async Module Definition)
非同步,使用require載入,使用define定義模組
依賴前置,提前執行
常用RequireJS(這算是個外掛?
沒用過,程式碼自己google吧
CMD(Common Module Definition)
一個檔案一個模組,懶執行(用到了才執行)
使用require定義模組,使用require載入模組,常用SeaJS
BEM(Block Elment Modifier)
這是CSS的模組化概念,我不知道別人怎麼寫,我用這個感覺很費腦子- -
一般都會根據UI圖寫模組
如果是塊,比如頭部,頂部,寫法不是駝峰法而是單橫線 形如 main-top
如果main有子元素search,則main-top__search
如果這個search有狀態,比如點選後或者hover,你可以寫main-top__search--hover
寫法看個人~
相關推薦
[前端]關於JS模組化/AMD/CMD/UMD及CSS的BEM
工作上接觸到的模組化都是比較主流的ESM和commonJS CSS上通用的是BEM 這裡主要是總結給自己看的 ESM(ES6 Module) 一個檔案一個模組 基本是webpack結合vue最常用的東西了 引入import,暴露用export import re
es6的模組化--AMD/CMD/commonJS/ES6
/** * AMC * CMD * CommonJS * ES6模組:總結的 */ /** * AMD的應用的 * script---data-main="vender/main" sr
require-js-模組化 CMD AMD
模組化的標準有了模組,我們就可以更方便地使用別人的程式碼,想要什麼功能,就載入什麼模組。這樣做有一個前提,那就是大家必須以同樣的方式編寫模組,否則你有你的寫法,我有我的寫法,豈不是亂了套! CommonJS:是一個模組化的標準,Node.js在使用的模組化標準。適用與後端開發的標準。AMD(As
JavaScript模組化CommonJS/AMD/CMD/UMD/ES6Module的區別
JS-模組化程序 隨著js技術的不斷髮展,途中會遇到各種問題,比如模組化。 那什麼是模組化呢,他們的目的是什麼? 定義:如何把一段程式碼封裝成一個有用的單元,以及如何註冊此模組的能力、輸出的值 依賴引用:如何引用其它程式碼單元 到目前為止,大概分為以下幾個里程碑式節點。 原始的開發方式 -
前端模組化(AMD和CMD、CommonJs)
知識點1:AMD/CMD/CommonJs是JS模組化開發的標準,目前對應的實現是RequireJs/SeaJs/nodeJs. 知識點2:CommonJs主要針對服務端,AMD/CMD主要針對瀏覽器端,所以最容易混淆的是AMD/CMD。(順便提一下,針對伺服器端和針對瀏覽器端有什麼本質的區別呢?伺服器端一
js 模組化規範(commonjs、AMD、ES6、CMD)
開發中最流行的 commonjs、AMD、ES6、CMD 規範。 參考資料: https://mp.weixin.qq.com/s/MPEhWlS9KiIc9I6Of5GpOQ http://www.ruanyifeng.com/blog/2015/05/commonjs-in-
JS模組化規範:AMD/CMD/CommonJS
一、模組化規範的由來 隨著網頁的複雜化,javascript程式碼也相應變得龐大起來,程式碼之間的分工合作就尤為重要了,這時候有了模組,我們就可以只關注自己業務的核心邏輯,其他想要實現的功能直接載入他人的模組便足夠了。考慮到模組的統一,便有了模組規範化。接下來
js模組化,AMD與CMD的區別
最近在研究cmd和amd,在網上看到一篇不錯的文章,整理下看看。 在JavaScript發展初期就是為了實現簡單的頁面互動邏輯,寥寥數語即可;如今CPU、瀏覽器效能得到了極大的提升,很多頁面邏輯遷移到了客戶端(表單驗證等),隨著web2.0時代的到來,Ajax技術得到
js模組化程式設計之徹底弄懂CommonJS和AMD/CMD!
先回答我:為什麼模組很重要? 答:因為有了模組,我們就可以更方便地使用別人的程式碼,想要什麼功能,就載入什麼模組。但是,這樣做有一個前提,那就是大家必須以同樣的方式編寫模組,否則你有你的寫法,我有我的寫法,豈不是亂了套! 於是下面三個模組規範出來了,這篇文章也出來了(拼出來的 {捂臉笑})。 &
點選按鈕刪除bootstrapTable選中行,js模組化及一些問題的總結
頁面效果展示 html程式碼: <div class="col-md-12" style="height: 15%"> <form action="web?module=stwmgr&action=Develop&method=se
前端模塊化(AMD和CMD、CommonJs)
瀏覽器 預加載 執行順序 處理 大坑 不一定 同步 區別 seajs 知識點1:AMD/CMD/CommonJs是JS模塊化開發的標準,目前對應的實現是RequireJs/SeaJs/nodeJs. 知識點2:CommonJs主要針對服務端,AMD/CMD主要針對瀏覽器端,
JS模組化程式設計之AMD模型實現原理(Requirejs瀏覽器模型,nodejs伺服器模型)
官方引數手冊:https://requirejs.org/docs/api.html /** * require使用指南! * 第一步:建立一個符合Require CMD模組化的標準目錄結構,去官方檢視! * 第二步:在html檔案中指定主js檔
JS模組化程式設計之AMD規範(一)
隨著網站逐漸變成"網際網路應用程式",嵌入網頁的Javascript程式碼越來越龐大,越來越複雜。 網頁越來越像桌面程式,需要一個團隊分工協作、進度管理、單元測試等等......開發者不得不使用軟體工程的方法,管理網頁的業務邏輯。 JavaScript模組化程式設
JS模組化方案(2)之CMD 模組(SeaJS)方案
一、 CMD 1、基本介紹 SeaJS 是一個適用於 Web 瀏覽器端的模組載入器。使用 SeaJS,可以更好地組織 JavaScript 程式碼。 2、實現庫:seajs 1.3.1 S
模組化——AMD、CMD、CommonJs
模組化是指將一個複雜問題,依照一種分類的思維把問題進行系統性的分解處理。使得系統成為“高內聚,低耦合”的模組組成,讓管理,開發,維護變得“有理可循”。 RequireJS 、Sea.js
js-模組化開發總結
一.模組開發的概念 模組化開發是什麼:模組化開發是一種生產方式,這種方式生產效率高,維護成本低。從軟體開發的角度說,模組化開發是一種開發模式,寫程式碼的一種方式,開發效率高,維護成本低。 為什麼需要模組化開發:當一個專案開發的越來越複雜的時候,會遇到一些問題,比如命名衝突(重新命名),檔
JS模組化(Module模式模組化,SeaJS工具模組化)
1、Module模式模組化 Module模式具有模組化,可重用的基本特徵,封裝了變數和function,只暴露可用public的方法,其它私有方法全部隱藏。在沒有使用模組化工具的情況下,用模組化的思想來編寫整個JS結構。 例如下圖,以webrtcUI層程式碼為例,MeetingMainPag
JS模組化(一):CommonJS
模組化的規範: 目前有四種: 1.CommonJS &nbs
前端專案模組化的實踐3.1:使用 TypeScript 的收益
以下是關於前端專案模組化的實踐,包含以下內容: 使用 Mocha/Jest 進行單元測試 [實現中] 使用 Webpack 打包基礎設施程式碼已經很大程度上解決了生產力,但日益複雜業務和邏輯仍然讓前端陷入“動態一時爽、重構火葬場”的笑談,TypeScript 為解決這個問題而來。 在本章節我們使用 T
node.js模組化思想初探
系統模組(核心模組):node本身自帶,可以直接require的模組 自定義模組:自己寫的,以及在npm上下載的模組 一部分常用的系統模組的作用(印象) Crypto 加密 Events 事件 Net 網路操作 OS 作業系統資訊 Path 處理檔案路徑 S