Время летит, время летает, мгновение ока в течение многих лет в прошлом. Передний конец мира имеет подпады, оглядываясь назад, чтобы увидеть, когда дорога, и я все еще могу вспомнить Большого брата года jQuery. Напомним, что возраст невиновности, jQuery доминирует в мире, мир переднего конца так безупречно.
Введение
В данный момент это напоминает мне игровое время года.В ранние игры можно играть только в такие игры, как «Легенда» и «Волшебный ребенок». Вам не нужно выбирать. В эти игры будут играть все. Со временем игр становится все больше и больше, но вдруг игр, в которые можно играть, становится все меньше. То же самое верно и в мире интерфейсов. вытекают бесконечным потоком.Многие фронтендеры начинают спорить, какая технология сильнее, какой фреймворк больше 6, на самом деле не надо. Точно так же, как играя в игры сейчас, мы ищем радость года, и на самом деле не имеет значения, в какую игру мы играем. То же самое относится и к технологиям.Что нам нужно понять, так это то, что стоит за различными технологиями, основные вещи, такие как идеи, концепции, реализация принципов и так далее. Вот, для ознакомления.
Что ж, приведенная выше ерунда — это сегодняшнее введение.Что нам нужно сделать сегодня, так это посмотреть на вещи, стоящие за этим фреймворком через jq, и изучить принцип реализации основных функций jq для будущей актуальной разработки.
реализация селектора jquery
В начале своей разработки jquery был разработан вокруг основной идеи «пиши меньше, делай больше». Общая идея использования не сильно отличается от нативного js, поэтому одна из вещей, которую jquery делает больше всего, — это упрощение кода нативного js. Селекторы очень часто используются в операционной среде, поэтому jq определенно упростит использование селекторов. Нативные селекторы используются следующим образом:
document.querySelector(".box")
Ну, здесь указано, что js использует последний синтаксис и не рассматривает вопросы совместимости. Упрощенная работа jq выглядит следующим образом:
$(".box")
Обнаружено, что объем кода стал короче, вот одна строчка, а если их много в проекте? Просто меньше писать? Есть дрова? Ну, на данный момент jquery реализован на основе js, так как же мы можем использовать нативный js для реализации инкапсуляции селектора? 🤔тысячу лет спустя....! код показывает, как показано ниже:
function $(args){
return document.querySelector(args);
}
Пучок$Определение его как функции может легко упростить собственный селектор.
Реализовать метод щелчка
Но подумайте об этом, и селекторы js, и селекторы jquery должны получать узлы для работы. Итак, вы обнаружите, что у нас нет возможности продолжить это определение. В качестве примера рассмотрим операцию щелчка. следующим образом:
//原生js
document.querySelector(".box").onclick = function(){
console.log("点击了，老铁");
}
//jquery操作
$(".box").click(()=>{
console.log("点击了，老铁");
})
Что ж, мы можем оптимизировать его для этого, 🤔тысячу лет спустя....! код показывает, как показано ниже:
class Jq{
constructor(args){
let ele = document.querySelector(args);
this.ele = ele;
}
click(fn){
this.ele.onclick = fn;
}
}
function $(args){
return new Jq(args);
}
Как и выше, мы можем реализовать jquery-подобную форму вызова щелчка, вызвав. следующим образом:
$(".box").click(()=>{
console.log("点击了,老铁");
})
В это время нетрудно реализовать щелчок.
Селектор оценивает различные ситуации
Мы реализовали упрощенную версию функции выше, давайте посмотрим, в селекторе jquery будет больше ситуаций, а именно:
Дело 1:
$(".box") //传入 id、类名、标签名
Второй случай:
$(function(){
console.log("dom结构加载完毕后钩子")
})
Случай третий:
$(document.querySelector(".box")) //传入原生节点对象
恩，针对上述分析情况，且要考虑获取多个节点的情况。咋们来扩充下对应的封装，🤔one thousand years later....！ код показывает, как показано ниже:
class Jq{
constructor(args){
if(typeof args==="string"){
let eles = document.querySelectorAll(args);
this.addEles(eles);
}else if(typeof args==="function"){
document.addEventListener("DOMContentLoaded",args);
}else{
if(typeof args.length==="undefined"){
this[0] = args;
this.length = 1;
}else{
this.addEles(args);
}
}
}
addEles(eles){
for(let i=0;i<eles.length;i++){
this[i] = eles[i];
}
this.length = eles.length;
}
click(fn){
this.ele.onclick = fn;
}
}
Таким образом, суждение и обработка различных ситуаций завершены.Что нам нужно сделать, чтобы вызвать различные ситуации, так это найти различия между различными функциями, и хорошо различать и судить по различиям. В приведенном выше коде, чтобы облегчить работу узлов позже, я привяжу один или несколько узлов к этому объекту, чтобы проложить путь для последующего использования.
по внедрению метода
Метод on очень похож на метод click, за исключением того, что click — это единственный метод, а on может связывать несколько методов. Таким образом, вы можете расширить метод on на этой основе. код показывает, как показано ниже:
on(eventName,fn){
for(let i=0;i<this.length;i++){
this[i].addEventListener(eventName,fn);
}
}
Ну, вышеописанный метод не нужно особо подчеркивать, он относительно прост.
реализация метода eq
В jquery есть еще несколько характерных методов. Например, eq, вы можете выбрать, на каком узле работать. Сцепленные операции, которые часто встречаются во внешнем интерфейсе, также можно увидеть с помощью метода eq. Код для использования eq выглядит следующим образом:
$("div").eq(1).on("click",()=>{
console.log(123)
})
Приведенный выше код выбирает второй узел и привязывает метод щелчка.$("div").eq(1).on(eventName,cb), Метод записи цепной операции аналогичен использованию конвейера. Поскольку после того, как eq выберет узел, будут последующие цепные операции, наш контент должен быть реализован следующим образом:
eq(index){
return new Jq(this[index]);
}
Возвращая новый объект jq, реализуется цепочка вызовов.
реализация конечного метода
Ну, есть метод, очень похожий на уравнение. eq может выбирать, на каком узле работать. Последний узел операции можно вернуть через метод end.Если в начале нет последнего узла операции, будет возвращен узел по умолчанию [document]. Итак, как мы должны реализовать это в контенте? Идея в том, что после каждого eq мы можем через переменную записать узел последней операции. 🤔тысячу лет спустя....! код показывает, как показано ниже:
if(typeof root !== "undefined"){
//调取eq时候 传入 root 作为上次操作节点
this.prevObj = root;
}else{
//如果没有上次操作节点 ，默认保存document
this.prevObj = [document];
}
При вызове eq передать узел последней операции и сохранить его через prevObj.
//当前this就是本次操作的对象
eq(index){
return new Jq(this[index],this);
}
реализация метода css
Экспонировать снаружи в jquery$В объекте есть много методов, по сути, идея состоит в том, чтобы проанализировать, как вызывать, и спекулировать на его внутренней структуре через вызов. Это похоже на написание конкретного кода через требования и функции. Сначала внедрите общие функции, а затем проанализируйте различные ситуации, чтобы дифференцировать обработку, точно так же, как итерации обновления продукта. Метод css имеет свои особенности в начале проектирования jquery, не только предоставляя различные вызовы API, но и базовыебудущее. Сначала проанализируйте, как использовать волну методов CSS, и реализуйте их функции, вызвав:
Метод вызова один:
let res = $("div").css("background");
console.log(res);
Возвращает значение стиля, полученное css, даже если узлов несколько, все равно возвращается стиль css первого узла.
Второй метод вызова:
$("div").css("background","blue");
Установите стиль css и получите 2 параметра. Третий способ вызова:
$("div").css({"background":"blue","width":200})
Также установите стиль, вы можете установить несколько стилей. А для стиля "px" единица отказоустойчива.
С учетом приведенного выше анализа, чтобы различать различные ситуации, реализация кода выглядит следующим образом:
css(...args) {
if (args.length === 1) {
if (typeof args[0] === "string") {
return this.getStyle(this[0], args[0]);
} else {
for (let i = 0; i < this.length; i++) {
for (let j in args[0]) {
this.setStyle(this[i], j, args[0][j]);
}
}
}
} else {
for (let i = 0; i < this.length; i++) {
this.setStyle(this[i], args[0], args[1]);
}
}
return this;
}
getStyle(ele, styleName) {
return window.getComputedStyle(ele, null)[styleName]
}
setStyle(ele, styleName, styleValue) {
if (typeof styleValue === "number") {
styleValue = styleValue + "px"
}
ele.style[styleName] = styleValue;
}
Что ж, приведенный выше код больше относится к организационной логике, и здесь не на чем особо акцентировать внимание. Что нужно упомянуть, так это обработку неопределенных параметров, используя другой способ написания остальных и связанных вызовов в ES6 для возврата этого объекта.
Расширение $.cssNumber
Вышеупомянутый метод CSS может обеспечить характеристики получения и настройки стилей CSS. Есть маленькая деталь. То есть, если значением стиля является числовой тип, единица измерения «px» будет добавлена автоматически. Но подумайте, все ли стили CSS имеют числовой тип и нуждаются в добавлении единиц измерения? Ответ — нет. Например, для масштабирования, непрозрачности, flexGrow и т. д. не нужно добавлять единицы «px», поэтому мы можем создать список конфигурации для хранения свойств CSS, для которых не нужно добавлять единицы. Сделайте следующее:
let cssNumber = {
animationIterationCount: true,
columnCount: true,
fillOpacity: true,
flexGrow: true,
flexShrink: true,
fontWeight: true,
gridArea: true,
gridColumn: true,
gridColumnEnd: true,
gridColumnStart: true,
gridRow: true,
gridRowEnd: true,
gridRowStart: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
widows: true,
zIndex: true,
zoom: true
}
// css方法容错的时候可以加上如下判断
if (typeof styleValue === "number") {
if(!(cssNumber[styleName])){
styleValue = styleValue + "px"
}
}
Как и выше, некоторые свойства css, которые не нужно добавлять в единицы измерения, можно исключить. Однако, если вы определяете объект напрямую, масштабируемость cssNumber не так сильна.Если в будущем появятся новые свойства CSS, но jq не будет включен, то jq не сможет его использовать. Для этого мы можем повесить cssNumber в$Снаружи можно сделать соответствующее расширение cssNumber up! !
следующим образом:
$.cssNumber = {
animationIterationCount: true,
columnCount: true,
fillOpacity: true,
flexGrow: true,
flexShrink: true,
fontWeight: true,
gridArea: true,
gridColumn: true,
gridColumnEnd: true,
gridColumnStart: true,
gridRow: true,
gridRowEnd: true,
gridRowStart: true,
lineHeight: true,
opacity: true,
order: true,
orphans: true,
widows: true,
zIndex: true,
zoom: true
}
Если вы внимательно посмотрите на jquery, вы также получите некоторые новые идеи и идеи. Белая лошадь неожиданно миновала брешь. Технологии меняются, колеса возникают бесконечным потоком, единственная константа — это JavaScript, который тоже стоит за разными колесами, и мальчик из прошлого! ! (Я все тот же мальчик из прошлого... ла-ла-ла);Вы можете смотреть это молча, или вы можете тихо поставить лайк, и вы можете следить за этим с высоким профилем!
- Это проект с открытым исходным кодом нашей командыelement3
- Библиотека компонентов внешнего интерфейса, поддерживающая vue3.