如何用原生js封裝一個屬於自己的外掛
今天介紹一下怎麼寫屬於自己的外掛,建議看之前溫習一下面向物件;
我就寫個簡單的重置樣式的外掛,話不多說先上程式碼;
//SetStyles.js
(function(win, doc) {
var defaultSettings = {
color: "red",
background: "blue",
border: "2px solid #000",
fontSize:"30px",
textAlign:"center",
width:"200px",
borderRadius:"5px"
};
function SetStyles(options) {
var self = this;
//沒傳配置項自己丟錯
if(!options) {
throw new Error("請傳入配置引數");
}
self = Object.assign(self, defaultSettings, options);
self.container = doc.querySelector(self.container) || doc.querySelectorAll(self .container);
self._changeStyles();
}
SetStyles.prototype = {
_changeStyles: function() {
var self = this;
for(var pro in self) {
if(pro == "container") {
continue;
}
if(pro == 'text' && typeof self [pro]== 'string') {
self.container.innerText = self[pro];
continue;
}else if(pro == 'text' && typeof self[pro]== 'function'){
self.container.innerText = self[pro]();
continue;
}
self.container.style[pro] = self[pro];
}
}
}
win.SetStyles = SetStyles;
})(window, document)
//呼叫
var a = new SetStyles({
container:"#test",
background:"#fff",
textAlign:"center",
text:function(){
return "我是文字";
}
});
//text引數格式字串或者函式
//container用的querySelectAll方法,引數一致
//其他css引數為字串
我的這份程式碼應該足夠簡單,看不懂的說明基礎還不夠哦,自己敲一敲,有問題的地方,自己console.log一下吧。
首先定義下一預設的引數defaultSettings
然後寫個建構函式,裡面為什麼要用Object.assign合併物件,因為預設配置裡有的你不一定全都寫,不寫的就預設為預設引數,有的就選擇你寫的引數,所以options放在後面;
最後把方法寫在原型裡。
方法一般寫在原型裡,屬性寫在建構函式裡。
大家應該都能看的懂這段程式碼的功能,重置css樣式,和jquery的css()函式類似。
但是不推薦大家用這個,畢竟遵循原則,儘量少用js去操作dom,畢竟這種代價是很昂貴的,我寫這個只是為了讓大家瞭解一下如何封裝外掛,要去更改css樣式,不如多寫幾個類,要用那種樣式,換個類名就行。
相關推薦
如何用原生js封裝一個屬於自己的外掛
今天介紹一下怎麼寫屬於自己的外掛,建議看之前溫習一下面向物件; 我就寫個簡單的重置樣式的外掛,話不多說先上程式碼; //SetStyles.js (function(win, doc) {
自己做工具--用原生js封裝一個AJAX外掛
採用面向物件的思想封裝,相容get/post方式 1.get和post區別 (1)get方式通過url位址列傳遞引數,post通過表單形式傳遞資料 (2)傳輸的資料大小,get方式:普通瀏覽器只能傳輸2K資料,chrome瀏覽器傳輸8K,post方式:原則上不受限制,但
用原生js封裝輪播圖
round this getc 行間樣式 gets -m ++ fun ted 原生js封裝輪播圖 對於初學js的同學來說,輪播圖還是一個難點,尤其是原生js封裝輪播圖代碼,下面是我之前做的一個輪播圖項目中封裝好的一些代碼,有需要的同學可以看一下,有什麽不懂的可以看註釋,
JavaScript:使用原生JS封裝一個ajax相容性方法
ajax請求過程: 需要有個裝置的支援,就是瀏覽器,沒瀏覽器ajax是發不出去的。 需要有一個ajax物件。 規定請求的方式,獲取誰家的資料。 ajax.open(method,url,true)初始化請求方式、請求資料地址、選擇非同步(true)還是同步(fal
利用原生js封裝一個ajax api(一)
此係列文章主要分享一下如何利用原生js,自己封裝一個ajax api。本篇文章先來為此做一些前提準備,瞭解一下ajax請求少不了的XMLHttpRequest類。 瀏覽器在XMLHttpRequest類上定義了他們的HTTP API。 這個類的每一個例
如何優雅的用20分鐘花20塊錢搭一個屬於自己的網站
在資訊時代的大背景下,擁有一個屬於自己的個人網站早已經成為一個潮流,也因此湧現出各種各樣型別的網站、部落格,而其中有心的博主、站長甚至獲取了自己人生第一桶金。而之前的建站對大部分人非IT人士來說還是有些技術壁壘。 而現在隨著技術分享的氛圍越來越友好,各種整合
用python+django+twistd 開發一個屬於自己的運維繫統
開源的運維繫統不少,比如nagios、zabbix、cati等等,但是遇到自己個性化的運維需求的時候,總是顯的力不從心!最近在學習python,所以就考慮用python+django+twisted來定做一個完全個性化的運維繫統。 運維繫統有幾個主要的功能:監控、分析、報警
總結自己用原生JS實現的功能
1.實現jquery中addClass()和removeClass()的功能: function addClass( obj, className){ if( obj.className
使用原生JS封裝Tap事件,解決移動端300ms延遲
itl dia can 開發 閉包 tcl type 移動端 com 為了防止誤操作,移動端iOS操作系統針對原生click事件做了300ms的延遲,這在一定程度上影響了我們的使用體驗。 GitHub項目地址:https://github.com/Simon
原生JS封裝Ajax
tex urlencode new text repl ons xmlhttp tolower 字符 function json2url(json){ //json參數轉字符串 json.t=‘‘+Math.random(); json.t=json.t.rep
【微信開發】02.搭建一個屬於自己的微信公眾平臺
tro 投票 新浪 關系 blank 訂閱 logs name 開發者 閱讀目錄 【網站開發】在新浪SAE上搭建一個博客 概述 公司年會上同事開發了一個微信企業號,包含了投票,抽獎,祝福墻功能,還開了一個Session,跟我們講了下公司的企業號開發過程和抽獎中獎
使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)
pla 手指 測試 距離 ack cti 時間 .proto start PC 移動端兼容 IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 慣性助動,滑動回彈 門面模式 window.onload = function() { /*測試
原生js封裝tap
type add 產生 tlist 移動 listener als lba false // tap事件封裝function tap(obj, callBack){ if(typeof obj != ‘object‘) return; // 變量 var
原生Js封裝ajax方法
() www toupper -type get data function form encodeuri // ajax封裝function ajax(options) { /** * 傳入方式默認為對象 * */ options = opti
第一次使用Android Studio時你應該知道的一切配置(二):新建一個屬於自己的工程並安裝Genymotion模擬器
人性 pro net 參考 json irb 一個地方 vid 調試 【聲明】 歡迎轉載,但請保留文章原始出處→_→ 生命壹號:http://www.cnblogs.com/smyhvae/ 文章來源:http://www.cnblogs.com/smyhvae/p/439
如何擁有一個屬於自己的網站
網站 需要 article .com 不知道 *** 轉載 大型 滿足 前言 網站顧名思義就是網上的一個站點 而你打開的頁面就是一個站點上的一個一個文件。那就有人問了,我有一臺可以上網的計算機可不可以當站點用呢?答案是肯定的 通俗點來講就跟你平時串門一樣 這家門開著你就可
原生JS封裝animate運動框架
gets 中一 etc fun lag set 屬性 target position <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <
用原生js寫2048小遊戲
gin 小遊戲 替換 上下 數位 免費學習 title index.php parseint <!DOCTYPE html> <html> <head> <title> 2048-game </title&g
用原生js實現ajax、jsonp
原生js 斜杠 lang settime 發送數據 tro upper 類型 之前 一、原生js實現ajax $.ajax({ url: ‘‘, type: ‘post‘, data: {name: ‘zhaobao‘, age: 20}, dataTy
企業為什麽要做一個屬於自己的營銷網站?
itl 方式 營銷推廣 理由 沒有 適用於 才會 欲望 項目 做網站優化是不區分行業的,也就是說SEO適用於所有行業。有人認為隔行如隔山,這句話沒錯,但吖七認為,SEO不只是一種技術而應該是一種思維,換句話講做SEO是做營銷,而營銷思維主導著一家企業的生死。服務行業seo策