整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一、構造函數法
function Dog() {
this.name='大黃';
this.call=function call() {
console.log('汪汪');
}
}
Dog.age=10;
Dog.prototype.eat=function () {
console.log('吃狗糧');
}
var dog1=new Dog();
dog1.call()
dog1.eat()二、Object.create()
const dog={
name: '大黃',
call:function(){
console.log('汪汪');
}
}
const dog1=Object.create(dog);
dog1.call();三、極簡主義法
var Dog={
create:function(){
var dog={};
dog.name='大黃';
dog.call=function(){
console.log('汪汪');
}
return dog;
}
}
var dog1=Dog.create();
dog1.call();使用 class 關鍵字來聲明類。
class Person {
constructor(name,age){
this.name=name;
this.age=age
}
}
let user=new Person('張三',22);
console.log(user);constructor 構造函數用于創建和初始化一個類
class Person {
// 私有變量
#_life='';
// 構造函數
constructor(name, age, sex, life) {
this.name=name;
this.age=age;
// 約定命名 通過在變量名稱前加一個下劃線來定義私有變量，實際上外部可以直接訪問
this._sex=sex;
// #作為前綴 定義私有作用域，外部無法直接訪問
this.#_life=life;
}
// Getter
get getName() {
return this.name
}
// Setter
set setName(name) {
this.name=name;
}
get sex() {
return this._sex;
}
get life() {
return `${this.#_life}年`
}
// 方法
sayHi() {
console.log(`hello,我是${this.name}`);
}
// 靜態方法 該方法不會被實例繼承，而是直接通過類來調用
static eat(food) {
console.log(`吃了${food}`);
}
// 私有方法
_a() {
console.log('約定命名的私有方法');
}
#_sleep() {
console.log(`${this.name}睡著了`);
}
sleep(){
this.#_sleep()
}
}
function a() {
console.log(`${this.name}睡著了`);
}
let user=new Person('張三', 22, '男', 99);
console.log(user);
console.log(user.getName);
user.name='王五'
console.log(user.name);
user.sayHi()
Person.eat('蘋果')
user._a()
// user.#__sleep() // 無法調用
user.sleep()
console.log(user.sex);
console.log(user.life);/**
* @author zswxjjh
* @date 2021/3/29
*/
'use strict';
/*
* 模仿DOMTokenList對象，提供contains（）
* add（），remove（）。toggle（）方法
* 重寫toString方法，為了模擬類數組特性
* 提供toArray方法
*
* */
var classList=(function () {
/*
* e是一個元素，定義一個CSSClassList類模擬
* DOMTokenList類
* */
function classList(e) {
/* if(e.classList)
return e.classList;
else*/
return new CSSClassList(e);
}
/*
* 定義CSSClassList類
* */
function CSSClassList(e) {
this.e=e;
}
/*
* c是一個合法的類名，判斷是否包含給定的類名
* 返回boolean
* */
CSSClassList.prototype.contains=function (c) {
//是否合法
if(!c)
{
throw new TypeError('參數不存在!');
}
else if(c.length===0 || c.lastIndexOf(' ')!==-1/*c包含空格*/)
{
throw new TypeError('不合法的類名:"'+c+'"!');
}
if(!this.e.className)
return false;
if(this.e.className===c)
return true;
return this.e.className.search('\\b'+c+'\\b')!==-1;
};
/*
* 追加一個類名在尾部
*
* */
CSSClassList.prototype.add=function (c) {
if(this.contains(c))
return;
//判斷值里面是否以空格結尾
var classes=this.e.className;
if(!classes)
this.e.className='';
if(classes.length!==0 && classes[classes.length-1]!==' ')/*不是以空格結尾*/
{
c=' '+c;
}
this.e.className+=c;
};
/*
* 移除類名字c
* */
CSSClassList.prototype.remove=function (c) {
if(this.contains(c))
{
var pattern=new RegExp('\\b'+c+'\\b\\s*','g');
this.e.className=this.e.className.replace(pattern,'');
if(!this.e.className)
{
this.e.removeAttribute('class');
}
}
};
/*
* 如果c存在，刪除c，返回false
* 否則，追加c，返回true
* */
CSSClassList.prototype.toggle=function (c) {
if(this.contains(c))
{
this.remove(c);
return false;
}
else
{
this.add(c);
return true;
}
};
/*
* 覆蓋toString方法
* */
CSSClassList.prototype.toString=function () {
return this.e.className;
};
/*
* 提供類數組的功能，轉換成數組
* */
CSSClassList.prototype.toArray=function () {
return this.e.className.match(/\b\w+\b/g) ||[];
};
return classList;
})();
/*以上代碼提供對HTML5標簽屬性class的跨瀏覽器操作*/a0這是css的最簡單命名，在css的樣式中我總是糾結如何去命名，時間就浪費在這里面了，干脆就不命名算了，所有css的class都用.a（數字）命名。
這樣弄的話，我期待的是，我對每一個標簽寫一個樣式，樣式完成后自動去命名，匹配之前相似的樣式完成命名。當然，修改的時候執行同樣的操作，如果樣式有對應類名則替換，沒有則添加。
在標簽中，徹底拋棄style屬性，在標簽的class屬性中永遠只有一個類名。整個web項目必須只有一個.css文件。
而這些，需要一個工具，更人性化的工具。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
