1. 程式人生 > >如何用原生js封裝一個屬於自己的外掛

如何用原生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策